All browsers are not created equal.

When designing a site it is important to ensure that it will display properly on your target audiences’ browser and computer. In a perfect world, the website you design and preview on Firefox would look fine on Internet Explorer or Safari. However, because not every browser complies with the latest W3C CSS standards, you should always expect variations in what your audience views. This is where my new favorite toy, Adobe BrowserLab, comes in.

Adobe BrowserLab is a cross-browser compatibility application for web developers. It renders screen shots of your website in different environments. For example, you can see what your site would look like on a PC running IE8, even if you are on a Mac. This screen shot preview technique is a feature much like the one used by Litmus or IE NetRenderer. But wait, it gets even better.

options

You can view screen shots of your website from different browsers either side by side or as transparent overlays.

After rendering screen shots, BrowserLab lets you overlay them for more precise comparison. In this Onion Skin view, a slider at the top of the BrowserLab’s workspace lets you fade one view on top of another. This makes even the tiniest visual differences stand out on your screen. To make this even more precise, the application has rulers and guides that you can drag over your screen shot. Very quickly you can determine discrepancies and move on to debugging the site.

onion

Onion Skin view allows you to overlay browser screenshots. Here is an overlay of IE8 Windows XP on top of Firefox OSX.

Check out Adobe BrowserLab and see for yourself how useful the tool is. The current version is a beta and will be free through the end of 2010, so use it out now while you can. Once they have worked out any bugs, the program will be available for sale in 2011 (@ $10-$20 per month). For a quick intro video, check out there Adobe TV episode: Introducing BrowserLab.