Cross-browser testing and Adobe’s BrowserLab

Getting web page designs to render identically (or, more accurately, how we’d want them to render) on different browsers and platforms is one of the long-standing headaches of putting a website together.

Anybody who’s got even close to the edges of web design will have come across one of those situations where things look spot on in a development browser – which in my case is normally Firefox 3 on a Mac – and then go extraordinarily tits-up in another browser – which is normally Internet Explorer 6 on Windows. I realise that it’s more of a problem for Mac developers testing on PC than vice versa; but Mac developers are inherently more exacting and therefore will demand a higher standard of quality. Ahem. Smiley face.

Even with some of the popular arguments against the need for exact cross-browser design matches, such as…

• Progressive enhancement, meaning that better browsers’ users get a better experience;
• Stats, meaning that not that many people (and less every day) are using IE6/some other browsers any more;
• It’s just designers (and/or stakeholders) being petty and picky about everything looking like some perception of the perfect layout;

…I don’t think anybody would argue with the fact that at least a quick test of a page design in a few browsers can very quickly highlight (and therefore let you address) some significant problems that might exist.

That’s why I’m not more surprised that Adobe’s BrowserLab product isn’t more widely banged on about. All it does is let you view (in static image form) a page on the internet in a limited set of browsers (including IE6 thru 8, Firefox and Chrome; but no Konqueror, Opera, Flock etc). This allows you to spot obvious cross-browser mistakes: weird padding/margin stuff, floats gone mad, opacity not working, transparent PNGs acting up, and so on. A very simple task, and one that has been possible in other ways before – most popularly using something like Browsershots which does much the same thing. The main positive difference (even in spite of Browsershots’ wider range of target browsers) is the sheer speed of delivery of BrowserLab images. Browsershots has been known to take up to ten minutes to return a set of results, but BrowserLab has – at most – taken sixty seconds. Combine that with some other features…

• easy reload of images after changes have been made
• the overlay of different browser images on top of eachother to compare changes between each
• get time-intervalled reloads that attempt to show dynamic elements

…and it’s got me ‘on board’.

It’s never going to be as instant and useful as having a full test suite set-up locally, as it’ll never do the following:

• work with local files, to let you repeatedly hit ‘refresh’ after making miniscule changes, without the need to upload files to the internet
• Let you fully view interactive/dynamic/AJAXified page content in different browsers, in real time*

Those things aside, it’s a fantastic resource and I’d say a semi-essential for anybody wanting to put web pages together quickly and without access to a full-on development and testing environment.

*Browsercam can do this by giving access to a remote desktop on one of their machines – it costs money, it can be slow, and like BrowserLab it only works with files on the internet, but a cheap and convenient halfway house towards buying several computers and installing several browsers…