BrowserLab, Adobe®’s newest innovation, is as the old saying goes, “the best thing since sliced bread.” With each year the headaches surrounding uniformity pertaining to web design has grown immensely. Anyone who has ever designed a web site knows the difficulties, and frustrations, of attempting to design a site that does not appear drastically changed when viewed on a variety of browsers.
There is nothing more exasperating than to create a web design on a PC, using Internet Explorer as your main web browser…only to view (what you thought were) your perfectly designed pages on Firefox, and find everything out of kilter. To complicate matters even more, things often look different on a Mac than they do on a PC. Of course, a quick solution to the IE verses Firefox dilemma, is to install and run both IE and Firefox web browsers on your PC. Although designers, who make their living creating websites, can afford to buy an additional computer (a Mac if you own a PC, or a PC if you own a Mac)…that option is not practical for the majority of part-time web designers.
Once again, Adobe® has come to the rescue, saving their loyal followers both money and headaches with their newest technological advancement—BrowserLab. Although still in its Beta infancy, this little application is fast becoming a huge, cannot-live-without, solution to an exasperating problem.
So, what exactly is Adobe® BrowserLab? For a limited time, BrowserLab is a “free” online hosted service. BrowserLab allows the user to test pages of a web site in a total of three browsers, and on both a Mac and PC: Firefox 2.0 & 3.0 (for both Windows XP and Macintosh OS-X), Internet Explorer 6.0 & 7.0 (for Windows XP), and Safari 3.0 (for Macintosh OS-X).
As BrowserLab grows in popularity, the chances of Adobe® charging for its service is inevitable. However, it is also foreseeable that the variety of “testing” web browsers will also increase. To check which browsers are currently available for Adobe® BrowserLab, merely click “help/about” within the BrowserLab site.
How does it work? Adobe states in its June, 2009 BrowserLab press release: This capability is enabled by virtualization technology, hosted through a cloud-based application, which eliminates the need to have browsers installed on a system before testing a site. Adobe BrowserLab lets designers compare and contrast browsers via an interface that works on any Adobe Flash Player 10® enabled operating system, making it compatible with Mac and Windows.
Basically, the service takes screen shots of your web pages in different browsers, and then displays them in the BrowserLab application’s optional viewing windows. Although BrowserLab is fully functional as a standalone service, it is an Adobe® application, and is designed to be integrated with Adobe® Dreamweaver CS4.
Using BrowserLab within Dreamweaver CS4, allows the user to test web pages without publishing them to a server. Which offers great peace of mind for designers, as they can make sure everything is working as designed in a variety of browsers and operating systems, before publishing pages for the world to view.
In regards to the interaction of BrowserLab within Dreamweaver CS4, the June press release also stated: While Adobe BrowserLab can be used by any Web designer it provides Adobe® Dreamweaver® CS4 users extended capabilities to also test Flash technology-based and interactive site elements, including dynamic widgets, rollover effects and AJAX driven content. The direct integration with Dreamweaver CS4 streamlines workflows and allows designers to preview both local and remote Web content without the worry of firewalls or publicly posting confidential client projects.
Within the BrowserLab interface, you can quickly test your site simply by entering your page’s URL. Three viewing options are available. The single-view allows the page to be viewed within a single designated browser/OS combination.
BrowserLab “1-up view” Internet Explorer 7.0 Windows XP
The double-view allows the page to be viewed within two specified browser/OS combinations.
BrowserLab “2-up view” Firefox 3.0 OS-X & Internet Explorer 7.0 Windows XP
While the onion-skin view overlaps screen grabs of two specified browser/OS combinations.
BrowserLab “Onion Skin View” Internet Explorer 7.0 & Windows XP Firefox 3.0 OS-X
There is also a Browser Sets function; allowing the user to set specific browsers within their default browser start-up.
As someone who has been designing web sites since the mid-nineties, I was especially excited to give BrowserLab a test drive. Due to my busy schedule, and the fact that I generally just use basic code, I admit that I have become lackadaisical in checking my web designs in a variety of browsers and operating systems. Needless to say, testing the homepage of one of my novel’s site designs was totally mortifying.
My site looked exactly as I had designed it when viewing the pages within Internet Explorer 7 on my PC, using Vista. However, when I tested the homepage using Firefox, I could not believe what a gobbled-up mess it was [see the following image].
Firefox 3.0 Windows XP – Before correcting the code
By simply viewing the source code compared to the BrowserLab screen capture, it took me mere minutes to find and solve the problem. The culprit: a missing “break” tag.
Viewing missing “break” tag in Dreamweaver CS4
Viewing corrected code in Dreamweaver CS4
Ironically, sloppy coding (on my part), could have easily been averted if I had checked my pages in BrowserLab before launching my site.
BrowserLab “2-up View” of corrected code
When I re-tested the site in BrowserLab, all the buttons that had been askew in Firefox and Safari, were now lined up the way they were designed. At that moment, BrowserLab become my new best friend, and all-time favorite web design application.
Although a “help” section is provided with BrowserLab (including a detailed help menu for using BrowserLab within Dreamweaver CS4), the application is “point-and-click” user-friendly. I would highly recommend BrowserLab, not only for the professional web master, but more importantly for the occasional web designer.
Thank you Adobe for providing yet another vital application to make life online productive as well as easy and fun!
Pricing and Availability
Adobe BrowserLab is available now in English only as a free preview on a first-come, first-serve basis. It is a tiered release. International versions and the list of supported browsers and operating systems that can be previewed with BrowserLab is expected to grow over time based on customer feedback and demand.
To access the BrowserLab Web site and take advantage of the service users must run: Microsoft® Windows® XP (SP2 Home & Professional or SP3), Windows Vista® or Mac OS X (version10.4 or later); Adobe Flash Player 10; as well as a modern browser such as Firefox version 3 or later, Safari version 3 or later and Internet Explorer 6 or 7.
To take Adobe® BrowserLab for a test ride, we invite you to visit:
Supporting images cannot be copied, printed, or reproduced in any manner without written permission from Renderosity
August 9, 2009
Please note: If you find the color of the text hard to read, please click on "Printer-friendly" and black text will appear on a white background.