Redirecting IE6 Users to an Upgrade Page - Sorry IE 6, Nothing Personal

I'm sorry Internet Explorer 6, but you are no longer worth my time.  Over the last year I've been slowly building my website (with multiple redesigns) and IE6 has always been an issue.  Due to the age of the browser there are many functions that it doesn't support and with that in mind I tried to keep my site simple enough (or use work arounds) but I still ran into issues.  IE 6 also has lots of bugs, one of them being how it handles elements that are floated.  (If you don't know what that means, don't worry it's just a way of aligning the elements within the page.)  This left my designs' layouts in horrible shambles.  After spending hours fixing the issue on the homepage I started on all the subpages, but I was still having alignment problems I couldn't figure out.



Usually I will work on something until it is perfect, but with IE6, I've decided it's just not worth it.  According to analytics, the number of visitors using IE6 has been declining since the latest redesign was released.  Now, I'm not sure if this is because the site was such a mess in IE6, so users weren't returning to the site or because users were finally upgrading to the new versions of IE or other browser's entirely.  Though these reasons are something to consider if you have a much larger user base, I'm just hosting a small online portfolio.  Either way, I just can't justify spending hours on a problem affecting so few users and that's already been corrected with browser upgrades so, I've decided not to.

Instead I've added a redirect page that will immediately send IE6 users that visit any page on my site to a new page asking them to upgrade.  I didn't want to resort to a redirect, I'm a huge believer that any interruption in the user's experience is detrimental to your overall brand, but so is a site that becomes unusable due to glitches that are out of your control.  Here's how I made my redirect (and made it feel as much of a part of the site as possible).

My site with IE6 bug issues.

First, I needed a way to find the IE6 users and force their browser away from the page they were visiting to the upgrade page (called a redirect).  I'm fairly proficiant at html and css, but I'm still working on my script knowledge, so the first thing I did was hit google.  I came across this little tutorial which fit perfectly, though the downloadable script was no longer hosted.  No issue though, the author outlined each step to writing the script. After creating my own version (I changed the version to redirect to be less than IE7) I added it to my js folder and the call script to the of my homepage.  At this point any visitor using IE6 or below is automatically redirected to the upgrade page.

Next up was building the upgrade page.  First, I created a background image by taking a screen capture (in my favorite browser, Chrome) of the homepage and created a "frosted" version in Photoshop.  This is very easy to do.  After taking the capture, I opened up Photoshop and created a new image. I then pasted the capture into a blank layer and croped it down to position the content so that it lineed up with the live page. Next I went to Filter > Blur > Gaussian Blur and played with the radius until it looks right, I liked a 2.5px radius.  After that I adjusted the layer's transparency until it went from just a blurred image to a frosted one (I set mine right at 50%).  All finished, I saved as a jpg and moved on to writing the markup.

Please note that I prefer creating and editing directly in the browser if I have a pretty good idea of what the page should look like.  If you're more comfortable continuing in Photoshop and then moving on to the browser feel free.  I knew I wanted a solid colored message box with a slight border to separate the content from the background, a short upgrade message and a list of recommended browsers underneath.  Opening Notepad++ (or your editor of choice) I created a div for the background, a container for the message box, a short paragraph explaining the issue and options, and an unordered list for the browser choices.  I stayed with the most widely used browsers (IE 8, Chrome, Firefox, Safari, and Opera) adding a small icon image and a link to the download page with each browser's name underneath, all within a list item.  I found a set of png's from here and resized them and added a white background in Photoshop (because IE6 doesn't support transparency).

Here's a look at the code:

<body>
<div id="background">
<div id="container">
<p>Unfortunately you are running an out of date version of Internet Explorer.  To better experience the site, please take a moment to upgrade to the current version or better yet, download one of the other browsers listed below.</p>
<ul id="browser_list">
<li><a href="http://downloads.yahoo.com/internetexplorer/?AID=10760544&PID=3857933&SID=ti"><img src="img/ie_icon.png" width="90px" /><br />Microsoft Internet Explorer</a></li>
<li><a href="http://www.google.com/chrome/intl/en/landing_chrome.html?hl=en&hl=en"><img src="img/chrome_icon.png" width="90px"/><br />Google Chrome</a></li>
<li><a href="http://www.mozilla.com/en-US/firefox/firefox.html"><img src="img/firefox_icon.png" width="90px"/><br />Mozilla Firefox</a></li>
<li><a href="http://www.apple.com/safari/"><img src="img/safari_icon.png" width="90px" /><br />Apple Safari</a></li>
<li><a href="http://www.opera.com/"><img src="img/opera_icon.png" width="90px" /><br />Opera 10</a></li>
</ul>
</div>
</div>
</body>


Now I needed to style the page with CSS.  I opened up a new document in Notepad++ and started by adding the frosted image to the background div and setting the margin (to center the image) and the dimensions.

#background {
margin: 0 auto;
padding: 0;
height: 800px;
width: 960px;
background-image: url(img/ie6upgrade_background.jpg);
background-repeat: no-repeat;
}

Next I gave the container div a solid white background with a 3px border (the same shade of red as my branding), centered it and pushed it down with margin, and gave it some breathing room with padding. I wanted the text to match that of my site so I set the font as Georgia.

#container{
margin-top: 75px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 30px;
width: 600px;
height: 400px;
background: #fff;
border-style: solid;
border-width: 3px;
border-color: #8C0707;
}
#container p {
font-family: Georgia, "Times New Roman", Times, serif;
text-align: center;
}

 To push the list of browsers down from the paragraph, I gave the unordered list a bit of top margin.  Then I defined the dimensions, margins, and float of the list items. Again, to match my site I set the link font to Myriad Pro and a dark grey color.

#browser_list {
margin-top: 80px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
list-style: none;
}
#browser_list li {
margin: 15px;
padding: 0;
width: 90px;
display: block;
float: left;
text-align: center;
}
#browser_list a {
font-family: "Myriad Pro", Arial, Sans-Serif;
font-weight: bold;
color: #666;
text-decoration: none;
}

Lastly I added a hover style to change the links font color when moused over and removed the ugly blue link border to the images.

#browser_list a:hover {
color: #8C0707;
}
#browser_list a img {
margin-top: 0;
margin-right: 0;
margin-bottom: 8px;
margin-left: 0;
border: none;
}

Final upgrade redirect page

Overall a much better brand experience than the broken site, even if the user has to go through an upgrade process and come back to the site later.  In the end it's in the best interest for the user and their experience on my site.  Hopefully I don't lose out on too many sales or cause people to complain, but if that were to happen, I can always trudge through fixing the IE6 bugs.

Jimmy


Disclaimer: Take everything I write with a grain of salt, I am not employed nor do I have a degree in much of what I've discussed. I'm just a carpenter that enjoys photography, design and marketing. That said, the previous thousand words or so is my opinion, an opinion which has been cultivated by past education, current readings and research, personal experience, and off hand observations. I feel many times these are more important in life than a piece of paper hanging on the wall or business card in your pocket.