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:
- 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.
- 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.
- 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.
Comments are closed.
Front End Web Design
iOS Development with Swift
Python Web Development
Each is designed by our faculty of tech professionals to guide even a coding beginner to becoming a job-ready software developer armed with a professional portfolio of real-world projects. Try one out today with our free seven-day trial, and see if software development is for you.