Progressive enhancement is a strategy for web design that emphasizes core webpage content first. This strategy then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content as the end-user's browser/internet connection allow. The proposed benefits of this strategy are that it allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.
"Progressive Enhancement" was coined by Steven Champeon & Nick Finck at the SXSW Interactive conference on March 11, 2003 in Austin, and through a series of articles for Webmonkey which were published between March and June 2003.
Specific Cascading Style Sheets (CSS) techniques pertaining to flexibility of the page layout accommodating different screen resolutions is the concept associated with responsive web design approach. .net Magazine chose Progressive Enhancement as #1 on its list of Top Web Design Trends for 2012 (responsive design was #2). Google has encouraged the adoption of progressive enhancement to help "our systems (and a wider range of browsers) see usable content and basic functionality when certain web design features are not yet supported".
Introduction and background
The strategy is an evolution of a previous web design strategy known as graceful degradation, wherein designers would 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.
The progressive enhancement approach is derived from Champeon's early experience (c. 1993-4) with Standard Generalized Markup Language (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.
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 progressive enhancement strategy has taken on a life of its own as new designers have embraced the idea and extended and revised the approach.
The progressive enhancement strategy consists of the following core principles:
- Basic content should be accessible to all web browsers
- Basic functionality should be accessible to all web browsers
- Sparse, semantic markup contains all content
- Enhanced layout is provided by externally linked CSS
- End-user web browser preferences are respected
Support and adoption
- In August 2003 Jim Wilkinson created a progressive enhancement wiki page 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 web design (such as Ajax) to provide flexible, but powerful, user experiences.
- Others, including 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 (WaSP), which was behind the creation of Acid2 and Acid3 tests, have embraced progressive enhancement as a basis for their educational efforts.
- In 2006 Nate Koechley at Yahoo! made extensive reference to progressive enhancement in his own approach to Web design and browser support, Graded Browser Support (GBS).
- Steve Chipman at AOL has referred to progressive enhancement (by DOM scripting) as a basis for his Web design strategy.
- David Artz, leader of the AOL Optimization team, developed a suite of Accessible Rendering Technologies, and invented a technique for disassembly of the "enhancement" on the fly, saving the user's preference.
- Chris Heilmann discussed the importance of targeted delivery of CSS so that each browser only gets the content (and enhancements) it can handle.
- Scott Jehl of Filament Group proposed a "Test-Driven Progressive Enhancement", recommending to test the device capabilities (rather than inferring them from the detected user agent) before providing enhancements.
- Wt is an open-source server-side web application framework which transparently implements progressive enhancement during its bootstrap, progressing from plain HTML to full Ajax.
Benefits for accessibility
Web pages created according to the principles of progressive enhancement 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 progressive enhancement 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 (SEO) is another side effect of a progressive enhancement-based Web design strategy. Because the basic content is always accessible to search engine spiders, pages built with progressive enhancement methods avoid problems that may hinder search engine indexing.
Criticism and responses
- Champeon, Steven & Finck, Nick (2003) Inclusive Web Design for the Future, SxSWi presentation
- Champeon, Steven (2003), Progressive Enhancement and the Future of Web Design, Webmonkey
- "15 top web design and development trends for 2012". January 9, 2012.
- Pierre Far (2014), Updating our technical Webmaster Guidelines, Webmaster Central Blog
- Wilkinson, Jim (2003), Progressive Enhancement - CSS Discuss
- Jeremy Keith's Adactio blog (2005), Progressive Enhancement with Ajax
- Aaron Gustafson (2008), Understanding Progressive Enhancement, A List Apart
- Aaron Gustafson (2008), Progressive Enhancement with CSS, A List Apart
- Nate Koechley, Graded Browser Support Archived 2006-04-14 at the Wayback Machine
- Steven G. Chipman (2005), New Skool DOM Scripting
- Chris Heilmann, Double Vision – Give the Browsers CSS They Can Digest (2005)
- Jehl, Scott. "Test Driven Progressive Enhancement". A List Apart. Retrieved 27 October 2009.
- Stephan Spencer, PE is good for SEO | Searchlight - CNET News
- Dimon, Garret, The Reality of Progressive Enhancement Archived 2007-03-17 at the Wayback Machine
- IA Summit 2006 » Blog Archive » Web 2.0 and SEO? Archived 2006-04-17 at the Wayback Machine
- deconcept » Using alternate content as content in Flash
- Stopdesign | Are They Really Separated? (2003)
- A List Apart: Articles: Separation Anxiety: The Myth of the Separation of Style from Content (2000)
- Bowman, Doug (2003) Are They Really Separated? Retrieved April 14, 2006.
- Heilmann, Christian (2006) Seven Accessibility Mistakes, Part I Retrieved April 14, 2006.
- Koechley, Nate (2006) Graded Browser Support Retrieved April 14, 2006.
- Malicoat, Todd (2003) Form vs. Function in Site Design Retrieved April 14, 2006.
- Nyman, Robert (2006) What is Accessibility? Retrieved April 14, 2006.
- 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, 2006.
- Stearns, Geoff (2006) Using Alternate Content As Content In Flash Retrieved April 14, 2006.
- 101 Search Engine Optimization Tips Retrieved April 14, 2006.
- Gustafson, Aaron (2008) Understanding Progressive Enhancement Retrieved July 7, 2011
- Gustafson, Aaron (2008) Progressive Enhancement with CSS Retrieved July 7, 2011.
- Gustafson, Aaron (2007) Ruining the User Experience Retrieved May 7, 2007.
- hesketh.com, September 12, 2003 Progressive Enhancement: Paving the Way for Future Web Design
- Keith, Jeremy (2006) Behavioral Separation Retrieved May 7, 2007.
- Olsson, Tommy (2007) Graceful Degradation & Progressive Enhancement
- Briggs, Owen; Champeon, Steven; Costello, Eric; Patternson, Matthew (2004) Cascading Style Sheets: Separating Content From Presentation (2nd ed.). San Francisco: Apress. ISBN 1-59059-231-X
- Gustafson, Aaron (2011) Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Chattanooga: Easy Readers. ISBN 978-0-9835895-0-1.
- Keith, Jeremy (2007) Bulletproof Ajax. Berkeley: New Riders. ISBN 0-321-47266-7
- Parker, Todd; Toland, Patty; Jehl, Scott; Costello Wachs, Maggie (The Filament Group) (2010) Designing with Progressive Enhancement Peachpit/New Riders. ISBN 978-0-321-65888-3