Ricky GoacherRicky Goacher

Responsive design | CSS Pixels and Screen Resolution

Cover Image
Ricky GoacherRicky Goacher
Published Date: 11/07/20244 Minutes

Introduction

In this post we will look at responsiveness and hopefully clear up some confusion around screen resolution and "CSS Pixels". There is often a lot of confusion when developers and designers look to improving a site responsiveness and this typically comes from not understanding the data and confusion over screen resolution.

Understanding the data

When looking to make changes, it's important to use Google Analytics to gather data on the users of the website. A common problem that happens is this data is often overlooked, in an office environment the website it commonly only looked at on a desktop and when working on the responsiveness, the mobile view is often limited to just a random "One size fits all" selection.

However, what should happen when working on responsiveness is if we have the data available, then we should use it. If most of the users are looking at the site on a device with a screen resolution of 390 x 844px, then that should be considered when making changes.

This means that the content should look good both at the 390px width and for the 844px height.

What if Google Analytics displays multiple screen resolutions? For example, what if users visit the site on 390x844px and 375x677px? The same idea applies here, design an development decisions should be made so that the content still looks great even though the heights are considerably different.

Screen Resolution (Device Resolution)

Screen resolution is something that is talked about a lot, it's advertised on devices like TV's, Monitors and Phones, the reason for this is because the screen resolution affects the clarity of images and text that is displayed. It is the measurement of how many pixels can fit on your screen horizontally and vertically.

However, screen resolution does not mean screen size and this can cause some confusion, a 40inch and 50inch TV could have the same resolution.

CSS Pixels (CSS Resolution)

This is where things can get confusing, CSS pixels aren't the same as device pixels, the CSS resolution is used for measurement within CSS rules, it's done this way to keep things consistent.

With more people using mobile phones to search the web and the introduction of things like retina displays CSS resolution has been used to standardise how sites display. For example, creating a button that is 100px wide and 50px tall would look really small on a screen with a high pixel density and sites would become difficult to use for people with high resolution devices.

Resolution examples

Lets take a look at some devices to see examples of device resolution and CSS resolution.

IPhone SE 2020:

Iphone SE 2020

In this example we can see that the screen resolution is 750x1334px, when working with CSS breakpoint though, you wouldn't set your breakpoint to be at 750px, that pixel width would likely fit tablet styling instead of mobile styling.

Looking further into this information we can see Viewport width and Viewport height which are 375x677px, this is worked out using the CSS Pixel ratio and the screen resolution.

CSS Pixel ratio = 2

Screen resolution = 750x1334px

CSS resolution = Screen resolutions values \ Pixel ratio = Viewport width & Viewport height

IPhone 12 pro:

Iphone 12 pro

In this example we can see that the screen resolution is 1170x2532px, just like with the previous example we can use these values and the CSS pixel ratio and work out the CSS resolution.

CSS resolution = Screen resolutions values \ Pixel ratio = Viewport width & Viewport height

1170x2532 \ 3 = 390x844px

Google Analytics screen resolution

When looking at the data in Google Analytics it's often assumed that the screen resolution refers to the device resolution, this can cause some confusion.

When looking at the data in Google Analytics we are actually looking at the CSS resolution.

This means that we can use the user tech details to better optimise our sites and have a degree of certainty that when working on the responsiveness we achieve the desired result.

Final thoughts

It's important that sites are tailored towards the people who are using them and these requirement change overtime, so monitoring how users are viewing a site over time is very important.

Understanding the data and taking action using that data can have huge benefits for a site, especially when working with limited screen space.