Here’s an oxymoron for you “graceful degradation.” Sounds impossible, right? But it’s great! Graceful degradation is a means of using the newest and best web technologies while maintaining support for older technologies. On every site I build, I use this principle to efficiently build high-quality sites without a ton of extra work.

The Problem

If you’ve ever heard a web designer complain about Internet Explorer (IE), their feelings arise from these facts:

• A lot of people use IE.
• Those people use many different versions of IE.
• Those versions of IE interpret certain types of website code incorrectly. ((To be clear, all browsers have problems, but Internet Explorer is the most “famous” and, likely, worst example of this problem. Microsoft does lots of other great things; just not IE6.))
• Each version has a unique set of incorrect code interpretations.

Sounds like fun, right? There are similar situations for mobile browsers on iPhones, Android phones, Windows phones, and BlackBerries. ((I know! I almost forgot about BlackBerry too!))

Back in browser land, though, other browsers like Firefox, Chrome, and Safari have kept up with the latest technologies and done a better job sticking to stricter, correct interpretations of rules.

An Example

Let’s look at rounded corners. In Firefox, Chrome, and Safari, I can make rounded corners using like this:

Before the latest version of Internet Explorer (which is not used by all IE users), I would have to:

• Create four images, one for each corner.
• Place each individually in each corner.

You can imagine which solution I like more.

Putting It In Practice

So here’s how graceful degradation works. When faced with this predicament, we web designers have two options:

• Use an old, tried and true but time consuming method like the four-image rounded corner solution.
• Use the new version code and live with unrounded corners in old browsers.

Because rounded corners are nice to have but not critical to the function of a web page, we can afford to serve up the best experience with the least effort for a majority of visitors. Then, the moment a user upgrades their browser, they get the benefit of the advantages we’ve already programmed in to the site.

In extreme cases, I explicitly encourage people to upgrade. Here’s what the header of this very site looks like in IE 7:

Here’s the full text:

I see that you’re using an older version of Internet Explorer!

This site should be functional, but it’s much more fun to use in the latest version of Internet Explorer or a new version of Firefox or Google Chrome. If you have can upgrade or change browsers, I would encourage you to do so. If not, you can still read the entire site. Enjoy!

As the message makes clear, I made sure that the website works in that browser, but you can see that the shadows around the border of the site are gone and that growing/shrinking menu animation won’t work either. Replicating those features for IE7 would have added many hours to the development process for the 1.45% of visitors using IE7.

Had I decided to make the website work identically in IE7 as the most-recent version of Firefox, I would have almost certainly included fewer features for the majority of visitors who use “modern browsers.” That doesn’t make sense.

Another Example

Featured in my portfolio, SeattleAWC.org, is a great example of this technique in practice.

In the two images below, you’ll notice some round corners, shadows, gradients, and fonts that all appear differently. The spacing is different a by a couple pixels here or there. But two things that matter most:

• Both sites are easy to use and look good.
• The website was cheaper and faster to make because those tiny differences are acceptable thanks to the practice of graceful degradation.

Internet Explorer 7

Firefox 12

Limitations

While I’ve already mentioned this in passing, I think I should make clear when to use this technique. I only have a site gracefully degrade in situations where the website is 100% usable without any change in user behavior. If the site were partially broken or even just significantly harder to use in older browsers, then that’s a problem I need to fix. While there are certainly some gray areas, any responsible applications of graceful degradation should focus on the “graceful” part.

Hey, Mark. Can you express the point of this article in just one link?

Why yes! Yes, I can: DoWebsitesNeedToLookExactlyTheSameInEveryBrowser.com. Sorry for leaving it to the end, but now you understand why, too.

Talk Back

A lot of people I explain this to are initially skeptical or uncomfortable with the idea. If that’s you, share why in the comments and we can talk about concerns, pitfalls, and advantages of graceful degradation.