What Is Graceful Degradation?

Date First Published: 18th February 2023

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty Level: 6/10

Learn more about what graceful degradation is in this article.

Graceful degradation is an approach to web design that involves building a website so that it provides the best level of user experience and functionality on the latest web browsers and fast internet connections and is then designed to work well in older versions and technologies. The main aim of graceful degradation is to allow a page to "degrade", which means that it can stay compatible and useable even if specific technologies required by the design are not present. This means that the design will gracefully degrade to a lower level of user experience and functionality in older web browsers, devices, and slower internet connections.

Note:

Even though the lower level of user experience is not as useful for website visitors, it still provides them with the user experience and functionality that they were expecting and things do not malfunction for them.

How Is Graceful Degradation Implemented?

The first step of implementing graceful degradation is to determine which outdated browsers, devices, and internet connections should be supported. The aim of graceful degradation is to develop a useable version that will work well, not provide the best possible experience and functionality for users with older browsers, devices, and internet connections. Developers that implement graceful degradation often specify their browser support level (e.g. level 1 browsers: best experience and level 2 browsers: degraded experience).

Then, the functionality of each page is developed for the most modern devices and browsers. Different browser and device versions are used to test which CSS elements and functionality can be removed without losing usability. Text or image alternatives often have to be provided for content generated by scripts. It is also important to ensure that the site can be used with solely text-based web browsers.

Examples Of The Graceful Degradation Approach

An example of the graceful degradation approach is mobile optimisation. At first, the desktop version of a website is developed that provides the best level of user experience and the full functionality. The functionality and design are then adapted so that they can work on mobile devices. The functionality on mobile devices will not be as good as the functionality on desktop computers, but it is designed to stay compatible and useable.

Another example is when using PNG files. Those images can be displayed on modern browsers without any issues, but older browsers may not support them. Instead, alt text can be shown.

Difference Between Graceful Degradation and Progressive Enhancement

Progressive enhancement is the opposite approach to graceful degradation. When using the progressive enhancement approach, developers start by establishing a basic level of functionality and user experience that browsers and internet connections will be able to handle, but more advanced and enhanced functionality that modern browsers and internet connections can handle will automatically be available. Some developers view progressive enhancement as a better approach as it starts with the basics and gradually adds enhancements instead of degrading gracefully to a lower level of functionality and experience.

In other words, graceful degradation starts from the most complex design and functionality and tries to stay compatible when older versions of browsers or slower internet connections are used and progressive enhancement starts from a very basic functionality and user experience that works and can be extended to be more complex if the browser and internet connection supports it. Graceful degradation degrades/downgrades the enhanced version, and progressive enhancement enhances the very basic version, as suggested in the words.

Comments