Progressive enhancement is a strategy in web design that puts emphasis on web content first. 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 user. The proposed benefits of this strategy are that it allows everyone to access the basic content and functionality of a web page, whilst people with additional browser features or faster Internet access receive the enhanced version instead.
“Progressive Enhancement” was coined by Steven Champeon & Nick Finck at the SXSW Interactive conference on March 11, 2003 in Austin, and through a series of articles for Webmonkey which were published between March and June 2003.
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). 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”.
The strategy is an evolution of a previous web design strategy known as graceful degradation, wherein Web pages were first for the latest browsers first, but then made to work well in older versions of browser software. 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 markup document, geared towards the lowest common denominator of browser software functionality. The developer adds all desired functionality to the presentation and behavior of the page, using modern CSS, Scalable Vector Graphics (SVG), or JavaScript. In the case of JavaScript, script also follow the principles of unobtrusive JavaScript.
The progressive enhancement approach is derived from Champeon’s early experience (c. 1993-4) 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. 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.
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?]
The progressive enhancement strategy consists of the following core principles:
Web pages created according to the principles of progressive enhancement 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 progressive enhancement sites work with older tools designed to deal with table layouts, “tag soup”, and the like.
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.
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, to which unobtrusive JavaScript is one response. Others have countered with the point that informational pages should be coded using progressive enhancement in order to be indexed by spiders, and that even Flash-heavy pages should be coded using progressive enhancement. 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.
