Hi-Fi Design with CSS

March 18, 2004 12PM PST

And at last, the transcript of Monday’s panel from SXSW 2004. Enjoy!

See, the way I see it, CSS is about font control. You can manipulate things like your leading, text color, and font face. That’s about all it gets you.

Well… The old school method of thinking (old school being as late as last year for some, though I’m thinking more of 1998-era methods) was that CSS was useful for typography, and that’s about it. I was guilty of that mindset myself for years. In fact, it was embarrassingly recent that I realized that hey, you know, this stuff can do a whole lot more.

I’m a graphic designer, image is important to me. I need things to look just right. I’d been hacking with tables and spacer GIFs for years, so I knew the mechanisms of that inside out, and all of us who had to put up with that way of building earned a badge of honour as far as I’m concerned. But I also think it’s the finality of those methods that’s holding the web of today back.

See, once you get comfortable in a way of thinking, you rely on it. I knew how to build a complex set of tables to hold a site together across all the popular browsers; I had no idea how to achieve the same in CSS for the longest time. That was a stumbling block for me, because when you have a deadline you go with what you know. And that’s going to keep holding back those learning CSS.

But let me tell you, once you get over that hump, it’s pretty cool stuff.

There’s no question about it, this is the future of web design. I’m not going to bother going into a huge list of points about why you should use it, plenty of others can and will do the convincing for you. Suffice it to say it’s becoming more common on large commercial sites, and the visual appeal of the new work being built in CSS these days is unrivaled.

But that’s today. The problem I saw in 2003 was that we really didn’t have many example sites. A few major commercial sites like ESPN.com and Wired.com (thanks to Doug, of course) had taken the plunge, and this was absoluetely great for business examples. And they were both well-designed, but they weren’t the sort of visually inspiring artisitic free-form sort of work that designers could really latch on to.

Something to realize about us freaky artist types is that when we’re looking for inspiration, we really don’t care about things like usability and successful business targets and fast download times, and all the sorts of things you just HAVE to do when building commercial sites. That’s work. We want play! And when it came to CSS, there wasn’t much play around at the time.

So I got to thinking. What if there were a site that did all that, and demonstrated the flexibility of CSS, and also highlighted the benefits of using it, things like accessibility and degradability and so on? And, you know, what if, by the same token, it were to be approached as a collaborative effort so it’s not just one designer’s ego-stroking, but a community effort that displayed the multiple takes on a single source document by a bunch of talented people?

Well, we all know what happened then. Enter the Zen Garden. I’ve been maintaining this site for almost a year now, and I’ve seen some phenomenal design work added.

The basic idea here, of course, is that I’ve built a very simply marked-up XHTML document and that every submitter has used this exact same file as the source code, and contributed only a CSS file with a set of images to radically change the design. Take a look through these next examples — [1] [2] [3] [4] — and keep in mind that the only thing changing between each design is the CSS.

I guarantee that’s all that’s changing too, because I’ve made it physically impossible for each submitter to alter the XHTML.

Let’s think about this for a second. These examples are all using the same base XHTML. And because I did most of the legwork when building that markup last year, every single one of these designs, and the other 200 hundred odd on the site, are highly accessible. They work just fine in older browsers and mobile devices and some screen readers because the presentational layer, that is, the CSS and images that go along with it, it’s not being served up to devices that can’t handle that. All they see is unstyled markup.

What you’re seeing here is of course, is the bare bones XHTML without any CSS applied. It’s ugly. No one wants to look at this for very long. Thanks to the plethora of designs on the Garden, we don’t have to.

What’s really struck me about some of the work being submitted is the wild variation between individual approaches. It’s inevitable that when you ask two designers to submit their interpretations of a single theme, you’ll get four or five responses. In this case that’s more like hundreds and hundreds of responses, but you get what I mean.

There are a couple I’m particularly fond of, but of course my tastes vary as much as anyone’s — what’s nice is that there are so many to choose from.

Not So Minimal, Dan Rubin
(Shared anecdote about pushing minimalism, process for improving Dan’s [beautiful, but too minimal] original design)
Door to My Garden, Patrick Lauke
(oh man, that’s nice. Interesting effect - fixed position background.)
Blood Lust, one of mine
(Want to clear the air about this one. I like it, most don’t, went for Futurist style/patterned GIF dithering… it does it for me)
Maya, Bernd Willenberg
(oh, you haven’t seen this one yet have you? Sneak preview! See? You got your money’s worth) (further note: will have this one added soon)
This is Cereal, Shaun Inman
(great theme, well-executed, and cool menus [which won’t work in IE of course])
Oceans Apart, Ryan Sims
(oh, how I wish this were one of mine. wow.)

So on that note, here’s what I want you to take away from this.

If you’re a designer who hasn’t explored advanced CSS yet for one reason or another, do! The world’s moving in this direction, and it makes for happy clients. You might be surprised at how much quicker a site can come together.

If you’re a designer just learning how to build with CSS now, don’t worry. It gets easier. It’s a tricky thing to learn, but once you have it down, the days spent cursing browsers that don’t cooperate get fewer and far between. I promise!

If you’re a designer who’s been using it for a while, uh, where’s your Zen Garden design, huh? I’m waiting.

If you’re a company working with a designer who doesn’t use CSS, ask them to start!

If you’re a company working with a designer who does CSS, you’re probably not paying them enough. (Just kidding. Or am I?)

Anyway. The benefits of using CSS are being proven time and again. It’s a great tool in a designer’s toolbox, it’s available now, and once more start getting their mind around it, we’re going to see some more amazing work. Can’t wait to see the Zen Garden this time next year.