TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Hi-Fi Design with CSS

March 18, 2004

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.


Reader Comments

1
krf says:
March 18, 01h

Thanks for all your hard work in this area! As a media designer, I can appreciate CSS and its intricacies as I’m currently designing a new CSS-based site for a client. There are a few tricky things (can’t browsers just get a long please), but once that’s overcome, it makes for a nice, clean site that is easily maintained and updated. Each site gets a little easier.

I’ve learned a lot from you and other pioneers in this area.

Keep up the great work!

Mike says:
March 18, 01h

Dave, I told you this week, but thanks again for your contributions to the web (and for posting the transcript here). I enjoyed meeting you and look forward to seeing you next year if not sooner.

ACJ says:
March 18, 01h

Ah yes, inspiring — I shall be working on my second submission after the projects I’m currently working on.

By the way, did you ever get the email about me switching domains?

March 18, 01h

I love this! All of the benefits of going to SXSW Interactive without having to leave the house. :-)

March 18, 02h

The Zen Garden has been a tremendous inspiration to me, even as an amateur web dork. I’ve been watching it since it originally went up a year ago. This Is Cereal just floored me when I saw it. The designs from the most recent update are all gorgeous, with Oceans Apart just making me jealous. This is truly one of the web’s greatest assets. :)

March 18, 03h

Mine would have been submitted long ago. Problem is I don’t have a server under my control (yet). When I do, expect to see a San Francisco theme at the Garden.

Rob says:
March 18, 04h

I had postponed learning how to use CSS for longer than I should have, because I really hadn’t realised how great it is.

It wasn’t until I saw CSS Garden a few months back that it became obvious just how powerful and versatile it really is. Since then, I’ve been preaching it wherever I go.

Thanks for that site. It’s such an amazing example of why we should all be designing with CSS.

March 18, 05h

great stuff…and may i say that i’m honoured to get a mention with the door to my garden in there :blush:

Evdawg says:
March 18, 05h

I’ll totally agree with Rob. I remember (about a year and a half back) when I started really getting into webdesign, when I found out that tables could build up an interface, I was like WOW.

Then I came across zen garden about six months ago, and then I was “WOW” except that WOW was alot bigger than the first one.

Oh, and by the way, very well done transcript. I am looking forward to submitting a design to the garden soon, and one day hope to go to SXSW and see you and the other people who are crafting the web present your panels.

Todd says:
March 18, 06h

I’ve also been very inspired by the Garden and its submissions. Ryan Sims’ Oceans Apart is one of the most beautiful pieces of web design I’ve ever seen.

Even though I still consider myself a newbie with XHTML and CSS, maybe I’ll take a stab at a Garden submission here soon.

Congratulations to you Dave and thanks for providing an outlet for such great creativity.

March 18, 06h

“This is Cereal” got me kinda mad.
It’s another resource that makes Mozilla out to be perfect and Internet Explorer to be completely broken. Neither are true. IE’s code engine needs retooling, I know (I use MyIE2 which is the same but has tabbed browsing, popup blocking etc). Mozilla has its far share of bugs as well, including a serious float problem.

leonard says:
March 18, 06h

Yeah Dave, but what version of InDesign do you use? ;)

Eric says:
March 18, 07h

Thanks for the great notes - they demonstrate much of the progress that has been made over the past couple years as CSS design (finally) moves to take its rightful place in the web designer’s repertoire. I have been using CSS now for only about a year, and just submitted my first Garden attempt; breaking the rule about no horizontal scrolling…

Dante - the message was given to the browsers that couldn’t even support the drop-down menus because of their blatent non-support of the :hover pseudo-class which has been around for quite some time. Nobody’s saying any browser is perfect, but there are light-years between IE and Mozilla when it comes to CSS support. The point of Cereal was to show the benefit of CSS for menus that previously took crappy markup and scripting to perform. Oh, and it looks good.

dan says:
March 18, 08h

Where would be without you Dave? You’ve spead up css standard support by a few years I’m sure, or should I say 99.

Anyways keep up the good work, We all appreciate it.

Jim says:
March 18, 12h

I’m sorry I missed it. Maybe next year. Thanks for providing the transcript, which also reminds me that I need to submit another zen garden entry soon as I can find the time. :)

March 19, 01h

“Yeah Dave, but what version of InDesign do you use? ;)”

Dave, what WAS up with those weird-ass questions? First the guy who sneers and says that sliding doors are just as much of a “hack” as tables + javascript rollovers. Then that guy who was strangely fixated on InDesign, somehow missing the point of the entire panel. Crazy people.

Jeremy says:
March 19, 01h

Thanks again for the wonderful presentation. I really enjoyed your writing, it’s such a true voice for expansion of web stanadards.

I hope to be a SxSW next year to hear you personally this time. =)

bink says:
March 19, 02h

Thank you so much so so so much for this group of websites that details the powers of css, the space that your information now takes up in my brain would have otherwise been wasted on possums and other marsupials, not to mension oppresive tables and frames. I now understand a great deal more about CSS and XHTML. Its a metamorphosis thats seen my skill set change from simple font control, to relative positioning, and of late oversized images in a smaller container acting as roll-over images with no pre-loading.

The power of css is amazing and there’s admiration unlimitied from me one of your audience, good luck with everything you ever do :)

*claps*

Thanks for your time.

AkaXakA says:
March 19, 03h

Great of you to put the transcript online, but just to nit-pick:

“taken the plunge, and this was absoluetely”
Should be:
“taken the plunge, and this was absolutely”

But that’s just the perfectionist in me speaking…

March 19, 03h

Woah… has it really been nealy a year since CSS Zengarden first hit the Internet?

I used to think CSS was just about typography and though I was quite won over by IE4’s then advanced CSS support and what it could do… the new way of designing using CSS with structural (X)HTML that’s been showcased with Zengarden was quite an eye opener.

Now if only I can get some spare time to finish my Zengarden entry. :D

Dave says:
March 19, 04h

Wonderful article and wonderful site. I have been a fan of Zen Garden since it went up and will always be a fan. Thanks largely to you, Zeldman and Meyers I have managed to make many converts to the wonders of CSS, especially with professional designers and artists. I have found that if you have a designer who is a little *geeky* but doesn’t appreciate what you can do with CSS, you can show them Zen Garden and issue them a challenge to do something similar. Boom! They’re hooked and are soon converts.

Again, wonderful site, it’s an inspiration to many, not to mention a technical showroom of various techniques.

Thanks

Flow2K says:
March 19, 05h

I love this site!

Thanks a lot, you opened my eyes.
Since I’m not a designer my homepage is a little shitty…but who cares? It’s valid XHTML 1.1.

I can’t get enough of your great articles.
Keep up the good work!

Kris says:
March 19, 06h

Maybe it is time I got off my ass and start some ZenGardening. To be continued..

March 19, 07h

I think CSS has a lot of potential. But being a newbie to it, one of the most frustrating parts is translating a design which is “easy” in tables, but has proven very difficult using css.

Although most tutorials have the usual 1, 2, 3, even 4-column layout, not may deal with multiple nested layouts. As in two columns nested in the right-hand column of a global 2 column layout..

The rantings of a newbie

Eric says:
March 19, 07h

Sean, there definately is a learning curve…it’s like a language; you at some point get comfortable enough with it that you can stop taking phrases out of the tourist’s guide to Spanish and start forming your own sentances. For me, this has happened only recently…but there’s no way a tutorial can cover everything that you want to do with CSS. I can only encourage you to keep going; it does get easier as you write more and more style sheets, and you will get to the point where you control the language rather than the other way around.

March 19, 08h

I was so amazed that so many great designs have been submitted to the CSS Zen Garden in less than a year that I openned up Terminal to run a whois search. Dave said he’s been maintaining the garden for almost a year…did someone else maintain it first? No, the domain ‘csszengarden.com’ was created April 18, 2003. WOW! So how do you plan to celebrate the first birthday (of course it’s middle aged in internet years)?

I’ve only been active in webdesign (again) for a little over a year. I started maintaining my choir’s website last spring. Previously, I took webdesign classes and learned HTML (of course the learning of HTML occurred on the internet, not in class) but lacked content to build a site with. I had fun learning CGI scripting in Perl (this time I learned some from class and some from then internet), but it began to scare me how much I understand programers and chose to fulfill my design ambitions through architecture. Before I got my letter of acceptance from CalPoly, I though I might switch back to web design if I couldn’t get into architecture school - in large part because the ‘standards advocate’ community reinforces so much of what I think the internet should be. The parallels between architecture and (standards based) web design amaze me. I learn much from reading blogs of designers that I can apply to any design practice. Thanks everyone.

March 19, 09h

Great write-up on the Zen Garden.

I wish I could submit a design. Lack of free time and my not-so-great design ideas (as you can see the CSS design options at my site) currently prevent me from doing so.

But I’d just like to say thanks for the Garden and the awareness to CSS greatness it has brought, and thanks to all the people who put such great and inspiring designs in there.

28
Jim B. says:
March 19, 10h

Not to detract from any of the work at Zen Garden because all of the samples are inspiring.

Still - the entry from Ryan Sims with his ‘Oceans Apart’ is one of the nicest web designs I’ve seen.

Stunning.

29
Andy Moss says:
March 21, 12h

the only thing holding me back is trying to come up with a good idea that hasn’t already been done. The amount of alternative designs for ZG is truly staggering and this is possibly the most addictive website on the net. Im amazed my employers haven’t proxied it yet! Also what is sxsw all about?

Dann says:
March 22, 08h

Even though my design probably won’t make it on the Garden, I just wanted to thank you Dave for creating such a project, it’s what made me really buckle down and get my feet wet with CSS. Thanks for all your hard work.

Bill says:
March 23, 06h

One of my favorite garden entries is Gemination by Egor Kloos. His is particularly cool because he makes the page look so good, yet so different, in IE and Mozilla. Plus his tongue in cheek poke at the box model in IE is funny. You can see Gemination at: http://www.csszengarden.com/?cssfile=/062/062.css&page=2 make sure you check it out in both browsers!