attention_ie6

The web community has been abuzz lately with talk about dropping support for IE6 and rightfully so! I couldn’t agree more for most sites, though I’m sure there will be the occasional client who either requests IE6 to be included in testing or it turns out their audience actually does use IE6 according to the site’s stats. Nonetheless, the majority of mordern websites could certainly do without supporting IE6. I would guess somewhere between 30% of my development time is spent fixing the crippled browser, if not more, and I’m looking forward to an enormous decrease in frustrations! It was always a frightful thing to fire up Windows and find out what horrors IE had done to a perfectly good site. I don’t blame the browser either; the problem was for too long (way too long) IE6 still had a large user group. Thankfully, those numbers are continually decreasing and I’ve decided this is the year I’ll be dropping support for IE6. If a future client requests the browser to be supported, that’s fine, but it will come at additional costs for the extra development and testing time.

As for how I’m going to ignore the outdated browser, I wanted to notify IE6 users of the issue rather than assume they already knew they were using an outdated browser. My solution was to create a warning message that gets inserted after the opening <body> tag via Javascript. Conditional comments ensure this message (as well as the HTML code within the body) will only appear for IE6 or previous versions. The message is styled in a very Microsoft-esque way so even the hardest-core IE6 user will be able to recognize it. :) Where does the link point to? Firefox, of course.

This site is currently using what I’ve dubbed the “Attention IE6” script so go ahead and open IE6, then visit www.adrianpelletier.com. I’ve configured the script to work in conjunction with jQuery because that is the framework I was already using but I’m sure you could easily adapt it to fit your own needs. I’m posting a download link for anyone who cares to use this approach on their own website. The setup is very simple, just include the following conditional comment in the <head> of your document.

1
2
3
4
5
<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/attention_ie6.js"></script>
<![endif]-->

Next, download the following files and place in the appropriate Javascript, CSS, and images directories:

Download

And so, farewell to IE6. I cannot say that I will miss you.

Update 05/31/2009: I want to emphasize that this experiment is not a fix-it-all solution by any means. As stated above, a large majority of modern websites would have no problems dropping support IE6. For example, this site currently receives around 3% of users on IE6 and that number continues to drop. That’s not a large enough audience to worry about, in my opinion. There are, however, still specific scenario’s where IE6 maintains a much higher user percentage (i.e. corporate businesses that place restrictions on browser updates). In those cases, I do believe IE6 should be included in development testing.

I also do not advocate blocking or punishing IE6 users. My intentions with the above approach were to 1) inform the user that they are using outdated technology and 2) warn that the site may look as it should. However, I have not restricted the user’s access to the site’s content and would never recommend doing so.

I don’t consider this article to be the final answer, not by a long shot. However, I would hope that ideas such as these will at least strike up conversations and thoughts about advancing web development and what the next step should be.