What Is 'Graceful Degradation' in Web Design?

How it differs from progressive enhancement

The web design industry is always changing, in part because web browsers and devices are always changing. Since the work that we do as web designers and developers is viewed through a web browser of some kind, our work will always have a symbiotic relationship with that software.

Changes to Web Browsers

One of the challenges that website designers and developers have always had to deal with is not only changes to web browsers, but also the range of different web browsers that will be used to access their websites. It would be great if all visitors to a site were sure to be using the latest and greatest software, but that has never been the case (and it likely never will be).

Some of the visitors to your 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. Even though the company has dropped support for some of their oldest browsers, there are still people out there who will be using them, people you may want to do business with and communicate with.

Definition of 'Graceful Degradation'

The reality is that 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 software 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 a variety of different browsers, both old and new.

Starting With Modern Browsers

A website design that is built to gracefully degrade is designed first with modern browsers in mind. 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. Websites that gracefully degrade also work effectively for older browsers, however. 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. While this concept of delivering a less functional or not as nice looking site may strike you as odd, the truth is that people will not even know they are missing. They will not be comparing the site that they are seeing against the "better version," so as long as the site works for what they need and does not appear to be broken, either functionally or visually, you will be in good shape.

Progressive Enhancement

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 and the customers who continue to use them.

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 (remember, many people do not understand about downloading new browsers, and your demand that they do so may simply scare them away). 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 and it should be avoided.

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

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

With this process in mind, you can then go out and build the most cutting-edge design you can! Just make sure that it degrades in less functional browsers while still working.

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 website 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. So the real answer to the question of how far back your site needs to support is: "however far back your analytics tell you your customers are using."

mla apa chicago
Your Citation
Kyrnin, Jennifer. "What Is 'Graceful Degradation' in Web Design?" ThoughtCo, Oct. 11, 2021, thoughtco.com/graceful-degradation-in-web-design-3470672. Kyrnin, Jennifer. (2021, October 11). What Is 'Graceful Degradation' in Web Design? Retrieved from https://www.thoughtco.com/graceful-degradation-in-web-design-3470672 Kyrnin, Jennifer. "What Is 'Graceful Degradation' in Web Design?" ThoughtCo. https://www.thoughtco.com/graceful-degradation-in-web-design-3470672 (accessed June 6, 2023).