CSS and the Design Litmus Test

Aug 24

CSS and the Design Litmus Test

I’ve discovered yet another use for the Web Developer Toolbar; I can perform The Site Design Litmus Test, heretofore known as “Joe’s Razor” (named for no one in particular):

Open up a site you’ve done in Firefox, and take a look at it.

Now, open up the ‘Edit CSS’ sidebar and erase all of the CSS. The page will revert to it’s “standard HTML” look, if you’ve done your site to spec.

Then, type in one or two rules you think would improve legibility. I’d say no more than 10-15 lines, or 3 rules, whichever is less. I’ve found that this is usually something along the lines of this:

  body{line-height: 1.8em;}
  img{margin: 8px; }

Now, take a look at your site. Ignore the overall look, and ask yourself this: Is it more readable this way, or less readable? If you answer less readable, then your site design sucks in some fundamental way.

I was forced to admit this for several of the sites I tried it with. I think that the problem is that most web designers start a design with the notion to “make it look cool”. We do some nifty operation in Photoshop, “Lorem ipsum” some text in there, and everyone agrees it looks cool, so we make it.

But if you really think about it, that “Lorem Ipsum” text that’s faked up in a Photoshop mock is the most important part of the final, real site, even though it’s a second-class citizen in the design process.

This seems to expose a fundamental flaw in the way most of us (myself included) approach design for the web.

If you’re a developer, apply “Joe’s Razor” to a site you’ve done. Do you pass? Do you think it matters if you don’t? Am I (as per usual) just a ranting idiot?


Comments

by Deane,   August 24, 2005 4:57 PM  

I totally agree. I've always thought that Gadgetopia is much more readable with all the styles disabled.

Design for the Web is fundamentally broken. We confuse aesthetics with usability, and certain things have come to be expected -- small fonts, multiple columns, etc.

And you can't not provide these things or your clients will think you're nuts and go somewhere else.


by MR,   August 24, 2005 7:31 PM  

I think this is a nice trick, but CSS is just a tool, like InDesign, Quark, Photoshop, and good ol' mechanicals. You can produce good and bad design using any of these tools.

Why not just learn the rules for design and usability and - you know - do that?


by Joe,   August 24, 2005 8:22 PM  

I guess I wasn't so much highlighting this as a 'trick' as much as I was promoting it as a good 'wake-up call'. If the site is more readable without a design (most seem to be), what does that say about the designs?

And as far as those "rules for design and usability" go, I'd love to see the rulebook if you're done with it. :-)

In the end, there's one basic rule: Do what works. There is, of course, a lot of knowledge out there on what works, but a lot of that is what got us where we are today. Or is that that everyone is just ignoring it.


by charles gay,   August 25, 2005 12:26 PM  

Hi, effectively, your test is very funny! i'm happy that the web site of my open source project called 'jGuard', looks nice with your test! => look at http://jguard.sourceforge.net

cheers,

Charles (jGuard team).


by Michael,   August 25, 2005 3:06 PM  

Thanks, you made my day!



Add Comment


Want to advertise on this site? Contact FM.
Laser Toner Cartridges UK laser toner, toner cartridges, hp toner, lexmark toner, samsung toner, canon, toner, epson toner, oki toner, kyocera toner, xerox toner, remanufactured toner, compatible toner
Direct TV Deals Free 4 room direct tv deals. no equipment to buy. free fast professional direct tv installation. this is the best direct tv deal available anywhere.
SEO Article Learn from the experts with our SEO article.
rope light Shopping with birddog distributing, inc., gives you access to the lowest prices, the best customer service and the quickest delivery times possible.
Laptop AC Adapter We offer genuine factory direct replacement AC adapters.
Direct TV Best satellite TV deals.
Direct TV Deals Direct TV programming deals are varied and include packages containing from 50 channels up to over 250 channels.
8mm film to DVD Retain family memories with the only frame by frame digital restoration service in the United States for your 8mm film to DVD today
Rubber Stamp Shop for custom self-inking stamps, hand stamps, address stamps, label stamps, check endorsement stamps, check deposit stamps, date stamps, pre inks, pocket stamps, ink and much more!