Which sites will make the IE8 Compatibility Hall of Shame?

According to Microsoft, a release candidate of Internet Explorer 8 is just around the corner, and with it comes an urgent call to web designers to get their act together and tweak their sites so they’ll render properly under the new browser.

Back in August, I began using IE8 Beta 2 full time on the Windows PCs I use for everyday work. Over the last few months, I noticed a shocking number of web sites that displayed incorrectly in IE8. The only way to view those pages as the web designer intended is to click the Compatibility View button (described in great detail here).

Apparently, I wasn’t alone in having to click that button. According to IE8 Program Manager Scott Dickens, that Compatibility View button has been getting a workout this fall:

Despite all the outreach to sites, we saw from the telemetry data that IE8 Beta 2 users still have to use Compatibility View a lot. Looking at our instrumentation, there were high-volume sites like facebook.com, myspace.com, bbc.co.uk, and cnn.com with pages that weren’t working for end-users with IE’s new standards compliant default.  We could also see from our instrumentation that not all IE8 visitors to those sites were clicking the Compatibility View button.  So, large groups of people were having a less than great experience because they weren’t aware of the manual steps required to make certain sites work.

I’ve been running a near-final build of the IE8 release candidate on Windows Vista for the last week or so, and it seems like I’m clicking the Compatibility View button less often since installing the upgrade. But I’m still seeing pages that have cosmetic glitches like overlapping text and graphics or scrambled layouts. In extreme cases, these tweaked pages are practically unreadable. The reason? The designers expect legacy behavior out of any version of Internet Explorer, so CSS style sheets are tweaked accordingly. Ironically, those IE-specific design tweaks actually break layouts on the much more standards-compliant IE8.

It doesn’t have to be this way.

I know from firsthand experience how easy it is to tweak a site so that it displays properly for visitors using IE8. This week, I received a series of crashes followed by this error message when I tried to visit my personal website using the updated IE8 build:

That was enough to convince me to finally update the site, fixing all IE8 compatibility glitches. It was a ridiculously simple process, taking just a few seconds to paste a single line of code into the WordPress site header:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

After making that change, the display glitches vanished completely. In fact, the IE8 Compatibility View button isn’t even available when I visit my site with IE8 RC1, because that meta tag tells IE to apply compatibility settings automatically, with no user intervention required.

Unfortunately, a slew of third-party web sites have missed the memo and are going to continue coding for those legacy IE behaviors without making an exception for IE8. Microsoft’s response, effective with RC1, is to monitor feedback from IE8 users and build a community-driven list of websites that require Compatibility View. That "graylist" will in turn be sent to other IE8 users who elect to receive these compatibility updates. For those sites, IE8 will automatically turn on Compatibility View, with no effort required at either end of the browser connection.

This list of web sites that are incompatible with IE8 will be human-readable, turning it into a sort of Compatibility Hall of Shame. So who’s likely to be on the list? Over the last few days, I went through a few hundred bookmarked web sites to see which ones still had display problems under the IE8 Release Candidate.

I found plenty of sites, large and small, that passed the IE8 test with flying colors. Some big web services did just fine: Google Mail, Twitter, Yahoo Music, and Digg all worked in IE8’s default standards mode. Big retail sites have a vested interest in making sure visitors can see every word and click every button (broken pages mean lost sales), so I wasn’t surprised that the sites of AT&T Wireless, Apple, Tivo, Netflix, and Starbucks worked as expected, along with big travel-related properties like Expedia and Hertz. Large online-only media properties, including Salon, Slate, The Daily Kos, and, yes, CNET and ZDNet were A-OK.

So which sites failed? On the next page, I’ve listed some big (and not-so-big) examples. The list is not comprehensive, but it illustrates the kind of problems IE8 users are likely to see.

Which sites fail the IE8 compatibility test? -->

<-- Continued from previous page

Here's a short, selective list of sites that fail to render properly when viewed in the upcoming release candidate of IE8:

Techmeme – Highlighting the link in a featured story caused part of the headline text to disappear. See the white block in this screen shot? With Compatibility View enabled, you can see the rest of the headline there.

Dell Support – Scrolling lists wouldn’t scroll properly and some graphics were laid out in the wrong place.

The New York Times - Graphics were positioned improperly, overlapping text beneath them, and a multimedia control also spilled out of its assigned column to cover text in an adjoining column.

Emusic.com – I saw some serious display glitches, including graphics that covered up text and some drop-down list controls that pushed the rest of the page out of position when clicked.

Newsgator Online and Acronis.com – Both of these sites suffered minor display glitches. Sites from smaller companies like these, which have traffic far below that of the big sites, might not hit the radar of Microsoft for months, if at all.

But the most severe compatibility problems I saw were from two sites that you’d expect would do a better job of enforcing compatibility.

Google Analytics – The Dashboard page displays web site traffic data using a Flash control. On two systems running recent builds of IE8, those reports were blackened and unreadable until I clicked the Compatibility View button. (On one system, in fact, the compatibility problem was so severe that it caused the browser to crash and recover repeatedly until it gave up and automatically applied compatibility settings to the page.)

And finally…

Slashdot – Individual stories on the premier “News for Nerds” site were practically unreadable under IE8 until I clicked the Compatibility View button. Graphics shifted and disappeared, huge white spaces separated the story from the comments below it on the page, and the banner ads on some pages failed to display even with Compatibility View enabled. (The same page displayed correctly in Firefox 3.)

If you’re responsible for a web site, big or small, you might want to take a careful look at it after the IE8 Release Candidate comes out. As I discovered, the fix is relatively easy to apply, and Microsoft also has detailed information and a wizard that can help with ensuring compatibility for larger sites. Full instructions are available at the Internet Explorer Compatibility Center.