Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (Paperback)
by Dan Cederholm

I picked this book up at the WebVisions conference after attending a session of the same name that Dan Cederholm gave. My original intent was just to see Cederholm in action. He is one of the current “rock stars” of web design, at least among the web standards crowd.

When I was listening to his talk I was thinking that this is so obvious, maybe I was wasting my time. It was only later that I realized that it was only obvious because Dan is such a good presenter and made his concepts logical and easy to understand.

What is “Bulletproof Web Design”? Mostly it is a set of best practices that help make sites work under less than ideal conditions. Consider, what happens if your site visitor has images or JavaScript turned off? Perhaps the visitor has an older computer running an old browser. What happens if your style sheet fails to load?

Here’s a quick experiment. Right now push the command (Apple) and + keys. The text all got bigger, right? Hit the command and – keys and it gets smaller. This page looks alright if you only increase or decrease the size once, but if you up the size twice, the top navigation bar starts to look a little bad. Do it three or more times and gets pretty awful. Even though my template validates as XHTML Strict, and most of my content is structured symantically, it is not totally bulletproof. I failed to account for the effects of text resizing when I designed the nav bar. A bulletproof design would have considered this possibility and designed the page so it would still look okay even when not view the way I designed it.

As my middle-aged eyes now require me to use reading glasses for normal sized text, I will often increase the font size on a page instead of reach for the glasses. I’m not alone in that. And that’s just one example of how a page could be designed to cover contingencies.

I took the first few steps toward bulletproofing the design. The code validates. Content and design are separate, The site works with CSS and images turned off, but I failed to take the next step from standard best practices to bulletproofing. I placed an unresizable background behind resizable text.

So, a bulletproof site is one that is well coded, structured and takes into account a reasonable range of non-standard viewing possibilities. It has some breathing room and considers possible “what happens if?” scenarios. In my case I could have designed the page with a larger background image behind the nav bar that would have given the appearance of stretching to contain the text of the links.

Other cases consider what happens if the content changes, text or images? What happens if images and/or Flash, JavaScript are turned off. Is the site still usable and if it’s usable, does it still look good? How does the page look in a new, very wide screen? How does it look on an old small screen, or even a cell phone?

Creating bulletproof sites requires both thought and knowledge HTML and CSS, so is not going to make much impact on the pure “design it so it looks good and to hell with the visitor if she doesn’t like my way crowd”. And those who don’t want to take the time to learn the craft won’t even know that bulletproof design is possible or why it is needed.

The book is excellent, well written, clear and lays out the concepts in a step-by-step manner that makes the concepts easy to grasp. If you have a decent understanding of HTML and CSS and want to take your designs to the next level, get a copy. To quote John Alsop of The Dao of Webdesign:

“The journey begins by letting go of control and becoming flexible”

_Bulletproof Web Design_ will make you a more flexible web designer.

Possibly related:

This entry was posted on Saturday, August 5th, 2006 at 2:57 pm and is filed under Best Practices, Book Reviews. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.