Dan Cederholm

In: Interviews

By Ethan Marcotte

Published on September 5, 2005

Digital Web Magazine: Mr. Cederholm, thanks very much for joining us. Pull up a chair, if you would.

Dan Cederholm: Why thanks, don’t mind if I do.

Pours (tall) glass of red wine.

DW: We understand that this book is about being “bulletproof,” and has something to do with design—other than that, we’re pretty much clueless. Care to tell us what it’s all about?

DC: Gladly. The book’s subtitle is a tad more descriptive: “Improving flexibility and preparing for worst-case scenarios with XHTML and CSS.” What does that mean exactly? Well, it means that the focus is on utilizing Web standards to make designs as flexible as possible. Flexibility from a content perspective (size and amount), as well as flexibility in terms of environment (e.g., without CSS or sans images), and development (lean, easy-to-read markup). So, with the term “bulletproof,” I’m referring to the protection we can apply to our compelling designs.

The goal is simply to get people thinking more about “What happens if…?” What happens if a low-vision user bumps the text size up a notch or two? What happens when there are three sentences in this box, rather than the two that were originally planned? Or what happens when images or CSS aren’t present? Can this specific design requirement handle each situation? It’s important to ask these types of questions, and makes for pages with more integrity—adaptable to a wider variety of situations.

There are also lots of pretty pictures. And paper.

DW: So how is the book structured?

DC: Each of the book’s nine chapters acts as a guideline for helping designers visualize how “bulletproofness” can be applied to existing components from the Web. I start by showing an “unbulletproof” concept, deconstruct it, then rebuild with lean markup and CSS, noting its improved flexibility along the way. The rebuilding portion of each chapter is a step-by-step walkthrough of that specific design challenge. So, think of it like, “This is how Dan would rebuild this thing with flexibility and Web standards in mind.”

I based each chapter’s example on a component from a real-world Web site. When the lawyers didn’t mind, I used the example as is. When they did mind, I created a fictitious version based on the original.

In the end, the nine chapters read like a series of checklist points to consider when building something on your own. And in the final chapter I tie all of those points together into a cohesive template example.

DW: What is it about this extra level of being bulletproof that makes it worthwhile? My designs look great when I build and test them—isn’t that enough?

DC: Unfortunately, on the surface, it often does appear that it’s enough. And that’s one of the reasons I wanted to cover these topics in a book. Bulletproof techniques have been circulating the Web for a while now, piggybacked on the latest CSS tips and tricks—but I thought it was important to group this approach into a single place, pointing some attention at how simple it can be to fold bulletproof methods into your daily work.

I also stress at the beginning of the book that being bulletproof isn’t necessarily an all-or-nothing way of thinking. It’s merely another set of steps you can take when designing for the Web. Like most Web design tips, being bulletproof is of the “use when you can, or at least know as much about the consequences when you can’t” sort of thing.

DW: Crazy. So where’d you cook up the idea for the book? Who should read it?

DC: Late last summer (of 2004) I was sipping a beer in the backyard, deciding “What’s next?” My first book, Web Standards Solutions had only been out a month or so, and while I didn’t want to write another book for the sake of writing another book, the idea of “bulletproof” as a way of describing flexibility in Web design was one that I started to play around with. After a few weeks, the idea for a book on the subject started forming, and it took off from there.

It was around this time that CSS techniques were exploding (not literally). People were (and are, of course) constantly coming up with new ways to utilize CSS to achieve the same results that table-based designs had for years. But we could go a step further, and ensure that these CSS-based designs not only replaced their bloated-table counterparts, but that they also took into account user control, varying content amounts and multiple environments.

There are a few articles that were instrumental in inspiring the bulletproof concept. If you haven’t read them, then you must.

• CSS Design: Size Matters by Todd Fahrner
• How to size text using ems by Richard Rutter
• Sliding Doors of CSS by Douglas Bowman
• A Dao of Web Design by John Allsopp

These articles (and many more) have a common thread, in that they promote or give the ability for more user control, embracing the Web as a unique medium where things may not appear the same everywhere on every device. This is really helpful stuff to keep in mind. And I think it’ll become even more helpful as time goes on, and more devices (such as handhelds) are introduced and adopted.

DW: Your idea of the “/files/includes/10.css-second usability test” is so good, it makes me hate myself for not thinking it up first. Care to say a bit more about that?

DC: Why, thanks. While building CSS-based designs, I make a habit of checking in on how things appear unstyled, giving me a quick x-ray of the document: its structure, how it may display in devices where CSS is unsupported, and to what extent I’ve managed to separate presentation from core structure. It’s certainly not a scientific measurement of true usability—but it can be a quick-and-easy tool to help you get a sense of how your bulletproofing is progressing. And the idea here is to get people thinking about how markup structure can affect the usability of a site. CSS will make this structure beautiful (debatably at times) but does the markup itself convey the correct meaning to the content at hand? Looking at a design without CSS is just one small way to help answer that question.

It’s worth noting that when we’re viewing an unstyled document in a Web browser, we’re actually seeing the brower’s own internal stylesheet at work. Headings appear a certain size by /files/includes/default.css, paragraphs have a certain amount of space between them, etc. But in general, few people adjust the browser’s /files/includes/default.css stylesheet, therefore viewing a design unstyled in a browser is a reasonable method.

DW: So, looking outside the actual development process, what are some steps you take during early stages of the design process to bulletproof your design?

DC: I think keeping the various scenarios in the back of your head while designing is part of it. Asking the “What if…?” questions repeatedly. Validation is also key. Validating your markup and CSS early and often can avoid wasting time later on. Applying the /files/includes/10.css-second usability test to check document structure, unscientifically but simply. OK, I’ll stop there, and point you all to the book for the rest.

DW: Now here’s one for the design jihadi. The penultimate chapter of your book is titled “Fluid Layouts.” Why cover a contentious topic like fluid layouts? Am I a Bad Person™ if I build a fixed-width design?

DC: Great question. It was only natural to have a chapter covering fluid layouts in a book about flexible Web design. But that said, every site is different, every project unique, with its own requirements. If a fluid layout is possible, agreeable and achievable given all the criteria, then there are benefits to be had by the reader.

I believe I refer to fluid layouts as “another tool for the bulletproof arsenal.” That tool can be tricky—far trickier than fixed-width layouts (equal-height columns, padding, etc.). So, knowing how to implement them comfortably can only help your decision on whether or not to use a flexible layout. And I think the more resources on fluid layouts out there, the better. Let’s make sure the option is there, if the design and ability calls for it.

So, you’re certainly not a Bad Person™ if you build a fixed-width design. Just a terribly awful one. Kidding. No, I’m not.

(Yes, I am.)

DW: Speaking more generally, where do you get your design inspiration? Inquiring minds, and all that.

DC: Oh, probably just about everywhere. Early on, I was fascinated with music packaging: CDs, album covers, 7″ records, etc. I suppose my music obsession fueled a design itch before I really even designed anything myself. The same could be said about packaging in general: Ice cream containers, potato chip bags, sneaker boxes, etc. But lately, it’s been typography—something I’m paying closer attention to. The history of type is intriguing, and it’s amazing how the smallest details can mean all of the difference in good design. So lately, I’ve been just paying closer attention to type anywhere and everywhere. It’s fun. We are, of course, limited in terms of typography on the Web, but that’s perhaps all the more reason to give it extra attention: doing more with less.

DW: The Internet knows you to be a hardcore fan of the Pixies. As someone who’s struggled to get into their music, may I ask what it is about them that rocks for you?

DC: Mmm. Pixies. Surely one of my favorite bands, going back a long time—and a band that wasn’t entirely embraced when they were releasing albums in the late 80s/early 90s. But their influence on independent rock has always been there.

Why do I like them? They’re one of those bands where each member has a unique style, yet together, they’re creating someting so cohesive. Joey Santiago’s guitar style was a big influence on me, in my former music-playing days, and their album artwork (and just about anything that their label 4AD produced) was always inspiring as well.Their songs can be bombastic, frantic, melodic, creepy, and weird. Sometimes all at once. I guess it’s the diversity. That and Kim Deal’s voice. My only criticism is the way Dave Lovering using only the tip of the drumstick to strike the head, rather than slamming the whole thing simultaneously into the rim, creating a good—wait, this is an interview about Web design, right?

DW: Any other bands that you have in heavy rotation?

DC: Recently shuffled: Tegan & Sara, New Pornographers, and Spoon. But I’ve also settled into a stretch of 90s rock lately with Sebadoh, Superchunk, Uncle Tupelo, June of 44, and Low. Call it nostalgic, or a need for updated tunes.

DW: So what’s next for you, Dan? Got any cool SimpleProjects on the horizon?

DC: What’s next? I’ll always be creating something. Whether it be a Web site, a t-shirt, a book, or an icon. It’s truly what gets me up in the morning, and I feel fortunate to be able to do it every day. There’s also something else coming soon that’ll get me up even earlier in the morning. And it’ll be the biggest project of them all: either a boy or a girl, and my wife Kerry and I couldn’t be more excited. Expect a late January launch ;-).

DW: Mr. Cederholm, many thanks. Don’t stop the rock.

DC: Thanks very much—it was my pleasure. And I wouldn’t dream of stopping the rock.

Related Topics: