Being nice to Internet Explorer 6, even though we shouldn’t be
45royale Inc. - IE6 Version
When we were planning the sixth version of our site redesign, one of our top priorities was to give our visitors (and potential clients) the best experience possible. We weren’t jumping in to this blindly though mind you. During the planning process we started digging through our stats to find out exactly who we would need support for and at what level. We saw all of the usual stuff; Firefox, Safari, IE7. However, upon further inspection we found that we receive less than 10% of our traffic from visitors using Internet Explorer 6. What can we say, we have intelligent users who are also tired of putting up with IE6′s sub-par browsing experience! Although the percentage of visitors coming from the antiquated browser is technically low enough to warrant us killing IE6 support entirely, we still felt an obligation to give them a worthwhile experience—not to mention a gentle nudge towards the standards-based browser of their dreams.
Serving IE6 it’s own content
So now that we knew we wanted to serve different content to IE6 users, we had to figure out how. We wanted to make sure that there was a reliable and respectful way to redirect visitors to another page without too much fuss. There are quite a few ways to do this—trust us, we know, we did the research. We finally settled on a method from Dao by Design that fit our needs and works remarkably well. The code works as advertised, however, we made a few small tweaks in order to serve up IE6 replacement only (currently it’s setup to shake off both IE6 and 7). The code snippet that made it’s way in to production on this iteration of 45royale is below:
1 2 3 4 5 6 7 8 9 10 11 | <!--
var browser = navigator.appName
var ver = navigator.appVersion
var thestart = parseFloat(ver.indexOf("MSIE"))+1 //This finds the start of the MS version string.
var brow_ver = parseFloat(ver.substring(thestart+4,thestart+7)) //This cuts out the bit of string we need.
if ((browser=="Microsoft Internet Explorer") && (brow_ver < 7)) //By default the min. IE ver is set to 6. Change as desired.
{
window.location="http://www.45royale.com/ie6/"; //URL to redirect to.
}
//--> |
The great thing about this code is it’s lightweight, easy to maintain and unobtrusive. It stops IE6 users at the door, redirecting them to a less lively section of the party while letting visitors with modern browsers experience all the wonder of the new site. The code manages the party well and we couldn’t be happier with the results.
We have the technology, now we need requirements
We decided that designing a simple landing page for our IE6 visitors would be sufficient. We set out to build the page with four goals in mind; show a top level overview of the company, give a small taste of some of our recent work, provide our contact information and finally, try to convince people to trade in their craptastic pile of IE6 dung for a more sleek and modern web experience. In the screen shot below, you’ll see all of the requirements were met, including a nice bit of Javascript that we built to reveal download links to some of the more popular modern browsers.
All’s well that ends well
All in all, we’re really pleased with the implementation of our new IE6-only page. By reviewing our analytics, we were able to quantify our decisions and we feel confident that we’re providing a worthwhile experience to all visitors (not to mention doing our part for web standards by providing the user with alternatives to a sub-par browsing experience). Hopefully we’ll see a heavy decline over the next year or so and by 2010 we can write off this lousy browser for good. We don’t sound too bitter towards Internet Explorer 6, do we?
I love the IE6 page, and the execution here seems solid – but I have to ask, why not ditch the JS browser detection and just put the redirect line inside a conditional comment aimed at anything less than IE7?
I noticed this page a while ago when I was using the wife’s Dell which still has IE6 (Government-issued computer, so they’re not able to install different browsers). I think it’s a great idea. Dealing with IE6 is probably the thing I hate most about being a web designer… And yeah, it sucks for those who still have IE6, but those people need to upgrade and they’ll be happy that you guy’s nudged them to finally do so.
Thanks for the comments, guys! @Scott that is a great suggestion and something we overlooked when we were launching the redesign. Now that things have settled down I think we’ll take your advice and revise our implementation slightly.
Great idea here! This is a great way to get the common user to learn a bit more about browser support and make the switch!
Is there a way to implement this script where users still get the upgrade screen but they have the option to view the site anyway? Then on subsequent visits they wouldn’t see the upgrade screen. This way you are strongly suggesting users upgrade, but aren’t completely stopping them from seeing your site. I’m guessing this would require some sort of cookie, so that on subsequent visits they wouldn’t see the upgrade screen. Any ideas?
Yeah, or you could have written it like this:
That is if you don’t mind taking the risk that users have disabled native XMLHTTP in their settings in IE7… But seriously, how many is that, five?
Conditional comments would be a quicker fix, though, as Scott pointed out.
@Jon You could alter our approach to use a cookie or session verification, but that’s something for another commenter more technical than I to chime in on. :) However, even if you are able to set a cookie and “encourage” a user to upgrade via the script/cookie, you’d still eventually be showing them the entire site which would require you to conduct additional browser testing in IE6. Not to mention, it could force you to dumb down your overall design to cater to the least capable browser in order to provide a consistent browsing experience for everyone.
For us, it didn’t make sense to limit our design in this case since our IE6 visitor stats rank below 10%—which is not enough for us to justify the extra hours on design and testing it would require to implement an IE6 friendly site. It’s an entirely different ball game when you’re working on sites for clients, so it’s best to know your target audience and the goals of the site or project before deciding on the right approach.
Is it possible to use:
Maybe?
why would you even bother..seems like such a huge waste of time and energy and money when you could be focusing on much more worthwhile things that would better the majority of your visitors
A single page with a few images is a waste of time? Really, Daniel? I could definitely see the advantage of this over redoing the CSS (and possibly some HTML) for the whole site.
Simplebits had a good post a while back about just disabling CSS for IE6. The content should be semantic and well-structured since we’re using modern practices, so they get the content without anyone having to spend time on fixing what isn’t broken for IE6.
@DoctorFu That is actually exactly what we did after Scott made his first comment above. If you view source on our site you’ll see that the script is now only conditionally called in for IE6.
@daniel It didn’t take us too long to put the page together, and it was so much faster than supporting IE6 for the entire site that it just seemed like it only took two seconds! :) 10% of our site visitors is still a healthy amount of users, so we at least wanted to give them a polite nudge towards a better browser.
@Don I’ve read the same Simplebits article and I don’t disagree with the approach. After a day of IE6 browser testing for a client sometimes I don’t even want to present them anything at all, let alone a style stripped page! But in my opinion, most IE6 users either don’t have control over upgrading their browser (when it’s controlled by their employer) or they are not web-savvy enough to understand why they are seeing an un-styled page. Which is why in the end we decided to throw them a tiny bone and present them with some stripped down content and a few upgrade options. If we get even just one person to upgrade from IE6, then to me our effort was worth it!
http://www.bringdownie6.com/
It begins…..
First off, love the idea. I think I might borrow it :)
From a user perspective the language on your “Upgrade Now!” button made me hesitant to click on it. Sounds like it will take you to a separate page, or that I’m going to commit to something that I might not want to commit to.
Maybe a Learn more about upgrading? or something to that effect? I’m not a copy writer, but I thought I’d throw in my two cents.
Again, great idea-
nice one! hopefully ie will just go away sooner rather than later
This is a really nice way to go – kudos guys.
But I do believe you missed a huge opportunity here to call IE 6 a “Royale Pain in the Ass”.
That said, I can understand why you wouldn’t want to tie your slick brand to a not-so-slick browser :P
@Travis Thanks for the comment, that cracked me up! :)
Great implementation Matt – and I also agree with Scott in that conditional comments are a better way to handle this now. About a year ago, I actually wrote an updated post to the one you linked to above that showed how to handle similar detection using conditional comments.
It’s good to see more and more designers/developers taking a stand against IE6. It, of course, will require a bit of customer education, but the sooner the Internet moves past trying to accommodate the uselessness of IE6 the better we’ll all be.
In my original post the redirect page is rather elementary – it’s very cool to see how you guys have taken it a step further.
@Ryan Just read your article and it’s got a lot of great info, thanks for sharing! I think others could benefit from reading it too, I recommend giving it a look if you have time. Thanks again!
I think this is great for users that can’t upgrade (corporate/government/schools, etc.) Although sometimes I think designers can get carried away with CSS. Can’t we just use some nice nested tables? :)
No… don’t be nice to IE6! Let it go away and die so developers don’t have to deal with the ancient browser.