A day after I “finished” the design for this blog, I checked to make sure that everything was working as intended in browsers that I don’t have installed.

Perhaps unsurprisingly, the layout breaks in Internet Explorer versions 6 and below, presumably due to a bizarre bug in IE which causes float margins to be doubled.

For a few days, I considered what the best approach would be to resolve the issue. On one hand, I want my blog to be universally accessible. For instance I made sure that users with flash, javascript or even images disabled would still see full functionality. In the past I’ve even chastised designers for creating menus that disappear behind flash animations on Ubuntu Firefox. Around 25% of internet users still use IE6, so surely it would be in my interests to support the browser fully.

On the other hand, supporting old IE versions isn’t entirely straightforward. They’re difficult to debug for (particularly on a mac) and standards non-compliance means that otherwise simple fixes become unpredictable. The expense was enough, for instance, for 37signals to cease supporting IE6. Furthermore, I believe that non-compliant browsers should be opposed as a matter of principle, as many others have argued before me.

So, to fix, or ignore?

Ultimately I decided not to support old IE versions, to allow old IE users access the site, but to provide a warning message and upgrade recommendation. This is the best compromise I could come up with between accessibility and standards-compliance principles. Show up to my blog with IE6 or lower, and this is what you see:

There are a few different ways to do this, but I elected to use conditional comments and a bit of php. For anyone interested in the code, this is what I threw together:

<?php if (($_GET['overrideIEblock']!=”true”) && (!stristr($_SERVER["HTTP_REFERER"], “ozanonay.com”))) { ?>
<!–[if lte IE 6]>
<div id=”IEblock”>Some text. <a href=”http://<?php echo $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];?>?overrideIEblock=true”>continue to blog</a></div>
<![endif]–>
<?php } ?>

… then obviously I styled #IEblock to be large and absolutely positioned with high z-index.

This is not the approach for everyone, but if your intended audience is tech-saavy or standards-conscious, it may be an appropriate compromise.

UPDATE: Since switching to the Headless theme, the design no longer breaks in IE, so I have taken down the shame-screen.