Progressive enhancement
Progressive enhancement is a strategy in
This strategy involves
History
"Progressive enhancement" was coined by Steven Champeon and Nick Finck at the SXSW Interactive conference on March 11, 2003, in Austin,[7] and through a series of articles for Webmonkey which were published between March and June 2003.[8]
Specific
Introduction
The strategy is an evolution of a previous web design strategy known as
In progressive enhancement the strategy is deliberately reversed: The
Background
The progressive enhancement approach is derived from Champeon's early experience (c. 1993–1994) with Standard Generalized Markup Language (SGML), predating HTML and other Web presentation languages.[8]
Writing content with semantic markup and considering the presentation of the content separately, rather than being embedded in the markup itself, is a concept referred to as the rule of
This trend reversed after the 1990s, once CSS was widely supported,[8][17] through grassroots educational efforts (from Eric Costello, Owen Briggs, Dave Shea, and others) showing Web designers how to use CSS for layout purposes.[citation needed]
Core principles
The progressive enhancement strategy consists of the following core principles:[8]
- 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.[17]
- Enhanced behavior is provided by externally linked JavaScript.[14]
- 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.[18]
- 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.[19][20]
- Aaron Gustafson wrote a series for A List Apart covering the fundamentals of progressive enhancement, from the underlying philosophy to CSS approaches to how to handle JavaScript.[21][11][22][23]
- CSS Zen Garden by Molly Holzschlag and Dave Shea, spread the adoption of the term to refer to CSS-based design strategies.[24]
- Organizations such as the Web Standards Project (WaSP), which was behind the creation of Acid2 and Acid3 tests,[25] 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).[12]
- Steve Chipman at AOL has referred to progressive enhancement (by DOM scripting) as a basis for his Web design strategy.[26]
- David Artz, leader of the AOL's 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.
- Progressive enhancement is used in the front ends of MediaWiki-powered sites such as Wikipedia, as it is readable, navigable, and even editable using the basic HTML interface without styling or scripts, though is enhanced by such. For example, the wikitext editor's toolbar is loaded and operates through JavaScript.
- Chris Heilmann discussed the importance of targeted delivery of CSS so that each browser only gets the content (and enhancements) it can handle.[27][28]
- Scott Jehl of Filament Group proposed a "Test-Driven Progressive Enhancement",[29] 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
Accessibility, compatibility, and outreach
Web pages created according to the principles of progressive enhancement are by their nature more accessible,
Speed, efficiency, and user control
The client (computing) is able to select which parts of a page to download beyond basic HTML (e.g. styling, images, etc.), and can opt only to download parts necessary for desired usage to speed up loading and reduce bandwidth and power consumption. For example, a client may choose to only download basic HTML, without loading style sheets, scripts, and media (e.g. images), due to low internet speeds caused by geographical location, poor cellular signal, or throttled speed due to exhausted high-speed data plan. This also reduces bandwidth consumption on the server side.
In comparison, pages whose initial content is loaded through AJAX require the client to inefficiently run JavaScript to download and view page content, rather than downloading the content immediately.
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, whereas having to render the basic page content through JavaScript execution would make crawling slow and inefficient.[27][30]
Criticism and responses
Some skeptics, such as Garret Dimon, have expressed their concern that progressive enhancement is not workable in situations that rely heavily on JavaScript to achieve certain user interface presentations or behaviors.
Designers Douglas Bowman and Bob Stein expressed doubts concerning the principle of the separation of content and presentation in absolute terms, pushing instead for a realistic recognition that the two are inextricably linked.[35][15]
See also
- Content adaptation – transforming content to adapt to device capabilities
- Flash of unstyled content
- Progressive web app
- Semantic HTML
- Universal design
- Unobtrusive JavaScript
References
- ^ "Progressive enhancement is faster". jakearchibald.com. 2013-09-03. Retrieved 2021-11-11.
- ^ Tse, Tiffany (2017-02-15). "What is Progressive Enhancement and Why Should You Care?". Retrieved 2023-09-28.
- ^ a b c Olsson, Tommy (2007-02-06). "Graceful Degradation & Progressive Enhancement". The Art of Accessibility. Accessites.org. Archived from the original on 2012-03-04. Retrieved 2023-09-28.
- ^ a b van der Sluis, Bobby (2005-04-19). "Ten good practices for writing JavaScript in 2005". Archived from the original on 2008-07-04. Retrieved April 14, 2006.
- ^ Mills, Chris (8 July 2011). "Graceful degradation versus progressive enhancement". World Wide Web Consortium. Retrieved 2020-08-13.
- ^ a b Nyman, Robert (2006-03-01). "What is Accessibility?". Retrieved April 14, 2006.
- ^ Steven Champeon; Nick Finck (2003-03-11). "Inclusive Web Design for the Future (SxSWi presentation)". Archived from the original on 2014-11-08 – via South by Southwest.
- ^ a b c d e f g h Champeon, Steve (2003-03-21). "Progressive Enhancement and the Future of Web Design". Webmonkey. Retrieved 2023-09-28.
- ^ "15 top web design and development trends for 2012". Creative Bloq. net. January 9, 2012. Archived from the original on 2017-08-23.
- ^ Pierre Far (2014), Updating our technical Webmaster Guidelines, Webmaster Central Blog
- ^ a b Gustafson, Aaron (2008-10-07). "Understanding Progressive Enhancement". A List Apart. Retrieved 2023-09-28.
- ^ a b c d e Koechley, Nate (2006-02-13). "Graded Browser Support". Yahoo! Developer Network. Archived from the original on 2006-04-14.
- ^ "101 Search Engine Optimization Tips". www.meta4creations.com. Retrieved 2016-04-14.
Progressive Enhancement […] means [to] build your website starting with the lowest common denominator browsers in mind.
- ^ a b c James Edwards; Cameron Adams (2006-03-07). "Script Smarter: Quality JavaScript from Scratch". SitePoint. Retrieved April 14, 2006.
- ^ a b Stein, Bob (2000-11-17). "Separation Anxiety: The Myth of the Separation of Style from Content". A List Apart. Retrieved 2023-09-28.
- ^ "Separation: The Web Designer's Dilemma". A List Apart. 14 May 2004. Retrieved 24 May 2017.
- ^ a b c Malicoat, Todd (2003-08-23). "Form vs. Function in Site Design". SEO Today. Archived from the original on 2003-08-29. Retrieved April 14, 2006.
- ^ Wilkinson, Jim (2003), Progressive Enhancement - CSS Discuss Archived 2016-03-09 at the Wayback Machine
- ^ Jeremy Keith's Adactio blog (2005), Progressive Enhancement with Ajax
- ^ Keith, Jeremy (2006-06-20). "Behavioral Separation". A List Apart. Retrieved 2023-09-28.
- ^ Gustafson, Aaron (2007-03-27). "Ruining the User Experience". A List Apart. Retrieved 2023-09-28.
- ^ Gustafson, Aaron (2008-10-22). "Progressive Enhancement with CSS". A List Apart. Retrieved 2023-09-28.
- ^ Gustafson, Aaron (2008-11-04). "Progressive Enhancement with JavaScript". A List Apart. Retrieved 2023-09-28.
- ^ Lawson, Bruce. "An interview with Dave Shea, the CSS Zen Gardener". DMXzone.com. Archived from the original on 2007-06-08. Retrieved 2007-06-05.
- ^ "Acid Test Results on Popular Browser". SciActive. Archived from the original on 2008-05-05. Retrieved 2008-05-05.
The Acid 3 test is a work in progress and will be updated when The Web Standards Project releases the final version of the test.
- ^ Steven G. Chipman (2005), New Skool DOM Scripting
- ^ a b c Heilmann, Chris (2005-02-22). "Double Vision – Give the Browsers CSS They Can Digest". Developer Shed. Archived from the original on 2006-07-20. Retrieved 2017-07-06.
- ^ "Seven Accessibility Mistakes (Part 1)". Digital Web Magazine. 2006-04-12. Archived from the original on 2006-04-12. Retrieved April 14, 2006.
{{cite web}}
: CS1 maint: unfit URL (link) - ^ Jehl, Scott (23 September 2008). "Test Driven Progressive Enhancement". A List Apart. Retrieved 27 October 2009.
- ^ Spencer, Stephan (2007-09-25). "PE is good for SEO". Searchlight - CNET News. Archived from the original on 2011-09-10.
- ^ Dimon, Garret (2005-08-29). "The Reality of Progressive Enhancement". Archived from the original on 2007-03-17.
- ^ "IA Summit 2006: Speaker Biographies". ASIS&T. Archived from the original on 2006-04-17.
- ^ Gray, Laurie (2006-03-27). "Web 2.0 and SEO?". Association for Information Science and Technology. Archived from the original on 2006-04-17.
- ^ Stearns, Geoff (2006-02-27). "Using alternate content as content in Flash". deconcept. Retrieved 2023-09-28.
- ^ Bowman, Douglas (2003-10-14). "Are they really separated?". Stopdesign.com. Archived from the original on 2006-03-28. Retrieved 2006-04-14.
Further reading
- 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
- Keith, Jeremy (2005) DOM Scripting: Web Design with JavaScript and the Document Object Model. Berkeley: friends of ED. ISBN 1-59059-533-5
- 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