Fear not. I Have Conquered IE6, and You Can Too

Web design is about many things. I’d like to focus on a single aspect of Web design that is Internet Explorer 6. Not IE7 and its ability to put some makeup on what once was IE6, not IE8 and the great potential on that side of the fence. I’d like to focus solely on Internet Explorer 6, arguably one of the more popular (by usage statistics) browser for the next half decade.

Browser usage; who cares?

I follow usage statistics. I follow usage stats not only for my personal sites as well as prospective client sites (when possible), I also follow usage stats for existing client sites for which we collect analytics, as well as more broad metrics from services such as Market Share. As with all statistics, it is terribly important that you search for and validate as much data as possible before coming to any sort of conclusion. Browser usage metrics are values designed to be taken with a (decently sized) grain of salt. Of course user agent strings can be easily forged, and data sets can be easily skewed. The important thing to remember is: browser usage should still be of great importance to you as a modern Web designer.

I’d like to be completely clear in saying that usage stats should be important to you as a professional designer, but the numbers should not have adverse affect on your design. Modern Web design has taught us that a well balanced combination of progressive enhancement & graceful degradation can simply work wonders.

When it comes to tackling IE6, we can guarantee one another that there won’t be too much progressive enhancement going on. Instead, we’ll be putting graceful degradation at the forefront of our minds; thinking of straightforward ways in which to make the user experience equally valuable. My professional opinion is that IE6 should not be disregarded.

I do not propose that any exorbitant amount of time, effort, or money be put behind any sort of IE6 movement. I do feel that the choice to not support IE6 should be backed by useful data about your target audience, and at the very least a minimal version of your document be available for use.

IE6 and me

Every Web designer I’ve spoken with offers a familiar shudder at the mere mention of IE6, which usually turns into a moment of comradery between the two of us. It’s no secret that IE6 provides a sub-par browsing experience, that horse has been beaten to death too many times over (along with its entire family of IE6 horses) for my liking; and I’m not the only one. There are many designers who have taken the leap to complete lack of support. There are others who continue to describe each ache and pain provided by IE6 on a fairly consistent basis. Me, I’ve taken a more passive approach in accepting IE6 for what it is, and coming up with my own plan of action.

In my personal opinion, it’s going to take a worldwide colossal event to remove IE6 from our lives. Take for instance, the following graphs. These graphs represent browser usage on Monday By Noon, as well as usage statistics for a client website with a much more technologically diverse audience.

Browser Usage Statistics

Monday By Noon is aimed at a very specific audience; Web designers and developers. To anyone who reads, questioning the market share IE6 possesses would seem to be a silly question. You would think it would be a safe assumption that IE6 market share for that traffic wouldn’t amount to much at all. I was surprised to find out that recent metrics show IE6 holding strong at 5% of my viewers. I cannot think of a decent explanation for that. Believe me, I’ve tried.

A more realistic (and therefore more useful) graph to take a look at is that of the general traffic website. Internet Explorer six is responsible for about 22% of traffic on that website. That percentage falls in line with what I’ve found to be (mostly) true with general traffic on the Web. At the time of this writing, about 25% of traffic on the Web is carried via Internet Explorer 6. To say that’s insignificant is simply untrue.

I feel that I should be completely explicit in saying that if your target audience simply does not coincide with numbers like these, and you’ve made the educated choice not to support IE6, I can find agreement in that. The important thing is that your decision was educated, not made by following the latest fad. Internet Explorer 6, in and of itself, still holds great importance to any Web designer.

That said, I’d like to share the details of my IE6 strategy.

Strategizing your IE6 process

Like all good outcomes, my accommodating IE6 starts by coming up with a plan. When reviewing design comps, I’ll start by visualizing the overall structure of the document and how the CSS will be applied to that. Before making the first cut, however, I will go over in my head what will likely give me trouble when working with IE6. Yes, IE6 has earned those five minutes of my time, and it will pay off ten times over when it comes to testing.

Throughout my analysis of the comp, I’ll decide whether various design features will be “worth it” to implement. The “worth it” scale considers both the target audience as well as the design purpose. If the target audience is minimal, and the design purpose is subtle, I will plan to gracefully degrade that feature. An IE6 user isn’t going to notice that there isn’t a drop shadow there.

I’ve honed my process so that the only hurdles left for IE6 usually have to deal with PNGs. Past experience will tell me whether a PNG will work within a particular application. If obtaining alpha transparency simply isn’t “worth it”, I’ll go ahead and use a gif. If the transparency offered by a gif will just look sloppy, I’ll figure out a way to use a jpg.

I’ve found that it isn’t worth my time to rip my hair out to make sure a design element is carbon copied from the design comp, if a gracefully degraded version will work out just fine. After all, we’re catering to a small(er) group of users employing a long expired browser.

Of course, tackling alpha transparency is hardly a well kept secret. By far the most frustrating thing to deal with when testing in IE6 is layout.

How to avoid layout headaches

Mastering the float is one of the biggest learning curve for modern Web designers. It’s very frustrating to finally grasp what’s going on only to realize the need to spend just as much time ‘making it work’ in IE6. I’ve seen it happen many times, and it will happen many more. Lucky for me, I’ve got two methods which have saved me many headaches when it comes to testing.

Respect the Box Model
As I’ve said before, something I always keep in mind is to avoid box model inconsistencies. Find a way to prevent setting a margin/padding along with a width/height. Stopping yourself there will work wonders.
Margin and padding bugs with lists
Even if you stop yourself from falling into Box Model traps, IE6 has a way of completely destroying your carefully styled list items. If it doesn’t have one, give the parent list element a width, and set width:100%; float:left; to each child <li>
Control your clears

This tip heavily depends on your clearing method of choice. I’ll explicitly state that my experience has lead me to know and trust the overflow:hidden; method of clearing. If you’re not familiar, adding overflow:hidden; to a parent element containing floating children will force that parent element to encapsulate its children, effectively clearing itself. This method has worked well for me for years.

Working with this method of clearing and IE6 requires you to have a small trick up your sleeve, though. Simply adding overflow:hidden; to your parent element won’t work in IE6 if the element hasn’t triggered hasLayout. Luckily this is (usually) a very easy fix. To force that parent element to clear itself in IE6, simply open your IE6-specific stylesheet and add height:1%;.

Adding height:1%; will trigger hasLayout and your element will now clear itself, allowing you to move on quickly. Of course this solution isn’t always perfect. This method requires you to plan ahead, setting up parents and children to cooperate. For me, this clearing method has allowed me to write lean, semantic markup, with a minimal IE6 contingency plan.

It’s very important to keep in mind, however, that this clearing method can backfire and turn on itself. As your designs become increasingly involved, you’ll develop a tendency to toss height:1%; on everything. Resist that urge. In order for this to work, you’ll need to only add height:1%; on each of the parent-most elements you’re trying to clear. That’s not to say you can’t use this method more than once per design (you absolutely can). You just don’t want to end up overlapping your height declarations, possibly resulting in more hidden content than you started with.

Keeping those three tips in mind should give you quite an arsenal when it comes to IE6. Keep in mind that all you need to do is gracefully degrade. The more websites you design, the better you’ll become in dealing with IE6 during testing. Before you know it, your IE6 stylesheets will only be a few lines long, and you’ll be able to focus on the best parts of Web design, not the worst.

Do you have any IE6 rules you live by? What tips/tricks/techniques have you come up with throughout your career?

Additional Reading