Cross-Browser Testing

Few things spoil my day more than cross-browser testing. The daunting expectations of designers to have their typographic nuances maintained across all browsers, and of course IE6 and it's propensity to act out more than a six year old in a toy store are just a couple reasons the task ergs me so. Beyond fixing the issues which inevitably arise through thorough testing, an equally formidable challenge must first be overcome. This of course is the challenge of creating an environment to test across all major browsers.

As reported by WC3 , there are currently seven browsers which comprise the majority of the market. However, testing on all seven can quickly become overwhelming.

The Main Issues

- Not all browsers are available for both the Mac and Windows operating system, which creates the need for a secondary testing machine or a OS simulator to be installed.

- Some browsers, such as FireFox, are produced for both Mac and Windows however they render content very different between the two.

- Each browser has several relevant versions being used, each version has it's own quarks. To make things more complicated browsers naturally overwrite themselves making maintaining multiple versions troublesome.

- Comparing multiple browsers against each other can require more space than an average monitor is capable of.

Over the years I've used several systems to help facilitate this process, everything from "all in one browsers" which claim to simulate all major browsers within a single application, to paid services which let you submit a url to have screen shots returned from all desired browsers on all major operating systems. Each have fallen short, either by improperly simulating content rendering, or by making the process of debugging into a costly and time consuming activity.

Some Relief

With Adobe's release of CS5 comes their integrated online services, CS Live. Included in this set of five online services is Adobe BrowserLab, perhaps the single best solution to accomplish proper cross-browser testing with accurate, fast, free, results for all major browsers and their sub versions on both Mac and Windows based operating systems. A few key features of tool include the ability to:
- view multiple windows simultaneously
- draw rules/guide lines, enabling multiple reference points between browsers
- overlay multiple browsers on top of each other using the Onion Skin feature

This service can seamlessly integrated into Dreamweaver CS5 or run independently, all that is required is a free Adobe ID which can be obtained off their website. At the end of the day this services enables developers to do more with less.

Screen Shots