Do You See What I See?

| Print |

Thursday, 27 October 2011 13:38

In my previous article What Is Wrong With Your Web Browser I discussed several reasons why your website might not look exactly the same to everyone who views it.

When you surf the Internet you are using a program called a web browser. The most commonly used web browsers include Firefox by Mozilla, Internet Explorer by Microsoft and Safari by Apple. Whenever you call up a web page, your browser is sending a request out to the Internet to find the page associated with the web address you have typed in your browser (or the link you clicked).

Once that page is delivered, your browser interprets (or renders) all the content of that page which consists of codes, special symbols and logic needed to display that page. The problem is that not all browsers interpret the codes, symbols and sometimes, not even the logic, in exactly the same way. Even different versions of the same browser can vary greatly.

If you own a website, maybe these details aren’t important to you. Your major concern is probably that the beautiful design you agreed upon is exactly everyone sees when they visit your site. And this is perfectly understandable, but as a developer myself, I thought it might be useful to share an overview of the methods and tools that are available and should be used to help ensure that your finished website looks as pretty as its original design.

Different browsers/Different browser versions

This is the bane of all web developers as it presents the greatest challenge.

Since the beginning of modern computing there have been panels and commissions and consortiums created all with the purpose of developing standards and best practices for professional programmers and this is true today for developers of web applications.

Currently the World Wide Web Consortium W3C sets the standards for both how web pages should be coded by the developer and how they should be rendered by the browser. By coding to these standards, your web developer will have the best chance of success at achieving cross-browser compatibility. But it is by no means a guarantee because, for reasons beyond the scope of this article, not all browser manufacturers adhere strictly to these standards.

As a result, after each page is meticulously coded, each one must be tested in a practical sense in order to see what it will look like in each popular version of every popular browser. Since it is not practical to have multiple versions of several browsers loaded on one machine, it is fortunate that there are a multitude of tools available online (see 10 Cross-Browser Compatibility Tools For Designers ) that help developers test their pages in different versions of the most commonly used browsers.

Different computer types

As mentioned in my previous article, Internet Explorer as developed for the PC is essentially an entirely different browser than the one for the Mac. Granted it is probably not a typical situation that someone with a Mac is using IE, however if you or your developer have any reason to believe that there will be any cross-platform browser compatibility issues then there are testing tools available for this as well (see Top 10 Tools To Test Cross Platform Browser Compatibility ).

Different font types/Different font sizes

In the early days of web development the use of fonts was limited entirely by the fonts that were loaded on any particular client machine. In more recent years the W3C has adopted standards allowing developers to load fonts dynamically whether they exist on a local machine or not. Still, different browsers and different platforms can render fonts slightly differently so again it is very important to conduct thorough cross-browser & cross-platform compatibility tests.

Also, these days many webpages allow for dynamic adjustments to the size of fonts on the page. This function should always be tested in each available browser.

Different screen sizes

Again, there are standards that developers should adhere to help ensure that a design looks just as good on an older 4:3 ratio monitor as it does on a new wide screen, however, with virtually endless possible combinations of screen layouts there is only one way to know this for sure. Since it is not practical for most of us to have every possible type of monitor available there are online tools such as Screen-Resolution.com that let you view your website in multiple browsers using multiple screen sizes and resolutions.

Hopefully this article has helped you to understand some of the hidden issues your web developer has to deal with beyond just turning a beautiful design into a beautiful website. And, if you happen to be your own developer, there are some great tools here to help make you website better.

~Steve Barnes