Internet Explorer 6 has been deprecated for a while now, but has still remained a prominent browser across the globe nonetheless. Needless to say this has made cross-browser support quite an endeavour. In recent years though, the Web has moved forward enough to allow developers to focus more on modern browsers and technologies and start considering dropping support for IE6 altogether. The question is what to do about the significant number of people out there who still use the browser.
Even if you don't really support it, you don't want IE6 users coming across your site and thinking, “Wow! This site is broken!” Ideally, you want some way to tell them you don't really support IE6 any more, but in a way that means you're not spending more time than you need to fussing about with it.
There are a few other tools out there that do a similar job, but I needed mine to comply to five points that I thought were crucial:
- Easy to deploy (almost drag and drop in)
- Give the user control (you don't want your user repeatedly clicking “close” or “remind me later” for every page refresh, or they're just going to click Google and go somewhere else)
- Should not interfere with host website's code, and vice versa
- Should look professional (so the user at least considers upgrading and doesn't click “close” assuming it's a spam pop-up)
What NoIE6 Does
- Adds unobtrusive warning bar at the top of the page (can be disabled by a setting)
- Adds a message box that pops up informing the user that their Internet Explorer is outdated and how to upgrade it. For usability purposes, the user has the option to cancel the message and return to viewing the website. By dropping a cookie, the message will not reappear for x number of days, allowing the user to proceed through the website without being pestered at every page load
- Works in IE6 and 5.5. Also had some success in 5.01, but you might want to disable the blockGUI setting as the opacity filter doesn't work
What NoIE6 Doesn't Do
- Interfere with your CSS – all style rules are limited to NoIE6 HTML elements only
- Automatically upgrades the user to newer versions of IE
How to Use NoIE6
What I've done here isn't really that tough and anyone can whip their own version up. Still, I've tried to build this to be robust so it should make your life easier if you do decide to use it.
- To start, simply download the zip.
- Extract the files to your website. The default setup is to extract the main noie6 directory to your website's 'js' directory, e.g. /js/noie6/*.
I'd advise putting it on all pages in the website – you never know where traffic will come from and which page it will land on first.
Alternatively, you can just put this code in your own window.onload function:
if(typeof noie6 !== 'undefined')noie6.run();
If you have followed the default setup, then configuration isn't really necessary, but the options are there if you need to use them.
If you open up /noie6/noie6.js, at the top is a JSON object called noie6.settings. There are seven options you can play with:
- documentRoot – this is mainly for testing purposes. This should be the location of the root directory of your website, it could be the domain name (http://www.yourdomain.com) or just “/” or “//”. If you leave it blank, NoIE6 will just assume that the hostname is the same as current domain name.
- noie6Location – this where the NoIE6 files are stored in relation to the root directory. If you've left them in the root directory you can leave it as default. Default is “noie6/”
- cookieLifeSpan – this determines how long (in days) NoIE6 should wait before it displays the warning pop-up once the user has clicked the “Remind me later” link. If set to 0, no cookie is dropped.
- baseZIndex – this determines the starting depth that the NoIE6 HTML elements will use. To display the NoIE6 message over the whole site, this should be set higher than any other HTML elements' z-index value.
- displayWarningBar – this determines whether or not to display the red warning bar at the top of the web page. I can understand that some people might not want NoIE6 to start messing with the layout of their page, in that case change this to false.
- hoverWarningBar - this determines if the red warning bar should hover above the page or should follow the document flow. The latter shifts pushes the page down by the height of the warning bar, but the heading area is not obscured.
- blockGUI – determines whether the host website should be “greyed out” when the message box appears.
You can also tweak the appearance of the NoIE6 HTML elements of you open /noie6/css/noie6.css.
Notably, the first ruleset simply overrides any global styles you may be using on your own website. If there is still something interfering with NoIE6, you can add a CSS rule there which sets it back to default.
Some things you should be aware of
Browser images courtesy of PaulIrish.com (http://paulirish.com/2010/high-res-browser-icons/)