An Overview of Progressive Enhancement: How to and Best Practices

August 21st, 2012 Leave a comment
Like the article?
An Overview of Progressive Enhancement

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

Like I said in the intro, progressive enhancement is the idea of building a Web site with a solid foundation that allows it to be supported on almost any browsing platform, whether that is mobile devices, netbooks, screen-readers, tablets or desktops. To achieve this, the Web site must maintain the separation of HTML, CSS and client-side scripting content (such as JavaScript). To do this, we think about the Web site as a system of layers:

Web site as a system of layers

In the first layer we have our HTML, it is the foundation for the site and will determine the structural elements of the page. In the second layer is our CSS which will determine the style “look and feel” elements of the page as well as handle some of the movement/positioning of the structural HTML pieces. In the final layer we have the client-side scripting that determines the behavior of page elements and provides the interactivity for the page. This is usually thought of as JavaScript but it could be any client-side technology such as Flash, Java applets etc…

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.

What this means is that if JavaScript support is not available, you have designed a way for the user to still be able to access the content anyway. Or if you have content that is readable by a search engine crawler bot, that it is still readable by a blind persons’ screen reading software. Ultimately, you need to be sure that you have built-in to your HTML, CSS and scripting the ability to put all content within the grasp of your user.

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.

This increased separation will also create a site that is easier to maintain. No longer will you have to deal with digging through the markup to make JavaScript changes. You can make changes to one part of the site without having to deal with other pieces since they are no longer entwined.

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:

HTML

HTML should no longer be used for anything other than a content structuring mechanism. We should create our content tags and hyperlinks with the idea that we may have to support the page on HTML alone. If JavaScript support is gone we need to have an appropriate setup in place that will allow the user to continue to use the site unimpeded, which is possible with a little effort.

CSS

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.

Scripting

It can be difficult to create complex applications without entangling your JavaScript into your HTML, but here are some guidelines for using scripts with progressive enhancement:

  • Put all scripts in externally linked files
  • Develop unobtrusive JavaScript
  • Keep the behavior of your script separate from the HTML and CSS
  • Avoid browser-specific code
  • Use feature detection (not browser detection)
  • Test your site with JavaScript off to determine what can’t be done when scripting is not available on the client.

The most important step you can take to make your JavaScript layer better is to know the language, along with the good and the bad, and how to use the right tool for the job. Your JavaScript should be clear, clean and easy to maintain as part of a progressive enhancement site.

Conclusion

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.

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment