pedz

Hi, I'm not really a web designer. I mostly do AIX device drivers and kernel level networking. For whatever reason, I bumped into Ruby On Rails back in 2006 and implemented three or four "tools" at work to help me and my co-workers with their jobs. They are essentially web based front ends to databases. They allows us to do our job easier and quicker. Now, Rails has gone up to version 3. I'm lagging behind a bit and I'm just now moving these tools over to Rails 3. But rather than a unpleasant port, I am "starting from scratch" and then reach over to the old implementation and pull over part of the code. In the process I'm discovering all the new toys (to me) like jQuery, jsrender, etc. I'm also learning the new HTML5 and CSS3 and trying to keep an eye on good UI design, new devices (touch devices), and accessibility. All of which were mostly ignored in the current implementation of the tools. I live north of Austin in a small town called Leander -- somewhat out in the sticks. I'm approaching mid-50s. Have a B. S. E. E. as well as a M. S. in Computer Science from S. M. U.. All that to say "Howdy!" pedz

I have an application that renders the result of a database query as a web page with a table of results. The output is extremely simple. You can see a screen shot here: http://easesoftware.com/junk/s1.tiff It might be best to just ignore the "item 1 item 2" pop up for now. From the 2nd column, there is about 6 actions that I'd like to implement. From the 3rd column, there are about 3 actions. And from the other columns there are one or two actions each. e.g. from each element under the defect column, there are about 6 unique actions to each element. The layout you see in the sample is a "new" one. In the current implementation, what I do is I have a normal click on most of the elements will take the user to a new page which is a search of the database for that item. Then, for each element, I have a right click pop up menu (a context menu) with the additional actions available for that element. There are issues with this current design: 1) It is not very pleasing to the eye. With each of the elements as a link, each element is in one of two different colors and they are underlined (typical link style). The sample page is soooo much more pleasing to the eye than my original page that I'd really like to keep it as pleasing as possible. 2) I've discovered that many of my users do not even know about the right click functionality. So, part of my quest is to style the elements in the new table so that users know that they have more than one thing they can do to most of the elements. 3) I'd like to make it so the application is usable from touch devices like iPhone, iPad, etc. 4) Although none of my users have accessibility issues, I'd like to still design it so that accessibility can be added on later if required without needing to change the original UI or visual design. I'm not married to the context menu concept. I have a couple ideas: 1) keep the right click context menu but provide a better tool tip and maybe a help box to tell users they have other choices. Somehow fix the style issues mentioned in #1 above. 2) Have no direct links at all. Rather a single click would bring up a context menu which the user would then click one of the actions. This would work well in a touch environment since there is no right click concept. The user knows that a link or something is available due to the cursor changing. The down side is the user must always click two things for each single action. I had the idea that this concept could be augmented with allowing the user to double click which would provide the same functionality as what a single click does now. 3) Have each element have a link like I do now. But also have a column, probably on the left side of the table, with a menu (styled as a menu with perhaps "menu" on its pull down) -- one menu per row. This menu would then provide all the other actions available on that row of elements. The down side of this is the width of the table is already a bit wide for the users with laptops. I'm also a little worried how a column of menus is going to look. I've been reading a bit about accessibility and the essence seems to be "don't stray too far off the beaten path". So, removing the different colors for a link and the underline, while it can be done, tends to be frowned upon. I can understand that but at the same time it makes the page look like a, well.... a web page. The accessibility folks also tend to frown upon double click and those types of concepts. Please let me know your suggestions. It seems like this is not a new problems. Seems like this would have been solved countless times over. Thank you for your time, pedz

Never used one but this link seemed useful. As the final paragraph suggestion... download one (or some) and play with them. http://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/