We have learned that Progressive Enhancement is the method of building a website in layers, with the content as foundation. The notion is that if we have rich, semantic (X)HTML at the base we can drape it in layers of Presentation (with CSS) and Behavior (in the form of Client-Side Scripting) that do not affect the content at the core. But lingering browser incompatibility makes this much easier said than done. Many designs demand you stretch your (X)HTML to be less than semantic. Modern web developers must deal with the realities of extraneous wrappers or empty divs, less-than-semantic class names (I’m looking at you, clrfix), and DOM Scripting that fills in the holes that less-than-stellar CSS support leaves behind. Our layer cake is now looking like a bit of a casserole. If we want to maintain the integrity of our content layer, we need to take a real close look at our presentation layer and ask ourselves the tough question, “Do websites need to look exactly the same in every browser?” For those who believe the answer to that question is a resounding “No,” Progressive Enrichment might help you regain control of your content.
Solving the Internet Explorer 6 Problem
Lack of PNG alpha support, mediocre support of CSS selectors, a host of bizarre quirks, and hasLayout—it is enough to have any developer tearing their hair out. Some have gone so far as to abandon IE6 completely. Whatever your stance is on the movement to phase IE6 out, the fact is is that it is the de facto platform for millions of users, some of whom might not be able to upgrade to a more modern browser for a myriad of reasons. Many developers must live with this fact and can not afford to dismiss IE6.
If we look at the majority of problems Internet Explorer 6 poses to web developers, we can see that they are related to our Presentation layer. (X)HTML support in IE6 is (a few minor issues notwithstanding) fairly solid and JavaScript libraries like jQuery or Prototype largely solve browser incompatibilities and make cross-browser scripting a real breeze. What we are left with is stunted CSS support, and so developers who must work with IE6 have to make concessions that often seep through to the Content and Behavior layers. Progressive Enrichment seeks to strengthen the three layers of modern web development—providing them the independence from each other that Progressive Enhancement promotes, while at the same time allowing CSS developers to explore newer technologies and techniques.
What is Progressive Enrichment?
Progressive Enrichment is a term coined by Dan Cederholm and described by Jeremy Keith as “Using cool stuff that doesn’t work in IE.” Progressive Enrichment means layering CSS features in much the same way we layer web development technologies. Removing one layer does not affect the base. So the base-level for Progressive Enrichment is CSS that we know will work in Internet Explorer 6. We can then build up layers of advanced CSS to enrich and add detail to our presentation layer. What results is a site that really provides Progressive Enhancement by providing a simplified experience for IE6, and uses the power of CSS to its full advantage for more advanced browers.
Now some might balk at that last sentence. “‘A simplified experience?’ What about my beautiful design?!” I invite those of you who insist on providing the same experience to every browser to ask yourself that question, “Do websites need to look exactly the same in every browser,” and this time think of the very pragmatic consideration of cost. How much does it cost to support your advanced design in Internet Explorer 6? Not only does it require a significant amount of man-hours to troubleshoot the problems that IE6 presents in order to accommodate an advanced design, you end up taxing the user, as well. In order to demonstrate this, I will examine the difficulties introduced by a common design pattern—the rounded corner.
Between a Rounded Corner and a Hard Place
Rounded Corners are ubiquitous in web design. We have all encountered them, and if you are still unsure of how they are created, a quick search will provide more techniques and examples than you could ever want (no, really). For the purpose of this example, let’s suppose we have a box that needs really soft corners, and that box needs to fall in a container that has a background-image—a gradient, and not a solid color. In order to get that soft corner and the transparency, we are going to have to use a PNG. This is nothing groundbreaking. But what challenges does this design create for developing in IE6?
You’re going to have to enable the AlphaImageLoader filter to allow PNG alpha transparency. You can either use a CSS hack to apply the filter or maybe you prefer placing it in a stylesheet along with your other IE fixes and loading it in via conditional comment, thus causing the user to make an additional HTTP request and slowing page load time by a couple of milliseconds. Or you could also use a script that loads in the filter for you. The problem with using the AlphaImageLoader filter is that you can not use background-position, so you are unable to use a CSS image sprite in order to serve your image so you have got to serve multiple images, thus increasing HTTP requests. Because of the inability to position your background-image you will probably have to create an extraneous container div, or maybe even an empty one.
Just to get our nice, soft rounded corner working correctly we have either had our Behavior layer do the work for us or added extra markup to accommodate for IE6’s limitations. But there is a way we can avoid all of these IE6 workarounds and strengthen the layers of Progressive Enhancement.
Don’t serve the rounded corner to IE6
You have devoted considerable time to create a workaround just for IE6 to correctly render that box with the rounded corners. You could not use an image sprite so you had to load in additional images. More HTTP requests results in greater page load time. The AlphaImageLoader can be quite taxing to the system, and if you have multiple PNGs that need to be replaced IE6 users will start to see noticeable slowdown. You have taxed the user for a small design detail and they might not want to stick around your site, waiting for all these little corners to load. This little rounded corner has cost you a lot. So what do you do? In that conditional comment or CSS hack you would have used to load the filter, tell IE6 to not load the background-image. Simple as that. Your IE6 users get a box with a hard edge, your other users do not. You have saved time, both in man-hours and page-load, and you have kept your Content, Presentation, and Behavior layers strong and separate.
The Next Step with CSS3
You have done an amazing thing. You have accepted that websites do not need to look exactly the same in all browsers and in doing so you have begun to embrace the benefits of Progressive Enrichment. The next step is to see what CSS3 has to offer you. Browers like Safari, Firefox, and Opera can already take advantage of some really cool stuff, and Nightly Builds and Betas of these browsers are only adding more. Instead of using a background image to form that rounded corner, take advantage of -moz-border-radius and -webkit-border-radius.
The benefits of Progressive Enrichment are not just in being able to show off the newest CSS techniques, they are in providing real savings in cost, in terms of both page performance and man-hours. With Progressive Enrichment you can have your layer cake and eat it too.
There are no comments for this post.