Monday, February 15, 2010

Preview Web sites across browsers with Adobe Browserlab

If you design Web sites, particularly with CSS, you know the frustration of trying to make a page look the way you want in different browsers. This is a constant battle for Web designers.

Adobe is showing a cool new technology at Adobe Labs called Adobe BrowserLab. Currently in "free preview" status, BrowserLab lets you quickly preview what a Web page looks like in several different browsers. When you enter a url into the address field in BrowserLab, this address is sent to a "server farm" of real computers running clean installations of the browsers and operating system you choose. A screen shot of the result is sent back to you for viewing and comparison. You can easily save these screen shots as jpeg files for client presentation.

Adobe isn't the one doing this. Competitors include BrowserShots, BrowserCam, Browsrcamp, Total Validator, AnyBrowser and NetMechanic. However, what really sets Adobe Browserlab apart from the competition is integration with Adobe Dreamweaver CS4. If you download the BrowserLab Extensions for Dreamweaver, you can easily view various states of dynamically built pages in different browsers.

For example, if I want to see what a particular drop-down menu looks like on my Web site, I can open the page in Dreamweaver, click on the Live View button, pull down a menu, and hit F6 to "freeze" the JavaScript. Then, I choose command-shift-F12 to preview the page in BrowserLab, and within a few seconds, I get the result shown below.

2 comments:

  1. You forgot to mention at least one competing product - BrowserSeal, which has some unique features that BrowserLab is lacking

    ReplyDelete
  2. Hi Keith,
    We also have a cross browser testing product called Browsera. It's different from BrowserLab/Browsershots because it automatically detects visual differences so you dont have to.

    ReplyDelete