Solaera Web Design -- Maryland Web Design for Small Businesses

So apparently this is my new “Reviews of Things Google Has Made Recently” series, but it’s a topic that I’ve seen bandied about here and there and I’d like to take a crack at it, in the spirit of “You learn by paying attention to how others approach problems.” (Read more…)

With HTML5 and CSS3 both starting to poke their heads out, there’s been a lot of talk lately about the phrases “graceful degradation” and “progressive enhancement.” Depending on who you talk to, these concepts can be thought of as mortal enemies or partners in the constant effort to deal with the varying abilities of the browsers currently out on the market.

I’ll be honest, I sometimes have some difficulty getting my head around the difference between the two ideas, so it kind of surprises me that they are often referred to as conflicting policies.

Graceful degradation is a “top-down” approach — the designer creates their site with as much tricked-out JQuery and CSS3 and HTML5 as they want, and then works backwards to fix all the things that don’t work in older browsers (I’ll pause for a moment while everyone remembers two-o’clock-in-the-morning IE6 scream sessions). The idea is that people with older browsers may see things slightly differently but will generally have the same experience.

Progressive enhancement, conversely, is a “bottom-up” approach. Progressively enhanced sites start with a clearly delineated HTML framework designed to be viewable and comprehensible in all browsers, even those with JavaScript or CSS disabled. While it’s been a long time since I thought about the web *without* CSS involved — and looking at my own sites with CSS disabled always gives me a pang of sadness — it’s still something that needs to be taken into account, and this ensures that the information is still accessible. Once that has been taken care of, the site is then tricked out with further behavioral and stylistic additions which are viewable by those browsers which support them, but do not interfere with the information for those which do not. Progressive enhancement ensures that all of the important information which the site contains will still get across, but that the user experience may be highly different depending on how recent their browser is.

Generally (or at least in what I’ve read on the subject) these are presented as opposing viewpoints (see A List Apart’s excellent article on the subject), but the fact is I’d imagine most developers end up doing a combination of both in actual practice. For my own part, the “content-first” mantra of progressive enhancement seems to be almost common-sense; the purpose of web design is, after all, in the long run, to get across a message, and all the art and magpie-shiny we can stick in is really just window dressing.

However, once we have progressively enhanced the site up, we often find that we have to work backwards to ensure that even if older browsers look *different*, they still look *good* (for a given value of “good,” of course — chances are you will not be equally satisfied with all browsers no matter how hard you work, just by virtue of their different display capabilities). Even someone overtly committed to progressive enhancement will still end up following this latter path in the end, at least to some small degree.

I would say there’s no loss involved in taking the best from both outlooks on design; the emphasis on content which is at the heart both of progressive enhancement and web design as a whole, and the determination to provide a usable experience for all which seems to be at the heart of graceful degradation.