We are often asked why a client’s website site looks different when viewing it on a different computer, device, operating system, Internet browser and even when positioning the monitor at a different angle. Sometimes it is the colors but some other times it may be the font, layout or alignment.

There are many reasons why and we will address today the most common ones.

=1= Computer’s operating system: Windows (with its multiple versions), Mac, etc.:

The font(s) you selected for your website may not be available on the visitor’s own computer.  In addition Mac and PC are known to render the same font differently. Sometimes a MAC or a PC will overwrite your choice of font and choose a font they feel is close enough. Helvetica for instance is a very common Mac font and looks lovely on a Mac computer. This same font may not look so good on a regular PC even if this specific font is already installed on the computer. This is not something your webmaster controls and it has to do with the manufacturer’s settings of the computer.

Forms can also look different based on the operating systems used. On a computer for instance the default buttons (unless you have specifically styled them) will tend to have square angles. On a Mac the same buttons would default to a style that is more ornate with shades, gradients and/or rounder corners. The buttons will work the same but may look different.

=2= Resolution of the screen of the monitor: Set at 1600×1200, 1280×1024, 1024×768 or other pixel-combinations.

Now that larger computer screens are affordable (you can’t barely find small monitors for sale anymore), a common screen resolution is 1280 pixels by 1024 pixels which is what should be used to judge a site. When a monitor is set to a low resolution, web elements simply appear larger which make the pages longer and more scrolling will be required. The opposite is true if the monitor has a higher resolution. Responsive design for various monitor resolutions is crucial but cannot guarantee an exact replica of the site.

=3= Internet browser used: Chrome, Firefox, Microsoft Edge, etc.

There are many web browsers available and many versions for each browser. There are not all created equal and some like Firefox/Mozilla, Chrome, Internet Explorer, Edge (IE’s replacement as of 2015) and Safari are the most popular browsers. Over the past years most browser fonts have become very standardized. They can still display in a different manner, either lighter or thicker, less or more serif, and so forth. Since every browser is its own company and develops its browser differently, it is nearly impossible to have a website look exactly the same from browser to browser. Based on your Google Analytics, you should know which is the most popular browser used by your website visitors. This should then be the browser used to review the site with. Of course major browsers compatibility should be part of your web design team and typically adjustments for various browser compatibility is done towards the end of a project.

=4= Computer settings: Individual preferences set for this particular device.

When you buy a brand new computer and monitors, they come with their manufacturer’s default. Within the same manufacturer, the default settings may even change based on the model purchased. Those default settings control elements like colors, resolution, light, font size, zoom and more. Preferably you would want your monitor set to 32 bit color, not 16 which is often the default. You can overwrite the manufacturer’s settings so can your website visitors. That means there are endless possibilities and again it is almost impossible to have a quality coded website rendering identically from computer to computer.

=5= Device used: Either a desktop or mobile device.

By now, you are familiar with responsive design which is the manner in which your web pages adjust themselves based on the mobile device used such as a tablet or smartphone. By ensuring that your website is responsive, it gives you better control on the way your site displays on a phone or other mobile device. It will never be exactly the same between an iPhone or Samsung but you can get very close.

Your web design team should make it a standard to check your website (that means all pages!) on commonly used browsers, new operating systems (their newest versions) and popular devices. Just remember that it is almost impossible to have a website look 100% the same on every computer. The goal should be to make sure that it looks good no matter what … even if it displays differently.

We invite you to play our video below for today’s webinar on “Why a website may look different on different browsers, computers or devices”.