When developing a Web site it can become increasingly difficult to maintain the separation between your different layers of presentation, content, styling and behavior. However, keeping these different areas of your site separate is important. Since the field of browsers just keeps growing, we are continuously presented with an ever-growing set of platforms that must be supported. In this article I will introduce you to Progressive Enhancement, or the technique of building Web sites that are designed to support a wide range of browsing platforms and situations.
Defining Progressive Enhancement
By separating these Web site components into layers we can more easily craft our site’s capabilities to work with the browsing environment we are currently presented with. How do we do this? We achieve this by following some basic guidelines for each layer:
- HTML – The creation of well-structured HTML is important and helps maintain flexibility and interoperability between browsing platforms.
- CSS – Add support for specific browser features and enhance the look-and-feel of the design by considering the capabilities of WebKit browsers, IE9, FireFox, mobile browsers, etc…
- Scripting – Create rich, interactive features using browser-safe methods that have a greater amount of compatibility.
What are the Benefits?
There are big benefits to implementing these progressive enhancement techniques:
Greater accessibility – All users can access content
Since reaching a large number of users is ultimately a Web site’s goal and we want all users to be able to have access to our content regardless of browsers or devices, accessibility becomes the most important reason to use progressive enhancement. If we think about all the ways that a user might access our content: desktop browsers, mobile browser, screen reader, tablet, netbook, kiosk, etc…This way you can be sure that your user will at least be able to reach the content, if nothing else.
Better Portability – Reach more browsers on more devices
The concept of progressive enhancement is not to developer for specific browsers, but to try to find a common ground between all possible browsers your site might be displayed in so you can reach the most number of viewers. This doesn’t mean that you can’t plan to take advantage of a browser feature if it has it, but you should also have a backup plan in place in case it doesn’t. Try to make enhancements where you can without alienating the users that do not have that particular feature.
Modularity – Since your layers are no longer inter-connected your sites will be easier to build and more robust
When developing a Web site, it can be difficult to focus on your particular part of the puzzle. You may be waiting for certain sections to be completed, resources to become available or changes to be made by other teammates. With progressive enhancement, the site should be developed in layers and these layers allow everyone to focus on their piece better.
Increased Site Performance – Pages will be written better so they will load faster
A well designed page will have some additional benefits of site performance because it is overall a better page. You will find that page load times will have decreased due to the increased performance of the browser’s cache and a minimal amount of server requests. Also, a page that has been developed with progressive enhancement will be able to optimize the rendering sequence which will make the page feel more responsive during load.
Developing with Progressive Enhancement
As you create each section of your page, there are things you can do to promote progressive enhancement within each layer. Here are some general principles for design:
As Web developers we know that our visual styling can be very important since our colors, styles, fonts and images help enhance the message we are trying to convey with our site. We also know we have some powerful tool available such as HTML5 with CSS that allow us greater freedom and creativity when making our sites.However, the separation of our layers means that our Web designs must work regardless of the browser environment, so we must create a site that will look and function just as great in IE6 as it does in the current version of Firefox.
How do we do this? By not creating styles that will bar the user from accessing the site’s content because the visual styles did not load as intended. Progressive enhancement of our site’s CSS means that we must not rely on CSS to render content, since that is HTML’s job. We must only use CSS to apply visual styles and in the event of an unsupported environment, still provide the content at the expense of our stylesheet.
- Put all scripts in externally linked files
- Keep the behavior of your script separate from the HTML and CSS
- Avoid browser-specific code
- Use feature detection (not browser detection)
Progressive enhancement is a powerful development concept that will allow you to create Web sites that are accessible, robust and easy to maintain. You must begin to take the time to plan your site structure, functionalities and other features in order to use progressive enhancement.In practice, you will most likely find yourself doing more work in creating progressively-enhanced Web sites but in the end you will find that a site that was written well from the ground-up will pay out big dividends down the road.