Using Adobe BrowserLab with Dreamweaver CS5
BrowserLab is an additional online service offered by Adobe and now integrated with Dreamweaver CS5 which allows users to preview any page in multiple browsers across multiple platforms. BrowserLab ensures cross-browser site compatibility and allows users to preview and compare page design screenshots individually or in grouped browser sets.
To open Adobe BrowserLab:
- Go to the Window menu.
- Select the Extensions option.
- Click on Adobe BrowserLab.
- Click Preview on the BrowserLab panel to open a browser to the BrowserLab website.
Alternatively, you can also:
- Go to the Document toolbar.
- Click the Globe icon.
- Select Preview in Adobe BrowserLab. This will open a browser to the BrowserLab website.
The first time BrowserLab is accessed, you will be prompted to log in with your Adobe ID and password. Once logged in, Dreamweaver will upload the open page into BrowserLab's staging server, which will then take screenshots in the designated browsers.
In the top, left corner of the BrowserLab window, the name of the browser you are viewing will be displayed. You can preview other browsers by clicking on the down-pointed triangle beside the browser name.
To choose a different set of browsers:
- Go to Browser Sets.
- Select Add New Browser.
- Name the new setlist.
- Check the boxes on the browsers you'd like to use for testing.
There is no limit to the number or sort of browsers that can be added to a setlist.
Preview in New Browser Setlist
To preview a page using a new browser setlist in BrowserLab:
- Click Test.
- Click on the small Refresh button within BrowserLab.
Doing this will have Dreamweaver resend the information site information to BrowserLab and new screenshots will then be taken.
In the upper right hand corner of the BrowserLab window, there is a delay option which provides users the ability to prolong the timeframe before BrowserLab takes a snapshot of the page. This ensures that items such as AJAX widgets or complicated CSS have a chance to load.
Other notable features of Adobe BrowserLab include:
- Ruler Guide - allows users to see how elements on their webpage align and size up in designated browsers. This feature can be activated under the View > Show Rulers.
- 2Up - allows users to preview their site in browsers simultaneously. This view allows the use of other tools such as Ruler Guide and Onion Skin.
- Onion Skin - allows users to overlay the designated browser previews from 2Up atop one another to display the slight differences between the two previews. This allows for fine-tuning of object placement and text.
Dreamweaver is a popular Adobe program for creating websites and applications. It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.
You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV. The video in this article is courtesy of Adobe TV.