Progressive Enhancement, Graceful Degradation and Responsive Web Design

Making best use of space and content

Delivering content and functionality over the web needs to anticipate users having a wide range of devices, with a variety of screen‐sizes, orientations and pixel densities. Two concepts can assist the development process to concentrate efforts in this regard.

Responding to content priority

Responsive Web Design (RWD) employs the CSS3 Media Query capability to customise web content (resize/hide) to make best use of the device’s capability. A widely‐used tool for providing this feature is the Twitter Bootstrap (http://getbootstrap.com/) framework that combines JavaScript and CSS libraries for use within the web browser. Vital to using this tool is the provision of responsive designs that identify what content is (and what is not) to be shown, where and how, at a number of the supported screen‐size ranges. This will inform the application of Bootstrap/CSS3 MQ so the more appropriate content is presented. Older web browsers, such as IE8, that do not fully support CSS3 can call on Scott Jehl’s polyfill Respond.JS.

Progressive and Graceful

Progressive Enhancement (PE) is the process of designing/developing software (including web applications and web content) from a minimal acceptable offering (MAO) starting point and building up through a series of embellishments. The enhancements progress to produce the best possible offering that will require the greatest level of support by the system (device). This is comparable but not entirely analogous to building on the Minimal Viable Product (MVP) as that relates more to the range of functionality an application provides an end‐user community.

Almost counter to PE is the concept of Graceful Degradation (GD), which commences from the point of the MAO but attempts to accommodate users that are unable to interact with the system even at this reduced level of functionality. The GD approach attempts to replace features with simpler/fall‐back alternatives in order to deliver the best possible range of features for all users.

Other, side-, effects of adopting PE include:

  • Cross-browser testing can be simplified because the MAO is less likely to engage advanced features that browsers have yet to support.
  • Accessibility testing can be simplified and it can be easier to demonstrate (WGAC) conformance as the MAO should deliver all the required content on more restrictive browsers (such as screen readers).

 Further reading


Return to Articles

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s