by Scott Fegette
Possibly the biggest problem facing web designers and developers today is cross-browser rendering. Without solving the fundamental issue of how to preview across systems and browsers, web designers are largely working blind, hoping for the best as they lay out their designs. To clear this hurdle today, there are many solutions, but they all have various issues. Dedicated physical and virtual testing machines are maintained to access alternate browsers and systems, friends and colleagues are often recruited as virtual quality engineers, and existing screen shot–based services can put you in a virtual holding pattern before your screen shots are returned and offer no way to see interactive design elements or various states of your pages and applications.
To help solve this frustrating problem, Adobe has created BrowserLab. Adobe BrowserLab gives you immediate access to previews of your browser-based projects across the most popular browsers and operating systems with minimal fuss or complexity (see Figure 1). It focuses on simplicity and speed, so you can work more efficiently across browsers and systems during your design process without all the forced coffee breaks or test machine management.
Using BrowserLab is as easy as using your local Flash enabled web browser. Just type in the URL you'd like to preview, and you're on your way. You can see the status of your screen shot requests right in BrowserLab (or in Adobe Dreamweaver, if you're using both together), so there's no waiting. You can get started as soon as your first screen shot is returned, and you'll always know the status of any remaining screen shots. The BrowserLab user interface is equally simple and straightforward. It provides two main views: Browser Sets view, where you can create and manage sets of browsers, and Test view, where you can request, preview, and compare your rendered screen shots.
Projects have varying requirements for browser support, so the Browser Sets view enables you to create specific groupings of browsers you can request in one swoop, cutting down on the back and forth of collecting screen shots from testing systems (see Figure 2). You can easily create a set to check only Internet Explorer or Firefox on all platforms or specific browsers to match your client's project requirements. You can even check every browser available all at once for a big-picture test. It's your choice.
Working with screen shots in the BrowserLab Test view is a snap. As soon as the first screen shot has returned, you can get busy right away with both 1-up and 2-up views for detail and comparison. And for those aspiring toward pixel-perfect design, the handy Onion Skin view lets you overlay any two browser screen shots with varying degrees of opacity to compare their rendering at a pixel-by-pixel level. Just drag the slider in Onion Skin view left or right to dial up a little more of either browser, and you can easily pinpoint trouble areas in your layout. Zoom into your designs to highlight specific sections, and be laser-accurate with your box model tweaks. What was once a painful testing exercise is now a simple preview step in your workflow. There's almost no learning curve required — BrowserLab was built from the ground up to be simple and straightforward to use.
As useful as it is as a standalone service, BrowserLab also integrates directly with Adobe Dreamweaver CS4 to extend the reach of your cross-browser previewing and give you access to interactive states of your project such as exposed drop-down menus, specific Ajax data in a layout, and specific tabs selected in your navigation. Essentially anything you can render in the new Webkit-powered Live View in Dreamweaver CS4 can be sent to BrowserLab directly for previewing — even if you're behind a firewall at the time. You're no longer confined to the default view of your content. Now you can actually compare interactive elements just as easily as static web pages.
The BrowserLab panel (and Preview command) in Dreamweaver lets you send your current page directly to the BrowserLab service without needing to publish it to a production or testing server, and gives you real-time status on your screen shot renders at any time. For designers who have become accustomed to weighty workflows like collecting screen shots across test machines and compiling them manually in Adobe Photoshop, this means you can now spend that time making your designs more robust and beautiful. Cross-browser testing is no longer an afterthought in your projects — or even a separate task. It is integrated into your regular workflow seamlessly.
While the BrowserLab name may be new, the technology was actually previewed at Adobe MAX in November 2008 under its code name "Meer Meer." But it has come a long way since then, and we are starting a limited free preview program as we finish ironing out the features and preparing for a final release in the near future. While it can't make browsers render more closely to one another, BrowserLab can help you become more visually informed about your cross-browser designs while you work, and ultimately lets you create more elegant and robust sites and applications.
NOTE: As of June 9, the limited free preview for BrowserLab is currently full, and we are temporarily not accepting new users. We hope to make the preview available to more people in early July. We apologize for the inconvenience and appreciate your interest in BrowserLab. Please visit our service status page for updates.
Scott Fegette is the Technical Product Manager for Dreamweaver at Adobe - focusing on web standards, community outreach and developer relations. After hours, Scott is a professional musician and photographer.