BrowserLab – The Artist Formerly Known as Meer Meer

This one’s been a lot of fun. Seriously.

Back at MAX 2008 we got to show off a project in it’s early stages, code-named Meer Meer. It raised quite a bit of attention at the time, and was – as simply as I can put it – an earnest attempt on our parts to solve a problem that we’d been hearing about for quite some time from our professional web designers and developers – the challenge of cross-browser (and OS) design for the open web.

Web pros faced with supporting the wide variety of browsers and OSen their clients demanded were resorting to either physical or virtual test labs, or services that worked in a rather serial fashion – you’d type in a URL which would go into a queue with everyone else, and eventually return you a screenshot in a minute. Or five. Or far longer. No one wants to get blindsided with browser compatibility bugs at the critical endgame of a project, but the logistics of cross-browser testing often make it difficult to do early and often. We decided to address the problem with two principles – simplicity and speed.

Adobe BrowserLab is our simple, speedy solution.

BrowserLab runs in any Flash 10-enabled browser. That’s it. No bulky downloads, no local installations (unless you want to enable direct Dreamweaver CS4 integration, which I strongly recommend), just you and an initial set of browsers on Windows and Mac to test your layouts against. The BrowserLab interface is simple, and uncluttered – one view to manage sets of browsers to both match project requirements and kick off ‘batches’ of screenshots easily, and one view to view, compare and examine your browser screenshots. You switch view modes with the 1, 2 and 3 key, and cycle through loaded browser screenshots with the up and down arrow. You can zoom into screenshots while overlaying two browsers together at your opacity of choice. A large part of BrowserLab’s sweetness is its utter simplicity.

And if you’re using Dreamweaver CS4, it’s even sweeter. The biggest problem with existing ‘screenshot’ services is that you can’t easily preview interactive content – rollovers, Ajax/JS widgets, dynamic data, basically anything that’s loaded or ‘triggered’ in your page by user interaction. You’re pretty much stuck with the default, loaded page that your URL produces. Dreamweaver CS4′s new Live View – and it’s ability to freeze JavaScript interactivity in place – lets you essentially ‘drive’ a page you’re working on into a particular design “state”, freeze it – and send that ‘snapshot’ directly to BrowserLab for review. The BrowserLab Dreamweaver panel gives you status of requests in the BrowserLab service so you aren’t wasting time waiting, but concentrating on design – not collecting and compiling screenshots from test machines/virtual machines, or tapping your toes waiting for your turn in a screenshot queue. It’s high time we were able to spend less time managing the logistical headaches of cross-browser proofing, and more time concentrating on design. Or code. Or whatever. :)

(next section updated occasionally as status changes, FYI)

As you read this, Adobe BrowserLab is live. However, we’ve already reached our initial beta capacity for the first round – we’ve let in roughly 3500 people or so this week on a first-come, first-served basis – as the first of several phases of rolling out the service. Experience is the key, so we’re ramping up user capacity over time – if you didn’t get in this week our apologies- we’ll be extending to a wider, invitation-based program in early July to let everyone help us kick the wheels and polish the chrome for our first release. You can get all the info over in the BrowserLab section of Adobe Labs, and of course make sure to bookmark BrowserLab itself at browserlab.adobe.com.

On behalf of the entire BrowserLab team, enjoy!

FYI UPDATE: comments are disabled for the moment due to a bug in my captcha, but you can track me down on Twitter: http://www.twitter.com/sfegette. Pardon the head-fake.