Progressive Enhancement and Graceful Degradation: Making a Choice

In my previous article, we discussed graceful degradation and progressive enhancement — concepts that can help rich web applications support more browsers and have a wider reach. To recap:

Graceful degradation is the practice of building an application for modern browsers while ensuring it remains functional in older browsers.
Progressive enhancement is the practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.

Good accessible web applications are likely to use a combination of both approaches. It’s possible a feature could end up at the same point no matter which practice you adopted.

Assessing Your Application’s Accessibility Requirement

Creating a web site or application for all browsers is obviously an ideal situation. However, constraints will be introduced by your schedule, budget, and feature set. You should also be aware of legal issues arising from accessibility legislation such as the US Section 508 and the UK Disability Discrimination Act. It’s advisable to plan your accessibility requirements from the start. There are a few exceptions; your application might so dependent on scripting or plugins that it makes little sense to cater for older or incompatible systems. For example, an online video editor would almost certainly need Flash, Silverlight, or a similar technology; an HTML-only version would not be viable. Many developers argue that their web site or application is browser-specific and need only support that application. For example, Mozilla add-ons

could be inaccessible to non-Firefox users. However, the site that hosts Mozilla’s add-ons directory works well in most browsers:

Mozilla are supportive of web standards; they have no reason to create a Firefox-specific site, and
a user with another browser might visit the add-ons page to find out more about Firefox. Blocking that user or providing a poor experience would not endear them to Mozilla.

To the other extreme, there are e-commerce sites such as Amazon.com. The company could lose thousands of dollars if they restricted access to any users.

Choosing Your Development Approach

In my opinion, graceful degradation attacks the problem from the wrong direction. Progressive enhancement normally offers a more logical approach:

It enables you build a stable application with solid foundations that should work on any device.
You can add further enhancements as new technologies and browsers are introduced without changing the core functionality. On the contrary, graceful degradation requires a browser support list; you might need to update the application as new browsers are introduced.
Enhancements allow the user to achieve an objective quicker or easier but they are not a prerequisite. For example, a JavaScript slider might allow a user to rapidly choose a number but that value would feed into a standard and accessible HTML input box.

There are a few exceptions when graceful degradation might be suitable:

Cosmetic issues are usually acceptable if the system remains usable. Older browsers have more limited CSS support — layouts can be different or ugly if the core functionality remains operable.
A complex visual application such as Google Maps is so dependent on JavaScript that an entirely different system has been developed for users without it. That’s not to say Google Maps couldn’t be achieved with progressive enhancement, but I suspect it was simpler and more cost-effective to create two separate applications.

In general, progressive enhancement should offer better stability and browser support. The initial development costs are higher but the application should require less long-term maintenance. Coming soon: A series of articles showing how to build a simple widget using progressive enhancement techniques. View part 1: Progressive Enhancement and Graceful Degradation: an Overview

Related reading:

Frequently Asked Questions (FAQs) on Progressive Enhancement and Graceful Degradation

What is the main difference between progressive enhancement and graceful degradation?

Progressive enhancement is a design strategy that starts with basic functionalities and then progresses to a more complex version depending on the user’s browser or device capabilities. On the other hand, graceful degradation starts with a complex version and then scales down to simpler versions if the user’s browser or device cannot support the advanced features.

Why is progressive enhancement considered a better approach than graceful degradation?

Progressive enhancement is often considered a better approach because it ensures that the basic content and functionality are accessible to all users, regardless of their browser or device capabilities. This approach prioritizes user experience and accessibility, making sure that everyone can use the basic functionalities of a website.

Can you give an example of progressive enhancement in web design?

Sure, a common example of progressive enhancement in web design is the use of CSS3 animations. These animations can enhance the user experience on browsers that support them, but they are not essential for the website to function. Therefore, if a user’s browser does not support CSS3 animations, they can still access the website’s basic content and functionality.

How does graceful degradation work in practice?

Graceful degradation works by designing a website with all the advanced features and functionalities first. Then, if a user’s browser or device cannot support these features, the website will degrade to a simpler version that still provides the basic content and functionality. This ensures that the website is still usable, even if some features are not available.

What are the benefits of using progressive enhancement and graceful degradation in web design?

The main benefit of using these strategies is that they ensure accessibility and usability. Progressive enhancement ensures that all users can access the basic content and functionality of a website, while graceful degradation ensures that a website remains usable even if some features are not supported. These strategies also help improve SEO, as search engines can easily crawl and index the basic content of a website.

Are there any drawbacks to using progressive enhancement and graceful degradation?

One potential drawback is that these strategies can require more time and effort to implement, as you need to design multiple versions of a website. However, the benefits of improved accessibility and usability often outweigh these challenges.

How can I decide whether to use progressive enhancement or graceful degradation for my website?

The choice between progressive enhancement and graceful degradation often depends on your target audience and their likely browser or device capabilities. If most of your users have modern browsers and devices, then progressive enhancement may be a good choice. However, if a significant portion of your users have older browsers or devices, then graceful degradation may be more appropriate.

Can progressive enhancement and graceful degradation be used together?

Yes, these strategies can be used together to ensure the widest possible accessibility and usability. This approach is often referred to as “responsive design,” as it allows a website to respond to different user environments.

What tools can I use to implement progressive enhancement and graceful degradation?

There are many tools available to help implement these strategies, including CSS frameworks like Bootstrap, JavaScript libraries like jQuery, and testing tools like BrowserStack.

Where can I learn more about progressive enhancement and graceful degradation?

There are many online resources available to learn more about these strategies, including web design blogs, online courses, and community forums. You can also refer to the official documentation and guidelines provided by the World Wide Web Consortium (W3C).