The War On IE 6

Recently Google openly declared that it would be dropping support for IE6 for most of its applications such as Google Docs and GMail. That is a bold step I side with. In the recent times, for all the web development work I do, I do not even bother to test in IE6 because I do not care for the user experience in that browser. Most of my work has been to develop content management related products for my websites, and I know most of my users are developers who are up to date with all the recent browser trends so they are well equipped for my products.

However, recently I got bitten in the ass by this lack of support for IE6 when a client viewed a website I created in it, and the result was terrible. I viewed the site myself and I was shocked by the horrors I came face to face with. See below for expected results and what IE6 renders;

Below is the site rendered in Opera 10.5 pre-alpha

This is the site rendered in Internet Explorer 6 (using IETester)

I now had to make a decision. Go through the hell of sorting out the CSS related quirks (negative margins, absolute positioning, floats, css sprites for the rounded borders and all) and re-exporting on the PNG images as GIF images with tranparency and perhaps fix any and all javascript related bugs (although there were not much, even the AJAX worked perfectly).

Or, simply just ignore it an let IE6 users have a poor experience with the site.

Or take the initiative and inform IE6 users that there are better browser options available to theme. I chose the later and here is the result

Site rendered in IE 6 with block effect

Below is the script used to create the block effect, very simple enough

var ie6block = {

    vNum: 6, // the version number of the browser

    init: function() {
        var x = navigator;
        ie6block.vNum = parseFloat(x.appVersion.split("MSIE")[1]);

        if( ie6block.vNum < 7 ) {
            ie6block.createBlocker();
        }
    },

    createBlocker: function() {
        var notice = document.createElement("div");
        notice.innerHTML = "<div align=center style='font-size: 18px;'><b>Sorry!</b> Your current web browser <b>Internet Explorer " + ie6block.vNum + "</b> will not render this website "
                         + " correctly.</div><br /><br />"
                         + "<div>Please upgrade your browser to: "
                         + "<ul>"
                         + "<li><a href='http://www.microsoft.com/downloads/details.aspx?FamilyId=9AE91EBE-3385-447C-8A30-081805B2F90B'>Internet Explorer 7</a> or</li>"
                         + "<li><a href='http://www.microsoft.com/Windows/internet-explorer/'>Internet Explorer 8</a> (recommended)</li>"
                         + "</ul><br />"
                         + "Or try any of these other alternative modern web browsers: "
                         + "<ul>"
                         + "<li><a href='http://www.opera.com/download/'>Opera Web Browser</a></li>"
                         + "<li><a href='http://www.apple.com/safari/download/'>Safari Web Browser</a></li>"
                         + "<li><a href='http://www.mozilla.com/firefox/'>Mozilla Firefox</a></li>"
                         + "<li><a href='http://www.google.com/chrome'>Google Chrome</a></li>"
                         + "</ul><br />"
                         + "<center>Once you have upgraded or switched your browser, please visit us again. Thank you!</center>"
                         + "</div>";

        var content = document.createElement("div");
        content.style.position = "absolute";
        content.style.left = "26%";
        content.style.marginTop = "100px";
        content.style.marginLeft = "auto";
        content.style.marginRight = "auto";
        content.style.height = "340px";
        content.style.width = "580px";
        content.style.padding = "20px";
        content.style.fontFamily = "Tahoma";
        content.style.fontSize = "13px";
        content.style.backgroundColor = "#FFF";
        content.style.border = "solid #ccc 1px";
        content.style.zIndex = 800;
        content.style.opacity = 1.0;
        content.style.filter = "alpha(opacity=100)";
        content.appendChild( notice );

        var overlay = document.createElement("div");
        overlay.style.position = "absolute";
        overlay.style.width = "100%";
        overlay.style.height = "100%";
        overlay.style.backgroundColor = "#000";
        overlay.style.opacity = 0.7;
        overlay.style.filter = "alpha(opacity=70)";
        overlay.style.zIndex = 600;

        overlay.appendChild( content );

        var html = document.getElementsByTagName("html")[0];
        html.style.width = "100%";
        html.style.height = "100%";
        html.style.overflow = "hidden";

        var body = document.getElementsByTagName("body")[0];

        body.insertBefore(overlay, body.firstChild);
        body.insertBefore(content, overlay);
        body.style.width = "100%";
        body.style.height = "100%";
        body.scroll = "no"; // for IE 5.5
        body.style.overflow = "hidden"; // for IE 6

    },

    // Created by: Simon Willison
    // http://simon.incutio.com/archive/2004/05/26/addLoadEvent
    addLoadEvent: function(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                if (oldonload) {
                    oldonload();
                }

                func();
            }
        }
    }
};

ie6block.addLoadEvent( ie6block.init );

Copy and paste this script in a new js file, and just include it in the head of your document to add the browser block functionality. Hopefully, if this catches on, in the next couple of months, the W3C Browser Statistics will hopefully show a significant decline in IE6 usage.

If IE6 is going to be relegated to a defunct browser, Google is not going to be able to do it alone, it has to be all hands on deck. Every developer who makes a site that is not some corporate system that must run on IE6 because the organisation cannot afford the cost of a full upgrade with software re-writes, should gently inform users that there is a better world out there, so they should opt for that experience instead.

Also I would like to point you to a great tool I came across for testing your site in the various IE versions. The tool is IETester, it enables you to view your site in the various renditions of IE from version 5.5 to 8.

Advertisements

3 thoughts on “The War On IE 6

    1. Indeed I have been busy. But I do hope I find time to “blab” about something worth while. For now let just pray. I have several things in the works but all of them seem like moving targets.

Comments are closed.