Dan Cederholm on Bulletproof Web Design, CSS3 and Dribbble

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, Inc.com, 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 (http://thornett.com). 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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

0 comments on “Dan Cederholm on Bulletproof Web Design, CSS3 and Dribbble

  1. 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 Nopun.com
    a graphic design studio

  2. 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.

  3. 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. :)

  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 just got a dribbble account today and someone got sucked into the awesomeness :P I’ll have to check out those books though, I’m always looking for advanced web books.

  6. 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.

  7. 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.