Design: May 2008 Archives

Since Paul wrote some posts on JavaScript frameworks before (part 1, part 2), I thought I’d mention something about CSS frameworks. I’ve begun using them on several projects and have found them to be a huge help. I find that laying out the page is easier, the most common styles are already set and browser bugs are few and far between.

What the heck is a CSS framework?

It’s pretty much a library of pre-built styles that help with designing a Web site. The goal of using a CSS framework is the same as other programming frameworks — to speed up development and ease collaboration between developers. A List Apart wrote a good article on the subject.

Usually, when beginning to style an XHTML page, I’d start with a few basic styles to override some of the browser’s defaults. Then I’d throw in a few other styles for hidden “skip-to” links and basic typography style. This would save me a load of time and without realizing it, I was using a CSS framework!

Other designers used similar methods and one of the first to become widely adopted was Eric Meyer’s “reset styles.” It was a set of styles that would override a browser’s default styles and give the designer a blank canvas eliminating a lot of browser testing.

CSS frameworks have taken this one step further and have included styles for typography, forms, browser bugs and layout grid systems. The methods in which styles are applied have structure so one designer doesn’t have to decipher another’s naming conventions.

Opera recently announced the release of their Dragonfly Web Developer application, that will be built directly into the Opera Browser.

From their website

Opera Dragonfly is Opera’s all-new set of developer tools, designed to give developers a lightweight-but-powerful application that provides effective mechanisms for web standards debugging and problem solving without slowing down the browser, and fits in nicely with the development workflow.

To evaluate it, you will need to download the 9.5 beta 2 version of the Opera browser. Once installed, launch the browser and go to Tools/Advanced/Developer Tools.

It appears that with Dragonfly, Opera is taking aim at Firebug. Although similar, Dragonfly is not yet as robust as Firebug, though it is easy to see that it has potential. This is a very early release, so it will be interesting to see what features Opera decides to add to this tool.

Of course, as a developer, ANY tool that helps us do our job in a faster, more efficient manner is appreciated.

Usability is not an exact science. Just because someone did a study that says light text on a dark background is hard to read doesn’t mean it is in your design. Just because Cynthia Says your site is accessible doesn’t mean it is. Every element on the page is relative to each other. To accurately determine readability and usability you have to test the site as a whole, not in little stand-alone chunks.

I agree with almost every article A List Apart produces. I like them so much that I regularly advise people to give the site a read, but I have to say something about their entry, Zebra Striping: Does it Really Help?, because I disagree with its process and what it implies.

I know the study wasn’t conclusive in any way, but this piecemeal approach to usability doesn’t accomplish much. There are too many variables in the way you can construct a table for a simple usability survey study to address. What about text alignment, font choice, line height, stripe color, borders, font size, contrast or table width? All these things affect usability and the study example didn’t vary in any of those ways.

What troubles me most about this type of inconclusive study is that when they get published on a site like A List Apart, it tends to be taken very literally. People read the generic conclusion and start removing zebra striping on their tables for no reason other than because the article said so.

Generic usability tests can be a nice place to start, but don’t let them determine your design and think for you. They are recommendations, not rules. When designing, take a moment to actually read and use the entire page you’re designing. Is it easy to read? Is there enough contrast? Can you tell the difference between navigation and page content? Can you scan the page? Common sense will answer almost all of your questions. If you have the time and the budget, usability testing your design as a whole should cover the rest.