The Internet Explorer 6 Dilemma

This morn­ing I surfed the web like it’s August 2001. A cou­ple of weeks before 9/11, and years before the mobile web, Microsoft released Inter­net Explorer 6, a web browser that was derided for its secu­rity issues and lack of sup­port for web stan­dards, and remained unim­proved for years while Microsoft enjoyed a near monopoly.

It has been the bane of exis­tence for web design­ers ever since, who are tasked with cre­at­ing a design for the mod­ern web, and then fig­ur­ing out alter­na­tive designs for IE6, on which noth­ing works prop­erly. It makes fre­quent appear­ances in “worst tech prod­ucts of all time” lists. It inspires cam­paigns to bring down IE and for an IE6 death march. Still, on a recent web project, I insisted the web design­ers design alter­na­tives to han­dle IE6 bugs. You must design the web for your vis­i­tors. The recent news that Google will phase out sup­port of IE6 in 2010, that the security-conscious gov­ern­ments of Ger­many and France have asked their cit­i­zens to switch browsers to avoid secu­rity breaches, and that Mozilla and Opera have seen a surge in the num­ber of peo­ple down­load­ing their alter­na­tive browsers did not sway me. IE6 is still stuck on the com­put­ers of almost thirty per­cent of the the vis­i­tors to the site, whose com­pa­nies that use the anti­quated browser to run some of their intranet appli­ca­tions. Experts more qual­i­fied than I make secu­rity deci­sions. IE6 is a forced choice for those who do not have priv­i­leges to install applications.

This morn­ing I also wanted to add an RSS feed to my aggre­ga­tor. Unfor­tu­nately, IE6 does not have built-in sup­port for RSS feeds. If you click on a feed icon or link in IE6, you may see an inap­pro­pri­ate secu­rity warn­ing or you may see “code,” which means you are view­ing the raw con­tents of the RSS file. You need know that you must install an exter­nal feed reader, or upgrade to at least IE7 (the cur­rent ver­sion is IE8) before view­ing and sub­scrib­ing to feeds. This means noth­ing to typ­i­cal users who have lead a shel­tered life on the intranet.

This does sway me. In my view, RSS feed sup­port is not in the same class of IE6 defi­cien­cies as PNG trans­par­ent sup­port or minimum/maximum width con­straints. It is more sig­nif­i­cant than lay­out con­sis­tency and pixel-perfect ren­der­ing; RSS is the gate­way to Web2.0. RSS feeds are the foun­da­tion tech­nol­ogy for aggre­gat­ing, fil­ter­ing and per­son­al­iz­ing the world wide web of resources. With­out RSS you are a bystander, not a par­tic­i­pant in today’s inter­net. So, what can we do to inform the other sub­set of IE 6 users not trapped by their organization’s IT poli­cies that their web expe­ri­ence is seri­ously degraded?

Even Face­book, which has done more to nat­u­ral­ize news feeds in the browsers of the unini­ti­ated, encour­ages vis­i­tors to upgrade their browsers. Andy Clarke’s solu­tion is to serve a uni­ver­sal, basic, IE6-only style sheet is espe­cially ele­gant. The key idea is to hide fancy lay­outs from IE6 by con­cen­trat­ing on the con­tent and its typog­ra­phy. It visu­ally informs with­out penal­iz­ing vis­i­tors that their expe­ri­ence could be improved. This may not be an appro­pri­ate solu­tion for pro­fes­sional web­sites, but it is a good solu­tion for per­sonal web sites like mine.

Andy Clark does not advise how to imple­ment the uni­ver­sal IE6 CSS; here is how I have done it on this site. First I add a con­di­tional snip­pet of code at the top of the page in the site’s (X)HTML markup that tar­gets IE6 browsers with a spe­cial message:

<!--[if lte IE 6]>

  <div id="ie6-warning" style="background-color:#F5F5F5; border:1px solid #CCC; padding:5px 10px 5px;">
    <h2 style="color:#E31E27;">It's legible, but not ideal.</h2>
    <p>You are using Internet Explorer 6 to view this website, etc.</p>
  </div>
<![endif]-->

Other browsers will sim­ply ignore its con­tents. Then, I include browser spe­cific stylesheets in the head sec­tion of the web pages:

<!-- CSS -->
<!--[if ! lte IE 6]>
<!-->
<link rel="stylesheet" media="screen" href="<?php get_bloginfo('stylesheet_url'); ?>">
<![endif]-->
 
<!--[if gte IE 7]>
<link rel="stylesheet" media="screen" href="<?php get_bloginfo('stylesheet_url'); ?>/style-ie7.css">
<![endif]-->
 
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css">
<![endif]-->

Browsers that are not IE6 (or older) will be served the reg­u­lar, full-experience stylesheet. In addi­tion, IE7 will have extra IE7-specific styles because it still has a few issues. How­ever, IE6 and older will be served the Uni­ver­sal Stylesheet for Inter­net Explorer 6 hosted on Google Code.

To save you from launch­ing any anti­quated browsers, here is a screen­shot of the home page for a vis­i­tor using IE6. Click on image for a larger view.