Web Design & Development Guide

Progressive enhancement

Home | Up

Progressive enhancement is a label for a particular strategy of Web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies, in a layered fashion that allows everyone to access the basic content and functionality of a Web page, using any browser or Internet connection, while also enabling those with better bandwidth or more advanced browser software to experience an enhanced version of the page.

History

"Progressive Enhancement" was coined by Steven Champeon, of Web design firm hesketh.com, in a series of articles and presentations for Webmonkey and the Sxsw Interactive conference between March and June of 2003.^[1][2]

Introduction and background

The strategy is an attempt to subvert the traditional Web design strategy known as "graceful degradation", wherein designers would attempt to create Web pages for the latest browsers that would also work well in older versions of browser software. Graceful degradation was supposed to allow the page to "degrade", or remain presentable even if certain technologies assumed by the design were not present, without being jarring to the user of such older software (hence "gracefully"). In practice, graceful degradation has been supplanted by an attitude that the end user should "just upgrade". This attitude is due to time and budget constraints, limited access to testing alternate browser software, as well as the widespread belief that "browsers are free". Unfortunately, upgrading is often not possible due to IT department policies, older hardware, and other reasons. The "just upgrade" attitude also ignores deliberate end user choices and the existence of a variety of browser platforms; many of which run on handhelds or in other contexts where available bandwidth is paltry, or where support for sound or color, limited screen size, and so forth are far different from the typical graphical desktop browser.

In Progressive Enhancement (PE) the strategy is deliberately reversed: a basic markup document is created, geared towards the lowest common denominator of browser software functionality, and then the designer adds in functionality or enhancements to the presentation and behavior of the page, using modern technologies such as Cascading Style Sheets or JavaScript (or other advanced technologies, such as Flash or Java applets or SVG, etc.) All such enhancements are to be externally linked, in order to avoid forcing browsers of lesser capability to "eat" data they do not understand and cannot handle, or which would swamp their Internet connection.

The PE approach is derived from Champeon's early experience (c. 1993-4) with SGML, before working with HTML or any Web presentation languages, as well as from later experiences working with CSS to work around browser bugs. In those early SGML contexts, semantic markup was of key importance, whereas presentation was nearly always considered separately, rather than being embedded in the markup itself. This concept is variously referred to in markup circles as the rule of separation of presentation and content, separation of content and style, or of separation of semantics and presentation. As the Web evolved in the mid-nineties, but before CSS was introduced and widely supported, this cardinal rule of SGML was repeatedly violated by HTML's extenders. As a result, web designers were forced to adopt new, disruptive technologies and tags in order to remain relevant. With a nod to graceful degradation, in recognition that not everyone had the latest browser, many began to simply adopt design practices and technologies only supported in the most recent and perhaps the single previous major browser releases. For several years, much of the Web simply did not work in anything but the most recent, most popular browsers. This remained true until the rise and widespread adoption of and support for CSS, as well as many populist, grassroots educational efforts (from Eric Costello, Owen Briggs, Dave Shea, and others) showing Web designers how to use CSS for layout purposes.

PE is based on a recognition that the core assumption behind "graceful degradation"