Progressive Enhancement and Graceful Degradation: Making a Choice

Key Takeaways

• Progressive enhancement and graceful degradation are two approaches to web application development that ensure compatibility across different browsers. Progressive enhancement builds from a base level of user experience, adding enhancements when a browser supports it, while graceful degradation starts with a fully-featured application that remains functional in older browsers.
• The choice between these two approaches often depends on the target audience, budget, schedule, and the specific features of the application. While progressive enhancement usually offers better stability and browser support, there are cases where graceful degradation might be more suitable, such as applications heavily reliant on scripting or plugins.
• Both strategies can be used together for the widest possible accessibility and usability, often referred to as “responsive design.” Despite the initial development costs, these approaches can improve SEO, ensure legal compliance with accessibility legislation, and reduce long-term maintenance needs.

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:

1. Mozilla are supportive of web standards; they have no reason to create a Firefox-specific site, and
2. 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:

• 5 Reasons Why You Should Not Publish Supported Browser Lists
• Microsoft Office Online: a Case Against Supported Browser Lists
• Who’s Using ARIA?

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