I was browsing through the CSS Zen Garden recently, and I was struck again at just how great it is. [If you’re not familiar with the CSS Zen Garden, go there and you’ll figure it out]

I don’t mean to say that I think the designs are all excellent (more than a few of them are a little cheesy). But I deeply appreciate that all of the examples are art directed, in the traditional sense of the word, to a degree that I rarely see on commercial web sites these days — even on sites for very stylish products and magazines.

Compare this to offline (i.e. print) editions where bold and dynamic art direction changes, often radically, from article to article or issue to issue. Flip through any issue of Wired, The New York Times Magazine, or almost any fashion or lifestyle magazine, and you’ll see new and different design approaches — different art direction — for nearly every feature article. Khoi wrote a very thoughtful peice about this over a year ago, lamenting that web design is more about safe, functional systems than about creatively ambitious art direction, but since then this unfortunate state of affairs has still not changed.

Most contemporary web sites strive to be effective content platforms, with a unified but flexible style in which the actual content — the words, pictures, and media — can shine. My own site is certainly of this sort. Very few of the biggest and highest-budget content web sites, in fact, have any strong sense of style or art direction outside of the limited set of page templates (often less than ten) used to deliver the aforementioned content, templates that differ so little from one another that they are essentially variations of the same page.

So if content is king, then design is at best the royal tailor. This is because, for most sites, the design of the site is not considered content at all.

But this is not how many of the best art-directed print magazines work. They’re more like the CSS Zen Garden, customizing the design as needed to not just work with the content but also to be a kind of content in itself.

Why can’t online magazines (especially online-only magazines) do exactly what the CSS Zen Garden does?

  • Keep the site’s content normalized, semantically consistent, as it resides in the content management system — but apply a different, customized style sheet to many, or even all, of the articles posted in the site.
  • Treat the site’s various cascading style sheets as another kind of content, integral to the article and to the site’s overall content strategy. Hire art directors and graphic designers proficient at CSS to build new style sheets for every new article and issue just as their print counterparts have been doing for decades.

In this model, when the user browses from an article about fashion to an article about science, the page template can change dramatically. The “cascading” part of this scheme will ensure that some underlying design essentials are kept consistent — for example maybe the body copy fonts and the core page grid — even as the page’s layout, illustration, colors, headlines, and other design elements change dramatically.

It’s a shame that for many of the talented designers at CSS Zen Garden, this free work may be some of the best work they’ll ever do, since so much of the real web design world is still unfortunately focused on eliminating idiosyncratic style wherever it crops up — instead of using it to make sites and user experiences better.


13 responses to “Art Direction in the CSS Zen Garden”

  1. When I design a web site, I start with dozens of sketches on paper, move my best ideas into Photoshop or Illustrator, put together a basic framework in grayscale, and mold the details until I have a finished comp. It’s much the same process when I work on a print project, with one big difference: for the print project, the comp is more or less the finished product. For the web project, the comp is only half the battle. I may have designed it with a technical approach in mind, but that approach still needs to be translated into code that works on a variety of browsers and platforms.

    For an online publication to be able to pull off the kind of content-specific design and art direction you’re talking about, they would need a dedicated staff of designers and developers as big as (or bigger than) the design staff of its print equivalent. I’d venture to guess that most online publications (or web sites of any other kind) have a design and development staff hovering around zero.

    So I don’t think we’re going to see much change until people are willing to forego the one-time expense of design, development, and CMS integration in favor of the continued expense of a dedicated design and development team. When will the wind start to blow in that direction? Your guess is as good as mine.

  2. i love magazines.

    while i understand what you’re getting at, i can’t help but think that it’s harder said than done.

    there is a lot of safety in designing for specific articles knowing that the reader/user knows they are in the magazine. there is a front cover and a back cover and the reader expects to have varied experiences in between. that’s not as easily done on the web. if the css changed from article to article with something like vogue.com… rather than skip the section of the magazine, readers might just leave the site rather than skip the article or navigate back.

    more over, while zen garden is an impressive use of technology/code, i don’t know many common users would necessarily understand the experience… not to the degree that people understand what they are getting into with a magazine. magazine articles may be completely different within the magazine, but pages of a website ought to have consistency.

    SO… maybe the question really is, how come no one has designed a magazine website that has an environment that allows for a varying experience within the window. there is a magazine site that i know of (but sadly cannot find to reference) which just emulates the turning pages of a magazine – but this is normally kinda hard to read and a definitely too safe, as far as truly utilizing web technologies goes.

    i would assume the answer there would be related to ad-placement revenue… *heavy sigh*

    i guess i just think your post is a little too simple. unfortunately, no grand thesis here though. i enjoy reading your the posts.

  3. @matt: I think you’re right that the experience I describe would be jarring for many users, but that’s only because people are used to the current drab, uniform state of affairs on the web. If we incrementally move towards broadening our design away from strict templates I think this user confusion will not be an issue. It wont happen overnight, but look at how, for example, the NY Times frequently designs custom interactives just for a single article. This is what I’m talking about: put as much work into the unique presentation of your content online as you would in presenting it in print, instead of merely pumping the raw text and image assets into cookie-cutter templates. We can at least strive for that, can’t we?

  4. i would definitely agree. and it’s been my opinion that with the way the web world is right now and the still-pretty-darn-decent consistency of print consumption… the fact that business models to mix the too more aren’t being created or executed (well) is … dumb. the first magazine to really tie the two together, i imagine, would make a killing.

  5. @matt: Sometimes I think web design today is like print design in the late 1800’s where every publication looked like what classified ads look like today — boring columns of simple uniform text. The analogous revolution of modernist graphic design has not hit us yet.

  6. it’s true. i think the CSS surge that is going on is good in the respect that it proves content can be manipulated displayed numerous ways fairly easily, but at the same time… there is a wave of generic-“ness” taking place. i suppose that’s how it works; a wave of flash sites that as sorta feel similar, a wave of overly “2.0”/candy sites that definitely look and feel similar and now, columns.

    i currently work in a ruby on rails dev shop where i’m the only designer, and while i throughly appreciate khoi and yahoo for bring the wonder and power of grids to the common place web world… i know there is still something missing from CSS world which better animates a web page – yet there is an expectation to be able to do magically versatile things with CSS.. without a total standard necessarily (*too general a statement maybe **mind you, not that i think a total standard is the way to go).

    there is something to be said for CSSZen and even, now, virb… but i still feel like many a client has said “i’m not sure what is completely right, but i know i’ll know it when i see it.”

    anyway, it’ll be cool to see what happens next…

  7. One online site that does this is escapistmagazine.com, a gaming ‘periodical’ website, although it does it in a tables kinda way.

    But they are trying. ๐Ÿ™‚

  8. @Rob: I agree that the problem lies largely in manpower and skill, and possibly (I would argue) in the tools currently available. But how is this different than, say, the revolutionary changes we saw in late 19th and early 20th century graphic design? The man-hours-per-page increased dramatically, the intricacy of page design increased, the skills of the people practicing the craft increased — did the cost of the finished product increase as well to pay for all of the above? I’d be interested to learn that, because you’re absolutely right that the stylistic inventiveness I seek could require a significant increase in the design budgets for online publications.

    As I suggested above, however, we are seeing both an increase in the technological skillset of our design workforce (especially if you take into account outsourcing actual page template coding, for better or worse) to the point where many designers design while they code… on the flip side, we are seeing better and better tools for translating from static design to web-ready page templates.

    So IMHO even a modest increase in design budget and staff, let’s say 2-3 designer-coder types, could accomplish quite a bit of what I’m advocating. For high-end online magazines seeking a differentiating factor, this might be just the ticket.

  9. I usually hesitate to toot my own horn, but this article resonated very strongly with me, and expresses almost perfectly what I’ve been trying to do with my site (or “weblog,” if you prefer).

    Examples: one, two, three.

    Not quite commercial-quality “art direction,” but I think it’s the same idea ๐Ÿ™‚

  10. Alex, your site is a perfect example of what I am talking about. I am very impressed with it. The common elements of the header and comments keep things consistent enough, but the art direction for each article (or “blog post”) give the site some variety. The degree of variation isn’t as dramatic as the CSS Zen Garden, which is closer to what I think is practical and appropriate for my magazine approach. Nice work!

  11. I agree with Rob Weychert and that most of this ‘one markup, many style’ approach is usually feasible on personal projects or well.. the css zen garden. I have approached this technique only from maintenance perspective where I only wanted to update a centralized markup for a set of sites (compare my site with http://brigitteschuster.com) Having said that all this requires quite a bit of time to do it and the end benefits may not really reflect the time and energy that went into it.

    Just hoping this design (submitted in Feb. 2006) gets approved or rejected sometime this century ๐Ÿ™‚

    (see why)

  12. @Sarven: I don’t think it’s any harder to do than, say, putting out a monthly highly-designed magazine where designers have to make a new layout and art direction for each feature story month after month. Alex, above, does it already. All it takes is a high level of CSS skill in the talent pool and some good tools, and I think we have those now.

  13. @Christopher Fahey:
    On the web the trick is to get an HTML that is not only written well (semantic markup) but also to leave just enough hooks around for CSS to work on a wide scale (as seen in csszengarden). If this is not done well it will substantially limit the number of possible designs. To achieve that a balance would be required and a lot of tweaking until its just right. Considering the differences between one site to another as well as the dynamic requirements of the site I would venture to say that this would be quite costy to not only implement but also to maintain.

    Taking this idea further some sites are able to offer different set of styles for different type of users but it all comes with a different price tag and demands. In fact I would love to see this more widely applied on the Web.