- Progressive enhancement
Progressive enhancement is a strategy for
web designthat emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies. Progressive enhancement uses web 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 providing those with better bandwidth or more advanced browser software an enhanced version of the page.
"Progressive Enhancement" was coined by Steven Champeon of [http://www.hesketh.com hesketh.com] in a series of articles and presentations for
Webmonkeyand the SxswInteractive conference between March and June of 2003. [Champeon, Steven (2003), [http://www.webmonkey.com/03/21/index3a.html Progressive Enhancement and the Future of Web Design] , Webmonkey] [Champeon, Steven & Finck, Nick (2003) [http://www.hesketh.com/publications/inclusive_web_design_for_the_future/ Inclusive Web Design for the Future] , SxSWi presentation]
Introduction and background
The strategy is an attempt to subvert the traditional 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. 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 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 restricted, or where support for sound or color and limited screen size, for instance, 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
The PE approach is derived from Champeon's early experience (c. 1993-4) with
SGML, before working with HTMLor 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 fromsemantics, presentation, and behavior", and based on the then-common use of
CSShacks 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 approach.
Progressive Enhancement consists of the following core principles:
* basic content should be accessible to all browsers
* basic functionality should be accessible to all browsers
* sparse, semantic markup contains all content
* enhanced layout is provided by externally linked CSS
* end user browser preferences are respected
upport and adoption
*Jim Wilkinson created a page for Progressive Enhancement Wiki to collect some tricks and tips and to explain the overall strategy. [Wilkinson, Jim (2003), [http://css-discuss.incutio.com/?page=ProgressiveEnhancement CSS-Discuss Wiki page on Progressive Enhancement] ]
*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. [Adactio, [http://adactio.com/journal/display.php/20050308163812.xml Progressive Enhancement with AJAX] ]
Dave Shea, have helped to spread the adoption of the term to refer to CSS-based design strategies.
*Organizations such as the
Web Standards Projecthave embraced PE as a basis for their educational efforts.
2006Nate Koechley at Yahoo!made extensive reference to PE in his own approach to Web design and browser support, Graded Browser Support (GBS). [Nate Koechley, [http://developer.yahoo.com/yui/articles/gbs/gbs.html Graded Browser Support] ]
*Steve Chipman at AOL has referred to PE as a basis for his Web design strategy. [Steven G. Chipman, [http://slayeroffice.com/articles/wsag/ New Skool DOM Scripting] ]
*David Artz, leader of the AOL Optimization team, developed a suite of [http://www.artzstudio.com/artz/ Accessible Rendering Technologies] , 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 can handle. [Chris Heilmann, [http://www.devarticles.com/c/a/Web-Style-Sheets/Double-Vision-Give-the-Browsers-CSS-They-Can-Digest/ Double Vision – Give the Browsers CSS They Can Digest] ]
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 Optimizationis another side effect of a PE-based Web design strategy. Because the basic content is always accessible to search engine spiders, pages built with PE methods avoid problems that may hinder search engine indexing.Fact|date=February 2007
Criticism and responses
* Liquid layout
* Olsson, Tommy (2007) for Accessites.org [http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ Graceful Degradation & Progressive Enhancement] Retrieved April 2, 2007.
* Shea, Dave (2004) [http://www.mezzoblue.com/archives/pres/we04/designing/index.php Zen and the Art of Web Improvement (WE04 Keynote)] Retrieved April 14, 2006.
* Koechley, Nate (2006) [http://developer.yahoo.com/yui/articles/gbs/gbs.html Graded Browser Support] Retrieved April 14, 2006.
* Stearns, Geoff (2006) [http://blog.deconcept.com/2006/02/27/using-alternate-content-flash/ Using Alternate Content As Content In Flash] Retrieved April 14, 2006.
* Heilmann, Christian (2006) [http://www.digital-web.com/articles/seven_accessibility_mistakes_part_1/ Seven Accessibility Mistakes, Part I] Retrieved April 14, 2006.
* Nyman, Robert (2006) [http://www.robertnyman.com/2006/03/01/what-is-accessibility/ What is Accessibility?] Retrieved April 14, 2006.
* [http://www.meta4creations.com/101-search-engine-optimization-tips.htm 101 Search Engine Optimization Tips] Retrieved April 14, 2006.
* Bowman, Doug (2003) [http://www.stopdesign.com/log/2003/10/14/separated.html Are They Really Separated?] Retrieved April 14, 2006.
* Malicoat, Todd (2003) [http://www.seotoday.com/browse.php/category/articles/id/321/index.php Form vs. Function in Site Design] Retrieved April 14, 2006.;Footnoted references
* Gustafson, Aaron (2007) [http://www.alistapart.com/articles/ruininguserexperience Ruining the User Experience] Retrieved May 7, 2007.
* Keith, Jeremy (2006) [http://www.alistapart.com/articles/behavioralseparation Behavioral Separation] Retrieved May 7, 2007.
* Olsson, Tommy (2007) [http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ Graceful Degradation & Progressive Enhancement]
* Briggs, Owen; Champeon, Steven; Costello, Eric; Patternson, Matthew (2004) " [http://www.glasshaus.com/BookInfo.asp?bookId=59 Cascading Style Sheets: Separating Content From Presentation] " (2nd ed.). San Francisco: Apress. ISBN 1-59059-231-X
* Keith, Jeremy (2007) " [http://www.peachpit.com/store/product.aspx?isbn=0321472667 Bulletproof Ajax] ". Berkeley: New Riders. ISBN 0-321-47266-7
Wikimedia Foundation. 2010.
Look at other dictionaries:
Progressive Verbesserung — (engl. progressive enhancement) beschreibt eine Methode im Webdesign, die Barrierefreiheit, semantische Auszeichnung und Trennung von Information und Präsentation beinhaltet, um eine Website auch für Endgeräte benutzbar zu machen, die nur über… … Deutsch Wikipedia
Progressive Democratic Party (Gibraltar) — The Progressive Democratic Party or PDP is a political party established in June 2006 in Gibraltar by lawyer and former Gibraltar Social Democrat Deputy Chief Minister Keith Azopardi. Notable founding members include Nick Cruz, Marie Lou Guerrero … Wikipedia
progressive tax — noun any tax in which the rate increases as the amount subject to taxation increases • Syn: ↑graduated tax • Hypernyms: ↑tax, ↑taxation, ↑revenue enhancement * * * progressive tax UK US noun [singular] … Useful english dictionary
Amélioration progressive — L amélioration progressive est une manière de concevoir un site web qui prend très largement en compte l accessibilité, la sémantique et le référencement. En séparant strictement le fond (le contenu proposé à l utilisateur) et la forme (l… … Wikipédia en Français
revenue enhancement — noun charge against a citizen s person or property or activity for the support of government • Syn: ↑tax, ↑taxation • Derivationally related forms: ↑tax (for: ↑taxation), ↑tax (for: ↑ … Useful english dictionary
Адаптивный веб-дизайн — (англ. Responsive web design) дизайн веб страниц, обеспечивающий отличное восприятие на различных устройствах, подключённых к интернет. Целью адаптивного веб дизайна является универсальность веб сайта для различных устройств. Для того,… … Википедия
Cascading Style Sheets — CSS redirects here. For other uses, see CSS (disambiguation). For the use of CSS on Wikipedia, see Help:Cascading style sheets. Cascading Style Sheets Filename extension .css Internet media type text/css Developed by World Wide Web Consortium … Wikipedia
Fault-tolerant system — This article contains specific implementations of fault tolerant systems. For general theory, see fault tolerant design. Fault tolerance or graceful degradation is the property that enables a system (often computer based) to continue operating… … Wikipedia
Designing with Web Standards — Designing with Web Standards is a web development book by Jeffrey Zeldman (3rd edition with Ethan Marcotte). Zeldman co founded The Web Standards Project in 1998 and served as its director during the formative years when the Project was… … Wikipedia
Web design — is the process of planning and creating a website. Text, images, digital media and interactive elements are shaped by the web designer to produce the page seen on the web browser. Web designers utilize markup language, most notably HTML for… … Wikipedia