Progressive Enhancement in 2012

Posted by Pete Molinero on October 2nd, 2013

In 2012, the web is changing at a faster rate than ever before. Every day there are new frameworks, new bundles, new "best practices" and new devices upon which our web sites will be displayed. Anyone who considers themselves an expert has to be committed to one principle above all else: learning, learning and more learning. There is simply no other way to keep up.

Enter a caption for your image.

A whole set of glossy new features

Every time a new phone, tablet or device is released web designers are forced to consider a new browsing environment. On top of this, household technology isn't keeping up with the times. You see, not every personal or small business computer is thrown out and replaced every 2-3 years. What does this mean? It means millions of users still embracing the Windows XP's HTML5 bereft Internet Explorer 8.

In order to cope with the issue of widely varying feature availability, web standards experts currently recommend the use of a technique called progressive enhancement. It's not a new technique, but with today's web it's hard to ignore.

What is progressive enhancement, and how do I use it?

Progressive enhancement is pretty simple in concept: make sure that your web site works well for everybody, and is "enhanced" on the devices that support it. Here's an example. Browsers that are not compatible with CSS3 do not support the border-radius style. Solution? Build your site without border radius. Then....go ahead and enhance the look of your web site with border-radius for those devices that support it.

Progressive enhancement is not backwards compatibility

Don't be decieved; progressive enhancement is not about backwards compatibility. It's about building your website on a different foundation. It's about building something that works on everything, even if it isn't "cool". Then, you can add features (i.e. "enhance") from there. Assume that HTML5, CSS3 and Javascript do not exist when you design your web site. Then, enhance your site with those technologies so that devices that support them will give users a better experience. The best way to think of progressive enhancement is like this:

Progressive enhancement means taking advantage of slick features when they are available rather than building the foundation of your site upon them.

Progressive enhancement for functionality AND "looks"

When it comes to the availability of new features, they are usually in one of two categories: "looks" or functionality. Something like the border-radius attribute is an example of a "looks" feature. AJAX is an example of a functionality feature. In general, our use of progressive enhancement should focus on the functionality side of things. Build your web site to work well without AJAX, then enhance your web site with AJAX for those devices that support it.

Enter a caption for your image.

There's still something to be said for "looks" features, though. You see, people like to look at pretty things. People like to use pretty web sites. So rather than having your web site look pretty with CSS3/HTML5 and ugly with CSS 2.1 and HTML 4.01, make your web site look pretty on HTML 4.01 and CSS 2.1 and even prettier on CSS3/HTML5. Seriously. Make sure your web site looks the best that it can, even on older devices.

Don't just think about CSS3 and HTML5

There are more considerations that you need to make than just CSS3 and HTML5. Remember, your audience will include a large range of devices, ranging from mobile to desktop, HD to low-res, corporate to personal. When you are using the principle of progressive enhancement, you need to consider all of the following issues:

  • HTML5 vs. HTML 4.01
  • CSS3 vs. CSS 2.1 (and older)
  • Javascript enabled vs. disabled
  • HD display vs. low-res display
  • Touch device vs. mouse/keyboard device

Perhaps as time goes on we will see new features that the web can offer to touch devices. Then, we can enhance our web site with touch features that will only be available to touch devices. Get the idea?

Further Reading...

Hopefully this quick look at progressive enhancement was helpful to you. If you like food analogies and are interested in a more in-depth look at progressive enhancement, take a look at this great article by A List Apart. For the most enjoyable experience, make sure that you have a bag of peanut M&M's on hand.

Comments

comments powered by Disqus