IE6, VML, AlphaImageLoader and You (and Your E-Commerce Baby)

by keif on October 23, 2009

A constant debate is always “why support IE6? It’s expensive, it’s annoying.”

Now, I’m not disagreeing with that. I don’t like IE6. It’s old. It’s broken. I’d prefer it went away. Unfortunately, IE6 represents over 30% of all IE traffic (which represents roughly 64% of all internet browsers).

It’s not representative of my site.

If you pay attention to your browser metrics, you can see that IE6 is not representative of your site. At all. You can see this as a green light to ignore IE6 (particularly if it’s an intranet or members-only site, as you can dictate browser requirements as a “bare-minimum”). If you’re a blog, I’m all for ignoring IE6. I encourage more sites to do it.

Now there is one slight flaw with that argument. What if your site gets dugg? Slashdotted? Attached to a virus and spread? Date Is ay it – maybe an article you write goes viral?

Some Microsoft This Way Comes

Outside of a sudden surge in popularity, the other *very realistic* look is e-commerce sites. I don’t care who you are, a dollar is a dollar, and as such your e-commerce site better accommodate every visitor. No flash reliance, no JavaScript reliance. Period. I don’t care about it looking the same, but I better be able to make a purchase via Lynx. More importantly, any handicap should be accounted for (blind is the most often thought of). This is what we call Web Accessibility. All angles should be covered, within reason. And IE6, regardless of your metrics, is within reason.

AlphaImageLoader – Ye Olde Standard

I think anyone who is “in the biz” knows about AlphaImageLoader. We’ve all done the CSS replacement. I helped adjust and edit a MooTools Class that utilized it to account for all sorts of PNG situations. It was our “standard” because it was able to account for IE6 with a minimal amount of effort. Except…
AlphaImageLoader does not support background-repeat, or background-position. It requires set heights and widths. It requires one-off styling for images that are cropped. Plain and simple, it still sucked.

VML – The New Contender

I stumbled on a VML solution after researching a site to see how they were handling PNGs. It turns out they were utilizing DD_belatedPNG. I dug into VML vs. AlphaImageLoader and came across this article explaining the same thing – AlphaImageLoader or VML.

The obvious is pointed out: AlphaImageLoader eats memory. VML adds bad markup to a page. IE6 does *not* cache the image (according to the article, at least).

So, we’re stuck with a memory hog or a lot of image requests against a server, which can add to a lot of bandwidth costs if your traffic spikes (it happens).

Will The Real Slim Code Please Stand Up?

After reviewing DD_belatedPNG a second time, he claims to “mostly” have fixed the caching issue. To be honest, with as much grief I’ve had from AlphaImageLoader and changes in creative layouts that require PNG transparency, it seems like a real replacement for AlphaImageLoader, loaded using JavaScript and conditional comments so ONLY IE6 takes the hit.

The downfalls? No opacity on the VML. I haven’t looked into creating a container to wrap the VML and fading that, but call me crazy, it may not work. This means we may have to keep AlphaImageLoader around for a little while longer. I’m not sold that either solution will replace the other, but they both are going to be invaluable until IE6 goes the way of the dinosaur.

Performance Concerns? Not with VML.

Thank God someone else ran the numbers. Tests have been ran, and also Yahoo! provided some additional numbers to help showcase that VML is not the memory hog AlphaImageLoader is. Bonus!

There is the argument that a PNG 8-bit image is a better solution. No CSS hackery, no JavaScript intervention. However, it requires whomever the developer is, and also whomever the designer is cutting up your graphics to be familiar with proper image optimization techniques to insure an efficient, optimized experience.

The REAL Solution
The priority of the solutions seems evident. PNG 8-bits for most cases. VML through most others. AlphaImageLoader only as absolutely necessary. I do believe that a JavaScript solution is the best solution for IE6 AFTER 8-bit PNG images (ran through a PNG optimizer (like PNGCrush).

Unfortunately, such optimal solutions require trained developers and trained designers. Who has time for that? You should make time to insure success.

Enjoy.

Previous post:

Next post: