Adobe Wednesday will unveil Adobe BrowserLab, a fully hosted online service that lets professional Web designers preview how their sites will look in various Web browsers on the Mac and Windows platforms.
The service uses virtualization technology to produce real-time screen shots of how different browsers will render Web sites, without users needing to have all the browsers installed.
Like a browser within a browser, BrowserLabs’ built-in diagnostic tools let users view and compare site pages to ensure design integrity across browsers and platforms.
“It’s increasingly difficult to determine browser compatibility and it’s a bulky and time consuming task to test Web sites in all of these browsers,” said Scott Fegette, product manager for Adobe Creative Suite. “Right now the testing is arduous and painful…It’s almost like designers have to moonlight as IT pros, and that’s not their core competency.”
BrowserLab launches as a free preview of the service, available to the community on a first-come, first-serve basis with a goal of quickly gathering 3,000 to 5,000 test users. The preview is in English only. By early July, the preview will be open to additional users by invitation.
Adobe is looking for feedback from users to determine the future direction of the service. According to Adobe, international versions and the list of supported browsers and operating systems will expand in the future, based on user demand. Eventually, BrowserLab will be a paid service, but there’s no timetable for that yet, Fegette says.
BroswerLab is part of a broader strategy by Adobe to add significant services to its creative pro applications via the Web, while at the same time breaking out of the 12- and 18-month calendar that traditionally has characterized its desktop software upgrade cycles. BrowserLab joins Adobe’s other creative-pro hosted servcices, such as Kuler and InContext Editing.
Assisting designers
BrowserLab is accessible from any Flash 10-enabled browser. The interface lets you load pages into the BrowserLab interface and view them in 1-up, 2-up, or onion skin format in order to observe and compare them side-by-side.
The onion skin view lets designers overlay two pages to catch small differences in pixel position rendering across browsers or platforms. A zoom function helps designers make pixel level comparisons. Users can customize and save testing preferences with the Browser Sets feature, for the benefit of designers who work only with certain browsers or platforms.
According to Fegette, “This (tool) becomes part of the design process by giving the designer critical visual context. It helps democratize the way people design, giving them the confidence that their workflow is correct. Adjustments are done up front while seamlessly working on the design.”
The idea is to help designers identify browser or platform compatibility trouble spots early with simple, fast, real-time feedback to avoid mistakes that could be time consuming to fix at the latter stages of the project.
The preview debut includes the three major browsers: Safari 3, Firefox 3, and Internet Explorer 6 and 7 for the Mac and Windows operating systems. The service tests static, interactive, and data-driven Web sites.
The BrowserLab site opens into a simple gray interface with six menu items at the top. Clicking on Browser Sets brings up three columns that let you choose the order and layout of your Web site view. Column one offers the default set, and lets you choose a customized default set.
The middle column gives you a complete browser list that lets you check off which browsers to test: You can test your site in all of them if you want. The third column lets you choose the order you want to see the previews–a drag-and-drop interface lets you change the view order on the fly.
The Test button gives you an address window where you can enter your site’s URL, as well as a pull-down menu that gives you the 1-up, 2-up, and onion skin viewing options. A flyout menu lets you choose to view your page with other available browsers.
The Plus key on your keyboard acts as the zoom in, while the Minus key is the zoom out. You can also use the Zoom slider to zoom up to 200 percent or down to 75 percent. The Hot Keys button gives a quick reminder of the available keyboard commands. The up and down arrow keys let you navigate through browser choices in any view combination.
Dreamweaver integration
While any Web designer can use BrowserLab, it has special value for Dreamweaver CS4 users because they can access their Web sites within the local program on their desktop. Two Dreamweaver extension (MXP) files, which enable the BrowserLab-Dreamweaver integration, are also posted for download on the Adobe Web site.
They’re available for designers who use Dreamweaver as a standalone app, or who own the CS4 Web Standard, Web Premium, or Master Collection packages.
“Dreamweaver integration will kick (the service) up to the next level because it’s easier to work with interactive content,” Fegette said.
The advantage of testing a dynamic or Flash-based design within Dreamweaver is that you can also view various states of interactivity, such as a mouse rollover effect, dynamic widgets, or AJAX driven content. Integration within Dreamweaver also facilitates the preview of both local and remote content without security issues or concerns.
Adobe BrowserLab is compatible with OS X 10.4 and 10.5, Windows XP (SP2 Home and Professional or SP3), and Windows Vista operating systems.