Progressive Enhancement (PE)
Progressive Enhancement is a design philosophy that centers around providing a baseline of essential content and functionality to as many users as possible, while at the same time going further and delivering the best possible experience only to users of the most modern browsers that can run all the required code.
Progressive Enhancement - Historical Background
Why Use Progressive Enhancement
Part of the appeal of PE is the strength of the end result. PE forces you to initially plan out your project as a functional system using only the most basic of Web technologies. This means that you know you’ll always have a strong foundation to fall back on as complexity is introduced to the project.
- PE goes well with the principle of “Release early, release often.” By starting with a strong foundation, you are able to release projects that work and then concentrate on adding the bells and whistles at a more appropriate time.
- PE projects are easier to maintain. With this focus on “first principles,” developers can concentrate on more complex sections of system interaction without worrying about the foundation.
- PE is also good for your users. It gives them the security of knowing they can visit your website using any of the thousands of user-agents available to them and still interact with your content as that agent allows.
The Layers of Progressive Enhancement (See Figure Below)
General Principles for Developing with Progressive Enhancement
- Styling: Translating visual design to the medium of the web, using stylesheets. Stylesheets are linked from within HTML documents, and the browser renders the rules that are defined in it. The separation of websites into the three layers means that web designs must be accessible and usable regardless of what browser the user is using. If a user is using IE6, for example, they mustn’t be barred from being able to gain access to a website’s content, even if the site enhances the user experience and visual complexity on CSS3-supporting browsers. Progressively enhancing the styling of websites also means that relying on CSS to render content (which is the job of the markup layer) using the content CSS property, for instance, is not a good practice unless the content is not critical to the understanding of the HTML document.
- Behavior: For efficient and robust web development that emphasizes on progressive enhancement, it is recommended to follow the guidelines below:
- Put all scripts in externally linked files
- Separate the behavior from the HTML and CSS
- Avoid browser-specific code and use feature detection (not browser detection)
Responsive Web Design (RWD)
Adaptive Web Design
Above the Fold
Below the Fold
User-centered evaluation (UCE)
- ↑ Definition - What is Progressive Enhancement Mozilla
- ↑ Progressive Enhancement - Historical Background Wikipedia
- ↑ Why Use Progressive Enhancement? Smashing Magazine
- ↑ The Layers or Levels of Progressive Enhancement OmniUpdate
- ↑ General Principles for Developing with Progressive Enhancement FX
- A Complete Guide to Progressive Enhancement Web Design Depot
- What is Progressive Enhancement and Why Should You Care? Tiffany Tse
- Understanding Progressive Enhancement Aaron Gustafson