Progressive Enhancement: What It Is and How To Use It

by in Development on 26th Mar 2010 · Comments

There's plenty of controversy between developers about whether or not we should continue to support IE6, especially with the addition of CSS3 and HTML5. No matter what side of the IE6 fence you're on, you should understand that a website cannot, and should not, look exactly the same in every browser.

Progressive Enhancement
Image credit: bioxid


This is the case because not every browser can support all the different technology that exists today. As such, developers must decide between two choices:

  1. Limit the website's potential so that it will work with older browsers.
  2. Use progressive enhancement to ensure that the site can work on both modern and older browsers.

What Is Progressive Enhancement?

Progressive enhancement is the practice of using web technology meant for modern browsers that ensures that the site is still applicable for older browsers.

Recently, I worked with a web design that used rounded corners and shadows on all the text. This gave me the opportunity to use CSS3. Instead of removing the text shadow from the design and making all the rounded corners a series of images, I did everything I could in CSS3. The result was a beautiful site on Firefox, Safari and Chrome that had a very short loading time.

And on IE, the site was still relatively similar to those seen on Firefox, Safari and Chrome saves for a few minor design differences. Don’t be afraid to use CSS3 or any other new technology. Instead of making every site fit every browser, we should make the browser fit the site.

Preview in IE

Preview in other browsers

We shouldn't avoid using CSS3 (or whatever new technology you're thinking about) just because older browsers can't support it. Instead of making every site fit every browser, we should make the browser fit the site.

Knowing Your Target Browser

It was easy for me to used features that aren’t supported in IE with the example shown above because the client was clear about their target audience. And IE users were not within their target audience.

Know Your Browsers
Image credit: hook design alter

This also applies to my own site and blog. Less than 2% of the users who have visited my site in the past two years use IE and this is the key reason why I don’t spend lots of time, money and resources to ensure that my site conforms to the parameters of the IE browser.

If your client prefers to have a site that can be supported by all the major browsers, you will have to do as they please. However, this does not mean that the site design cannot have minor differences depending on the different constraints of each browser.

Making It Work

Progressive enhancement does not mean that you have to create a lesser site to ensure that older browsers can support it. As seen in the examples above, the differences are negligible and not obvious even when the screenshots are compared side by side.

Making It Work
Image credit: saurab parakh

IE users visiting the site will hardly notice any key differences. To top it off, using CSS3 helps you save valuable time. If you do use progressive enhancement, aim to make sure it doesn't break in the older browser in any way, but is simply nonexistent in it, just how CSS3 aims to work now.

Informing Your Clients

You may know and understand the benefits of progressive enhancement. The tough part is getting your clients to understand it.

If your clients already know of progressive enhancement, it could be simply a matter of adding these details in your contract. For the example used earlier, the contract would merely state that all text shadows and rounded corners would be rendered in CSS3. If they dispute this, explain the benefits of doing so. However, if they still prefer not using CSS3 for their site, make clear that you have to adjust the quote to compensate for the extra time you will spend on coding.

Evolution
Image credit: saurab parakh

If your client is a regular, it might be a little harder to explain the differences of their site on different browsers. However, find out if IE is a must for what they want to achieve in terms of their target audience. Remind them that IE is no longer the leader of the pack out of all the browsers available today and it may be more cost effective to use progressive enhancement for their sites.

Some Words On IE6

If you’re sitting on the fence regarding whether or not to continue supporting IE6, don’t. I dropped support for IE in my default contract a few months back but left a caveat that I would support it should it be requested.

IE6
Image credit: puchullies

So far, none of my clients have requested it and I have not lost a contract because of that. Sites are increasingly becoming more complex in terms of both design and technology. Living in the past cannot be justified any longer. The usage rate of IE does not justify the time or cost to support it anymore.

The new statistics on browsers listed on W3C gave us some surprising results. Overall, IE usage is relatively low.

  • FireFox: 46%
  • Safari: 4%
  • Chrome: 11%
  • IE8: 19%
  • IE7: 11%
  • IE6: 9%
  • Opera: <2%

Some Interesting Read about IE6

  • I Dropped IE6: A site consolidating the websites that have dropped support for IE6 browsers.
  • Usability Post: An article by Dmitry Fadeyev explaining the reasons why one should drop the support for IE.
  • Smashing Magazine: An article titled The Life, Times (and Death?) of Internet Explorer 6 with a comic strip by Brad Colbow.
  • Popsci: A article by Tom Conlon titled the Excruciatingly Slow Death of Internet Explorer 6.

Your Thoughts

Have you tried progressive enhancement? What are your experiences in dealing with it? What about your experimentation with cross-browser support? Or have you already dropped IE6 support? Enter a discussion with us regarding this matter in the comment box below.

Amber Weinberg has over 10 years of experience in web development. She specializes in valid and semantic XHTML/CSS and WordPress. She has been freelancing full-time since 2009, but part time since 2004.