Adobe Tests Fast Browser Previewing for Designers
Yours truly has been cursing at Web browsers since 1994. That gives me some pedigree in suggesting that Adobe BrowserLab is the finest method I’ve seen over 15 years in checking whether a Web page you’ve designed will look the way you want on browsers used by the majority of Internet users. (The service is currently in a limited-user preview stage.)
Why test? Because no two browsers appear capable of rendering the same Web page in precisely the same way. The further you go back in time with browser versions, the greater the disparity among rendering and the more errors that show up with perfectly valid code. But even the latest releases of major browsers still have peculiarities that require tweaking.
BrowserLab lets you enter a URL and rapidly see the resulting Web page as it appears in the seven most popular browser versions currently in use: Firefox 2.0 (Windows XP and Mac OS X), Firefox 3.0 (XP and Mac OS X), Internet Explorer 6 and 7 (XP), and Safari 3 (Mac OS X). BrowserLab requires Flash 10, but no additional plug-ins.
What makes BrowserLab different from services like BrowserCam or BrowserShots is that it’s intended to be nearly interactive, rather than just a screenshot service. Enter a URL and within a few seconds, the results are shown. Different views let you look at two browser previews against each other, too.
The idea behind BrowserLab is quite simple: “Making sure you have design integrity, and you have easy access to cross-browser previewing,” said Scott Fegette, an Adobe Dreamweaver product manager.
Fegette sees BrowserLab as an extension of Dreamweaver’s ability to “find problems and help you fix them” as you design or tweak pages. But he also said Dreamweaver designers need the context of “real browsers.” BrowserLab has a light layer of integration with Dreamweaver CS4 via a palette, but can be used entirely independently as well.
Fegette said that Adobe wanted to design a service that had a very short wait time for previews to be generated. Other browser capture services – many of which feature an inordinate number of browsers and platforms – take minutes or tens of minutes to generate screenshots, which have to be downloaded and viewed. “Designers couldn’t work iteratively,” Fegette said.
BrowserLab loads screen captures within the Flash frame from the seven supported browsers noted above. You can also create one or more “browser sets,” which is handy if you’re testing only against, say, Firefox 3 and IE 7, but not Safari 3 and Firefox 2.
While pages load, the site displays a little spinner animation to show which browsers are still loading and which have completed. That’s a nice bit of feedback. On the backend, Adobe uses a combination of virtualized and dedicated servers to create page previews.
You can view browser captures in one of three ways: 1 up, 2 up, and onion skin. The 1-up mode is obvious: it shows a single capture, selected from a pop-up menu at the upper left. The 2-up view lets you compare captures side by side, selecting the browsers from menus on the left and right. Scrolling horizontally or vertically moves both captures in lockstep. (The screen captures are created with some depth, so you can see a reasonable way down a page.)
Onion skin overlays two browser views with transparency to help designers create pixel-identical layouts (or at least layouts close to that) in every browser; it’s an easier solution than the common approach of bringing screenshots into a Photoshop document and putting them in separate layers. A slider lets you adjust the relative transparency levels of each browser.
Assisting in any mode, but especially useful in onion skinning, is a zoom function from 75 percent to 200 percent. The site also has a set of hot keys for switching among browsers (arrow up and down), zooming (+ and -), switching among views (1 for 1 Up, 2 for 2 Up, and 3 for Onion Skin), and adjusting onion skin transparency (left and right arrows).
Internet Explorer 6 was continually mentioned both by Fegette and myself (and fellow TidBITS editor Jeff Carlson, also in on the interview). IE 6 continues to have relatively high use on general-purpose Web sites, and is often the only browser in which a given site is broken. Fegette said that Dreamweaver designers might fix a problem that the program said would cause IE 6 rendering issues, but then not be able to preview that page in IE 6. (Windows doesn’t like having multiple versions of IE installed, although you can cajole it.)
Fegette said that Adobe has many plans for future iterations of BrowserLab, based on the response to the preview. More browsers will obviously be added, with the top items being IE 8, Safari for Windows, and Google Chrome. Fegette didn’t mention Safari 4 in particular, which was still in beta when we talked.
He also said that the initial response was so strong and positive that he can see a lot of room for expansion. Mobile browsers, previewing how a page would look in a cell phone browser, is also high on Adobe’s list. The iPhone is of keen interest, but even designers who aren’t specifically creating sites for mobile phones want to start preparing for it.
However, Fegette noted that mobile browsers are a challenge because, although the majority of smartphone operating systems – Symbian, Android, and iPhone – are standardizing on WebKit, “they’re all using different builds.”
BrowserLab is currently in preview release, opening for use by additional people at irregular intervals as Adobe scales resources and tweaks the site. When BrowserLab was opened for use on 03-Jun-09, Fegette said the plan was to allow 3,500 people on a first-come, first-served basis. By 9:00 AM on the launch day, the team had accepted 8,300 people, and had to shut down enrollment.
Broader enrollment is planned for July, but until then you can follow the project on Twitter to get updates when Adobe accepts new small contingents. You can use an existing Adobe ID, or you can create a new account.
The preview of BrowserLab is free, but the service will ultimately cost money. How much hasn’t yet been decided, Adobe said. BrowserCam costs $60 per month or $400 per year for unlimited use. BrowserShots is free with best-efforts results, or $30 per month for expedited, unlimited requests with support.
Fegette echoed my feelings about a service that he was instrumental in creating: “I really wish I had this 10 years ago.”