Progressive enhancements or graceful degradation. Which are you?

There has never been a wider gap when it comes to how a browser renders a page. Some mobiles/tablets can’t view flash, some browsers can’t see HTML5 and CSS3 and in-built scripting on the thousands of devices out there can be flaky.

While the Progressive enhancement and graceful degradation sound like one and the same thing they are actually quite different. This article is being created for discussions on both. Let me try to explain the difference…

Graceful degradation

Graceful degradation is the Granddad of the two methods and comes from a more visual frame of mind. This method is generally used by people who create the flashy site first and then degrade for older browsers.

Benefit:
This method benefits the “Design by committee” projects where a number of people have a say on the look on feel. By creating the site as it will look you stop the constant change requests. With so many in the decision making process it is more useful to have the final designs signed off by all and then degrade gracefully for older browsers.  Those browsers which can’t support the advanced parts on the page will still be able to see the basics.

Progressive Enhancement

The Progressive Enhancement method is where you start with a basic design and add enhancements for newer browsers.

Benefits
This allows you to create the general theme or even just a shell. You let the client agree with the position of the blocks; the general colour schemes etc and then enhance the experience for those with CSS3, HTML, JavaScript and other cool stuff.

Some examples of this could be:

• Default font for old bowsers but cufon or a font API (like Google’s) for those who can support it.
• A static splash image for old browsers and a flash animation overlaying it for supporting browsers.
• A static div box for older browsers but a curved, shadowed, animated box for CSS3 browsers

Progressive enhancement when it comes to JavaScript is becoming more common and is often called unobtrusive JavaScript. An unobtrusive script is silently ignored by user agents that do not support it, but is applied by more capable devices. Just like an external style sheet.

When you first think of them they sound like the same thing but when you sit down and really think about them you find each approach is vastly different.

Why bother with either?

Now this is the question which fascinates me the most. There are plenty of front-end designers who wouldn’t bother with either. They are happy to create pixel perfect, exact matching pages across all browsers. Some do this because of constraints by the business but many do so because they haven’t embraced the advances in techniques over the years.

I’m going to go out on a limb and probably offend a number of people because I’m going to say those who don’t bother with either option are wrong. The benefits of doing designs this way are many but include:

• Less bandwidth as you need  less or no images to create the same thing
• Less load-time because of the above
• Better tablet/mobile support
• More solid future-proofing

I know front-end designer who are still using tables to design and haven’t touched CSS2 let alone CSS3/HTML5/JavaScript libraries. No designer should still be using techniques from the 90’s. By adopting either approach with the latest advances you can really push the limits of your designs while still allowing ten year browsers to view a working version of the page.

Are you a progressive, a degrader or none of the above?

Until recently I have pretty much exclusively used graceful degradation. I have been itching to use HTML5 and CSS3 on commercial projects to progressively enhance the pages and now with IE9 out in the mainstream I am working on my first fully fledged HTML5 and CSS3 driven client website (going live soon and I’ll post the URL on here once done). It looks great in older browsers and functions exactly the same way. But now I’ve included styling via CSS3 and used HTML5 for layout to further boost the design and to really make an impression on tablet and mobile devices.

Have you ever used either and do you think one or both help you in your work?