Why do websites vary on different computers and browsers?

As website designers we spend our life in front of the computer screen. We are constantly building websites for customers – launching, testing and setting live our creations on the internet. If there’s one question we get asked more than any other, it’s “why does my website look slightly different on different computers or browsers?” Now we wish there was an easy answer to this question but it’s a little complicated so we’re going to try and break it down and explain it in the best way we can.

There are three main elements that change the way a website is displayed. The screen resolution of your computer, the graphics card and monitor display output and the browser. These are the factors that can drastically change the way your site is displayed. Let’s break these three things down a little.

How does screen resolution change the way a website displays?

Screen resolution is the amount of pixels across and down your monitor display. For example if your screen resolution is 1024 x 768 you will be showing 1024 pixels width (across your monitor) and 768 pixels in height (up and down). A pixel is equivalent to the dot on the top of this i).

Now just to make things really interesting the same monitor can have different screen resolutions depending on the ability of your graphics card to render screen sizes. So depending on how many pixels your monitor can render, the more it will be able to fit into the screen.

So a monitor that has a high screen resolution and can display more pixels (1920 x 1080 for example) will show more than one that’s displaying less pixels (1280 x 800).

Now that most websites are built using responsive design, they will arrange the elements of the website for a particular screen size. For example, this is how the Marketeam website is displayed in some of the more common screen resolutions:-

1920x1080

1440x900

1280x800

1024x768

iPhone X

iPhone 7

iPad – portrait view

iPad – landscape view

So as you can see there’s many different variations of the site displayed above and each one look slightly different to the other. 

How does the graphics card and monitor change the way a website is displayed?

This one is a little more tricky to display online as how you’re viewing this webpage, the type of monitor, your computer's graphics card, etc will slightly change the way the page looks and how the colours are displayed.

Colour
Let’s look at something that seems simple at first. The amount of colours your monitor can display. Without getting really technical, most general use monitors will display 16,777,216 color. There are systems that will display more and other monitors will display less than this to help speed up transitions etc, but on average most people running a PC or laptop will be running an 8-bit system that displays on average 16,777,216 colours.

The exception here is the Macbook Pro’s retina display which can display billions of colours with their LED-backlit display with IPS technology, so displaying the same website on a general purpose laptop running windows and a Macbook Pro will give you different colour results.

Monitor Type
Many of us are now using flat screen LED or LCD monitors, but there are still clients out there using CRT monitors. Each monitor type displays colours in different ways so there’s going to be a variation across different monitors (even if they were plugged into the same computer).

Monitor Settings
Many of us, when setting up a computer simply plug in the monitor and start browsing without playing around with colours, brightness, contrast, etc. All of these settings can have a powerful impact on the colours that you will see on screen.

Graphics Card
When it comes to colour, think of the graphics card in your computer like the engine in your car. If you have a V8 turbo you’re going to have a better output than a little four cylinder engine. The same could be said about your graphics card – the better it is, the more colours you’re going to be able to display and the faster they’re going to be rendered giving you crisp, sharp colours.

Monitor Connection Cord
Hopefully most of us are using HDMI cables if we’re connecting to an external monitor these days however I’ve still seen the odd VGA cable floating around in different offices I’ve had meetings in. The main difference is that HDMI is a digital signal and VGA is an analog signal giving you some very different results when it comes to colour display.

How web browsers impact on the way your website looks

For this article we’re going to be dealing with the most popular browsers and their differences, so we will be looking at Google Chrome, Safari, Firefox and Microsoft Edge.

I’m leaving out the most hated browser on the web – Internet Explorer. If you’re still using this browser, do yourself and your computer a huge favour and click one of the links above and download a modern browser. Go ahead, we’ll wait.

Websites are built in many different ways these days using a wide range of different web technologies. Javascript, CSS Jquery, SCSS, etc can all be added to website builds. How a browser deals with these will depend on how it’s been built. Let’s take a look at some of the differences between browsers.

Rendering Engines

• Chrome - Blink
• Safari - Webkit
• Firefox - Gecko
• Microsoft Edge - EdgeHTML

A rendering engine is what compiles all the code of your website and figures out how to display it. A website isn’t just one element – it’s made up of lot of different files, elements, commands, code and coding languages. Each of the browsers listed above uses a different rendering engine and they all differ slightly in the way they compile things within the browser.

If, as a web developer, you’re entirely embedded in the Mac / IOS world, there’s a good chance you will be familiar with Webkit and you may build your sites to be optimised for this. However it’s a good idea to be aware of the different technologies and that they may differ in the way they display websites.

As an example go to https://webkit.org/ on Chrome, Firefox, Safari and Edge (a combination of two or all of them if you can) and you will see this website displays slightly differently across all of these browsers (slight variances in colour, animation smoothness and layout).

Javascript Engine

• Chrome - V8 JavaScript engine
• Safari - LLVM JIT engine
• Firefox - Spidermonkey
• Microsoft Edge - Chakra Javascript engine

The javascript engine is used to interpret all the different bits of code that a website throws at your browser and turn it into a usable experience. Similar to the way a car engine converts all the different elements that make up petrol into power for your car, the javascript engine turns all the different elements into a usable web browsing experience.

You can also think of it like an interpreter – your webpage being a different language, the javascript engine being the middleman or the interpreter so your browser can ‘understand’ the language of the webpage.

Filetype Support
When we talk about filetype support we are talking about the different types of files that a browser can render or display. These could be image files, video files, audio files or other files (like flash, .php, .asp HMTL5 or CSS3 for example). Each browser has slightly different filetype support so a great interactive feature on a website may only work on some browsers, or great on desktop but not on mobile for example. 

How do websites know if someone is using mobile, tablet or computer?

Font Display
Fonts aren’t actually rendered by your browser. They’re rendered by your operating system. With this in mind there will be slight differences in kerning (space between the letters) and letter weight (the thickness of letters) between Mac and Windows operating systems.

There’s more to a website than just pictures and text

So as you can see there’s more to building a website than just putting together pictures and text. There’s a wide range of systems, languages and variances in browsers and engines that all contribute to the slight changes you may see across browsers and operating systems.

So the next time you’re looking at your website on a few different browsers or computers and you’re seeing different layouts, colours or functionality, this may help you to understand why that is.