Lecture
Progressive enhancement — a web design strategy that focuses on web content first, giving everyone access to a web page's basic content and functionality, while users with additional browser features or faster internet access receive an enhanced version instead. This strategy speeds up loading and makes search engine crawling easier, since the text on a page loads immediately through the HTML source code, rather than waiting for JavaScript to initialize and load the content afterward, which means that content ready for consumption “out of the box” is served immediately, rather than behind additional layers.
This strategy implies separating the semantics of presentation from content, with presentation implemented in one or more additional layers activated based on aspects of the browser or the client's internet connection. In practice, this means serving content through HTML, the “lowest common denominator” of web standards, and applying styles and animation through CSS to the extent technically feasible, then applying further enhancements through JavaScript. The now-obsolete Adobe Flash can be regarded as having shared last place with JavaScript when it was widely used. Because web browsers can load a site's features to the extent supported, rather than failing to load the entire site due to a single error or a missing JavaScript feature, a progressively enhanced site is more stable and backward compatible.
“Progressive enhancement” was coined by Steven Champeon and Nick Finck at the SXSW Interactive conference on March 11, 2003, in Austin, and in a series of articles for Webmonkey published between March and June 2003.
Specific Cascading Style Sheets (CSS) techniques relating to the flexibility of a page layout that adapts to different screen resolutions are a concept related to the responsive web design approach. In 2012, net Magazine ranked progressive enhancement as No. 1 on its list of the top web design trends of 2012 (responsive design was No. 2). Google encourages the adoption of progressive enhancement to help “our systems (and a wider range of browsers) see useful content and basic functionality when certain web design features are not yet supported”.
This strategy represents an evolution of an earlier web design strategy known as “graceful degradation”, in which web pages were first designed for the newest browsers and then made to work in older browser software versions. Graceful degradation aims to allow a page to “degrade” — remaining presentable and accessible even if certain technologies expected by the design are missing.
In progressive enhancement, the strategy is deliberately reversed: web content is created using a markup document oriented toward the lowest common denominator of browser software functionality. If content is meant to be revealed interactively via JavaScript, for example a collapsible navigation menu, it will be shown by default and only hidden by JavaScript itself at first. The developer adds all the necessary features to the page's presentation and behaviour using modern CSS, Scalable Vector Graphics (SVG), or JavaScript.
The progressive enhancement approach is based on Champeon's early experience (around 1993–1994) with the Standard Generalized Markup Language (SGML), a predecessor to HTML and other web presentation languages.
Writing content with semantic markup and considering the presentation of content separately, rather than embedding it into the markup itself, is a concept known as the separation of presentation and content. Champeon expressed hope that, since web browsers provide a default presentation style for HTML content, this would lead to websites being written with their content as semantic HTML, leaving the choice of presentation to the web browser. However, the needs of web designers led to the HTML standard being extended with hard-coded features that allowed HTML content to dictate specific styles, taking that choice away from consumers and their web browsers. These features forced publishers to choose between adopting new, disruptive technologies or preserving content accessibility for audiences using other browsers, a dilemma between design and compatibility. In the 1990s, an increasing number of websites would not work in anything but the latest popular browsers.
This trend changed after the 1990s, when CSS gained widespread support thanks to grassroots educational efforts (by Eric Costello, Owen Briggs, Dave Shea, and others) showing web designers how to use CSS for layout purposes.
The progressive enhancement strategy consists of the following basic principles:
Web pages built according to the principles of progressive enhancement are inherently more accessible, backward compatible , and reach a wider audience, since the strategy requires that basic content always be available, not blocked by commonly unsupported features or scripts that can easily be disabled, unsupported (for example, text-based web browsers), or blocked on computers in sensitive environments. In addition, the principle of sparse markup makes it easier for tools that read content aloud to find that content. It is unclear how well progressive enhancement sites work with older tools designed to handle table-based layouts, “ tag soup ”, and the like.
The client (computing device) can choose which parts of the page to load beyond the basic HTML (for example, styles, images, etc.), and can choose to load only the parts needed for the desired use, in order to speed up loading and reduce bandwidth and power consumption. For example, a client might choose to load only the basic HTML, without loading stylesheets, scripts, and media (such as images) due to a slow internet connection caused by geographic location, a weak cellular signal, or reduced speed after exhausting a high-speed data plan. This also reduces bandwidth consumption on the server side.
By comparison, pages whose initial content loads via AJAX require the client to inefficiently run JavaScript to load and view the page content, instead of loading the content immediately.
Improved search engine optimization (SEO) results are another side effect of a web design strategy based on progressive enhancement. Because basic content is always available to search crawlers, pages built using progressive enhancement techniques avoid problems that could hinder search engine indexing, whereas the need to render a page's basic content by executing JavaScript will slow down crawling and make it inefficient.
Some skeptics, such as Garrett Dimon, expressed concern that progressive enhancement does not work in situations where achieving certain user interface presentations or behaviours requires a large amount of JavaScript. Lori Gray (information architect at KnowledgeStorm ) countered by stating that informational pages should be coded using progressive enhancement so that they get indexed by search crawlers. Geoff Stearns (author of SWFObject , a popular Flash application) argued that pages with a lot of Flash should be coded using progressive enhancement.
Designers Douglas Bowman and Bob Stein expressed doubts about the separation-of-content-and-presentation principle in absolute terms, insisting instead on a realistic recognition that the two concepts are inextricably linked.
Comments