Why do browsers display my site differently?

When you design a website you might discover that your website looks a bit different in different web browsers. At QW Consulting we work hard to make sure the design looks consistent across different browsers but sometimes, even after all the work, there are still differences. As long as those differences are slight, that is usually okay. If the differences are major, that is a problem. So, why are there differences? Don't all browsers work the same?

Well, let's start with how browsers work. When you type a URL into your browser or click a link, you make a request to the web browser. The web browser attempts to locate the server where the page you are requesting lives. After finding that page, the server returns a set of code to the browser. This code includes your content (wrapped inside mark up tags such as HTML) and the design code (such as CSS).

The browser then displays this code using a rendering (or layout) engine, such as Trident, used by Internet Explorer, Gecko, used by Mozilla or WebKit, used by Google Chrome. Trident, Gecko and WebKit interpret that code and present their interpretation of the code on your screen.

Interpretation is the key word since Gecko, Trident, WebKit and other rendering engines interpret the code differently. In particular, the design code called CSS (which is code that formats the website) is not displayed the same across different browsers. As a result, the design changes - sometimes slightly and sometimes so radically it doesn't even look like the same website.

Making matters worse, when Trident was upgraded for Internet Explorer version 7, there are major differences between this new version of Trident and the old version of Trident still in use in Internet Explorer 6. While the version of Trident is more similar to Gecko and similar to WebKit, there are still differences that result in the website displaying differently in different browsers.

In other words, you have several masters to serve when designing a website: each rendering engine that powers a browser has its own standards that must be followed. Are you starting to see why web design isn't all that easy?

At QW Consulting, we work to make sure the design works correctly in the more popular browsers. As of April 2010 browser usage statistics, Internet Explorer accounts for about 30% of web traffic, while Firefox accounts for 44% and Chrome 19%. Your exact browser statistics on your website will be different and they will change regularly as new browsers are released. However, while these stats offer a good guide of what to support, you need to design your website to support your users. Through free analytics programs you can tell what browsers your visitors are actually using to look at your website. If your visitors happen to be in an obscure browser or older version of a popular browser, you have to design the site to work for those browsers.

At QW Consulting, we stay on top of the changes in what the rendering engines behind each browser will support. We know what works and what causes the differences in great detail. As a result, we know how make sure that your website design is consistent across the popular browsers (and other browsers too). After all, we want all of your website visitors to be able to read and use your website, despite which browser they choose to use.

If you want to learn more, or if you want to make sure your website looks correct across all browsers, contact QW Consulting today.

This article was originally written in June 2009. Updates were made in November 2010.