One Browser is Not Enough

When you're working on a website design or testing a layout, testing it in the one browser you normally use is a recipe for surprises down the road. Your layout could be broken in Internet Explorer 7, or the JavaScript function you're using breaks in Opera 9. Checking your website in multiple browsers on different platforms (Windows, Mac, Linux) will help keep people on your site instead of giving them a bad first impression.

So how do you go about checking what your site looks like in IE7 when you already have IE8? Or how do you check it on Firefox under Windows if you're on a Mac? Let's dive in.

Interactive Options

VMWare

Running an OS in a virtual environment (virtual machine) allows you to interact with your site like you're sitting at another computer. With VMWare you can make multiple instances of different versions of Windows and Linux, with multiple browsers on each.

VMWare Fusion is popular with developers on the Mac, because they can test their sites on Internet Explorer and other browsers running on Windows.

Windows XP Mode

Windows XP Mode is part of Windows 7 and free, and as the name suggests, it is Windows XP running as a virtual machine. XP mode is made for running applications that aren't ready for Windows 7 or are legacy applications. You must have Windows 7 Professional, Enterprise, or Ultimate to run Windows XP Mode. To install it, go here.

Multiple IE

So how can you run multiple versions of Internet Explorer without running each on its own virtual machine? Multiple IE is the gem you seek. In one package it will install versions 3 through 6 of IE. My advice is to start on a fresh VM install of Windows XP, upgrade it to IE 7, and then install this. Then use IE 8 outside the VM or in a different VM.

It isn't working very well under Windows 7 but installing it on pre-7 Windows under VMWare or on XP Mode it works like a charm.

Spoon

Want the interactivity without the installation hassles? Spoon has a small browser plug-in that lets you play with other browsers running in remote installations. Want to mess with Safari on Windows, or IE6 on Mac? Click and run.

This site has multiple applications that show off this ability: Gimp, Eclipse, even OpenOffice. I suggest playing some of the games, too. Hordes of Orcs and Cogs were a lot of fun.

Screenshot-only Options

Abode BrowserLab

Aside from running VMs to get full interactivity under another browser, just getting a screenshot can be a huge help. Just made that left column 180 pixels wide and want to make sure it didn't break the layout in Safari 3? Adobe BrowserLab is a slick, fast method to get these screenshots.

Just choose the browsers you want screens from and go:

Includes rulers and the option to have it take the screen shot a few seconds after page load if you have some Ajax or other post-page loading going on.

You can also stack multiple screens (onion skin mode) over each other to see where things may not be lining up as you expected. See below:

BrowserLab is free and integrates with CS5. You just need an Adobe login if you don't already have one.

BrowserShots

BrowserShots is pretty nifty. Want to see what your site looks like in a wide variety of browsers on Linux, Windows, and Mac? No problem.

This is a nice service for the variety it offers, but it takes a while depending on the number of browsers you choose. Your request gets queued with others and it can take up to 30 minutes to get all the screenshots back.

Want to skip the lines? Go for priority service at $29.95/month: http://browsershots.org/priority

Call for Comment

Do you have any suggestions? How do you test your site in other browsers? Comment below.

Next post: interview with Medizzle