Some nasty surprises await those who don't test a website design in multiple browsers.

It's not enough to just make sure your site 'looks Ok' in Firefox and Internet Explorer; the recent explosion of tablet devices means that design flaws will be obvious to many more potential users.

As we can see from this chart of browser statistics [1], the previously dominant pair of IE and Firefox have some real competition. Many of these newer (or more recently popular) browsers display be pages using different rules, which might make a mess or your pages.

Layout engines

A layout engine is the code that renders your web pages, style sheets and scripts as viewable content in a browser. Some of the common layout engines are:

There are other engines and other browsers, but this is a start.

You should at least test your web site across the different layout engines. If possible, try some different versions, operating systems and hardware as well. Just because it's the same engine, doesn't mean it will produce the same result.

Examples from the real world

The previous version of this website used static HTML pages with very simple site structure and styling, and so had few cross-browser issues. Moving to Joomla and adding some more interesting features, I expected to encounter some cross-browser issues, but I still made some mistakes.

Things I expected:

Gradient backgrounds were always going to be a bit different (IE doesn't support the same gradient model as some others, and in some versions none at all).

The fixed page body width needed adjusting to fit 'nicely' on a tablet screen. You might think that a 1280x80 screen would be happy with a 1000px page, apparently not - 960px seems to work.

Nasty surprises:

The webkit layout engine seems to use slightly different margins or padding rules. Having gotten the layout working just fine in Firefox and IE, an Apple user looked at the site and said that the content blocks were completely different. Rats (but fixable). I really should have checked in Safari first.

For tablet devices (android and iPad) the treatment of drop-down menus is different. I wanted some of the top-level menu items to just be place-holders for the detail items (ie not have a target themselves). This works for desktop browsers (which understand 'hover'), but not on tablets. To get a result that works for both android and iPad tablets I had to use a slightly ugly javascript hack.

Later: Just when I thought I was done, someone with an older version of IE told me that they couldn't scroll vertically. Rats.

Testing regimens

Minimum testing

At a minimum, test with Firefox, IE and Safari.

Try really, really hard to get a tablet device of some sort and try a few browsers on that.

Obsessive testing

Having found some issues, I got a bit more disciplined and have done at least partial testing of my current design on:

Completely Over-the-Top testing

You can get quite carried away. There are web-based tools to assist with cross-browser testing. In one case (Browsershots [2]) 53 different browser/version/operating system combinations are available.

What you might not get with these tools is any interaction testing, such as the behaviour of menus, which we (now) know can vary.

References

[1] Wikipedia article on the History of browser usage

[2] Browsershots