In theory, building a web page is simple: write your HTML, test it in your favourite browser, upload it, sit back and enjoy. HTML and CSS are clearly defined standards, so surely a page tested in one browser should look the same in all other browsers? Hahaha.

Cross Browser Compatibility

Browsers

In reality, things often don't play out as they should. Different browsers and platforms display HTML and CSS in subtly varied ways, while a few choice browsers veer wildly from the standards.

But doesn't everybody use IE?

No, but even if they did, that wouldn't solve all the problems. While Microsoft's Internet Explorer still has the biggest overall market share (Mozilla's Firefox is rapidly reining them in), early versions of IE are actually the worst culprits when it comes to rendering consistency.

But surely everybody uses the latest version of their browser?

Again, unfortunately not. Although technically savvy users will normally be using the very latest release of their browser (generally Firefox, Chrome or Opera), some website users don't get a choice. Often those using a computer at their workplace will be unable to upgrade or install a bowser of their choice (irrespective of their technical savviness).

Well just how bad are these rendering problems?

Well that depends. It might just be a difference of a single pixel. Not a problem if that's an extra pixel's worth of horizontal white space between paragraphs - you'd be unlikely to even notice that without forensic style investigation.

But put an extra pixel's worth of padding on the width of a column, and suddenly there isn't enough room to allow your vertical menu to fit where it should appear. So it gets pushed to the bottom of the page. And instantly the website looks rubbish.

What's to be done?

Ensuring that your pages use well-formed, standards compliant HTML is a good start. But before we can say with confidence that a particular site is cross-browser friendly, we're going to have to test, test, test. Followed by a period of hacking the code. Then more testing. But knowing it looks great for everybody who looks makes it worthwhile.

Don't forget your mobile audience

As the number of people using their mobile phone to browse the web grows, so ensuring that these users of your website are seeing what you would like them to see, becomes commensurately more important. If your site has a disproportionately large percentage of mobile users, talk to us about the possiblilites of providing a dedicated mobile site.

We build and test all web pages so that they look as consistent as possible across a range of browsers. Currently our test stack includes...

  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Internet Explorer 9
  • Firefox 8
  • Google Chrome 15
  • Safari 5
  • Opera 11

What about other versions?

We only test with the current version of browsers (except IE) because invariably users of non-IE browsers tend to use the latest version available. IE's different, as thanks to corporate IT policy, versions tend to hang around for a lot longer...