Unless you've been living under a rock, you'll know that Microsoft finally got around to launching Internet Explorer 7.0 last month.
Prior to the new browser's release, my company, Etre, had been receiving a steady stream of calls from clients who were becoming increasingly worried that their sites would fall apart under the new world order. This, in turn, worried us.
We had taken Microsoft seriously when they warned of inconsistencies in page rendering between IE6 and IE7. Even more so when they announced their intention to distribute IE7 as a "high priority" automatic update (thereby ensuring that the millions of existing IE6 users would adopt the new browser en mass).We'd therefore downloaded the various public betas and had thoroughly tested the sites that we'd built and maintained. Yet we hadn't unearthed any major problems. At least, nothing that couldn't be fixed with a few tweaks.
"Maybe we've missed something," we thought. So we spoke to our clients again, finding that many had been approached by design agencies prophesising doom and recommending costly redesign programmes to ensure that their sites would be "IE7-ready™". At about this time, reports from certain quarters of the media began to surface making similar claims of impending disaster. These articles often likened the automatic update process to Microsoft flicking a switch and bringing down the whole ruddy interweb in one fell swoop.
While our experience suggested that things wouldn't be quite this dramatic, we were keen to gain a better understanding of the problem (Firefox of course had a new release around the same period, but IE still has massive market share - although it's always recommended to test on a range of browsers). So on Friday 20th October – two days after IE7 was released, and two weeks before the automatic update process began – we kicked off a quick and dirty study. We fired up two machines and compared the homepages of all 100 companies on the FTSE 100 Index (the UK equivalent of the Dow Jones Index) in both IE6 and IE7. Were these companies ready for IE7? Were their sites bent badly out of shape? Had this all been a big fuss over nothing? We intended to find out.
12.7 Million Sites In Need Of A Little TLC?

The results were insightful. The worst affected homepage was that of the Alliance and Leicester bank, which despite looking neat and tidy in IE6, looked like it had gone ten rounds with Mike Tyson in IE7. Its contents burst out of its right-hand margin and spilled across its footer; while important information dropped a font size or two and became disconnected from the rest of the page.
Yet the Alliance and Leicester's homepage was the exception, not the rule. Most other homepages fared pretty well in IE7, and those that did break suffered only minor presentation problems.
In total, we found that thirteen of the FTSE 100 homepages were broken in IE7. A finding that if extrapolated to the internet as a whole (which we admit requires a bit of a leap of faith), suggests that there are around 12.7 million websites in need of a little TLC. That's 12.7 million websites that aren't ready for IE7.
Since posting the results of our study online, we're starting to think that this figure is a conservative estimate. Over the last week or so, we've turned our attention away from corporate sites and extended our analysis to online retailers. In this area, it seems like every second site has an IE7-related glitch or two (we've posted screenshots of some of them on our blog that you can take a look at). We've also been inundated with reports of companies warning their IE6-using customers not to install IE7 or telling them to expect some "weirdness" for a while (companies like Reuters, PeopleSoft and even 37signals).
For most us, telling our users not to install IE7 or to expect some strange behaviour just isn't an option. And with Microsoft's automatic roll-out process well underway, these types of issues need to be fixed fast. To help you do this, we thought that we would summarise the most common problems we've found during our studies and demonstrate how they can be fixed.
The Standards Issue

"You're wasting your time," I hear you say; "my sites are built to adhere to W3C specifications, so a newer, more-standards-compliant browser should have no problem displaying them as I intended." Hmmm – you might be surprised. One of the most interesting – and controversial – findings we've uncovered so far has been that the worst-affected sites are often those that have tried to implement a standards-compliant design. By contrast, those that haven't bothered to adhere to web standards are usually fairly well insulated from IE7-related issues.
When we published this finding on our blog, some people took it to mean that we weren't advocating standards-compliance. This is, respectfully, a load of old codswallop. The point we were trying to make (no doubt inarticulately) was that many of the sites we've studied make only the most basic use of CSS. They largely restrict themselves to styles from the CSS1.0 portfolio, and often use out-dated markup like font tags and antiquated design techniques like nested tables for layout. The net result of this is that they throw IE7 into quirks mode and, as IE7's quirks mode is largely identical to IE6's quirks mode, they see little difference in the way that the two browsers present their pages.
By contrast, those sites that have gone some way towards implementing web standards – like the Alliance and Leicester, for example – are usually in need of a little attention. These sites usually employ (relatively) clean markup, make extensive use of the CSS2 spec and implement certain hacks and filters to support different browsers. They also typically feature a well-formed DOCTYPE. These attempts at standards-compliance throw IE7 into strict mode – a mode that has seen significant upgrades in order to meet W3C specs and is therefore quite different to IE6's equivalent. As a result, the presentation of these site in the two browsers can be quite different. In part two next week we'll be looking at the reasons why.
Like this article? Digg it!
</img> </img>