Getting Ready for Internet Explorer 7: An Audit Checklist Before October

A confession from our own bench: we have spent parts of this spring un-hacking sites we inherited. Their layouts were held together with CSS tricks that exist only to fool Internet Explorer 6, which means layouts with an expiration date. That date now has a season. IE7 is in public beta, Microsoft says it ships this fall, and it will arrive through Windows Update. Your visitors will upgrade whether anyone plans for it or not.

Why a better browser breaks things

Here is the irony: sites will break because IE7 follows the standards better, not worse. For five years, developers have targeted IE6’s specific bugs with specific counter-tricks. Those tricks work by exploiting flaws in how IE6 reads CSS. IE7 fixes many of the flaws, but not always the behaviors the tricks were patching over.

That produces the worst case: the trick stops working while the quirk it fixed partly remains, in a browser that will be on millions of machines by the holidays. Sites built cleanly to standards will mostly sail through. Sites built on hacks get a live test on Microsoft’s schedule. The good news: you can take the test early, in private, this month.

The audit, in order

1. Find your hacks

Search your stylesheets for the telltale signs: star-html selectors, properties starting with underscores, and comments containing ‘IE’ followed by an apology. Each one is a place where your layout depends on a bug. List them all. Ten minutes of searching beats an October surprise.

2. Test in the actual beta

IE7 Beta 2 is free to download now. Install it somewhere safe, since IE versions refuse to share a machine, and walk through your key pages. Homepage, top landing pages, forms, checkout or donation flows. Look for collapsed layouts, overlapping elements, and navigation that has wandered somewhere creative. Take screenshots of what you find.

3. Prioritize by traffic

Your analytics tell you which pages matter. A glitch on the homepage outranks a broken archive page from 2003. Fix things in the order your visitors will hit them.

4. Fix toward standards, not new hacks

The tempting path is finding IE7-specific hacks to stack on top of the IE6 ones. Decline. Every hack is a loan against the next browser release, and the interest compounds. The durable path is to rewrite the broken CSS correctly, then serve any needed IE6 fixes through conditional comments. That is Microsoft’s own clean mechanism for targeting old IE in a separate, labeled file, one you can delete ceremonially in a few years.

Cheap wins while you’re in there

Two IE7 improvements reward a little prep. It finally supports transparent PNG images properly, so design techniques you have been avoiding become simple. And tabbed browsing will change how people use your site in ways your analytics will notice. Neither justifies its own project. Both are worth a line in the same work order.

Set up a sane test environment

Microsoft made Virtual PC free this summer, which solves the old testing headache. Keep your main machine on IE6, matching most of your visitors, and run the IE7 beta in a virtual machine you can reset. Our own test list runs IE6 first, then the IE7 beta, then Firefox 1.5 and Safari. That order is what typical visitor numbers say.

While the download runs, check your DOCTYPEs. Pages missing this one-line declaration render in quirks mode, a throwback that imitates the bugs of 1999, and those pages face IE7 on a completely different path. If your templates have it wrong, fix that line before anything else on this list.

Don’t stop at your own code. The third-party pieces on your pages, like the stats widget or the vendor’s calendar, face the same test on someone else’s schedule. List everything you didn’t write and ask each vendor about their IE7 plans. The ones with good answers are telling you something about who to keep buying from.

The budget conversation

For most sites, this audit-and-fix takes days, not weeks. Two afternoons of checking, a focused fix cycle, a retest. The exception is the site whose whole layout rests on hacks. If that is the finding, point the money at rebuilding the templates properly instead of re-hacking, because IE7 will not be the last browser release. Just the next one.

A broken layout in the browser your visitors auto-update into is not an IT nuisance. It is your homepage looking broken during someone’s first visit, in the season when fall campaigns bring your most important traffic. Two afternoons now buys a boring October. Boring is the goal.