Why Websites Look Different in Different Browsers
(or why pixel-perfect design is not possible on the web)

Introduction

Print designers are able to lay out a page knowing exactly how the design will look when it’s printed. Many people expect the same from web design but often it’s not possible, practical, or even desirable, to build pages that look exactly the same on every browser.

When a print designer gives their page a 5mm border, selects Pantone color 451 and the font Gill Sans 15 point, they can be sure their audience will see their design exactly as they planned it. Print designers and printers have a great deal of control over their medium. In contrast, the web designer has no absolute control and designing for the web is consequently very different. There are a wide range of external factors that will effect how a web page will look to the user.

These include:

• The user’s computer system
• The preferences the user has set
• How the browser decides to interpret the page
• Whether the browser supports the code used on the page
• Bugs in the web browser

The user’s computer system

The type of hardware and software you use on your computer will effect how a web page is displayed. For a start it depends on the operating system you use. PC’s and Macs use a different dots-per-inch (dpi) measurement which means text usually displays larger on a PC. There are other text display differences – on Macs text is ‘antialiased’ which gives a smooth appearance whereas only the most recent PC operating system does this.

PC and Mac also use different screen brightnesses (gamma), and this means that designs will look lighter on a Mac.

Different operating systems use different sets of ‘widgets’ – things like buttons and text boxes on forms, and scroll bars on pages – so these elements will also look different depending on the platform you use.

Print designers can use any font they wish – web designers can’t. A web page can only use a font if it’s installed on your system, if it isn’t, the page will display your system’s default font. For this reason, designers usually try to restrict themselves to the most common system fonts like Verdana and Arial. Any piece of text that must display in an uncommon or custom font – for example a strapline – must be embedded as a graphic.

Color can also be an issue. Different monitors have different color depths (the number of colors they can display), and simple factors such as the ambient light where a person’s monitor is located can have an enormous affect on the perceived color. Web designers only have around 216 colors they know will be available across all modern computers, so if your corporate colors are not amongst them, they may not always be accurately represented.

As you can see, the setup of your computer can have a big effect on how the size, brightness and colors of a design are displayed. The way certain page elements display depends on your operating system, and how text is rendered also depends on which fonts you have installed, as well as on the type of system you use.

User Preferences

It isn’t only your computer system that effects how a web page displays; the way you have set your preferences will also influence what you see.

The screen resolution you choose will dictate how big everything looks and how much will fit on a page, with the most common screen resolution settings being 800x600 and 1024x768.

A web designer may want to make sure that the text size on a page displays the same on different browsers but it’s not possible to do this in any absolute way. Aside from the differences in text size created by screen resolution, text size can also be changed by the user in several browsers and thereby 'reconstructing' the page not as intended by the designer.

Worse yet, a few browsers give the user the ability to set a custom user style. This allows users to override how a website looks and gives them the ability to change things like background color, text color etc. This is most commonly used by people with visual disorders such as color blindness.

Because it’s difficult and sometimes impossible to tell what preferences a user has set on their computer, the way a page displays is often down to the users settings.

The browser interpreting how things should look

As if there weren’t enough things conspiring to affect the web designer’s masterpiece, the web browser also wants to get in on the act.

Each web browser looks at the code used and tries to interpret how the page should be displayed. Some browsers will display the page exactly as the designer intended and others won’t.

Some browsers will add default styles to elements. To stop this happening the designer must turn these default styles off. For example, If you use an <abbr> tag people using Netscape 6+ will see a dotted line appear under the abbreviation but Internet Explorer (IE) users will not.

Most modern browsers are very good at following the rules a designer has set but there are always some exceptions. This is because a browser has ‘chosen’ not to display a code, even though I’ve told it to show them in my style rules.

Web browsers do not render the design of a page pixel by pixel. What they do is look at the page and render it based on the rules that have been set by the designer and the defaults that have been set by the browser programmers. This is one reason why the same page can look different on different browsers.

The use of unsupported or non-standard code

During the early years of the internet, browser manufactures stuffed their browsers with features that weren’t supported by other web browsers in a race to win market share.

Over time some of these features (such as image support) have become standard parts of HTML, while others (such as the marquee and blink tags) only ever worked on specific browsers.

For example, many web designers use HTML tables to control page layout. To allow people to make a table stretch the height of a page, IE introduced the ‘height’ attribute for a table tag. This is an attribute that was used very often. Unfortunately it wasn’t a standard tag so Netscape and other browsers didn’t support it.

The use of such non-standard code led to pages that only worked on one web browser, and even now you will see pages that state they only work in a certain browser.

Thankfully most modern browsers have decided to use a standard set of code. However, many web designers are still using non-standard tags which can cause display problems across a wide variety of browsers. By sticking to web-standard coding, web designers can help reduce these problems.

Bug’s in the web browser

Finally, one of the biggest reasons for display differences is simply because browsers are buggy! One would expect big software companies to fully check and bug test before release but in reality this doesn’t happen. It’s a fast-paced industry and browsers are often rushed out before they’re fully tested.

Some bugs are spotted and fixed quickly, but many seem to remain version after version. This was a real problem in the old version 4 browsers when new ‘fixes’ were being brought out on almost a weekly basis. This practice is still common today.

What a user thinks is a bug in the page is often more likely to be a bug in the browser. It used to be common practice for web designers to use workarounds (or ‘hacks’ as they are known) to get around these bugs. But as this would often cause problems in newer browsers, this practice has lost favor. If your browser is playing up it’s worth downloading the latest version and seeing if that helps – after all, most browsers are free and easy to install.

These days the most common approach for web designers is to build a site with one or two core browsers in mind, ones that are known to be relatively bug free and use current web standards. If you design using this approach you help ensure that the site displays as well as possible in current and future browsers, while making sure that the content (but perhaps not necessarily the visual design) is displayed in older and more buggy browsers.

Conclusion

As you can see there are many reasons why a web page may not be visually consistent. Some of these relate to the user’s computer and their personal browsing preferences, and others to the way browsers actually work – interpreting the designer’s layout rather than displaying it pixel by pixel. Some of the biggest and most common display discrepancies relate to bugs in a user’s browser.

Display discrepancies are a fact of life for web designers and web design buyers. By using web-standard code many of these issues can be dealt with and the increasing standardization of the web will undoubtedly help in this respect. But unless we all use the same computer systems with the same preferences there are always going to be some differences.

Designing for the web requires a different mindset than designing for print. It’s less about absolute layout control and more about content and information. I design my pages to work for the largest browser market yet with attention to the lesser browser market. Time consuming to find work-arounds, but when presentation matters, it is a requirement.

Browser Market Share:

Internet Explorer (1) 85.0%
FireFox (2) 8.8%
Mozilla (3) 3.3%

The below browsers do not make even 1% of the Browser Market Share, so we must design to the largest market rather than try to please lesser valued browsers with design compromises:

AOL (4) 0.8%
Netscape (5) 0.7%
MSN (6) 0.6%
Opera (7) 0.5%

WEB Brochure vs Print Brochure

The web allows us much greater freedom with our content than print ever has. Once an item has been printed it cannot be changed, while the web allows us the freedom to change both content and design. A website is alive and malleable and readily updateable. Like your business, it should fulfill your customer's needs and interests and can be rapidly updated to suite market direction and vagaries as they change!