Even One Word

The Blog of Nathan St. Pierre


Graceful Degradation or Progressive Enhancement? Friday, February 26, 2010

The HTML5 Spec is trudging slowly (yet inevitably) closer to completion, and CSS Level Three is being picked up by Mozilla at a rate almost equal to their Webkit equivalents. What does this mean for those of us who make a living building websites?

Simply put, we’re not all getting the same internet. As argued by the anonymous and yet ingenious Do Websites Need to Look Exactly the Same in Every Brower.com, different browsers will provide a different appearance of the same overall content and presentation. So we have essentially three choices.

  1. Screw the new features and stick with what we know will work across the board.
  2. Use the new features and ignore the old browsers, people on IE will just have to deal.
  3. Make a site that works on both new and old browsers, but provides a different experience for each

So Where Does That Leave Us?

A majority of the web is moving towards option number 3. This honestly makes a lot of sense, as CSS 3.0 may be delayed even further, and IE9 may just decide to only support a small margin of the features. HTML5, for that matter, might take another decade to be fully supported by any one browser, let alone all of the market share. So now the question becomes the following: do we design for older browsers and then add neat features that are supported by the newer browsers, or do we design for newer browsers and then let an “acceptable” level of compatibility fall to the older browsers?

This defines the current argument of the web community, and there are official terms for each side. A degradable design is one that has fallback features for older browsers, but is truly optimized for newer and more standards compliant ones. A progressively enhanced design is one that is built with the less standards-compliant browsers in mind, and then steadily adds non-essential components for newer browsers.

In My Opinion, The Argument Is Perhaps A Bit Premature.

As a musician and sound engineer of some years of experience, I was constantly asked to “mix for headphones” or “master this so it sounds good in the car.” Just like most musicians who have pulled a majority of their hair out in the vain attempt for the “perfect mix,” I can tell you with some level of authority (and with a hairline to prove it) that this holy grail does not exist.

That’s not to say we can’t strive to achieve it, but one way or the other, our product is going to inevitably be slightly different on some viewing platforms. Is this the end of the world? To quote my earlier resource… NO!

So What Do We Do?

For now, the internet is creeping towards a new standard, and it has (widely accepted) old standards upon which to fall back. I say that as of today (February 22, 2010), if your target audience is the majority of the internet (something like 62% of the market share), design your sites to be html 4.01 and xhtml 1.0 compliant, and use as much CSS Level 2 as possible. This doesn’t mean be lazy, or slack on the layout and semantic value of your content. it means simply do your best to make a decent, accessible website. Then, you can add text shadows, gradients, rgba colors, whatever you like to your stylesheets so that more technically savvy users are rewarded with a slightly “improved” look. Think of it as making your site accessible to people who haven’t upgraded. Treat IE6 like a screen-reader. If people can see it, and it makes sense, it’s good enough.

That being said, if you’re someone who only plans to impress the users who are on the latest version of their Gecko, Webkit, or Opera-powered browser, go full hog as soon as possible with the new features. The sooner we push the browser manufacturers and users, the sooner they’ll be forced to adopt the latest technology. Besides that, if you end up learning all of the advanced functionality of the new web technology a month late, you’ll be a year behind the curve in developing it.

So Wait, You’re Saying Both Sides Of The Argument Are Right?

Like anything else, I think this argument needs a healthy dose of perspective. Who are your clients? Who is their target audience? Who are you trying to impress?

If you don’t know the answers to these questions, find out as soon as possible! This is your due diligence as a digital marketer. If you’re hiring an interactive agency to do this for you, get this information to them as soon as possible. Give them your branding guides, your technical requirements, and any documentation that you have lying around immediately. Then, you can decide together whether your site should degrade gracefully across the spectrum of technology, or whether it should be enhanced progressively in order to provide the highest level of accessibility.