It was disappointing to see the unwarranted uproar that occurred in the comments of my article on Smashing Magazine on cross-browser CSS. But in retrospect, it was probably a good thing, because a more important (but related) issue was brought to light in the discussion.
But progressive enhancement isn’t just limited to what we accomplish with fancy Ajax, jQuery, and CSS3 that’s just part of it (albeit a very significant part). I would like to take the Wikipedia definition of progressive enhancement just a little bit further. Here is the definition:
Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.
Although that definition works fine for accessibility purposes, our project goals are much larger. They involve branding, conversions, clickthrough rates, and sales revenue.
For virtually every website we build for our clients, the ultimate goal is creating an experience that will optimize conversion rates. Designing with progressive enhancement allows a website to reach the most people, and because of this, will ultimately achieve higher conversion rates (or at the very least have the potential to do so).
What Does This Have to Do With IE6?
While my article on cross-browser CSS instigated this discussion, some more important points were made in the comments by someone named “Bair”. I’m going to give him full credit for enlightening me further on this matter, and quote some of his words here, because I think he puts it quite well:
Progressive enhancement is the prettier cousin of graceful degradation. Progressive enhance your designs from IE6, don’t degrade your designs to work with IE6. An IE exception is rarely necessary when enhancing designs. When degrading designs there is too much reliance on IE exceptions. source
If your code for IE6 is incorrect, you are doing it wrong. You can perfectly start with IE6 and code your HTML and CSS correctly… I very rarely need IE exceptions in my designs… I’d say this reliance shows you aren’t coding your HTML and CSS correctly first and foremost, regardless of which browser you code in. source
The first thought should be: How do I make this work for IE6 while adhering to standard code? That mindset creates designs that need no exceptions, and provide the best experience to those lower on the technology/accessibility scale. IE6 should not be an afterthought. If IE6 is the starting point for a design, you can make it render the best representation of the design. I haven’t heard of any modern browser that has troubles with standards compliant code that initially renders fine on IE6. source
Standards-compliant code built with IE6 in mind is far less bloated than standards-compliant code build for modern browsers, and made to work backwards for IE6+ with exceptions, style sheet overrides or ie7.js. source
Although much of that discussion was really not directly related to the main topic of the article, the points Bair made (which were in response to the negative comments others made about my advice to “use IE first”), are in line with what we understand today about accessibility and progressive enhancement.
Of course, IE6 can still be “accessible” in a technical sense even with a broken layout and missing transparencies, etc. But is it really in our best interests to visually lock out that many users when it could mean lower conversions, fewer sales, and a much less effective branding effort?
Clearing Up Misconceptions
And just to clarify, this does not mean that I’m encouraging that developers code for IE6 and IE7 using less-than-standard code without giving much attention to the other browsers until the end. The purpose of using IE6/7 first (or very early) is to create a layout that minimizes hacks, workarounds, conditionals, and other junk that will be inevitable if you only check IE at the end. The layout should be checked early in all browsers, including IE6/7 and a more modern browser like Chrome or Firefox. The exception would possibly be when you are designing a niche site in an industry where IE6/7 usage is very low (i.e. 0-5%).
So, my advice to all front-end developers is: Learn the ins and outs of CSS, and learn what is good code, and how elements and properties should behave. If you do that, then you’ll have no problem creating a standards-compliant layout that works nicely in all versions of IE, and will thus have the potential to reach anywhere from 15-30% more users than would be the case otherwise. And when I say “reach”, I’m talking about accessibility, visual effectiveness, and overall branding.
Progressive enhancement is here to stay, and in my opinion, coding with IE6/7 in mind very early in your projects is the only way to truly apply progressive enhancement principles in a realistic way that benefits our clients.