CommunityDan Cederholm on Bulletproof Web Design, CSS3 and Dribbble


writes on November 6, 2009

Today’s entry  in our series of web design interviews is Dan Cederholm. Dan is a recognized expert in the field of standards-based web design and has worked with Google, MTV, AIGA, ESPN, Blogger, Fast Company,, and many more. He’s a renowned speaker and author and blogs about web design related topics at SimpleBits.

Editor’s Note: Dan will be hosting a full day workshop with Ethan Marcotte on “Handcrafted Bulletproof CSS” in London, UK on November 23rd, buy your ticket online now. He will also be speaking about “Progressive Enrichment” at The Future of Web Design New York on November 17. Conference day passes are still available.

You have recently published a new book? Having purchased your first two (and learnt a lot) what can I expect from the third part of the trilogy?

Yes indeed, Handcrafted CSS was published this past August. In some ways, it’s a continuation of the previous book, Bulletproof Web Design and dives right into examples that revolve around a fictional case study for a coffee company website. Ethan Marcotte contributed an absolute gem of a chapter on fluid grids as well.

There are really 3 areas of focus in this short little book: continuing the “bulletproof design” mentality (that is, accounting for varying amounts and sizes of content, planning for worst-case scenarios). Also the concept of “progressive enrichment”, which is a fancy way of talking about what advanced CSS and CSS3 properties we can use _today_, while keeping in mind browsers that don’t yet support those properties. And also the book touches on “reevaluating past methods and best practices”.

With the browser landscape changing rapidly, and with new and evolving standards being implementing by those browsers, it’s a great time to reevaluate old habits, to see if there’s an easier way to handle things with the shiny new techniques.

The timing seemed fitting to write another book, with all of this fun new stuff to play with it’s important to sort it all out, see what’s actually usable today in some circumstances.

“Progressive enrichment”, “Graceful degradation”, “Progressive enhancement” – what’s the difference?

All three are similar ways of talking about the same concepts. “Graceful degradation” is the older term, with the idea being build and/or design for the future, while later providing fallbacks for legacy systems. “Progressive enhancement” was coined by Stephen Champeon in 2003, and builds on that idea while flipping it around: build a basic system anyone can use, then “enhance” that base with bells & whistles that only modern browsers can understand.

I’ve been using a variation on Stephen’s term, “progressive _enrichment_” to specifically talk about advanced CSS and CSS3 that we can use today to boost the user experience.

It’s kind of like enriched pasta, with extra nutrients added. It’s still pasta, and take away that enrichment and you probably wouldn’t know what you’re missing. And that’s the important part: utilizing this bleeding edge stuff while keeping in mind that designs may not look or be experienced the same in every browser. And that’s OK.

Your talk a lot about the concept of “Bulletproof Web Design”. What are the three quickest wins to ensuring a “bulletproof” site?

I have a knack for inventing unnecessary terms and phrases, don’t I? 🙂

Here are 3 ways to help bulletproof a design. All are simple things to keep in mind while building websites:

  1. Use the text sizing controls in the browser to test a site’s integrity. Do design elements break apart? Can that block of text handle 3 paragraphs instead of 1? We’re not only testing the site for low-vision users, but we’re getting an instant barometer on just how flexible your design is. A design that can bend to the rigors of editing, content shuffling, internationalization, etc. is going to be a more robust system.
  2. Turn images off. Check your design with images turned off to see if things are still readable. Slow loading images, or folks with slow modem or cellphone connections will still be able to read your site. Specify background color equivalents to any background images you’re using.
  3. Check your design with stylesheets off. Is the raw markup style understandable? Can you get a sense of the hierarchy of the page? I call it the 10-second usability test. Not a true measure – but one that’s quick and easy to add to your workflow. Ensuring the page is organized and readable in the absence of CSS will help (in sometimes small ways) the accessibility of the site in other devices and assistive software. Pay attention to markup and you’ll get these benefits for free.

The word on the street is that you are working on a new site/app called “Dribbble”. Can you tell us more about it?

Yeah! I’m building Dribbble with my friend, Rich Thornett ( Essentially, it’s a community for sharing small (400×300 max) screenshots of your work. By giving creative folks a forum to hang out and talk about design and process and getting a sneak peek at something before it’s live or bouncing ideas off your peers.

We’ve had about 50 people in a private beta over the last several months and the results have been fascinating. Getting to look over the shoulder of your friends and colleagues to see (and comment on) in-progress work has been extremely valuable – and we think it’ll be even more fun when things are opened up a bit more.

We’ll be giving more invites out soon, in small batches to keep tabs on scaling, listening to feedback and making changes. We’re not in a hurry, and are more concerned about maintaining the amazing quality of the “shots” that have been dribbbled in the beta thus far. Much more on this in the coming months!

What is the Future of Web Design?

The future of web design is content. It’s what’ll drive design and user experience going forward. We can’t predict, but can attempt to predict, what people will be consuming, what people will be creating, or talking about or interested in in the future – but I’ll bet whatever it is will be the catalyst for design.

So much of web design thus far has been about recreating familiar concepts for the screen. What’ll be really exciting is seeing ideas that embrace the web as its own unique medium. And that’s where you’ll see the most progressive web design.

More specifically, the future of web design is about being able to use tools that make our jobs easier. Freeing us up to worry about more important things. Progressive enrichment/enhancement is an important part of that for the modern web builder.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

14 Responses to “Dan Cederholm on Bulletproof Web Design, CSS3 and Dribbble”

  1. nomadone on November 6, 2010 at 3:43 pm said:

    3 nice and simple common sense steps but good to be reminded about checking these, we so easily forget to test things in these ways.

    I have 1 comment about the body font used on this page, really nice font but somehow even when I zoom it hurts my eyes. Have to focus just a little bit harder to read everything clearly. The font for this comment as I’m typing it, though less elegant is way way easier to read.

  2. Dream Media Web Design on October 4, 2010 at 1:20 pm said:

    We run a free web design lesson for local business owners and we took a look through this post and a lot of my students found it very useful and a real eye opener!
    Thanks for sharing.

  3. I just got a dribbble account today and someone got sucked into the awesomeness 😛 I’ll have to check out those books though, I’m always looking for advanced web books.

  4. Some web sites which are being hosted by cheap web site host providers are usually prone to down time. A reflection on the kind of services which cheap web hosting plans are known about. But, then again, this does not apply to all; there are still some cheap web hosting out there that are mindful to their clients’ needs and concerns. One should also see in a wider perspective that if your server frequently crashes down, there is a tendency to lose your clients.

  5. I’ve been praying for something like Dribble. Can’t wait for it to be available to us mere mortals. Great read and great mini “bulletproof” checklist. 🙂

  6. having problem in IE sometimes does not work the exact web design.
    self esteem unlocked

  7. I like wordpress. site is a wordpress design also.
    yourself esteem unlocked

  8. Web design in wordpress is cool also.
    london hypnotherapist

  9. The article can provide more info about the ebooks.
    hypnotherapy in maidstone

  10. I need to gather more info about the ebooks?
    how to be a therapist

  11. Most business owners try to invest the minimum amount that will help them to get a business name and display their services or products to the customers as quickly as possible. For an initial start up, a cheap web design can help you the best, without having to sacrifice on the quality of work required.

  12. I really have to check out these books. I’ve had many problems with browser compatibility lately.

    IE 6 is just killing me. 7 isn’t much better.

  13. Thanks for sharing this interview, I can’t wait to check out the three books.

    I am excited to see what the future brings with website design especially as css grows and grows. I also agree that the future of website design is content!. I think we are past the “wow” factor of how a website looks, and people are looking for more content or way to connect with the experience instead of just being impressed by it…

    Thanks and Regards

    Noel for
    a graphic design studio

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop