Progressive enhancement

Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access receive the enhanced version instead. This strategy speeds up loading and facilitates crawling by web search engines, as text on a page is loaded immediately through the HTML source code rather than having to wait for JavaScript to initiate and load the content subsequently, meaning content ready for consumption "out of the box" is served immediately, and not behind additional layers.[1]

The order of progressive enhancement: HTML, CSS, and JavaScript.
Accessibility through pure HTML (first layer) without styling (second layer) and scripts (third layer). The page is only 76 KB in size with pure HTML.

This strategy involves separating the presentation semantics from the content, with presentation being implemented in one or more optional layers, activated based on aspects of the browser or Internet connection of the client. In practice, this means serving content through HTML, the "lowest common denominator" of web standards, and applying styling and animation through CSS to the technically possible extent, then applying further enhancements through JavaScript. Deprecated Adobe Flash could be thought of as having shared the final spot with JavaScript while it was widely in use.[2] Since web browsers can load site features to the extent supported rather than failing to load the entire site due to one error or missing feature in JavaScript, a progressively enhancing site is more stable and backwards compatible.

History Edit

"Progressive enhancement" was coined by Steven Champeon & Nick Finck at the SXSW Interactive conference on March 11, 2003, in Austin,[3] and through a series of articles for Webmonkey which were published between March and June 2003.[4]

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).[5] 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".[6]

Introduction Edit

The strategy is an evolution of a previous web design strategy known as graceful degradation, wherein Web pages were designed for the latest browsers first, but then made to work well in older versions of browser software.[7] Graceful degradation aims to allow a page to "degrade" – to remain presentable and accessible even if certain technologies expected by the design are absent.

In progressive enhancement the strategy is deliberately reversed: The web content is created with a markup document, geared towards the lowest common denominator of browser software functionality.[8][4] Content only revealable through JavaScript like in collapsible menus is shown by default and only hidden by JavaScript if loaded, as implemented in page sections of Wikipedia's mobile web. The developer adds all desired functionality to the presentation and behavior of the page, using modern CSS, Scalable Vector Graphics (SVG), or JavaScript.

Background Edit

The progressive enhancement approach is derived from Champeon's early experience (c. 1993-1994) 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.[citation needed] 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.[contradictory] For several years, much of the Web simply did not work in anything but the most recent, most popular browsers.[citation needed] 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.

Progressive enhancement 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 CSS to manage all presentation tasks and JavaScript to enhance complex client-side behavior.

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.[how?]

Core principles Edit

The progressive enhancement strategy consists of the following core principles:[4]

  • 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.
  • Enhanced behavior is provided by externally linked JavaScript.
  • End-user web browser preferences are respected.

Support and adoption Edit

  • 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.
  • In August 2003 Jim Wilkinson created a progressive enhancement wiki page to collect some tricks and tips and to explain the overall strategy.[9]
  • 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.[10]
  • Aaron Gustafson wrote a series covering the fundamentals of progressive enhancement, from the underlying philosophy to CSS approaches to how to handle JavaScript, for A List Apart.[7][11][12]
  • 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).[13]
  • Steve Chipman at AOL has referred to progressive enhancement (by DOM scripting) as a basis for his Web design strategy.[14]
  • 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.[15]
  • Scott Jehl of Filament Group proposed a "Test-Driven Progressive Enhancement",[16] 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 Edit

Accessibility, compatibility, and outreach Edit

Web pages created according to the principles of progressive enhancement are by their nature more accessible, backwards compatible, and outreaching, because the strategy demands that basic content always be available, not obstructed by commonly unsupported or scripting that may be easily disabled, unsupported (e.g. by text-based web browsers), or blocked on computers in sensitive environments. 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.[citation needed]

Speed, efficiency, and user control Edit

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) Edit

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.[17]

Criticism and responses Edit

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.[18] Others have countered with the point that informational pages should be coded using progressive enhancement in order to be indexed by spiders,[19] and that even Flash-heavy pages should be coded using progressive enhancement.[20] 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 inextricably linked.[21][22]

See also Edit

Notes Edit

  1. ^ "Progressive enhancement is faster". 2013-09-03. Retrieved 2021-11-11.{{cite web}}: CS1 maint: url-status (link)
  2. ^ Mills, Chris (8 July 2011). "Graceful degradation versus progressive enhancement". World Wide Web Consortium. Retrieved 2020-08-13.
  3. ^ Champeon, Steven & Finck, Nick (2003) Inclusive Web Design for the Future, SxSWi presentation
  4. ^ a b c Champeon, Steven (2003), Progressive Enhancement and the Future of Web Design, Webmonkey
  5. ^ "15 top web design and development trends for 2012". January 9, 2012.
  6. ^ Pierre Far (2014), Updating our technical Webmaster Guidelines, Webmaster Central Blog
  7. ^ a b Aaron Gustafson (2008), Understanding Progressive Enhancement, A List Apart
  8. ^ "101 Search Engine Optimization Tips". Retrieved 2016-04-14. Progressive Enhancement […] means [to] build your website starting with the lowest common denominator browsers in mind.
  9. ^ Wilkinson, Jim (2003), Progressive Enhancement - CSS Discuss Archived 2016-03-09 at the Wayback Machine
  10. ^ Jeremy Keith's Adactio blog (2005), Progressive Enhancement with Ajax
  11. ^ Aaron Gustafson (2008), Progressive Enhancement with CSS, A List Apart
  12. ^ Aaron Gustafson (2008), Progressive Enhancement with JavaScript, A List Apart
  13. ^ Nate Koechley, Graded Browser Support Archived 2006-04-14 at the Wayback Machine
  14. ^ Steven G. Chipman (2005), New Skool DOM Scripting
  15. ^ Chris Heilmann, Double Vision – Give the Browsers CSS They Can Digest (2005) Archived 2017-07-06 at the Wayback Machine
  16. ^ Jehl, Scott (23 September 2008). "Test Driven Progressive Enhancement". A List Apart. Retrieved 27 October 2009.
  17. ^ Stephan Spencer, PE is good for SEO | Searchlight - CNET News
  18. ^ Dimon, Garret, The Reality of Progressive Enhancement Archived 2007-03-17 at the Wayback Machine
  19. ^ IA Summit 2006 » Blog Archive » Web 2.0 and SEO? Archived 2006-04-17 at the Wayback Machine
  20. ^ deconcept » Using alternate content as content in Flash
  21. ^ "Stopdesign | Are They Really Separated? (2003)". Archived from the original on 2009-01-02. Retrieved 2006-04-14.
  22. ^ A List Apart: Articles: Separation Anxiety: The Myth of the Separation of Style from Content (2000)

References Edit

Further reading Edit