Web browser testing

One web browser is not enough

In the web design beginner tutorial I talked briefly about web browsers and browser incompatibilities.

Browser market share (August 2009)Browser market share (August 2009)

Because your website visitors will be using different web browsers it would be fatal to just limit yourself to say Internet Explorer. According to the browser usage chart more than 40% of your visitors are not using Internet Explorer and might possibly leave your page quickly if it has weird display bugs or errors in their web browsers.

If you don't want to lose visitors due to web browser bugs I strongly recommend that you download the most used browsers and test your pages in all of them every time before going live.

Web browser families

The most important browsers according to the chart are:

  • Internet Explorer
  • Firefox
  • Chrome
  • Safari
  • Opera

Then there's a whole lot of other browsers which make up the remaining small part of total browser usage. Luckily, though, you don't have to test your pages in every browser in existence! Most of them are somehow based on the technology of an earlier web browser and thus behave more or less the same.

The different browser types can be reduced to the following browser families or layout engines:

  • Gecko based (Firefox, Mozilla, Netscape, SeaMonkey, Flock, Camino, K-Meleon, Galeon, Epiphany, ...)
  • Trident based (Internet Explorer, AOL Browser, ...)
  • KHTML / WebKit based (Safari, Chrome, Konqueror, Shiira, OmniWeb, ...)
  • Opera which uses its own technology and isn't based on any other browser

For more details, check out the timeline of web browsers.

How to test your site

Because Internet Explorer (IE) is such a large player and usually the one acting weird it's a good idea to develop websites under Windows so that you can test them in IE (or get an emulator for doing it under Linux or Mac).

It's also a good idea to choose a primary testing browser which supports web standards and has a lot of developer addons, such as Firefox. Then move from there to less standards-compliant ones. If your pages work in a standards-compliant web browser chances are they will also work in all other similar browsers. The following testing routine has proven to be effective and time-efficient:

  1. Use Firefox as your primary testing browser and make sure your site works there.
  2. Double-check it in Safari (and/or Chrome) and Opera.
  3. Lastly test it in IE.

Let's start already?

If you've downloaded and installed some of the above web browsers and got hold of a programming editor you're ready to jump straight to the HTML tutorial. You can also continue with the remaining chapters if you need a quick introduction to PSPad or a guide to WAMP.