views:

1646

answers:

21

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

+29  A: 

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.

cmcculloh
A: 

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.

Karl Seguin
+2  A: 

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.

John
+1  A: 

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.

contagious
A: 

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.

Dillie-O
+13  A: 

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.

Ryan Olson
+1  A: 

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.

engtech
A: 

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.

EndangeredMassa
+5  A: 

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."

Danny Whitt
A: 

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

A: 

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)

ZombieSheep
A: 

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.

+3  A: 

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

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

matt b
+1  A: 

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.

Sam Murray-Sutton
+1  A: 

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.)

Joshua Chavanne
Just a word of warning: Although I do love the multiple IEs software, it doesn't seem to affect IE6 in a positive way allowing for some functions to work while they don't work when IE6 is installed without IE7 installed.
Darryl Hein
+15  A: 
Herb Caudill
well, I'm grateful for this link even if hardly anyone else sees its merit!
wheresrhys
A: 

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.

John Dunagan
A: 

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.

kavoir.com
A: 

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).

wheresrhys
A: 

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

Demiurg
BrowserSeal is officially out of beta. Current version 1.1 supports Firefox, Internet Explorer (IE6, IE7 and IE8), Chrome, Opera and Safari. We no longer offer free download, but we do have free trial version with limited functionality.
Demiurg
+1  A: 

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

dzuc