What is "Graceful Degradation" in Web Design?

Mobile phone with colorful squares
The importance of mobile devices to a website's success cannot be ignored.

One of the challenges that website designers and developers have always had to deal with is the range of different web browsers that will be used to access their websites. Some of the visitors to these sites will be viewing the web pages with browsers that are very old and missing features of more modern browsers. For instance, older versions of Microsoft's Internet Explorer browser have long been a thorn in the side of many web professionals.

People who are using these antiquated web browsers often do not even know that they have outdated software or that their web browsing experience may be compromised because of their browser choice. To them, that outdated browser is simply what they have long used to access websites. From the perspective of the web developers, we want to make sure that we can still deliver a usable experience to these customers, while also creating websites that work wonderfully in the more modern, feature rich browsers and devices that are available today. Graceful degradation is a strategy of handling web page design for these different browsers.

Starting With Modern Browsers

A website design that is built to gracefully degrade is intended to be viewed first by the most modern browsers. That site is created to take advantage of the features of these modern web browsers, many of which "auto-update" to ensure that people are always using a recent version.

Website that gracefully degrade also work effectively for older browsers. When those older, less feature-rich browsers view  the site, it should degrade in a way that is still functional, but possibly with fewer features or different display visuals that people will honestly not even known they are missing.

The concept of graceful degradation is similar in many ways to another web design concept you may have heard spoken about - progressive enhancement. The main difference between the graceful degradation strategy and progressive enhancement is where you start your design. If you start with the lowest common denominator and then add features for more modern browsers for your web pages, you're using progressive enhancement. If you start with the most modern, cutting edge features, and then scale back, you're using graceful degradation. In the end, the resulting website may likely deliver the same experience whether you are using progressive enhancement or graceful degradation. Realistically, the point of either approach is to create a site that works great for modern browsers while still featuring a usable experience for older web browsers.

Graceful Degradation Doesn't Mean Telling Your Readers, "Download the Most Recent Browser"

One of the reasons many modern designers don't like the graceful degradation approach is because it often turns into a demand that readers download the most modern browser for the page to work. This is not graceful degradation. If you find yourself wanting to write "download browser X to get this feature to work", you have left the realm of graceful degradation and moved into browser-centric design.

Yes, there is undoubtedly value in helping a website visitor upgrade to a better browser, but that is often a lot to ask of them. If you really want their business, telling them to leave your site to download better software is unlikely to be the way to do it. Unless your site has key functionality that requires a certain browser version or above, forcing a download is often a deal breaker in the user experience.

A good rule of thumb is to follow the same rules for graceful degradation as you would for progressive enhancement:

  1. Write valid, standards-compliant HTML
  2. Use external style sheets for your designs and layout
  3. Use externally linked scripts for interactivity
  4. Make sure the content is accessible even to low-level browsers without CSS or JavaScript

Then go out and build the most cutting-edge design you can!

Just make sure that it degrades in less functional browsers but still works.

How Far Back Do You Need to Go?

One question that many web developers have is how far back in terms of browser versions should you support? There is no cut and dry answer to this question. It depends on the site itself. If you review a website's traffic analytics, you will see which browsers are being used to visit that site. If you see a notable percentage of people using a certain older browser, then you will likely want to support that browser or risk losing that business. If you look at your analytics and see that no one is using an older browser version, you are probably safe in making the decision not to worry about fully supporting that outdated browser and testing for it.

Original article by Jennifer Krynin. Edited on 10/20/16 by Jeremy Girard.