Douglas Bowman

In: Interviews

By Craig Saila

Published on March 18, 2004

This interview was conducted just prior to the start of the 2004 SXSW Interactive Festival – Ed.

Digital Web: You’re now widely known as Web design expert, but some readers may be surprised to learn it was only in 2002 that you became “infatuated” with CSS and Web standards. What was the reason for the delayed catharsis?

Douglas Bowman: When I first started playing with CSS in 1998, browser support stunk. That’s the short version and the honest answer. But the longer version is more interesting.

It took several years for the benefits of CSS to grab hold of me. Six years ago, I was working with Jeff Veen at HotWired. At the time, Jeff was an invited expert to the W3C CSS Working Group, so he was in on the game very early. Once Netscape and Microsoft started incorporating varying degrees of support for CSS into their browsers, Jeff started showing us the cool things it could do. Jeff thought that I, as a designer who often hand-coded all my designs before handing them off to production, would love the advanced control CSS provided.

After several months of Jeff’s enthusiastic evangelism, I finally started dabbling with CSS. But I immediately hit a brick wall. My efforts were greeted with nothing but frustration. Some things worked, others didn’t. There was no concept of full support for CSS, let alone the new CSS2 specification. In the middle of the browser wars, it was a crap-shoot knowing what would work in version 4.x browsers.

I used CSS in small ways for several personal projects, and experimented with CSS-positioning after DHTML become popular. IE5/Mac was a godsend in how consistently it supported everything I tried. But I was still frustrated by how poorly NN4 rendered the most basic CSS1 properties, and NN4 still had a significant share of the browser market, especially for HotWired’s audience. I wrote off CSS as worthless; it wasn’t for me. So CSS never really made it full-scale into any of my professional projects.

I became a master at building anything I designed. Font tags, spacer GIFs, tables nested as many levels deep as I needed. Didn’t matter. I could reproduce any layout, liquid or fixed width, with pixel-level precision. As a perfectionist, that ability was important to me. Those who know I come from a print design background shouldn’t be surprised. If I couldn’t reproduce anything consistently with CSS, let alone achieve the level of quality I sought to create, forget it.

It took several years of drastically improved browser support for me to turn around and take another look at CSS. I also benefited by stepping outside my comfort in design to learn server-side scripting, which introduced me to the concepts of abstraction and encapsulation. One thing could affect another, yet each could still live independently. I also started realizing that the concept of CSS was somewhat similar to the style sheets with which I was already familiar from print design.

All these factors culminated as I was redesigning Wired News. The benefits of CSS were obvious to me by then, and the stricter, cleaner environment of XHTML was a perfect match. The Wired redesign was the first opportunity I took to pair my design with Web standards. It was a leap of faith. Internally, we all referred to it as a jump off a cliff for us. No other major commercial sites were using CSS to the degree we were taking it, so we had no models to look to, no proof it would be a success. It was a gamble, but one with which we were rather confident would pay off. We had no idea how big a success it would be.

So although I ignored CSS for so long, once I jumped off that cliff, I haven’t looked back.

DW: What’s an element of the Wired News redesign (besides actually doing it) that you’re most pleased about?

DB: Design-wise, I think I actually like the daily color changes. If you asked anyone what they remember about Wired and its design, whether the printed magazine or the many online experiments we created at HotWired, I’d bet more than half of them would talk about color. Bright, bold, often fluorescent, daring color combinations. Changing colors on a frequent basis prevents the Wired brand from getting locked into one color combination. Wired is not just about one or two colors, it’s about many colors used in specific combinations. Wired magazine changes colors every month. Thus, I think it makes perfect sense that Wired News changes colors every day. Rotating colors create slightly different experiences for Wired’s repeat visitors who come back on a daily basis, without completely changing the design or moving anything around.

Changing color schemes was a small gimmick, but one that was (and is) incredibly easy to pull off by simply pointing to an extra style sheet that contains new color information.

CSS-wise, I like the way we built in a dynamic column structure that changes the layout based on page type or the available ad configuration. It’s achieved by adding a simple id to the body tag, the CSS takes care of the rest. This is a technique I further perfected for Adaptive Path’s redesign, and one that comes in infinitely handy when creating a design that requires several variations from a master template.

DW: If you could, what would you change about it now?

DB: Oh, if you only knew how much I’ve wanted to go back and change certain things. At the time I was designing Wired News and authoring its CSS, I was constantly learning new things about the cascade, floats, positioning, and browser bugs. Each week, I’d discover a new, better way to do the thing I had just done the previous week.

I started out using a table to control the main layout. Nested tables had been eliminated, but I still depended on an outer table to create a consistent page layout and column structure. As I learned more, I realized I could kill the outer table too, but that introduced a whole new learning curve that comes with floats and absolute positioning. I tore apart Wired’s CSS and started from scratch three different times as I kept learning better ways to build the design. Not everyone has the luxury of time to pull apart code and redo it several times. But if we were going to do it, we were going to do the best job we knew how.

So a year and a half later, you can imagine with the knowledge and experience I’ve acquired since then, why I cringe when I look back at some of the ways Wired is built. I doubt I’d use absolute positioning for the columns now, since I know how to manipulate floats more effectively. I’d design and build the main horizontal navigation differently. I’d use heading and list elements more abundantly. I’d be even more daring with experimental techniques.

But that’s just the perfectionist in me nit-picking about the choices I made back then. I’m being hard on myself. We did the best we could with what we knew at the time. Ultimately, I see the Wired News redesign as a success, and am proud of the results. I couldn’t have had a better project and better team to work with for my swan song before leaving the company a month later.

DW: What were your feelings when you heard Terra Lycos laid off much of its San Francisco staff, including the staff at Webmonkey, a site you’ve had a long relationship with?

DB: Hmm. That’s something I haven’t talked or written about publicly yet. Remnants of one of my Webmonkey redesigns are still mostly visible on internal story and collection pages. I worked directly alongside many of the Webmonkeys, and consider all of them good friends. In fact, I’m looking forward to seeing many of them in Austin this weekend.

That day of recent lay-offs was a mix of bittersweet emotion. I loved Webmonkey, its staff, and its rotating cast of contributing authors. Webmonkey was the definitive place to learn about all things Web: HTML, JavaScript, Flash, PHP, browser news, server stuff, databases, and on and on. Webmonkey covered it all, did it with sass, and made it fun. While Webmonkey was never about taking itself too seriously, it was an incredibly helpful resource that helped so many people figure out the nuts and bolts of the Web. In 1996, when Webmonkey got its start, we didn’t know that much about the Web, but Webmonkey was filled with people sharing what they had learned or stumbled across. Sometimes it was through trial and error. Other times, it was about having the guts to try something new and put it out there for the world to see.

Why bittersweet?

Bitter, because it’s sad that we’re witnessing not just the end of a chapter, but the end of an entire book. A huge, thick book that chronicled a bumpy journey on the Web over the last eight years. A book filled with immense amounts of knowledge and an incredible cast of characters. Bitter, because most of Lycos never knew what they acquired when they bought Wired Digital, and thus, never figured out what to do with sites full of innovative, original content, like Webmonkey. Bitter, because just like the rest of HotWired, the ugly, corporate, make-any-buck-you-can portal culture of our parent company continued to drive away smart, talented, fun people from Webmonkey, until even “skeleton crew” became an over-exaggeration. Bitter, because while I was there, I witnessed many of my friends walk out the front door for the last time, either by force through four rounds of layoffs in my six years, or by their own choice to get the heck out of Dodge.

Sweet, because those who made Webmonkey what it is have moved on to create other things, tackle new challenges, continue to innovate, and be a guiding force on the Web. The remainder of the crew that just got axed are now free and can do the same thing. Sweet, because it is, indeed, the end of the book. As much as Webmonkey continued trying to fight the fight until its last breath, it was miserable seeing it suffer within the clutch of our parent company. Webmonkey can retire happily as we remembered it, confident that it has done many good deeds, and spread its seeds far and wide. Who knows? Maybe we’ll see Webmonkey resurrected in another form, and in a better place, if you believe in that kind of thing.

DW: Your design firm, Stopdesign, specializes in both print and Web design. Aside from the obvious differences (the media and the interactivity) is the improving level of CSS support finally bringing the two fields closer together?

DB: I don’t know if I’d say “finally,” but I certainly believe there are parallels between print and Web design made more obvious by CSS. As I mentioned earlier, I think an underplayed analogy with CSS is a correlation with style sheets used in print design and production. Designers and production artists have long been familiar with the concept of style sheets, popularized by desktop publishing apps like QuarkXPress. Even common word processing apps make use of global style-formatting features, and have for years. So the base concept of CSS is already a familiar one to many people. Once you realize that you already know what a style sheet can do (and why it’s advantageous to set up in advance), it’s just a matter of learning the “cascading” part of “Cascading Style Sheets.”

I think we’ve gone in and out of proximity periods between print and Web design. Those who’ve crossed over, or those who have continued to do both, see how the two fields are related, but also see an ocean of difference between the two. Many of the same basic principles of graphic design apply to design in any medium. Line, form, balance, color, texture, contrast—they all apply on the Web, too. It’s how those principles are applied, and the result of those applications that change from one medium to another.

Each medium possesses its own benefits. Print media is tactile, has more of a sense of permanence, and is distributable without dependence on technology or a connected (online) society. CSS is interesting because it enables Web design to surpass far beyond its print sibling in the realm of accessibility. The Web as a medium is already much more accessible than a printed corporate brochure, movie poster, or product catalog. Better support for CSS enables us to create incredible designs that are even more accessible to a vastly wider audience. Unless a brochure has an audio equivalent that travels with it, or comes pre-embossed with a direct Braille translation, it can’t be compared with a well-constructed site on the Web.

DW: You’ve just finished giving two talks at Digital Design World. How responsive and/or aware was the audience to ideas of CSS and standards-based design?

DB: Highly. Jim Heid and his crew have always been proactive in ensuring Web standards play an important role in Thunder Lizard conferences. So I think the Web/Digital Design World attendees come not only anticipating a few sessions on the topic, but they expect it too.

I polled the audience at one point, asking “How many of you have been using or experimenting with CSS in a meaningful way for at least one year?” Almost every hand in the room raised, mine included. “Two years or more?” Fifty percent of hands still raised. “Three years or more?” Many of the remaining hands went down, including my own. In addition to gauging the audience’s level of familiarity with CSS, my point was that it’s possible to learn and become proficient very quickly, as I’ve only been toying and experimenting with CSS for a little over two years.

I didn’t walk through any of the benefits of CSS, and completely skipped an introduction-level talk. I jumped straight into the stuff I love showing to peers and clients. The stuff that excites me, and makes me passionate about what I do every day. A few examples, some practical tips they could begin using immediately, and a few advanced techniques that push the limits of what’s currently possible. The audience was incredibly responsive, but possibly a little stunned at what I was showing them. Some may not have understood everything I talked about once we got to the advanced techniques. But the practical tips spoke directly to them, the advanced stuff encouraged them to dream and think beyond the limits, and I think most everyone left wanting to go try some of those things once they got home.

DW: Care to let Digital Web readers in on some of the ideas you’ll be discussing at the SXSW panels you’re sitting on?

DB: Well, I can’t say much. I’m not the moderator for either of the two panels covering CSS on Monday, but I obviously know the rough direction each will take.

The first panel, “Hi-Fi Design with CSS,” should focus on the design-driven stuff that attendees may not have known was possible, or how it was done, without spending hours deconstructing someone else’s markup and style sheets. That panel will be moderated by Christopher Schmitt, and will feature Dan Cederholm, Dave Shea, and myself.

The second panel immediately following, “CSS: The Good, the Bad and the Ugly,” will highlight example uses of CSS, some good, some bad, and some ugly (but sometimes necessary). This panel will be less design-driven, and more into practical uses, techniques, hacks, and even abuses we’ve seen introduced by the increasingly widespread adoption of CSS. This panel will be moderated by Tantek

Related Topics: CSS, Web Design, Web Guru