Testing Old Internet Explorer Versions The Right Way

HOME - DESIGN BLOG - Test Old IE Versions The Right Way

Over the years we have been seeing Internet Explorer's usage on the internet steadily dropping, but that browser refuses to die! As web designers we have to check our websites not only against various desktop browsers, but , now a wide range of mobile browsers as well (looks like I have a redesign job ahead of me for my own site).  For now,  this is only about testing compatibility on desktop browsers.

Mobile is a bit difficult to test for, (unless you have the device in question, it requires the installation of Oracle's JavaSE JDK and several SDKs, I'll write about this in a later post) and unlike what some people may say, you can't use Safari's develop menu (configuration>preferences>advanced>show develop menu in menu bar then go to develop in the menu bar>user agents) and scale down the window to the resolution of the iphone.  Unfortunately, even though Safari allows you to view the page as ie6, 7 or 8 the Iphone, opera, etc user agents, it DOES NOT allow you to see how a page is rendered in those browser. Also, I don't trust apps and toolbars that claim to emulate IE's rendering of pages, I have tried one in particular and found it to be extremely lacking.

The issue that I want to resolve here, isn't how to test for mobile devices but how to test across all desktop browsers in your localhost development  environment. Unfortunately, Microsoft has laid some really poor browsers at our feet, and even though it seems there is less than 5% of users still surfing the internet with IE6, we still have to test across them.  Soon it may disappear altogether, then we will have to test only for 7 and then 8.  But even with the release of internet explorer 9, those browsers are still going to take awhile to vanish (would love to start designing with pure html5 and CSS3  without javascript hacks, thanks a lot MS!)

Really, the best way to make sure IE6 is as good as you're going to get it, compare it to 7, 8, 9, Opera, Safari, Firefox and even Konqueror, is to install virtualization software.  Virtualization software is a program that you can launch and it will act as a separate computer, you can install varied operating systems on it and connect to the internet or your localhost with the actual browser you are testing for.

My favorite is Oracle's VirtualBox which can be found at this site. (You will also need this to test one of the mobile phone SDKs, like I said, I will write about mobile design later.)

If you have an old copy of XP service pack 2, you can install it, out of the box it will run IE6, simply manually update the XP install (choose custom instead of express update) and don't install service pack 3 or ie7, keep the os updated but the browser as is.  Take that same copy of XP and repeat but choosing IE7 in one, IE8 in another (that is if you aren't on a Windows machine and don't already have IE8 installed).  The reason why you need XP is because IE6 was the last OS from Microsoft to ship with IE6.

Next, you will have to dust that copy of Vista off you threw into the trash and install it as well, this allows you to see IE9, it too renders differently, more like a modern browser, but there are a few oddities still.

And lastly, install Safari, Opera, and Firefox on to your computer as well

You can even install Linux, BSD and OSX (with a bit of work) on VirtualBox to test browsers on different platforms.

The reason I prefer this solution is because the browser renders as it would on any real system, I can see right away if my conditional comments for IE is working or not, I can see issues which I have never seen in any other program that purports to render exactly like the browsers you are testing for.   For example, I can access the index.html, by navigating from my installation on VirtualBox into a shared folder which resides in my host machine, but what I really want to do, is have IE6,7 and 8 render the page as it would when going to a real website, so I want it to access my localhost webserver (in this case Apache) via the browser.   I can tell you from experience, that when I open a plain html file in IE6 it renders completely different then it does if the browser is accessing an install of a Content Management System which uses the same html and css.  

Doing it the hard way (even though it's not difficult at all), gives you much more piece of mind, knowing that what you are putting something out there on the web which actually looks the way you envisioned and designed it.

The VirtualBox website has a wealth of information here on their documentation page.