October 27th, 2010

HOW TO: Test Browser Rendering For Free

With scores of web browsers in the wild, how can web designers and developers be sure their sites will work on them all?

You spend an enormous amount of energy and effort on designing and developing a beautiful, elegant website … only to have a web browser chew up the code and spit it back out. The key to preventing this awful scenario is testing: checking how your web code will render in different browsers so you can make appropriate corrections.

Sometimes the differences between web browsers are subtle, and sometimes enormous. And unfortunately, it’s not just about testing different web browsers – like Internet Explorer, Firefox, Chrome and Opera – but also testing different versions of the same browser – like Internet Explorer 9 beta, IE8, IE7, IE6 – that may still be in use.

Is it possible to perform this testing quickly, easy and for free? Yes! Read on to find out how.

Live testing.
Christopher Heng of TheSiteWizard.com has put together a wonderful compilation of tactics to run all different browsers in all different versions simultaneously. (1) His article is well worth reading in full; but in the meantime, here’s a quick rundown:

Windows Machines
Different versions of FireFox, Seamonkey and Netscape can coexist on the same machine. Install them into different directories, create a different profile for each and set up a shortcut for each that specifies the version. Installing different versions of Opera is even easier: just install them in different directories. Internet Explorer is more challenging; it only allows one version installation at a time. Heng recommends a couple of different approaches. One, use a virtual machine or emulator. Or two, set up a dual-boot system where your computer runs multiple operating systems simultaneously.

Mac Machines
In Heng’s words, “At this point in time, probably the only way to run the Mac version of Safari, Camino, Firefox, Opera, etc, is to actually own a Mac.” (2)

Linux Machines
While you can install Linux on your computer as a dual-boot system, probably the easiest way is simply to create a Live CD or DVD, and run some distribution of Linux (like Ubuntu) directly from CD. (3)

Online Testing
In some ways, there’s no substitute for live testing, but unfortunately live testing can be a time-consuming, labor-intensive process. As an alternative, numerous online services will compare different web browsers simultaneously for you.

  • Spoon Browser Sandbox
    Spoon is essentially an online virtualization service. With their no-install app, you can actually run different browsers. One nice point about the Spoon Browser Sandbox: you’re essentially doing live testing, not looking at generated screenshots like most other online services.
  • BrowserShots
    BrowserShots is one of the most popular platforms for testing browser rendering. They allow “almost any browser/OS, including some very rare combinations.” (4) The free version offers complete functionality, but paid users get priority access, which can slow the service down for free users.
  • NetRenderer
    One of the best known and most respected sites is NetRenderer. Its focus is a little more targeted: it tests IE compatibility specifically, and it’s designed to be ideal for Mac users. That said, they provide screenshots at a snappy pace – for free – with their service.

Many Other Ways
These tools represent just the tip of the iceberg. Have you tried any other services for testing websites in different browsers? Share them in the comments!