Everything you know about CSS is wrong: Table layouts in CSS3

Table Layouts in CSS3 is actually what the book shoudl have been called.

It's an interesting book, not really worth buying because it's very thin and very basic. There's ntohing here you can't pick up in 10 minutes of Googling, but it shows you what's possible using CSS table layouts withouf loating divs and so on, but using the new features of CSS which imitate tables.

The bad thing is that it's not supported in IE7 or IE6 so why bother?

And the fact that there are now CSS frameworks like Blueprint CSS that takes away most of the pain of layouts, it's hard to see why anybody would be looking at this at this point. Until IE6 and IE7 market share dips down into the single digits, this is just one of those things to be aware of but to ignore for now.

Maybe in three, four or five years it will be interesting.

Labels: css, ie6, ie7, ie8

Usability of tabs in Ajax content boxes

I've been looking around at various implementation of these tabbed content boxes, which have become popular in the past year or so. Whether you are just toggling visibility of content or actually using Ajax to fetch the content, these tabbed boxes provide a significant advantage to users, saving them from page reloads or being directed to other pages prematurely.

Properly implemented, these widgets give users a clear idea of where they are. I'll go through some examples of good and bad designs.

Yahoo has always been a leader in usability, and here's why:


Yahoo provides three cues:

• background gradients distinguish selectable tabs from the selected tab
• the selected tab's text is bolded and changed to orange
• the background area of the selected tab and content area constitute a single, bordered field

Few users would be confused by this interface.

The New York Times implementation gets only one thing right: turning the selected tab area and the content area into a continuous bordered field.

What are the problems with it?

• the light gray, 1px borders are too thin to adequately differentiate the areas and make it clear at a glance where you are
• the text of the selected tab is indistinguishable from the text of the other tabs
• all-caps are difficult to read, whether in print or online
  

Compared to the Yahoo box, it's very difficult to tell where you are. Perhaps the New York Times tested their readership and found that they have above-average eyesight?

The following tabbed box from Salon is unclear because it violates the norm for tabs, which is for selected tabs to have the same background color as the body of the content area. If you have three or more tabs, the user has an easier time figuring out which tab is selected, because it will be different from the other ones. But when you have only two tabs, it becomes very difficult:

Can you tell which tab is selected? Most users cannot.

Another example of a tabbed box with the same problem, this one from Time.com:
There you have it. Implement something along the lines of Yahoo, and your users will make the most use of these handy widgets.

Labels: ajax, css, ia, navigation, tabs, usability, widgets