We all know the importance of checking our web pages with multiple browsers, especially when we are designing a new layout for a website. This is the case even if we are writing validated standards-compliant code. The number of extant browsers we need to check with are enormous: Internet Explorer ("IE") 6 to 11, the current version of Firefox, the current version of Chrome (or Opera, which uses the same code), the current version of Safari, and so on. And then there are the different platforms: Windows, Macintosh (Mac), Linux, etc. The problem for most people is that multiple versions of certain browsers cannot co-exist with each other, the most notable example of this is IE for Windows. Unless you happened to have multiple computers, this presents a certain difficulty for the average webmaster. This article suggests some ways for you to run multiple versions of multiple browsers on one computer.
Note that this article is written primarily from the point of view of a person using Windows (the majority of people reading this article), although it does address the issue of Mac browsers and Linux browsers as well.
If you did not already know, Mozilla Firefox and Seamonkey use the same Gecko rendering engine. As such, if you have one of these browsers, you probably don't need to install the other to test your site.
It is easy to make multiple versions of Firefox and Seamonkey co-exist with each other. Install them into separate directories and create a different profile for each browser you install. (For non-Firefox users, this browser allows you to create different profiles so that you can store different settings for different situations.)
To create a different profile for Firefox, simply start Firefox with the following command line:
Once you've finished creating profiles, you will want to create shortcuts (Windows terminology) to run the different versions of the browser. This makes life easier for you: you can simply click the appropriate icon for the different versions, and it will load using the correct profile. To specify which profile the browser is to load, put the profile name after the "-P" option.
For example, if you have created a profile named "currentfirefox", your command for running the current version of Firefox with that profile may look like:
Similarly, your command to run the Firefox with a profile called "oldversion" may look like:
And so on.
I'm not sure that you really need all the different implementations of the Gecko engine to test, though. I personally only test my sites with latest version of Firefox since my site design tends to be simple.
Google's Chrome browser and the current versions of the Opera browser use the same engine. In general, you can expect that the vast majority of people who uses the Chrome browser will be using the latest version, since that browser automatically updates itself whether you want it or not. As such, I tend not to bother to test my sites with earlier versions of Chrome.
You can get Chrome from Google's Chrome site and Opera from Opera's website. Since both of these browsers use the same engine, if a site works with one browser, it should probably work with the other.
In addition, the Safari web browser share a lot of code in common with both Chome and Opera, since all three ultimately derive their engine from yet another browser called Konqueror. This similarity will diverge over time, since the engine for Safari is being developed separately from that in Chrome and Opera. If you are feeling lazy, you can probably get away with testing under Chrome and Opera for now, although if you really want to be thorough, you probably should install Safari as well. All three browsers can coexist with each other on the same computer.
For most sites, IE users probably comprise the majority of visitors, despite the inroads made by the other web browsers. Now that Microsoft has made Internet Explorer automatically update to the latest version (via Windows Update), chances are that more and more of your visitors will be using the latest version.
This does not mean though that there are not still a lot of users sitting on old versions of the browser. For example, IE 6 is still being used by a number of people running Windows XP. Although this number is dwindling rapidly, at the time I write this, there are still enough visitors using it for some websites that webmasters feel obliged to continue to support it. (The actual percentage varies from site to site, depending on the target audience of each site.)
My experience in coding thesitewizard.com and thefreecountry.com, both of which depend heavily upon Cascading Style Sheets ("CSS") for layout, is that IE 6 and 7 are very different animals from the other browsers or even the later incarnations of IE. Contrary to what you may expect, what works in IE 11, Opera, Firefox, Safari will not necessarily work in IE 6 and 7. IE 6 has numerous bugs in its engine, causing sites that are correctly coded to break under that browser. In other words, if you want to support IE 6 and 7, you need to have those browsers installed somewhere so that you can test with them. You can't just assume that your site will look fine in those old browsers.
Unfortunately, you can't install more than one version of IE. The bulk of IE's code does not get installed into its own subdirectory (or folder) but into Windows' system directory. Although there have been solutions available for some time among the webmaster community for installing different versions of IE into the same Windows installation, there are various peculiarities in the end result and the IE you get from that behave slightly differently from the standard version when installed normally.
The Microsoft-sanctioned method of testing with multiple versions of IE on one computer is to install a virtual machine program.
Loosely speaking, virtual machine software allow you to run another copy of Windows within your existing version of Mac OS X, Windows, Linux, FreeBSD or whatever. The virtual machine software pretends to be a new computer, and Windows gets installed into a small space on your hard disk which the software uses to mimic an entire drive.
Microsoft provides pre-activated copies of Windows with various versions of IE in virtual machines free of charge to web developers who need to test their sites in Internet Explorer. The pre-activated Windows expires periodically, so you will need to download a fresh copy from time to time.
You will also need to install one of the supported PC virtual machine software that can run those pre-activated Windows machines. For Windows users, this is either Virtual PC, VirtualBox or VMWare Player, all of which are free, and can be found on the Free PC Virtual Machines and Virtual Machines page. Mac OS X users can use either VirtualBox (which is free), Parallels Desktop (a commercial program) or VMWare Fusion (also a commercial program). Linux users can use VirtualBox.
Once you've installed both the virtual machine software, and the virtual machine from Microsoft, all you have to do is to run it. This will give you a copy of the appropriate version of Windows with a matching version of IE, which you can use to surf to your website to test it.
Note: Microsoft will terminate its support of Windows XP in April 2014, so it's possible that they will stop providing virtual machines containing XP and Internet Explorer 6 on that date. If that's the case, it will no longer be possible for you to test IE 6 unless you have your own copy of Windows XP. I personally hope that when we reach that date, the number of IE 6 users will be so small that it's no longer even necessary for anyone to bother to test with that desperately obsolete version. You will still be able to test with IE 7 and above though, at least until the version of Windows that comes with those versions stops being supported.
This section is not recommended unless you have special reasons (other than testing websites) for needing to dual-boot or multi-boot. It is more technically demanding, disruptive, time-consuming and uses more hard disk space.
For the technically inclined, another way to run two versions of IE on a single machine is to install multiple versions of Windows on that machine, each in its own partition. In plain English, this means that you need to divide your hard disk into (at least) two sections, called "partitions". Then install different versions of Windows into different partitions. You may have to modify your Windows boot menu to support all of them, or use a third party boot manager. (Sorry for the vagueness in this paragraph, but I don't envisage many people to actually need to use this method, and those who do, already know how to do all this.)
Nowadays, you don't actually need a Mac to test Mac browsers, since the default Mac web browser, Safari, and alternative browsers like Firefox and Opera have Windows equivalents.
Having said that, I'm not 100% sure if browsers display things exactly the same way in Windows as in Mac OS X, even if they are the same brand. That is, I'm not sure if (say) Safari for Windows displays things identically with Safari for Mac OS X. However, I think that for the most part, where my sites are concerned, the way they render things is sufficiently alike that I don't need to bother with specially getting a Mac just to test the sites.
Before you ask, although there are things such as free Mac emulators, which are software that run in Windows but pretend to be a Mac and thus can run Mac software, they are not particularly useful from a webmasters' point of view. The working Mac emulators tend to emulate the old obsolete Macs, not modern ones.
In any case, as I said earlier, you shouldn't need a Mac to develop a website that works on it. Just check that your website has valid code and test your website in the Windows versions of Safari, Firefox and Opera, and you'll probably be fine. If, however, your site requires absolute precision in the positioning of its text, images and other elements, and you want to make sure it looks correct on a Mac, you will have no choice but to get a real Mac to test it on.
One of the easiest ways to test your site under Linux is to run Linux from a CD or DVD. There are numerous Linux "live" CDs around; see the Free Linux LiveCD Distributions page for a list of them. These allow you to simply boot your machine from the DVD/CD directly into Linux without having to install anything onto your hard disk. Essentially, all you have to do is to download an ISO (which is just an image of the DVD or CD) of the Linux distribution, burn it to your CD or DVD, put it in your CD or DVD drive, and restart your computer. The computer boots from the media and runs Linux without installing anything on your hard disk. From the drive, you can run many Linux applications, including the Linux version of Firefox and Konqueror.
If you are feeling lazy, and you have installed an emulator or a virtual machine, as mentioned above, you don't even need to burn the ISO to a CD. You can simply use the virtual machine to boot the ISO — your copy of Linux will then run in the virtual machine. Or, if you prefer, you can also directly install Linux into the virtual machine.
Yet another alternative is to install Linux on your hard disk, using one of the many free Linux distributions around. You can set it up so that it co-exists with Windows (ie, dual-boot). Make sure you have space for a new partition on your hard disk, install it and you're done.
The default browser that comes on many Linux distributions is Firefox (although not necessarily so). However, you will find that even though Firefox tries to render your page the same way under all platforms, the fonts available under Linux are different from those available on Windows. If you don't code your fonts in a cross-platform compatible way, your site may end up being rendered with an ugly font. For example, if your site only specifies "Arial" or "Impact" or some Windows-specific font, since these fonts are not available by default under non-Windows systems, your site will be rendered using either the default font or some other font that the browser thinks matches what you've specified.
If you don't want to bother to run Linux to test, be sure that you at least:
Test your pages under Firefox for your platform.
Specify alternative fonts for your web pages. For example, don't just select a font like "Arial" in your design. Specify alternatives as well, should Arial not be available, like "Helvetica" and a final fallback, something generic like "sans-serif". If you don't know how to do this, please see my article on choosing fonts for more information.
It's a good idea to test your site with multiple versions of multiple browsers, particularly if you plan to do anything fancy with style sheets on your site. This doesn't mean that you have to support all browsers — for example, the pages on thesitewizard.com do not work with very old browsers. However, when you are able to test your pages this way, you can at least reduce the number of problems your pages have with the different browsers. The tips in this article allow you to test with multiple browsers even if you have only one machine.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: