Hands-On with Adobe Browserlab

One day, we won't have to worry about browser eccentricities. (I have a dream.) Until then, tools like Browserlab make the horrible realities of Web development tolerable.

One of the great frustrations of Web development is the delivery mechanism itself. Seemingly, no two Web browsers are the same. Firefox, Safari, and Chrome are largely compliant with standards, but still demonstrate variations; meanwhile, the three versions of Internet Explorer—6,7, and 8—remain in use, with vagaries between each and significant disparities with almost every other browser.

To cope with such a diverse set of platforms, Web designers and developers have concocted a number of strategies. Some aim for the lowest common denominator (although this is increasingly painful and impotent, as the weakest link is Internet Explorer 6). Some keep at least one Windows platform close at hand, populate it with as many browsers as possible, eyeball results, and tweak accordingly. Alas, while Firefox, Safari, and Chrome can coexist on the same system, multiple versions of Internet Explorer cannot. Hence, some implement solely for Internet Explorer 7 and disclaim and even preclude operation in other browsers and platforms.

Another alternative is the “virtual browser.” Here, software renders a single URL in multiple browsers and displays the results side-by-side for comparison.

For example, Browser Shots can render and capture a page in near one hundred browser flavors on Linux and Windows. Browsercam provides fewer software combinations, but supports every major operating system and mobile platform. Browsercam’s ”Capture” services can produce static images for every supported browser; the advanced “Remote Access” service provides access to running machines, which are mandatory to test forms, JavaScript, and AJAX features. A third implementation offered by Xenocode can run each of the popular browsers in its own virtual machine on your desktop. Unfortunately, Xenocode runs on Windows-only.

Browser Shots is free, but it costs patience, as pages are rendered on a first-come, first-serve basis. Browsercam is offered as a subscription, and Xenocode’s browser appliances are free. (Xenocode sells software that virtualizes applications.)

You can also find other vendors. Type “test web pages in all browsers” in your favorite search engine to find a list of options. One brand new entry? Browserlab.

The Adobe Browserlab

Browserlab is a new product from Adobe to compare Web pages in a raft of browsers. Browserlab renders pages only; there’s no interactivity. The software is currently in beta and access is limited. Follow adobebrowserlab on Twitter for opportunities to register.

As you might expect from Adobe, the service looks and works great (so far) and is based on Flex and Flash. The software supports only seven browsers&mdashInternet Explorer 6 & 7 and Firefox 2.0 & 3.0 on Windows XP and Firefox 2.0 & 3.0 and Safari 3.0 on Mac OS X— but more are expected. As with other virtual browsers, you simply enter a URL and wait for the pages to render.

Here is this morning’s Wall Street Journal home page rendered in the two Windows browsers.

The Wall Street Journal home page compared in Browserlab
The Wall Street Journal home page compared in Browserlab

As you can see, type rendering in Firefox is poor, which is consistent with my own experience using the browser.

This view shows the pages at 100 per cent magnification and 2-Up, or side-by-side. You can scale down to 75 per cent or up to 105 percent, and switch to 1-Up. The other display mode is Onion Skin, which layers one page over another to compare pixels.

Onion Skin mode overlays two pages to compare pixel-by-pixel
Onion Skin mode overlays two pages to compare pixel-by-pixel

Don’t adjust your monitor. The fuzziness reflects similar but not identical rendering. Nonetheless, this page works well in both browsers, achieving the same iconic look of the Journal. The 50/50 scrollbar at top acts something like a Balance control on your stereo: pull it left or right to favor one channel or the other. At the extremes, one image is 100 percent opaque.

Dreamweaver, Too

Since Browserlab is written in Flex and Flash it runs well in most every browser. You don’t need any extra software to use it.

However, if you use Dreamweaver to author Web pages, Adobe has also created two extensions for Dreamwaver to connect it to Browserlab. Simply install the extensions using version 2.1 of Extension Manager, save your Web work, and click Preview in Browserlab. In a moment, you Web page draft appears in Browserlab, where you can review the rendered result in any of the embedded browsers. The next image is Dreanweaver CS4 with the Browserlab extension installed. The following image is the onion skin of the page in the two 3.0 Mac OS X browsers.

Dreamweaver can automatically preview your work in Browserlab
Dreamweaver can automatically preview your work in Browserlab

An onion skin preview of a Web page under construction
An onion skin preview of a Web page under construction

Yes, the template is cheesey, but the preview feature is phenomenal, as you can test your work without pushing it to an external host, a requirement for the other services.

Young But Capable

I welcome Browserlab. I hope Adobe continues to add more browser variants to keep pace with the recent explosion of options, including Google Chrome, Safari 4, and Internet Explorer 8. Support for mobile browsers is essential, too.

It’s likely that Browserlab will be a subscription service, although pricing has not yet been announced. Pay-per-day or pay-per-month would be welcome choices for developers; designers would likely benefit from discounts on longer commitments.

One day, we won’t have to worry about browser eccentricities. (I have a dream.) Until then, tools such as Browserlab make reality tolerable.

Comments on "Hands-On with Adobe Browserlab"

Good day very nice blog!! Guy .. Excellent .. Wonderful .. I will bookmark your blog and take the feeds also…I am satisfied to seek out a lot of useful information here in the put up, we need develop extra strategies on this regard, thanks for sharing. . . . . .


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>