How do you test layout design across multiple browsers/OSs?

Question

What is a good method for testing website layout designs across multiple browsers and operating systems?

Answer 1

Screen capturing services are a great way to do this.

http://browsershots.org/ is free.

and there are some "pay" services like:

http://www.browsercam.com and http://litmusapp.com

These kinds of services are nice because they allow you to specify a certain amount of time to wait for the page to load, and allow you have them perform actions (clicking links etc). Then you get a nice array of screenshots you can quickly browse to ensure your site looks like you expected across your desired platforms.

Also, there is a service for Firefox that allows you to run sand-boxed versions of multiple browsers on your machine called "Browser Sandbox" from spoon.net.

Answer 2

Short of having access to those, you can try services that take screenshots of your site in different browsers, such as: http://browsershots.org/

Aside from that, you can install different versions of firefox on the same computer. You can also use IETester for different versions of IE http://www.my-debugbar.com/wiki/IETester/HomePage.

Answer 3

Have a look at http://selenium.openqa.org/ it is a free automated testing software. Using this you could set up a test script then run it on many different platforms but this does assume yo have access to these yourself unlike with browser shots.

Answer 4

While those are very good options, sometimes they have long queues to wait in. Have you thought about running other operating systems in either VMWare, or some virtual machine? Or even dual booting.

Answer 5

I am seconding the WMWare angle. Most of the open source OSes have a complete machine ready to roll, so there is no install time and VMWare Player is free to use with these.

Also, some emulators that attempt to simulate a different resolution fail to take the browser into account and the virtual machine can replicate this better.

Answer 6

Emulators are your friends. I use VirtualBox at work when I need to test against different browsers. I assume that other emulators have similar features, but I love ths snapshot features of VirtualBox. I have a snapshot of a fresh Windows XP installation with IE6, and various other snapshots taken of the same installation with different browser versions and plugins.

Answer 7

VMWare VMWare VMWARE!

Want to make your life as a programmer a million times easier? Start using virtualization so that you can run multiple operating systems on one computer without any cross-contamination.

The best part is it's really easy to backup the virtualization servers as they are usually only one file.

This makes it dead simple to revert to a backup after you've contaminated a build.

Answer 8

Virtualization is the best way. It requires some extra software, but your company should hopefully have a license for you.

I know that Microsoft provides an IE6 testing Virtual Machine for free.

Answer 9

Virtual machines running "guest" operating systems on a suitably powered "host" is often the best do-it-yourself approach. In my own experience the best Windows virtualization is VMWare Workstation and on Mac OS X it's Parallels Desktop for Mac.

Please note that I have used both of these vendor's products and other VMs on both environments and do not wish to turn this into a VMWare vs. Parallels vs. Some-Other-Vendor discussion - there are plenty of other places on the web where you can find that if you wish to comment in that regard. I'm just sayin' that this is my personal preference and, when asked, it is the recommendation I will give.

Download as many browsers for Windows, Mac OS and Linux including IE, Firefox, Opera, Konqueror, etc. and try them out. Arguably not as reliable for repetitive testing as a some of the services listed in other responses to this question might be but in the end sometimes you just have to "see it in realtime."

Answer 10

If you're on a Windows machine you could use Microsoft's VirtualPC. It's free and allows you to virtualize both Windows and Linux desktops (no OS X, though I don't know of any that support it).

It's not as robust as some of the other offerings, but it is free and does the trick for the basic "does this look like crap in IE6" test.

Link: http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx

Answer 11

The virtualization of OSX falls down somewhat because of Apple's licencing of the client version. Unless my info is out of date, the licence agreement expressly forbids the installation of OSX in a virtual machine. (link)

I don't believe this restriction has been lifted for the client version, but it has for OSX server. (10.5 and later)

Answer 12

Personally I just dual boot between Windows and Linux with IE, FF, Opera and Safari installed on Windows and Firefox and Konqueror installed on Linux. As far as I know, there are no differences between Safari Windows and Safari Mac for page display.

As for IE 6 and earlier, I make sure the page is readable (I test using multipleIEs) but I'm more inclined to remove styling on non essential elements than spend large amounts of time fixing them for obsolete browsers.

Answer 13

http://browsershots.org/ only works for publically accessible websites.

Can someone suggest a similar tool for use for private sites?

Answer 14

If you have the resources, I would recommend having your own set of virtual machines to test on. I've made extensive use of browsercam, and while it is quite impressive, the service can be patchy and slow, which isn't ideal when you're working to deadlines. This is my personal experience of course, maybe it isn't so bad for others.

However, we recently started using our testing machines at work, and the difference is noticeable. Not only that, but you can have whatever software setup you want - so your machine can have firebug, or IE developer toolbar installed - not currently an option with browsercam as far as I know.

Answer 15

I have a partition with OpenSuse for Konqueror testing. FF3/FF2 running on my Windows partition, with IE7 and Multiple IEs running (http://tredosoft.com/Multiple_IE). I have Opera 9 and Google Chrome (which renders very close to Safari, as it uses Webkit).

Thats all for me. I also trace out EVERY major block element and compare results (Generally I target to make things IE6 compatible, ~shudder~ so I'll be able to see where the heck the deviations are coming from.)

Answer 16

When I was in this situation, I was lucky enough to have a relatively small set of required browsers that I had to satisfy. Unfortunately, since IE6/Win was (at the time) still 40% of browser share, I always had to satisfy IE6. I hated it, and I still hate that browser.

Anyway, Tredosoft's excellent, free MultipleIEs (at this page, I think) solved that for me. It does more than I needed to, going back to even IE3. It's WinXP only to run it, however. At least until the Vista version is done.

Answer 17

Have 1 PC + 1 Mac.

PC: IE6, FF2, Opera 9.5, Safari Win on Windows XP + VPC of Windows Vista + IE7, FF3 Mac: Safari, IE

That's enough I believe.

Screenshots services are fine but they don't come handy when debugging.

Answer 18

The wait for browsershots.org to actually send you a rendering can be quite long, depending on time of day.

For me, the main bugs come from ie6 and ie7, so the problem was how to get them both installed so I could reload the webpages quickly and repeatedly for easy debugging, and this website allows you to do this: http://tredosoft.com/Multiple_IE (only works on windows XP though).

Answer 19

There is a new web browser screenshot application (www.browserseal.com) that you may find useful. It currently supports FF, IE and Safari. It is still in beta, so more features and new browsers will be added in the new future.

Fully functional free beta version is available for download from www.browserseal.com

Answer 20

I've been really enjoying using Aodbe's Browserlab: https://browserlab.adobe.com/