Weeds In the Garden

I recently came across the CSS Zen Garden, probably not for the first time since it's been around for ages, but I'd never really looked at it in detail before.

Web design is a balancing act. On the one hand you want to build a unique brand and look really good, but on the other, you want to have a site that's simple and usable and reasonably quick. I've always been on the side of simple and usable, to the frustration of some designers I've worked with. I've spent far too much time profiling load times on pages and shaking my head over the number of graphics being pulled down and the number of nested tables and other visual-design elements the browser was being forced to render.

The idea behind CSS Zen Garden is to show that you can create beautiful layouts without loading up your pages with extraneous markup and junk, but all it really does is modernize the junk. The HTML code is supposedly presentation free -- or is it? The document model is absurdly complex. For instance, every headline has a unique ID, and the text of the headline is surrounded by a separate span, all so that you can set the span not to display at all, then put a different background gif behind each headline, and have nice scripty headline fonts rather than the usual font. Yes, this is an improvement over the older method, in that screen-readers can still read the page and a different stylesheet could be applied for mobile users.

But updating the content would not be simple, since all the divs and spans and IDs would need to be carefully matched against the stylesheet. Creating a new headline would mean creating a GIF, assigning an ID, and updating the stylesheet. Most of the stylesheets for the site are enormously complex and almost unreadable.

A design like this might be fine for a brochureware site that won't be updated that often -- but then, it won't be read or visited very often either. If there's one thing we've learned, it's that web sites need to be dynamic to be interesting.

The only point of separating content and presentation is to allow you to change content without having to worry about how it will be presented, and to change the design without having to go back and modify the content so it will look right. Designs like these fail on both counts. They remind me of badly written programming interfaces that expose their internal layers and break every time something changes.