CSS and the Design Litmus Test

By on August 24, 2005

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?



  1. 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.

  2. 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?

  3. 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.

Comments are closed. If you have something you really want to say, tweet @gadgetopia.