Cross-Browser Compatibility for Designers

I’ve already written an article on my own frustration with Internet Explorer 6 as a designer / developer and posted a simple browser-sniffer script that redirects IE 6 users to a separate page on your site. This article focuses on testing your designs on other browsers, running on different operating systems. Besides testing your web layouts for discrepencies in your margins, paddings, font variations, other things to look for are transparency issues, especially when working with transparent PNG files. Below are a few solutions.

Boot your Intel Mac right into  Windows XP or Windows Vista

If you’re working on a Mac with Mac OS 10.5, give Boot Camp a try; it comes pre-installed with your operating system. The application does require a valid copy of either Windows XP or the dreadful Windows Vista. Apple’s Boot Camp Support site has an extensive section dedicated to giving you a step-by-step instructions through-out the entire installation and setup process. Once you’re up and running, view your content on the native version of Internet Explorer under that operating system.

Emulate an operating system

Parallels Desktop 4.0 enables you to emulate either Windows XP or Windows Vista on your Mac. Unlike Apple’s Boot Camp, you don’t need to restart your computer every time you want to swap back and forth between OS X and Windows. VMware Fusion is another alternative. Although from recent review comparing the two applications, Parallels Desktop seems to work faster.

Web-Based Application Sites that offer Cross-Browser Testing

There’s quite a few of them. The advantage of this option is that you don’t need to worry yourself over installing anything on your computer. In addition, the following sites enable you to test your web layouts in a large variety of browsers and operating systems. The downfall however, is that these services take screen shots of your web-based layouts, and don’t allow you to interact with your HTML content. There’s usually a long que you wait for before a screen shot is taken. A lot of factors determine the que; in most cases, its based on bandwidth usage of the service.

BrowsrCamp.com: The following site allows you to test sites on a variety of Mac based browsers such as Safari, Netscape, Opera, and even Internet Explorer 5.5.

litmusapp.com: Gives you a screen shot of your website on the following PC based browsers such as IE 8.0, IE 7, IE 6, IE 5.5, IE 5, Firefox 3, Firefox, 2 Firefox 1, as well as a few mac-based browsers.

NetRenderer: The only service that I came across thus far that’s free. The site lets you test your content on IE versions 5.5 through 8.