Website Design: The Browser Problem (Part 1)

We’ve previously looked at the mobile problem (how we deal with people looking at your website through a range of devices) but a longer running problem is the browser problem: how do we deal with people using different browsers to access your website? Did you know that your website may look different if you use Internet Explorer instead of Firefox?

Let’s start from the beginning.

Web standards
The World Wide Web Consortium (W3C) are the guys and girls who create the web standards. These web standards are the specifications that people design and build the web too. The idea is that by creating a set of specs that everyone works from then the development of the web is consistent. However, in the past the specifications haven’t always been interpreted in the same way and, unfortunately, some of the older web browsers have been developed to interpret the web different from other browsers. This means that different web browsers will render the code of your website differently which could mean that your design looks different in other browsers.

There is also another problem that we encounter with the web standards. The web is still young, little over twenty years since the first proposal by Sir Tim Berners-Lee, and because it’s young we are still working out how it is best used. As a result, the specification is constantly developing and always moving forward. It’s difficult to keep up! So new aspects we introduce to the specifications can’t be rendered correctly by older browsers.

So even though all these wonderful new web browsers are following the specifications to a tee and have incorporated all these great new features, we can’t use them all immediately. This is incredibly frustrating for web designers and developers. The reason we can’t use these features is that not everyone upgrades their browsers and if half your users are using an old browser then we need to consider their user experience and what they are able to do.

Which browsers
The major players in the browser market are Internet Explorer, Chrome, Safari, Firefox and Opera. These browsers use different ‘rendering engines’ to load your website code which can lead to differences in how they are displayed. But the problem is bigger than this: each browser will have different versions and these different versions will read your website code differently. Let’s take the infamous Internet Explorer as an example. There are four main versions of Internet Explorer currently in mainstream use: 6, 7, 8 and 9. Each of these have different rules for your code. Now multiply these problems across each of the different browsers! That could potentially be a lot of bugs.

In part 2 we’ll take a look at ways and means to get around these browser bugs.