In this post we'll be taking a look at BrowserLab. What the heck is BrowserLab? It's a tool for web designers, which allows them to preview their work in a variety of browsers, on a few different platforms. For example, Mac-based developers would want to know how their pages are rendering in Internet Explorer, Chrome, and Firefox on Windows, just as Windows-based designers would want to see their pages in Safari, Chrome, and other browsers on the Mac side.
Now BrowserLab comes in two flavors: As a panel inside Dreamweaver CS5, or as a stand-alone service offered on Adobe's website. Both are extremely cool, but in this post we'll be taking a look at the version of BrowserLab that's available live on Adobe's site.
To get started, go ahead and navigate to browserlab.adobe.com and sign in with your Adobe ID. Next, click on Browser Sets at the top.
Inside Browser Sets, we can specify the browsers we want to use to preview our work. As a matter of fact, we can even create multiple sets if we wish: just click the Add New Browser Set button in the top left. At this point though, I'm going to stick with just one set.
In the Available Browsers column in the center, go ahead and mark off the browsers that you'd like BrowserLab to enable. As you can see, there's a lot there, on both Mac and PC. It would be great to see Linux in there too...hopefully that's on the way soon.
Now we're ready to start previewing our work. At the top, click Test. Then, in the field at the top of the screen, type in the URL to the site or page that you'd like to preview and hit Enter.
As you can see, the browsers begin rendering, and pretty soon you'll get a preview inside BrowserLab for the first browser. How does it look? Scroll up and down inside BrowserLab so that you can view the entire page. Designers will want to look for things like poorly rendered CSS, alignments, spacing, and so on; and then of course go about correcting these issues.
How do you know which browser you're currently seeing inside BrowserLab? A glance at the top left corner will let you know. In fact, that's a drop-down menu, which will allow you to switch out to a different browser. Go ahead and give it a try.
BrowserLab certainly isn't perfect. For example, you can't test scripting, load times, or interactivity, but it's a huge help to designers. It's saved this Mac-based designer from going out and getting his hands on a PC just for testing!