Progressive enhancement is a strategy for web design that emphasizes core webpage content first. This strategy can be used to improve the functionality of the Internet. This article provides information on the content of the Internet, and provides additional information.


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

Specific Cascading Style Sheets (CSS) techniques for the design of the web site . .net Magazine Thing Progressive Enhancement as # 1 on its list of Top Design Trends for 2012 ( Responsive design was # 2). [3] Google has encouraged the adoption of progressive enhancement to help our systems (and a wider range of browsers). [4]

Introduction and background

The strategy is an evolution of a previous web design concept known as graceful degradation , designers would create web pages for the latest browsers that would also work well in older versions of browser software. Degradable, or remain presentable even if certain technologies assumed by the design were not present, without being jarring to the user of such older software. In practice, graceful degradation has been supplanted by an attitude that the end user should “just upgrade”. quote needed ]

In Progressive Enhancement (PE) the strategy is deliberately reversed: a basic markup document is created, geared towards the lowest common denominator of browser software functionality, and then the designer adds functionality or enhancements to the presentation and behavior of the page, using modern such as Cascading Style Sheets, Scalable Vector Graphics (SVG), or JavaScript . All such enhancements are externally linked, preventing data by some browsers from being unnecessarily downloaded.

The PE approach is derived from Champeon’s early experience (1993-4) with Standard Generalized Markup Language (SGML), before working with HTML or any other way of working. In these early SGML contexts, it was almost 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 happy and style , gold 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 have been forced to adopt new, disruptive technologies and tags in order to remain relevant. With a nod to graceful degradation, in the style of a newcomer, the most recent adopters of technology have only recently been adopted. For many years, much of the Web has not been the most recent, most popular browsers. This remains true of the past and the adoption of CSS, as well as many populist, grassroots educational efforts (from Eric Costello, Owen Briggs, Dave Shea,[5] and others) showing Web designers how to use CSS for layout purposes.

EP is based was recognition que la 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 sentence to describe the delicate art of “Separating the document structure and contents from semantics, presentation, and behavior”, and based on the then-common use of CSS hacks to workaround rendering bugs in specific browsers, The strategy has been taken over by the company and has developed and extended the approach.

Core principles

PE strategy consists of the following core principles:

  • 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 unobtrusive , externally linked JavaScript
  • End-user web browser preferences are respected

Support and adoption

  • In August 2003 Jim Wilkinson has created a website for the world. [6]
  • Designers such as Jeremy Keith have shown how to approach flexible web design (such as Ajax ) to provide flexible, but powerful, user experiences. [7]
  • Aaron Gustafson wrote a series covering the fundamentals of progressive enhancement, from the underlying philosophy to JavaScript, for A List Apart. [8] [9] [10]
  • Others, including Dave Shea , have been helped by the adoption of CSS-based design strategies.
  • Organizations such as the Web Standards Project (WaSP), which was behind the creation of Acid2 and Acid3 tests, have embraced PE as a basis for their educational efforts.
  • In 2006 Nate Koechley at Yahoo! Graduated Browser Support (GBS). [11]
  • Steve Chipman at AOL has been referred to as a web design strategy. [12]
  • David Artz, leader of the AOL Optimization team, developed a suite of Accessible Rendering Technologies, and invented a technique for disassembly of “enhancement” on the fly, saving the user’s preference.
  • Chris Heilmann discusses the importance of targeted delivery of CSS so that it can only handle the content (and enhancements) it can handle. [13]
  • Scott Jehl of Filament Group proposed a “Test-Driven Progressive Enhancement”, [14] recommending to test the device capabilities (rather than inferring them from the detrimental user agent ) before providing enhancements.
  • Wt is an open-source server-side web application framework that transparently implements progressive enhancement during its bootstrap, progressing from plain HTML to full Ajax.

Benefits for accessibility

They are more accessible, because the strategy demands that they be readily available, not easily accessible or easily disabled. Additionally, the sparse markup makes it easier for you to read that content. It is unclear as to how well it works, with ” tag soup “, and the like.

Benefits for SEO

Improved results with respect to search engine optimization (SEO) is another side effect of a PE-based Web design strategy. Because the basic content is always accessible to search engine spiders, pages built with PE methods to avoid problems that can hinder search engine indexing. [15]

Criticism and responses

Some skeptics, such as Garret Dimon, have expressed their concern that it is not workable in situations that rely heavily on JavaScript to achieve certain user interface presentations or behaviors, [16] to which unobtrusive JavaScript is one response. Others have countered with the point That informational pages shoulds be coded using PE in order to be indexed by spiders, [17] and That Even Flash-heavy pages shoulds be coded using PE. [18] In a related area, many of 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. [19] [20]

See also

  • Ajax
  • Content adaptation , transform content to adapt capabilities
  • Fault Tolerant system
  • jQuery Mobile
  • Fluid layouts
  • Semantic HTML
  • JavaScript Unobtrusive


  1. Jump up^ Champeon, Steven & Finck, Nick (2003)Inclusive Web Design for the Future, SxSWi presentation
  2. Jump up^ Champeon, Steven (2003),Progressive Enhancement and the Future of Web Design, Webmonkey
  3. Jump up^ “15 top web design and development trends for 2012” . January 9, 2012.
  4. Jump up^ Pierre Far (2014),Updating Our Webmaster Guidelines, Webmaster Central Blog
  5. Jump up^ “Zen and the Art of Web Improvement” . Retrieved 14 April 2006 .
  6. Jump up^ Wilkinson, Jim (2003),Progressive Enhancement – CSS Discuss
  7. Jump up^ Jeremy Keith Adactio blog (2005),Progressive Enhancement with Ajax
  8. Jump up^ Aaron Gustafson (2008),Understanding Progressive Enhancement, A List Apart
  9. Jump up^ Aaron Gustafson (2008),Progressive Enhancement with CSS, A List Apart
  10. Jump up^ Aaron Gustafson (2008),Progressive Enhancement with JavaScript, A List Apart
  11. Jump up^ Nate Koechley,Graded Browser Support
  12. Jump up^ Steven G. Chipman (2005),New Skool DOM Scripting
  13. Jump up^ Chris Heilmann,Double Vision – Give the Browser CSS They Can Digest (2005)
  14. Jump up^ Jehl, Scott. “Test Driven Progressive Enhancement” . A List Apart . Retrieved 27 October 2009 .
  15. Jump up^ Stephan Spencer,PE is good for SEO | Searchlight – CNET News
  16. Jump up^ Dimon, Garret,The Reality of Progressive Enhancement
  17. Jump up^ IA 2006 Summit »Blog Archive» Web 2.0 and SEO?
  18. Jump up^ deconcept »Using alternate content as Flash
  19. Jump up^ Stopdesign | Are They Really Separated? (2003)
  20. Jump up^ A List Apart: Articles: Separation Anxiety: The Myth of the Separation of Style from Content (2000)


  • Bowman, Doug (2003) Are They Really Separated? Retrieved April 14, 2006.
  • Edwards, James & Adams, Cameron (2006) Smarter Script: Quality JavaScript from Scratch Retrieved April 14, 2006.
  • Heilmann, Christian (2006) Seven Accessibility Mistakes, Part I Retrieved April 14, 2006.
  • Koechley, Nate (2006) Graded Browser Support Retrieved April 14, 2006.
  • Malicoat, Todd (2003) Form vs. Function in Retrieved Design Site April 14, 2006.
  • Nyman, Robert (2006) What is Accessibility? Retrieved April 14, 2006.
  • Olsson, Tommy (2007) for Graceful Degradation and Progressive Enhancement Retrieved April 2, 2007.
  • Shea, Dave (2004) Zen and the Art of Web Improvement (WE04 Keynote) Retrieved April 14, 2006.
  • Stearns, Geoff (2006) Using Alternate Content As Content In Flash Retrieved April 14, 2006.
  • van der Sluis, Bobby (2005) Ten Good Practices for Writing JavaScript in 2005 Retrieved April 14, 2006.
  • 101 Search Engine Optimization Tips Retrieved April 14, 2006.