.svg)
Progressive enhancement is a strategy inweb design that puts emphasis onweb content first, allowingeveryone to access the basic content and functionality of a web page, whileusers with additional browser features or faster Internet access receive the enhanced version instead. This strategy speeds up loading and facilitates crawling byweb search engines, as text on a page is loaded immediately through theHTML 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][2][3]
This strategy involvesseparating thepresentation semantics from the content, with presentation being implemented in one or more optional layers, activated based on aspects of thebrowser orInternet connection of theclient. In practice, this means serving content throughHTML, the "lowest common denominator" of web standards, and applying styling and animation throughCSS to the technically possible extent, then applying further enhancements throughJavaScript.[4] DeprecatedAdobe Flash could be thought of as having shared the final spot with JavaScript while it was widely in use.[5][6] 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 andbackwards compatible.[4]
"Progressive enhancement" was coined by Steven Champeon andNick Finck at theSXSW Interactive conference on March 11, 2003, in Austin,[7] and through a series of articles forWebmonkey which were published between March and June 2003.[8]
SpecificCascading Style Sheets (CSS) techniques pertaining to flexibility of the page layout accommodating different screen resolutions is the concept associated with theresponsive web design approach.In 2012,net Magazine chose Progressive Enhancement as #1 on its list of Top Web Design Trends for 2012 (responsive design was #2).[9]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".[10]
The strategy is an evolution of a previous web design strategy known asgraceful degradation, wherein Web pages were designed for the latest browsers first, but then made to work well in older versions of browser software.[11][3] Graceful degradation aims to allow a page to "degrade" – to remain presentable andaccessible even if certain technologies expected by the design are absent.[12]
In progressive enhancement the strategy is deliberately reversed: Theweb content is created with amarkup document, geared towards the lowest common denominator of browser software functionality.[13][8][12]If content is to be revealed interactively through JavaScript, such as a collapsible navigation menu,the HTML markup reveals all the content by default and JavaScript itself hides some of the content.[3]Thedeveloper adds all desired functionality to the presentation and behavior of the page, using modern CSS,Scalable Vector Graphics (SVG), orJavaScript.[14]
The progressive enhancement approach is derived from Champeon's early experience (c. 1993–1994) withStandard 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 ofseparation of presentation and content[15][16].Champeon expressed a hope that, sinceweb browsers provide a default presentation style for HTML content, this would result in websites with their content written as semantic HTML, leaving presentation choice to the web browser.[8]However, the needs of web designers led to theHTML standard being extended withhardcoded features that allowed HTML content to prescribe specific styles, and taking away this option from consumers and their web browsers.[8]These features forced publishers to choose between adopting a newdisruptive technologies or allowing content to remain accessible to audiences that used other browsers, a dilemma between design and compatibility.[8][17][12]During the 1990s, an increasing number of websites would not work in anything but the latest versions of popular browsers.[12]
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]
The progressive enhancement strategy consists of the following core principles:[8]
 | This sectionis inlist format but may read better asprose. You can help byconverting this section, if appropriate.Editing help is available.(December 2024) |
Web pages created according to the principles of progressive enhancement are by their nature more accessible,[27]backwards compatible,[6]andoutreaching, because the strategy demands that basic content always be available, not obstructed by features or scripting that may be easily disabled, unsupported (e.g. bytext-based web browsers), or blocked on computers in sensitive environments.[14]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]
Theclient is able to select which parts of a page to download beyond basic HTML (e.g. styling, images, etc.), and can optonly 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.
Improved results with respect tosearch 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]
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.[31] Laurie Gray (Information Architect atKnowledgeStorm[32]) countered with the point that informational pages should be coded using progressive enhancement in order to be indexed by search engine spiders.[33] Geoff Stearns (author ofSWFObject, a popular Flash application) argued that Flash-heavy pages should be coded using progressive enhancement.[34]
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]
Progressive Enhancement […] means [to] build your website starting with the lowest common denominator browsers in mind.
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.