Dave Shea

In: Interviews

By Meryl K. Evans

Published on February 23, 2005

Digital Web: Can’t have this interview without this question you’ve answered so many times: How did you come up with CSS Zen Garden?

Dave Shea: At some point I’m going to have to pen the final answer to this question and then just give everyone a URI from now on. Maybe this is it.

Of course, we all know by now that in 2001 and 2002, the standards movement started making inroads. CSS had been around since the middle of the previous decade, but browser support finally started catching up thanks to the proselytizing work of the Web Standards Project, the original CSS Samurai who worked with the browser vendors, and people like Jeffrey Zeldman and Eric Meyer who were showing us how to use CSS in our daily work. Visual designers were finally able to consider CSS beyond basic font control and the occasional hover.

Except for this one little albatross still hanging from our necks back then. Netscape Navigator 4 was holding everyone back due to the ever-dwindling, yet frustratingly significant market share. It just barely supported CSS, and certainly not in any capacity that we could start building completely table-less sites. And the business case for continued support was too strong to ignore. WaSP introduced its Browser Upgrade Campaign, a way out for developers by informing the end users their browser was pretty much finished. It worked, but it took more than that for standards to really take hold. We needed some commercial examples.

Douglas Bowman and the crew at Wired got the ball rolling, followed shortly after by Mike Davidson and company at ESPN. The first two major commercial sites to be coded with standards in mind broke in late 2002, early 2003. These guys really did something great for the rest of us, because now we had two examples of large companies and very public sites that had committed to using standards. We had some pioneers to point to and say, hey, they’re doing it—why aren’t we?

OK, so I’m talking about the entire history of the CSS movement here, but the origins of the Zen Garden are pretty intricately wrapped up in all of this. I was an observer of all of this, while trying to take the plunge and move beyond NN4 support in my own work. A few other factors led me to think that what we really needed was a strong demonstration of what CSS actually does when you use it right—a way of visually conveying what people in the know had already learned, the stuff that wasn’t getting across when merely talking about it.

Chris Casciano launched his Daily CSS Fun project in early 2002, and around the same time [Jeffrey] Zeldman was saying that those of us who had it figured out should quit wasting our time arguing for wider adoption, and just start showing people what it could do. Both were huge inspiration points for me.

Though I kicked off the site with a few of my own designs (I’ve done about eight total), I knew that the best chances for success would be tapping into the community and opening it up for collaboration. And there has been some incredibly imaginative and technically stunning work coming in, so good move on my part.

DW: What was the original purpose of CSS Zen Garden? How has it changed from its beginnings?

DS: At the beginning, it was a proof of concept, a place to point the skeptics to and say, “See, this is what I’m talking about.” And for that, it worked amazingly well, and continues to.

Secondary was to create a collaborative gallery of work, to encourage discussion and spark inspiration. It’s a place to go for fresh ideas, and to learn how to use CSS. See something you like? View the source and learn how they did it. Chances are good that whatever sort of layout you’re trying to accomplish with CSS has been done in at least one of the Zen Garden designs, so there’s no need to spend hours trying to get your three-column layout working; just study how someone else did it and apply the technique to your own work.

That was about it, really. That’s what I had planned. But there are a lot of really amazing things going on that make it more than that. It’s been amazing for exposing new talent. I was only vaguely aware of people like Didier Hilhorst, Jon Hicks and Shaun Inman before they submitted their work. Now I’m buying cereal with their faces on the box (well, not yet…).

People write me all the time to tell me they learned CSS by studying the examples or creating their own designs, so it’s been fairly educational. And the list of designers is like a Rolodex for potential contractors; there are a lot of work opportunities going to contributors, and their designs are showing up in books and magazines all around the world.

Last year, Ian Lloyd brought a copy of an Australian design magazine up to SXSW that had a bunch of screenshots in it from the site. Follow? A Brit on vacation in Oz notices a magazine, travels to the US, and hands it over to the Canuck whose work is featured—I love how the Web is bringing us all together like that.

DW: You have co-authored a book on the Web site. What does the book have that’s not on the site?

DS: Gratuitous cat photos, delicious recipes, and a whole bunch of baseball statistics, oddly. We figured it was crazy enough that it just might work. Then we realized we actually wanted the publisher to pay us, so we ended up going with something a little more marketable.

It’s more of the same, really. If you’ve spent time browsing through the Zen Garden and viewing the source to find out how it was built, consider the book the companion guide that tells you not only what decisions were made, but why they were made.

We don’t pick apart everything in detail. There’s a chapter analyzing a few designs from start to finish from a code perspective, but most of the book sees us selecting a few main concepts demonstrated by a particular design and expanding on them.

This isn’t so much a reference book mind you—it’s more of a case study. We spend a lot of time tying in core design principles with CSS syntax. There’s a whole chapter on design concepts alone that makes only the lightest mention of CSS. It’s an interesting mix of theory and practice, technology and design that hasn’t been tried before. We’re looking forward to seeing what everyone thinks.

DW: What is “responsible” Web design?

DS: Pandora’s box, this question. I’ve rewritten my answer three times already, finally deciding that talking about interoperability and semantics is getting a little stale.

Simply put, responsible Web design is saying, “We’re going to try and leave none of our users behind.” It’s one simple phrase that encompasses the entire spectrum, from usability and accessibility to interaction and user experience. Follow that maxim for your own work, or find a developer that believes in it too; there’s no marketing-driven Web strategy that can compete with it. (Even better, combine the two for best results.)

DW: There has been a Web standards and usability backlash as folks are saying these approaches have led to bland Web sites without a certain look-and-feel or branding. What are your thoughts on this?

DS: Oh, that’s absolutely happening. You see a lot of sites these days that fall into a specific template: fixed-width, centered in the browser window, featuring two or three columns. But that kind of argument was true a few years ago too, when you saw the typical left-hand sidebar on two out of every three sites, or tabs running across the top on the others, with the logo in the top left almost universally.

Let’s be clear: When you have the same recurring elements over and over again on a site, say a logo, a list of navigation items and a big long block of content (which describes just about every weblog out there), there is only so much you can do with it, layout-wise. You could try 6,000-pixel long line lengths that force your vertical content into a horizontal block of text instead, granted, but I think the argument is pretty strong against crazy decisions like that. The various Zen Garden designs deal with this problem admirably, and I think chances are good that you could find just about every possible layout scenario covered in the list. If you find they look similar, well, that’s just because the content doesn’t change. If you’re saying, for example, that these two look the same:

http://www.csszengarden.com/?cssfile=/151/151.css
http://www.csszengarden.com/?cssfile=/152/152.css

…simply by virtue of them sharing a two-column, centered layout, I think you’re seeing the forest and missing the trees.

I’d actually like to point at dynamic content as being another—perhaps more relevant—source for the generic similarity. Standards-based sites often have that as a common denominator, which is something I think the critics may have missed. It’s pretty common for CMS-driven sites to have content areas of unknown and flexible dimensions—how do you reconcile that without simply giving it free range to expand? You can’t rely on predefined heights or alignment; you simply have to design around the problem.

Guess what? There are only so many ways to account for an unknown length of content, and 99% of them involve giving the bottom room to grow. Try pixel-precise alignments between the footers of two blocks of dynamic content, and let me know how you get them to line up when the left column is seven paragraphs, and the right is two sentences.

So I think in some senses, the technology is definitely limiting the design. I don’t think standards or usability alone should take all the blame for it, either. Regardless, I doubt it will stay this way for long. We won’t be content to let it stand. How we’ll work around the limitations—well, that’s where the challenge for the future lies. I think Cameron Adams, for one, might be on the right track. A bit of unobtrusive, elegantly degradable scripting to account for various layout scenarios might be the ticket.

DW: You explained the origins of MezzoBlue. What about the name of your Web design company, Bright Creative?

DS: I paid a team of specialized consultants hundreds of dollars an hour to think that one through. My branding budget during the first year ended up being more than I paid myself. Oh, wait—it’s not 1999 and you can’t get away with that sort of thing anymore.

I actually spent a bit of time every few days brainstorming over a month or two near the end of 2003. The name was the first thing to establish, before anything else. I needed something memorable that I wouldn’t be embarrassed saying on the phone in six month’s time. So I gave that time to process, since I usually come at these things gradually. I had a list of potentials that I thought were great, but when I went to check the domains for availability, guess what? Nothing was up for grabs, of course.

I think in the end I had two candidates, a choice between Bright Creative and some food-related noun, I think Basil something or other (basil.ca was available at the time). The decision wasn’t too hard.

DW: You’re a member of the Web Standards Project. Where do you see the organization going?

DS: Well hey, now that’s an interesting question. Right now is kind of a funny time, and I’m not sure I can do much more than analyze where we’re at right now.

WaSP is an organization of talented people that have done an awful lot to promote Web standards. Historically, it has been right in there working with the browser creators to better their standards support for a more interoperable Web. In 2003, WaSP recognized that a lot of the heavy lifting was done; the browsers had changed enough that now it was time to repurpose the vision and focus on educating the developers themselves. The mission statement explains all this.

Visibility-wise, I think it’s pretty obvious to most that the output of WaSP in the past few years has not been what it was in the past. A new campaign launched last summer, Browse Happy, and there’s an ongoing internal effort to redesign the site. But aside from the Buzz postings that happen occasionally, we’ve been a pretty quiet group—at least from the outside.

The various WaSP members are all people working individually, in their own manner, to further the cause. I know a couple of our members went in to talk with a very large news organization recently, specifically to promote standards (imagine their surprise when they found the organization already knew almost as much as they did).

A lot of us are authors, writing books that aren’t officially associated with WaSP, but have everything to do with the core cause. Some of us develop standards-compliant CMS and blog tools so others don’t ever have to think about standards, their sites are just compliant from day one and that’s that. Most of us are active in various disciplines, and outside the WaSP banner we’re all doing a heck of a lot to further the cause.

What we’ve also seen recently are two major turning points in general perception of standards. Two years ago, the Web design community consisted of a few dozen authors writing on their personal sites, and the two magazines—Digital Web Magazine and A List Apart. Now, there are thousands of personal blogs and more Web sites devoted to standards-based Web development than I could ever hope to follow. This explosion of content has been great for sharing the knowledge, so in a sense I think the community itself is fulfilling WaSP’s vision of educating developers.

As well, with more developers now working with standards as a /files/includes/default.css instead of an experimental alternative, expectations have gone up for browsers and content authoring tools. When was the last time a major browser developer released an upgrade that didn’t improve its standards support in some way?

Well, I suppose I can answer that rhetorical question—Internet Explorer development has been at a virtual standstill for most of the current decade, aside from the security patch released as a part of Windows XP SP2. Sounds like we’re finally getting an IE7. But ignore IE for a second, and look at everything else currently on the market. Mozilla Firefox? The most standards-compliant browser out there. Apple’s Safari? Good, and getting better (they snagged a Mozilla developer a few years back). Opera? A company helmed by one of the fathers of CSS, Håkon Wium Lie, and obviously on board with the message.

So anyway, we have these two things going on—increased developer awareness, publishing, and collaboration, and the increased reliance of the major browsers on standards. It seems to me the message has gotten out. So where does WaSP go from here?

Some would say we should be all over Microsoft to provide test cases and work out the bugs before IE7 is released. Others might be inclined to say that a company with as much money in the bank as they have can darn well do it themselves. Yet others might question the obsession with the browsers, when many current authoring tools—especially CMSes—aren’t even up to the task of writing standards-compliant code. It may very well be a chicken vs. egg problem, where all browsers would have no choice but to conform with the standards if the authoring tools demanded it.

But then, there’s the real question: Should WaSP move back into an activist role? The switch of the group’s focus to education a few years ago has meant we haven’t been pushing that side of our activities; various task forces have remained somewhat active, but they don’t form a large part of the objectives anymore. Perhaps they should. I’m not sure.

DW: When readers read this, the browser numbers will probably have changed. People expect Microsoft to come out with a new release of IE after getting a fire lit from Firefox. Where do you see browsers heading especially since many sites continue to design with IE in mind?

DS: Well, between the time you asked it and the time I answered this question, it was announced that Microsoft has reversed their former strategy and will, it looks, release IE7 as a standalone beta available for XP as well as Longhorn. There are a few sticky caveats in there, like you need to be running XP SP2, but there you have it. Microsoft has more or less confirmed that Firefox is genuine competition.

In the future, I expect browsers will adapt to the demands of the market. Right now I think Web applications are hot, getting hotter, and a good indicator of where development effort will go in the coming years. Google is showing us almost daily how we can redefine the basic tools we have, and make almost blasé (and reviled, I should add) technologies like JavaScript seem cool and interesting again. Witness Google Maps, the reaction to which is usually “That’s JavaScript?!”

We have a maturing set of tools at our disposal with things like the standard DOM, XHTML, and CSS, and we’ve made great inroads to ironing out the kinks in using them (browser support aside). I would hope future browser updates would go toward fixing the deficiencies rather than reinventing the wheel. A solid foundation has been laid; future technology should build on top of it.

DW: What have you been working on? What is next for you?

DS: Book writing being the ordeal it is, I’ve only recently started scaling up the regular workload again. There have been a few ongoing projects I’m hoping to see launched soon that have been refreshing challenges, design-wise. One in particular, which I’m not quite sure if I’m allowed to talk about or not, has seen the creation of a mini-team between the Web people and me within the company.

We’ve been tackling things like user surveys, branding and marketing integration, long-term technical architecture planning, internal politics, and the legal challenges of fighting a particularly tight-fisted monopoly in this sector (and no, that’s not a reference to a software company in Redmond). It’s been complex, and one big thing I’ve learned is that if you have a capable team you’re in sync with, it doesn’t really matter what pops up along the way. Confidence in the people around you goes a long way toward plodding on even when stuff happens that you really wish wouldn’t.

Aside from the standard design work, I really enjoyed getting out and speaking last year. Connecting with people around town and internationally has been inspiring. I love the discussions generated in the hallways and at the mixers.

I relaunched Bright Creative’s site recently to celebrate the first year, and the fact that it’s what I do now full time. The look-and-feel intentionally resembles that modern/classic clash your average cafe is fond of sporting. It’s symbolic of how I work—I wrote most of my book at a coffee shop, and I continue to go back as often as I can to work during the day. It’s freeing, since working out of the living room at home just isn’t cutting it.

I think it’s logical that what’s next is a real office and perhaps one or two people to fill it. I’ve been looking for a while, but the local market is a bit resistant to small companies like me. Perhaps some readers from the Vancouver area can share their real estate experiences with me.

DW: Digital Web Magazine interviewed you almost exactly one year ago. What has changed since that interview?

DS: I think we’ve pretty well covered that already. Although stressful at times, 2004 was one of the better years I’ve had.

As always, it’s been a pleasure. Thanks Meryl, and everyone at Digital Web.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: CSS, Web Standards