Progressive Enhancement: What It Is and How To Use It
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.
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:
- Limit the website's potential so that it will work with older browsers.
- 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.
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.
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.
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.
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.
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.
Great article, i completely agree with you. I don't support ie6 unless its requested either. Great choice of images too, I really like the tree-house one!
I don't think you can really use W3C's browser stats. I've found IE6 usage to be more in the 20-25% range with bigger "corporate" clients.
I think it's fair to use their's as a comparative, but of course, it always depends on your target audience. I found that most sites I do have little to no IE6 usage, and that's including sites for regular companies, shopping, old people etc etc.
I have to agree with Mike. Even though I've also dropped IE6 from my default contract one shouldn't look away from the proper stats.
I've found these to be pretty reliable: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2
Good article, especially about whether to use new technologies or not.
Although your comment about the IE usage on W3C is invalid:
The statistics on W3C are based on their own visitors and those are mainly webdevelopers, which don't use IE6 (unless for testing). So the statistics are only showing what the visitors of W3 are using and not global. (This is also noted on the W3C site, below the numbers.)
My view is: use all the techologies your target visitors can handle and make sure you provide a backwards compatible solution for those who can't. Even when it's a message which says they have to use another browser.
My comment about W3C isn't invalid, it's their stats and that's what I listed. I've really had no demand for IE6 ever since I dropped it, not to say I never will, but I think that's really saying something considering the sheer amount of sites I do and the diversity of clients I have.
I think we're pretty much to the point we were when everyone was deciding whether or not to drop IE5. There are still developers out there who support it (for no reason) but there has to come a time where you finally say "It's not worth it". But that is ultimately dependent on your target audience.
You are right, just need to be strong and tell clients to update their browsers (wait I hear some food step!, my [IE6] clients ...help!... Johan I think they are happy now thanks!) =)~
Dropping support for IE is just something I can't afford. Most of the corporate companies here in my country are still using IE, they just don't upgrade. I do not know what the reasons especially when there are open source browsers out there. This trend most probably will continue to stay with us unless someone put a law to it.
Great post. I've played with the idea of progressive enhancement for a while now, but have not actually put it into practice yet. Unfortunately where I work, we're still supporting IE6 in full.
That being said, I think it's about time we stop trying to make ie6 look like a pixel-perfect equivalent to more standards-conscious browsers. Good design doesn't have to be exact across all browsers. It just has to be good.
Nice article, Amber! I am wondering why the W3C does not enforce the web standard. I meant we really should get rid of Web 1.0 and IE6 in order to clean up the Internet!
I dropped IE6 support a long time. How else is the industry going to move forward? If a client asks 'why does this not look right in my browser?" and I find out they run IE6, I simply tell them "That's because that browser is what the industry considers "legacy", which means it's really, really out of date. I'll e-mail you a link to upgrade or download a different browser."
I try and convey that majority of the internet has moved on from IE6. I throw it back on them since THEY are the truly the weakest link in the entire process if they are still using IE6. If anything, I build up the fact that we adhere to the latest and greatest. After all, don't you want a company that codes for the next generation browsers rather than spending its time in the days gone by? Not saying we don't support current browsers as far back as IE7, but IE7 is leaps and bounds ahead of IE6. I also try and stress the security flaws that are inherent in using such an outdated browser, as well.
Enjoyed reading this article, thanks. Just a note to say that I work in a government organisation (as a small potato) and having worked at two different offices, both places use IE6, which all employees use to access the WWW. If my offices are representative of government organisations in the country, upgrades in the short term do not look likely.
.... quite an interesting article Amber !! :)
This is the only thing I do for IE6 http://code.google.com/p/ie6-upgrade-warning/ :)
I agree with Jason, also i think it is part of professionalism explaining your clients about the benefits of upgrading the browser. Nice article, they are very helpful for me as a beginner freelancer. Cheers from México :)
Hi! great article. I agree with dropping the IE6 support. IE6 has been outdated almost seven years ago!. But i think you missed the point bout progressive enhancement. Although *one* of the results of progressive enhancement is keep the site functioning in old browsers, this is not the purpose of it. The purpose of progressive enhancement is let any user agent have easy access to the information and render it the most ergonomical and effective way they can do. This is a broader goal since it has to do not only with "old browsers" but with mobile browsers, text-only browser and user agents used by people with special condition. The attitude taken with progressive enhancement is not to concentrate in design but to concentrate in information, not display but meaning, not beauty but semantics.
@ Marcos....
Great post, but would have to say that it's purpose is both design AND information, in that pesky gray area of absolutes. :)
I must say I'm highly disappointed by this article Amber, I've come to expect better from you.
It seems less like an introduction to PE than a load of anti-IE rhetoric.
RE stats, they aren't invalid, but your use of web-community ones is biased. Please use stats from a more neutral source in future. Maybe average 2-3 sources.
@Lars: You have no right to tell the user what to do or what browser to use. As other comments have stated, often the user has no choice and you are therefore simply being sadistic.
The user is who we make websites for, they are the whole reason for 'the process', and the point of PE is to accomodate as many users as possible, whatever method they are using to view the website.
Not 'throw it back on them'. You are therefore the weak link when you spoil the user experience.
Yes it would be nice if everyone used FF/Chrome and we could go nuts with CSS3 and HTML5, but the fact is that you can't have your own way all the time so grow up and get on with doing your job, just do it right.
@Jason: many web users don't know what Internet Explorer is - google walked around new york asking people what a browser was and the most common answer was 'Google'. Interrupting their journey with (to them) jargon and telling them to install software is not going to help.
@Heinrich: By all means educate the client, but they are just one person. Getting them to use firefox / ie8/ chrome (as I have done in the past) isn't going to change their users.
/tirade.
@Jonathan What are you talking about? This is not anti-IE at all. Progressive Enhancement has nothing to do with bashing IE. Perhaps you should read the entire article before you start talking down to the author and commenters.
1) Progressive enhancement is the use of tactics that don't do any harm or even show up in IE...how is this harmful? Why hold back your site's potential just so it looks perfectly exactly the same in every browser? As several successful and top CSS developers have stated "No website should look the same in every browser" but the website should be optimized to perform as best as it can in the browser. Boagworld had a great example of how this is already done in the game design world when going cross-platform.
2) You can cry about IE users all you want, but the fact is, even on the most normal brochure site, IE6 usage is below 9%, so why would you support it? If YOUR site has a higher usage rate that that, I clearly stated above that you should cater to your users. Which again, is NOT "rheteric"
3) User experience means nothing when you don't have any users experiencing your product anyways. Why waste the extra development time in IE6 if you have no users? Why make your site look worse just to support a browser hardly anyone is using? Do you also support IE5 then? IE4? What about Netscape? There are still people using those, should I visit your sites to see if they work in those?
So please, make sure you read the whole article and don't put words in my mouth. I don't bash IE I full support IE8-7. I don't support IE because both my USERS and clients don't use or want support for it.
Amber took the words out of my mouth. Unfortunately Jonathan, many times (at least in my experience), they user has entire choice, they were just unaware of the literal paradigm shift of a difference when it comes to IE6 vs. IE7+. If they don't have a choice, I of course sympathize and help them in any way I can. I am quite aware I can't "have it my own way" (thanks, Dad), but I also do my part in moving the industry forward, rather than support legacy software, because there's nothing progressive or enhanced about that.
@Lars: my apologies that my comment was rather hot-headed, thank you for responding so well.
My own personal attitude towards users who DO have the option to upgrade is to remember that often they are not nearly as tech savvy as we are* and should not have to suffer a lesser experience because of it.
* As my comment to Jason about Google's survey [http://www.youtube.com/watch?v=o4MwTvtyrUQ] suggests – an amusing if mildly depressing video.
@Amber: My point, Amber, is that Progressive Enhancement (PE) has absolutely nothing to do with a specific browser, be it Internet Explorer version X, Firefox, Opera...or even Lynx.
However, your article barely seems to explain the concept, rather it focuses on very specific examples and circumstances, and doesn’t go into enough core detail to be of use to someone unfamiliar with the concept.
There was no need for you to mention IE at all, no need to tell everyone to get off the fence and drop support for IE. And certainly no need for more than half of the article's images to be quite resolutely anti-IE(6).
I’ve have answered each of your points below, however the discussion has taken a decidedly anti/pro IE6 support slant so I’ll leave it at that. I welcome your response to my comments.
In the near future I will be publishing my own articles on the topics of IE6 support, proper application of PE given the current state of the web, and the extents to which we can begin to use HTML5 and CSS3.
I hope you will read them and provide me with your own comments.
1) At no point did I say that PE itself was harmful. I think PE happens to be one of the best web development practices there is.
Progressive Enhancement can be over applied however, leading to a less than ideal experience for a significant number of users.
I am well aware of the opinion of a number of ‘top’ web developers and how far they go with their interpretation of PE and its application to IE, which is a subject for another day ;)
I also have my own opinion on the “do websites...in all browsers” topic, which I will be publishing very soon too.
2) Just to make you aware, my personal threshold for dropping support for a browser is 1-3% depending on traffic volumes, which I think is quite reasonable. But that’s beside the point.
The point is that when I’m making a website I often don’t know what the IE(6) share will be – all I usually have to go on are average statistics from places like statcounter et al - and I always check 2-3 of them. Current averages say to me that all 3 IE versions are above my threshold.
In the event that I’m re-designing a site, I might have access to analytics data showing browser usage, but a new site often means new marketing efforts which can change all that anyway.
Given the irrefutable evidence that IE6 is still in use by a large number of web users – both locally and globally – I take the safer approach that I should support it unless shown evidence that I don’t need to, on a case-by-case basis, not the other way around, which is what you seem to suggest should be my course of action.
3) I presume you mean what’s the point making sure a site look the same in IE6 if there are no IE6 users? Of course you are right, that would be silly. However I’ve not said otherwise.
I won’t go on, as I think I’ve answered this one quite succinctly above, but what I will say is this: I would never make a site look worse in more advanced browsers by supporting IE6.
If a designer hands me a PSD then the XHTML and CSS templates I produce will match it. I can make any design in CCS2 that you can with CSS2+3 with the added bonus that my IE6 visitors get to enjoy the same experience as FF/Chrome/Opera ones do.
I look forward to continued discussions with yourself and other members of the web community on this subject.
Websites should look the same in every browser, and if you disagree with that then you are forgetting about what your job actually is. Granted there are times when this does not apply, however 99% of the time it does apply.
All websites have goals, the goal can be anything from reading the content on the site, to buying something from a store. (Why would a company pay to have a website built if they didn't get anything out of it?)
So, you have a website, and it looks really nice, but people are not buying. What do you do? You test, and see what makes people buy more. For example you might try changing the colour of the call to action or maybe you want to try a call to action so that is has rounded corners and a dropshadow.
So you add it with CSS3, and you decide from the results of the test to keep the rounded corners and drop shadow (because there was a 100% increase in the number of people clicking the call to action. Oh but wait... You forgot to support IE6, so between 5% and 65% (Yes I have a client that has 65% of their traffic from IE6, in most sites it is probably around 20%) you have not changed the number of people using the call to action. So your 100% increase was only for 80% of you market. If we say that every percentage is worth ten pounds a day (and assume that I'm too lazy to do the maths properly) you are losing your client (20% of your raise in clicks on the call to action) £200 every single day!
Thats right, they paid you to build them a website, you failed to explain the true implications of not supporting IE6 to the same level that you support your other browsers. Now lets say that IE6 is going down by 1% a month (I wish!) so thats 20 months before its gone, on a 30 day month, you're going to lose your client a lot of money (£6,000 in the first month, £5,700 in the second month etc etc if you add it all up) £63,000 by the time that they have no IE6 users. now lets face it, it does not cost 63,000 to support IE6, using progressive enhancement and some nice javascript to replicate the same fucntionality in IE6 as you can do in newer browsers.
I bet that if you told your client that you were going to charge them £63,000 to not support IE6 that they would want your to support it (not sure on your rates, but i'm sure £1,000 would cover IE6 support).
So remember you might think that using CSS3 is progressive, however does it really take that long to add a few more lines of code to give the same effect to all browsers and save your client £60,000+?
Now thats the making a site look the same in every browser, how about something useful....
Remember when we all started using PNG files and then just the png.htc (or whatever version you found / wrote) to make png's work in IE6 quickly...why not do the same for rounded corners?
http://code.google.com/p/curved-corner/
Take a few minuites to use google and you can make supporting IE6 much less of a headake.
Whats my point? Anyone that thinks that building a site that works the same in all browsers is a headache is not doing their job properly, and even worse if you convince your clients that it is not important, you are costing your clients money... Money that you could be taking a split of by charging to do the extra work to get the job done.