Progressive Enhancement and Graceful Degradation: an Overview

    Craig Buckler

    web layersIn this article, I will discuss progressive enhancement and graceful degradation — two concepts that are well known but perhaps a little misunderstood.

    The Web is Evolving

    The web is in a continual state of flux and evolves at an alarming pace. Technologies and techniques rise and fall. Today’s Safari 4 is tomorrow’s IE6. We want to use the latest advances and provide a better experience for our users.

    Unfortunately, there is no way to force browser upgrades. Companies and individuals will not necessary change their working environments because of developer demands. Many people are happy to access web pages in total ignorance of the underlying technologies or valid reasons to upgrade. OS and browser manufacturers have some influence, but web developers can only extol the benefits of newer browsers.

    Many developers argue that there is little sense supporting outdated technology. However, that attitude is unlikely to convince clients who want the largest possible audience or have users who depend on older browsers. Those users might not have system permissions, financial resources, or the technical ability to upgrade. Some users may be using specialist assistive technologies which cannot be upgraded. No one can force software or upgrades on a user: doing so would be contrary to their democratic right of choice. How would you feel if someone forcefully installed software on your PC claiming that it was for your own good?

    The web was designed to be used with any device at any location. All we know about end users is that they are using a browsing application which transmits and receives data using internet protocols. We cannot make assumptions about their setup or technical ability.

    This makes the web a hostile development environment. The applications we develop can be fragile when they are accessed by a user with an 8 year-old browser with disabled JavaScript and no plugins.

    The Need for Accessibility

    Accessibility is an important issue clouded by the perception that it’s just about political correctness, alt tags, or blind users. It’s far more. Accessibility is about supporting all users no matter what browsing technology they use.

    A website that works on a wide variety of devices, screen readers, PDAs, mobile phones, game consoles, and connection speeds will have a wider reach than one that does not.

    Graceful Degradation

    Graceful degradation is one solution. It is the practice of building a web site or application so it provides a good level of user experience in modern browsers. However, it will degrade gracefully for those using older browsers. The system may not be as pleasant or as pretty, but the basic functionality will work on older systems.

    A simple example is the use of 24-bit alpha-transparent PNGs. Those images can be displayed on modern browsers without problems. IE5.5 and IE6 would show the image, but transparency effects would fail (it can be made to work if necessary). Older browsers that do not support PNG would show alt text or an empty space.

    Developers adopting graceful degradation often specify their browser support level, e.g. level 1 browsers (best experience) and level 2 browsers (degraded experience).

    Progressive Enhancement

    Progressive enhancement is similar concept to graceful degradation but in reverse. The web site or application would establish a base-level of user experience for most browsers. More advanced functionality would then be added when a browser supports it.

    Progressive enhancement does not require us to select supported browsers or revert to table-based layouts. We choose a level of technology; i.e. the browser must support HTML 4.01 and standard page request/responses.

    Going back to our image example, we might decide that our application should be functional in all graphical browsers. We could use a lower-quality GIF images by default but replace them with 24-bit PNGs when the browser supports them.

    View the next post: Progressive Enhancement and Graceful Degradation: Making a Choice

    Related reading: