News & updates
Eliminating Internet Explorer 6 from the web
I'm sick of the "IE6 sucks, everyone should stop using it" posts. Not that I disagree of course, but it's just moaning with no action. (If you need convincing of IE6's 'suckiness', read this.) It's time to actually try and do something. To start: encourage your site's visitors to upgrade to IE7. (No, not Firefox.)
Internet Explorer version 7 is a big leap forward from version 6 and fixes the most annoying CSS bugs that have plagued developers for years. If everyone stopped using IE6 and earlier, a world of possibilities in web development would open up. We could create wonderful, hack-free web sites.
The reason I encourage the upgrade to IE7 rather than a switch to, say, Firefox, is because the vast majority of users won't switch. That's just a fact - most PC users don't like massive change (or perceived change, anyway) - but there is a good chance they will upgrade their software if notified.
So how do we convert the masses? By targeting them with a warning message that tells the user their browser is out of date. There is a similarity to IE's own warning messages - this is not totally unintentional, though there is no intention to mislead. The facts are merely stated.
Web developers can encourage their visitors to upgrade from IE6 by using the code below, the same code I use on several of my pages. Or do your own to fit into your own design. If you design your own banner/alert, you should encourage the user to upgrade, not to switch to Firefox, etc. And there is no sense in blocking IE6 users either - at the moment they still count for around 50% of all web traffic.
The code
First you'll need a conditional comment, which displays the message only to IE6 and below.<!--[if lt IE 7]>
*** MESSAGE GOES HERE ***
<![endif]-->
You can replace the middle line with your own HTML/CSS. The message I use is: "NOTICE: Your web browser is faulty and insecure. Click here to upgrade to the latest version asap." - with a link, obviously. The IE7 upgrade page is
http://www.microsoft.com/windows/downloads/ie/getitnow.mspx
I put my message at the top of the page in a yellow banner with bold, red text. (The icon is from the Tango Desktop Project.) If the location messes up your design, try it somewhere else. The version I designed was created specifically to showcase IE6's flaws. You can see it in action on this very web site using IE6; I also made a 'more info' page for users to understand what the message is about.
Here is what I use, HTML first:
<!--[if lt IE 7]>
<div class="alert">
<div class="inner">
<div class="icon"><img src="/dialog-warning.png" width="16" height="16" /></div>
<strong>NOTICE: Your web browser is faulty and insecure.</strong>
<a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Click here to upgrade</a> to the latest version asap.
<small>(<a href="http://www.doheth.co.uk/info/browser">More info</a>)</small>
</div>
</div>
<br><br>
<![endif]-->
The CSS:
.alert {
width: 100%;
margin: 0;
position: absolute; top: 0; left: 0;
border-bottom: 1px solid #edd400;
background-color: #fffdeb;
color: red;
}
.alert .inner {
padding: 4px;
}
.alert .aside {
margin-top: 4px;
font-size: 8pt;
text-align: center;
}
.alert .icon {
float: left;
margin: 0 8px;
}
The more people partake in this, the better, and the more awareness created. I've had these messages on my sites for only a week or so but have had a lot of visitors to the 'more information' page, which at least shows that people are noticing the messages and perhaps wish to know 'how to fix' their browser problem.
Finally, the one piece of advice to solve a good deal of your coding problems: use the strict doctype. It forces standards mode and make IE more-or-less behave. IE6 does a reasonable job in standards mode; IE7 does it 'just good enough for now'. Put this as the very first line of every HTML document you write:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">Please Digg/Reddit this if you have an account: