Progressive Enhancement 101: Overview and Best Practices
With an ever-growing variety of browsing situations and platforms that must be supported, the concept of progressive enhancement has become a hot topic of conversation. Put simply, progressive enhancement is the technique of building websites with strong foundations so that it’s accessible to the wide range of browsing situations — from mobile devices and netbooks, to desktops and screen-readers.
What Is Progressive Enhancement?
By compartmentalizing these website components, we more easily allow our sites the ability to become enhanced depending on the web browser’s capabilities.
How would we pragmatically carry out progressive enhancement?
- Markup: Start out with semantic and well-structured HTML for flexibility and interoperability.
- Styling: Progressively enhance the look-and-feel of a design by adding support for browsers with greater features (e.g. WebKit browsers, IE9, Firefox and mobile browsers).
Benefits of Applying Progressive Enhancement Techniques
You should keep in mind that pragmatically implementing the separation of the markup, styling, and behavioral layers would give you many benefits in your site projects. These are the major reasons for embracing progressive enhancement:
- Accessibility: Content is within reach to all visitors.
- Portability: Cross-browser and cross-device support.
- Modularity: Having decoupled components with smart boundaries makes site builds easier and more fault-tolerant.
- Site Performance: Improvements in terms of (perceived) page loading times (which affects usability) is more readily implemented.
Let us talk about each one a little bit more.
Accessibility of websites is one of the most important reasons for the separation of the three layers. You can be sure that all browsers and devices at least will be able to render the most important part: the content.
Think of modern browsers, ancient browsers, mobile devices, search engine crawlers and screen readers — at the very least, progressive enhancement’s emphasis on layer separation, universal design, and semantic markup allows all of them to access the content.
Progressive enhancement doesn’t code for particular web browsers; it seeks to cater to all browsers as best as it can, taking advantage of a browser feature if it has them.
Smartphones and mobile devices that support media queries, CSS3 and HTML5, under progressive enhancement principles, will have an enhanced user experience because of these browser features. And with proper technique, these enhancements don’t alienate those who don’t have these browser features.
When separating a site build into different layers, developers can much better focus on their specific jobs. It is very common in larger projects that different developers have their main tasks in a different layer and/or module, e.g., one works with front-end web development, the other may focus on web design, and another deals with server-side scripting.
Layer separation also makes a website easier to maintain. If patches need to be made in the presentational layer, then you can do so without having to deal with the markup and behavioral layer.
Separating the layers often results in a better perceived performance as well. When loading and executing stylesheets and scripts at the right moment in an HTML document, you can optimize rendering sequence, which in turn makes the web page feel more responsive.
General Principles for Developing with Progressive Enhancement
How do we apply the concept of progressive enhancement in site builds? Let us look at the three layers to see what things we can do to promote progressive enhancement within them.
About twenty years ago, when there was a need for an internet-based document standard, HTML was invented. And even with the fast-changing nature of the web, HTML is still the fundamental content-structuring mechanism for websites.
We are now lucky enough to have reached exciting times with HTML5 (and web browsers that support it), giving us access to unprecedented semantic and interoperable markup that make our content even more machine-readable.
However, even though the language has witnessed improvements and revisions over the years, the principle purpose is still the same: We use HTML tags to structure our content and use hyperlinks to link to other (HTML) documents.
Visual design is powerful. On the web, we have CSS, images and fonts to help enhance our message by allowing us to customize the look of our sites.
Coupled with HTML5 is CSS3 — giving designers more possibilities and freedom to express themselves stylistically in the web designs they create.
To translate our visual design to the medium of the web, we use stylesheets. Stylesheets are linked from within HTML documents, and the browser renders the rules we define in it.
The separation of websites into the three layers means that our 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 our sites 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.
In the early days of the web, HTML documents weren’t much more dynamic than normal paper documents. In fact, the original purpose of HTML was to mark up scientific paper documents and make them interlinked for easier referencing and research.
mouseover states on buttons and images (in the so-called DHTML period).
Some structure and best practices are required to develop and maintain usability and accessibility of robustly featured and highly interactive web applications and websites.
For efficient and robust web development that emphasizes on progressive enhancement, I would absolutely recommend following these guidelines:
- 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)
Graceful Degradation vs. Progressive Enhancement
Graceful degradation is an older concept that’s the predecessor of progressive enhancement in web design.
Graceful degradation emphasized on fault-tolerance and was more browser-oriented rather accessibility-oriented, allowing websites to degrade when older web browsers are in use.
Progressive enhancement is different in that the philosophy is almost reverse: you enhance a website by taking advantage of features detected within the user’s browser, instead of developing for the lowest common denominator.
The philosophy of progressive enhancement, on the other hand, says that we give user agents what they are capable of handling. For example, we will let web browsers that support CSS3 (like
border-radius: 4px;) apply the style rule to our web pages.
Progressive Enhancement: Issues in the Real-World
Here are a couple of important issues of progressive enhancement that you will likely run into when attempting to apply progressive enhancement principles in your site builds.
Web Apps/Rich Internet Apps Will Require Client-side Scripting
In an age where the stuff we are seeing in the browser mimics the functionality and robustness of desktop apps, the behavioral layer is a requirement that can’t be taken away if we want to allow rich and responsive experiences.
Progressive Enhancement Requires More Development Work
In practice, you will find yourself having to do more work when creating progressively-enhanced websites. Whether it’s learning (like what you’re doing now) or revising markup for semantics and flexibility, or coding extra CSS to take advantage of CSS3 and HTML5 on browsers that support it — progressive enhancement involves more web development time than usual.
Progressive enhancement is a powerful development philosophy for creating universally accessible sites and web apps. It does require some learning, experience and discipline, but the return of investment is high.
Additional Reading on Progressive Enhancement
- Progressive Enhancement: Paving the Way for Future Web Design
- Understanding Progressive Enhancement
- Progressive Enhancement with CSS
- Mobile Web Design: Best Practices
- 20 HTML Best Practices You Should Follow
- Information Architecture 101: Techniques and Best Practices
- Related categories: Web Development and User Interfaces
About the Author
This was published on Feb 11, 2011