Accepting Browser Differences (or “Why Doesn’t My Site Look Exactly Like The Original Design?”)

All great websites begin with a strong creative design. When building a site, we use this design as our guide during the coding phase. This is what we’re looking to duplicate as closely as possible in an accessible and usable site.

It is important to us to develop our sites using web standards and the latest best practices. This ensures that we achieve the best coded site possible. This doesn’t guarantee that your site will look exactly the same in all browsers, however. In fact, it’s impossible. Here is why:

1. Each major browser (Internet Explorer, Firefox, Safari and Chrome) are developed differently. While they’re all trying to achieve the same goal, none of them get it right 100%. Their rendering engines, which interpret and display the HTML, CSS and Javascript that make up your site, are unique. This means they will be close, but they may display with slight variation.

2. Users have control over their browser’s settings and plug-ins. This may affect how the website is displayed. With a print piece it stays the same size and has no variances. The opposite is true of websites. They can be altered in a number of ways depending on the viewer’s computer environment.

3. The age of the browser is very important. Your site could be viewed on Internet Explorer 6 (which was released 10 years ago) or Firefox 6 (which was released this week). Obviously the way we create websites, and what we expect our sites to do, has changed in the last decade. Expecting your site to look the same in Internet Explorer 6 as it does in Firefox 6 is unrealistic.

Considering all of this, we are left with two options: design the site for the lowest common denominator, resulting in a very plain and basic site or design it for the newer browsers and gracefully degrade the experience for those using outdated browsers. “Degrading” means designing the site for newer browsers but allowing older browsers to display a similar design that they can handle. The users of both browsers will see the same content, and will navigate the site in the same manner, but there may be subtle design differences between them. This isn’t really an issue since 99% of users are not going to view your site in multiple browsers looking for the differences between them.

When it comes to websites it is important to remember that function should always outweigh the design. People come to your site to view the content and learn more about your products and/or services. The most critical task is to ensure that all users can view the same content regardless of the browser, plug-ins or preferences used. We always build our sites to achieve this.