Web Design & Development Guide
Progressive enhancement is a label for a particular strategy of
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.
"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.
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
(or other advanced technologies, such as
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" — that browsers always got faster and more powerful — was proving
itself false with the rise of handheld and
PDA devices with low-functionality browsers and serious bandwidth
constraints. In addition, the rapid evolution of HTML and related technologies
in the early days of the Web has slowed, and very old browsers have become
obsolete, freeing designers to use powerful technologies such as
First proposed as a somewhat less unwieldy catchall phrase to describe the
delicate art of "separating document structure and contents from semantics,
presentation, and behavior", and based on the then-common use of
CSS hacks to work
around rendering bugs in specific browsers, the PE strategy has taken on a life
of its own as new designers have embraced the idea and extended and revised the
Progressive Enhancement consists of the following core principles:
- all basic content should be accessible to all browsers
- all basic functionality should be accessible to all browsers
- sparse, semantic markup contains all content
- enhanced layout is provided by externally linked CSS
- enhanced behavior is provided by unobtrusive, externally linked
- end user browser preferences are respected
Support and adoption
Jim Wilkinson created a page for Progressive Enhancement Wiki to collect some
tricks and tips and to explain the overall strategy.
Designers such as Jeremy Keith have shown how the approach can be used
harmoniously with still other approaches to modern
Ajax) to provide flexible, but powerful, user experiences.
Dave Shea, have helped to spread the adoption of the term to refer to CSS-based
design strategies. Organizations such as the Web Standards Project have embraced
PE as a basis for their educational efforts. In 2006 Nate Koechley at Yahoo!
mades extensive reference to PE in his own approach to Web design and browser
support, Graded Browser Support (GBS). Steve Chipman at AOL has referred to
PE as a basis for his Web design strategy. David Artz, friend of Steve and
leader of the mighty AOL Optimization team, developed a suite of Accessible
Rendering Technologies - experiences based on these principles -
and invented a technique for disassembly of the "enhancement" on the fly, saving
the user's preference. Chris Heilmann discusses the importance of targeted
delivery of CSS so that each browser only gets the content (and enhancements) it
Many Web design agencies have begun to advertise that they provide progressive
enhancement as a core service.
Benefits for accessibility
Web pages created according to the principles of PE are by their nature more
accessible, because the strategy demands that basic content always be available,
not obstructed by commonly unsupported or easily disabled scripting.
Additionally, the sparse markup principle makes it easier for tools that read
content aloud to find that content. It is unclear as to how well PE sites work
with older tools designed to deal with table layouts, "tag soup," and the like.
Benefits for search engine optimization (SEO)
Improved results with respect to
Search Engine Optimization is another side effect of a PE-based Web design
strategy. Because the basic content is always accessible, and the markup is
clean and easily parsed for structure and intent, it becomes much easier to tune
the content to improve SEO results.
Criticism and responses
Some skeptics, such as Garret Dimon, have expressed their concern that PE is
user interface presentations or behaviors.
Jeremy Keith is to present
Hijax: Progressive Enhancement with Ajax at XTech06, suggesting that the two
are compatible. Others have countered with the point that
informational pages should be coded using PE in order to be indexed by spiders,
even Flash-heavy pages should be coded using PE. In a related area, many
have expressed their doubts concerning the principle of the separation of
content and presentation in absolute terms, pushing instead for a realistic
recognition that the two are (and
some would say should be) inextricably linked.
- Olsson, Tommy (2007) for Accessites.org
Graceful Degradation & Progressive Enhancement Retrieved April 2, 2007.
- Shea, Dave (2004)
Zen and the Art of Web Improvement (WE04 Keynote) Retrieved April 14,
- Koechley, Nate (2006)
Graded Browser Support Retrieved April 14, 2006.
- Stearns, Geoff (2006)
Using Alternate Content As Content In Flash Retrieved April 14, 2006.
- Edwards, James & Adams, Cameron (2006)
- Heilmann, Christian (2006)
Seven Accessibility Mistakes, Part I Retrieved April 14, 2006.
- Nyman, Robert (2006)
What is Accessibility? Retrieved April 14, 2006.
101 Search Engine Optimization Tips Retrieved April 14, 2006.
- van der Sluis, Bobby (2005)
- Bowman, Doug (2003)
Are They Really Separated? Retrieved April 14, 2006.
- Malicoat, Todd (2003)
Form vs. Function in Site Design Retrieved April 14, 2006.
- Footnoted references
^ Champeon, Steven (2003),
Progressive Enhancement and the Future of Web Design, Webmonkey
^ Champeon, Steven & Finck, Nick (2003)
Inclusive Web Design for the Future, SxSWi presentation
^ Wilkinson, Jim (2003),
CSS-Discuss Wiki page on Progressive Enhancement
Progressive Enhancement with AJAX
^ Nate Koechley,
Graded Browser Support
^ Steven G. Chipman,
New Skool DOM Scripting
^ Chris Heilmann,
Double Vision – Give the Browsers CSS They Can Digest
^ Dimon, Garret,
The Reality of Progressive Enhancement
Cascading Style Sheets
Fahrner Image Replacement
Techniques for creating a User Centered Design