New Webmasters > Optimise > Where To Start With Multiple Browser Testing?

Where To Start With Multiple Browser Testing?

Introduction

Internet Explorer 6, 7 and 8, Mozilla Firefox, Opera, Safari and Google Chrome. All browsers that are currently widely used that your visitors are using to visit your website today.

Cross browser testing is one of those development steps that is a necessary evil. It is an integral part of building a page, not something to be left until you are about to publish it. Javascript, CSS, transparent images and html coding errors are all handled differently by different web browsers. In order to ensure your visitors have the best experience possible, you need to test these aspects on as many different browsers as you feel is necessary.

Which Browsers Need Testing?

The big ones that all sites should be tested on are Firefox and Internet Explorer 7 and 8 (which as of writing is currently in beta). Others that you may include are Safari, Google Chrome, Opera and Internet Explorer 6. It can be tricky deciding which browsers are worth your time testing on. Some people argue that you shouldn’t test on IE6 as it is outdated, however it still has a 25% share of the browser market. The statistics below show the browser market share for the main browsers according to Net Applications for January 2009.

Browser Market Share
Internet Explorer 7 46.06%
Internet Explorer 6 26.20%
Firefox 2 11.60%
Firefox 3 6.82%
Safari 3.1 3.41%
Safari 3.0 1.72%
Opera 9 0.68%

You need to look at your analytics information and decide what you are able to cover in your browser testing efforts. Nobody can tell you what you should try and include, you need to decide based on your own statistics and how much time you are able to take away from your development time.

Where To Start?

Now we have covered what you need to test and why, we need to decide how we are going to start testing.

Most developers try to avoid installing multiple browsers as this can be very tricky. It is also sometimes impossible to install different versions of the same browser on a single computer. Let’s have a look at some of our options.

Screenshots

Perhaps the simplest way of testing a web page in multiple browsers is by taking screenshots in as many different web browsers as possible. This will help you discover the major html and CSS layout bugs that affect your pages.

Browsershots

Fortunately, this type of testing can be done for free and without you needing to install any other browsers. The best place to try is Browsershots, which lets you test a page on 88 different versions of web browsers on four different operating systems. The system is free too, although you should definitely think about leaving a donation to show your appreciation.

It works by adding your page to a queue. When a system with the correct operating system and browser version becomes free, it loads up your page and takes a screenshot. While the system is free, it relies on their being sufficient free computers available to take your screenshot. This means that sometimes you may have to wait up to a few hours for your screenshots.

The major drawback of taking screenshots is that you only get an image of how the page looks when it loads. You can’t test javascript or CSS effects and, since you can only pass a URL, you can test pages that need a form submission to access them. It is, however, a great way to get an overview of your site in many different browsers.

Litmus

There is also a great service that will take screenshots of your webpage called Litmus. It takes screenshots instantly and they have a great variety of browsers to choose from. You can test on Internet Explorer 7 and Firefox 2 for free, but prices start from $49 US for a single user for a month.

The service has a great interface and you won’t have to queue for your screenshots to be taken.

Using Multiple Versions of Internet Explorer

Running multiple versions of Internet Explorer (IE) on a single PC is not an easy task. If you are daunted by anything too technical, please skip this step and continue below. Different versions of IE use different versions of the same files, so it is not possible to have multiple versions of those files on a single Windows installation

The two main ways of installing multiple versions is by using an emulator or partioning your hard drive.

Using An Emulator

An emulator, such as VirtualBox allows you to install a new operating system, within an existing operating system. It is frequently used to get a Windows program running inside a Linux operating system, however it is possible to install Windows XP inside Windows XP, or Vista inside Vista. On the “emulated” operating system (also known as the “guest”) you can install a different version of Internet Explorer than you have on your original operating system.

It might sound complicated, but it is actually quite easy to achieve. Unfortunately, emulated operating systems may run very slowly as the memory on the computer is shared between the two systems. It is very useful when you only use it infrequently.

Partitioning Your Hard Disk

This method requires you to split you hard disk into two (or possibly even more if you want to run more than two versions) and install a new operating system on each. It means you can install, say, Windows XP on each partiton and have IE6 on one, IE7 on another and IE8 (currently beta) on the third.

This method is quite easy and more reliable and accurate than using an emulator but it means you are wasting a lot of hard disk space by having three operating systems installed. It also takes a lot of time to reboot your machine and select a different system just to test a small change you have made in your web page.

Using Multiple Versions Of Firefox

The best method of using multiple versions of Mozilla Firefox is to install the PortableApps version. Software from PortableApps.com can run as standalone software with no other requirements and with no need for installation. It is designed so you can carry your essential software round with you without having to install it on every PC you use. This has the added side effect that you can run multiple versions at the same time.

You can download the current version 3 from the PortableApps Firefox page and you can download older versions from their archives.

Using A “Virtual” Emulator

The site Cross Browser Testing allows you access to a “virtual” emulator. You simply pick your operating system, pick your web browser and you have full access to that configuration. You are not limited to just viewing a static image. You can fully interact with the web page and test out your javascript, CSS, AJAX and image effects.

It is a great service and you can use it in five minute chunks for free, although paid subscribers do get priority. Their monthly fee is $29.95 for the first month and $19.95 after that for 40 hours use. You can also buy credits to pay as you use the service.

Get Direct Feedback

Feedback Army is a very original idea for a service allows you to ask up to ten questions about your website. It will then be posted on Amazon’s Mechanical Turk for up to 50 people to answer.

While this isn’t directly cross browser testing as such, it is quite usual to ask visitors what their browser and operating system is and what visual problems they encountered on your site.

The service costs $10 US for ten questions and $40 US for 50 questions. According to the site’s FAQs “Feedback Army restricts the review jobs to workers with a high approval rating.” They don’t specify exactly what that level is but it is also claimed that each review is vetted before being approved.

In Summary

Hopefully now you should have some idea of how you can test your website in multiple browsers. There are many methods available and we have explored just a few in this article.

If you have experience with any other testing methods please feel free to post them in the comments below.

Be Sociable, Share!

Discussion

7 comments for “Where To Start With Multiple Browser Testing?”

  1. Browsershots is unbelievably slow. For faster screenshots check http:www.browserseal.com

    Posted by BrowserSeal | December 6, 2009, 9:49 pm
  2. Although the obvious advantage of Browsershots is that it is free.

    Posted by corbyboy | December 6, 2009, 10:02 pm
  3. Absolutely, if you are prepared to wait 10 to 20 minutes for a screenshot – I cannot compete with them :)

    Posted by BrowserSeal | December 7, 2009, 9:59 am
  4. Its a hard proccess in fairness, not easy to accomplish but when u examine it real closely it becomes easier. good job. cardsharing support.

    Posted by Cardsharing | December 30, 2009, 7:39 pm
  5. I like to use this Free HTTP testing tool to test and verify the HTTP response when sending different User-Agent headers.

    Posted by Adam | March 13, 2010, 3:46 pm
  6. Posted by Adam | March 13, 2010, 3:47 pm
  7. Trackbacks / Pingbacks

  8. HI-RanK Review: Review Submission and Seo Article Submission | February 12, 2009, 12:26 pm

Post a comment