Andrea Olivato’s Blog

BrowserLab is a new Adobe web app which might become a must-use for the webmasters in the very near future.  The application is free to use and allows web developers to test any websites’ layout, `screenshoting` it by different browsers of different operative systems.

There are other web services out there that help webmasters by  taking snapshots of web pages, but BrowserLab flash interface lets the user interact and compare results in a simpler and better way.

When you first type the address that you want to analyze into the app, BL will load 4 images from its default browsers which are Firefox 3 in WinXp and Os X, Safari in OsX and IE7 in Win Xp. Image loading takes  few moments and within a minute you will get your own website showed on the main app window, exactly as Firefox 3 would render it. You can easily switch from one browser to another, choosing the desired one from a vertical drop-down menu located in the top left area of the app. You can even choose non-default browsers and in that case BL will snapshot the page with the new requested browser and then, after few more secs, you will see the freshly generated image.

Keeping looking at the top left corner of the interface, you will find another menu which allows the comparison among images. Instead of a single view you will have the opportunity to see two images next to each other or on each other.

In the first case the two images would be scrollable in sync (if you scroll one image to the bottom, the other one will scroll to the same quote). While in the second case you have the option to play with opacity so that one image will be more highlighted than the other and vice versa. In both cases (and even in the single mode) it is possible to zoom the image(s) in and out.

In my opinion the double presentation screen is perfect for having a quick view of big incompatibilities in css (like opacity, filters etc) , but the ‘onion skin view‘ ( that’s how they call the two overlapped images option ) is great for looing at the little space differences between browsers, such as the interpretations of paddings, margins and borders.

The platform also offers the possibility to create a personal set of default browsers, which can be used to load them all together without selecting each browser singularly. Probably, this is not that much right now as only 7 combinations of browser/o.s. are available, but it will be very useful as soon as other platforms will be added.

The app in its current form is very easy to use and attractive but needs some improvements before it can become an every-day tool. First of all I would like to have the possibility to test urls at different resolutions and also more browsers and platforms to compare ( Linux, guys… Linux… where’s Linux? ).

Now I’ll stop talking and let you watch the gallery.