Why Websites Look Different on Different Browsers, Machines or Devices

This is a topic that comes up regularly with clients, especially those with a creative or print design background. In the physical world, something is designed on-screen with a set height and width and when it’s printed, every element, font, image, graphic is exactly where it should be. So the question is, why does this not happen with all websites?

The Short Answer

In essence, every browser and every machine may see the same code that is behind a website, but then the browser (Chrome, Firefox, Edge, Safari) and the users device settings, interprets this code differently, leading to slight design shifts in layout.

Why So Much Variation

Years ago, there were significantly fewer devices, fewer browsers and as such a website was expected to virtually always appear the same. However, as technology has developed over the years, so has the sheer number of devices and browsers. For example, there are well over 5,000 different mobile devices around today. Admittedly in each country, there are leading brands and each will release 4-20 different devices per year each with its own screen resolution (number of pixels on the screen), but these numbers add up pretty quickly.

But let’s put the different screen resolutions aside, we still have different machines and browsers to take into consideration and these figures should help to this.

  1. 69.3% of Desktop / Laptops use Chrome
  2. 87.6% of Desktops use Windows
  3. 39.1% of all devices are Desktops or Laptops
  4. 56.6% of all devices are Mobiles
  5. 63.7% of Mobile devices use Chrome
  6. 26.2% of Mobile devices use Safari

For example, the vast majority of designers I know use iMacs (or other Mac products) so there is a tendency to assume that the final creation of their website would be pixel perfect when they viewed it on their iMac screen, but this is rarely the case.

So What Should We Do

I am not saying that it’s not possible to get a pixel perfect match for an iMac, but what I can tell you is that the vast majority of most website visitors or buyers are not using an iMac. They are likely to be using a mobile device, probably their phone if they’re a retail customer; if they are a trade customer they are likely to be sat at a screen that is running Windows with a resolution of 1920 x 1080 or 1366 x 768.

So, when we discuss how the final design will appear once the website is launched we tend to keep our core focus on the likely devices, screen resolutions and browsers that we know account for the majority of traffic online. To do otherwise would be doing you and your business a disservice.

Does that mean you should accept that things will look wrong on certain devices and browsers? No, you should not, because in the vast majority of cases we would expect our creations to look inline or very similar to the original designs we agreed upon earlier in the design process. Yes, the layout may well shift on a mobile device and yes, it’s possible the fonts and spacing may be slightly adrift on none main devices, browsers and screens, but the overall look, feel and style should be either great or certainly very close.

We always strive to deliver a great design irrelevant of the device, browser or screen resolution and if you would like us to help you with yours, then please feel free to contact us.

PS: We have focused on the core reasoning of why a website design may not look pixel-perfect and what the correct focus is in our opinion. Yet we haven’t even touched on the impact of user settings or colour calibration (or for that matter, everyone has a slightly different ratio of colour receptors in their eyes) but if you are after more technical viewpoints on why the web design could be improved, feel free to read these other articles….

https://help.webstarts.com/article/302-reasons-web-pages-don-t-look-the-same-on-every-computer

https://www.webfx.com/internet-marketing/why-does-your-website-look-different-in-different-browsers.html

https://www.pallasweb.com/different.html