From pixel to resolution towards website responsiveness

One of the trademarks of a responsively designed website is its appearance. We spend a lot of time with meticulous work to create it and with the prevalence of the myriads of mobile devices we are faced with interesting challenges if we aim mobile responsiveness. Especially if we want to provide the same visual experience across these devices. In this article I'm going to describe some of these challenges of designing responsively and ways the current technological landscape provides us to overcome these.

Introducing the pixel

The pixel is the most elemental unit of all computer graphics. One way to conceptualize a pixel is that it is a tiny square shaped object with a distinct color. Everything we see on the screens of our devices is rendered with a large amount of these distinctly colored pixels, organized in rows and columns on a rectangular surface. The size of a pixel, the colors it can have, and how many are used on a screen are all influencing the quality of an image and even the way it is created.

The size of a pixel

The size of a pixel depends several factors, but first and foremost it depends on the physical size of the components used in a display device to realize a pixel. Generally, larger display devices such as monitors and TVs have larger pixels and smaller display devices such as smart phones have smaller pixels. Our intuition and in fact our experience tells us, that devices using smaller pixels produce higher quality or sharper images than those using larger pixels.

The common way to express this image quality is called the resolution, that is the number of distinct pixels that can be displayed horizontally and the number of distinct pixels that can be displayed vertically. By convention these two numbers are separated by the letter "x", e.g.: 1920x1080 . We use these two numbers in responsive design when we say that we "optimize the design to a certain resolution".

Let us examine our intuition about the relation of pixel size and image quality. Let's suppose, that we have designed a responsive user interface optimized to a resolution of 1920x1080 on our 21.5" LCD monitor, and we want to see, how it looks like on a tablet with a 10.6" screen, and on an LCD TV with a 60" screen, both capable to the same resolution, to ensure ourselves, that the design looks the same on all of these devices. We'll see, that our intuition in this case is indeed correct, and that the visual experience is quite different on these devices. You can read more about how to test the responsiveness of a website accurately.

Same visual experience

Despite these physical restrictions, is there a way to achieve, that our customers get the same visual experience? What do we mean by "same visual experience"?

Well, what "same" means always depends on the context, or to put it in another way, it is in the eye of the beholder, and in this case literally, as we will see later. In this particular context, same means: same pixel size, same resolution, same display size, same colors, and same pixel layout. We can pretty much have the same resolution, colors, and pixel layout, but not the same pixel size, nor the same display size. At first this makes providing the same visual experience quite the challenge, unless we include another important part of the visual experience into our examinations, which is the human vision. As it turns out, it is possible to make some quite useful approximate models about the human vision that can help us to define a frame of reference. We can then "place" the different devices into this frame of reference in a way that they are going to provide the same visual experience, overcoming the limitations of the different pixel and display sizes.

The reference pixel

The following definition of the reference pixel is copy-pasted directly from the w3c standard:

"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch)."

According to this definition the basic reference unit has the size of 1/96 inch, viewed at a distance of 28 inches, resulting in a visual angle of 0.0213 degrees.

How do device manufacturers and web-designers use this reference pixel to achieve the "same" visual experience?

Enter the device pixel ratio

The device pixel ratio is the value telling us how many pixels the device uses to display 1 reference pixel at the optimal viewing distance of the device. This definition is a little bit unusual, since most definitions describe it like this one, taken from the MDN site:

"The ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel."

There are some interesting concepts in both of these definitions, which need some clarifications before they can be compared to each other:

  1. Physical pixel: this is the actual pixel used in the device screen.
  2. CSS pixel: also referred to as "logical pixel", this is the size used in the definition of the reference pixel: 1/96 inch.
  3. Optimal viewing distance: this is the distance at which the image displayed by the device can be perceived at its best quality. For example a smartphone has a shorter viewing distance than a 60 inch LCD TV.
There is one crucial difference between the two definitions above: the optimal viewing distance.

Most of the time, when we are tweaking CSS definitions, we can forget about the distance part of the reference pixel definition and focus on the CSS resolution, but have to keep in mind, that it is an important part of the definition. Let's take a smartphone for example with a device pixel ratio of 2. If we forget about the distance part of the reference pixel, it is easy to draw the false conclusion, that the size of 1 CSS pixel equals to the size of 4 (2 × 2) physical pixels, even though 1 CSS pixel is actually displayed with 4 physical pixels on the screen (Figure 5, the opaque red, green and blue squares). It can very well be, that the 4 pixels of the smartphone are still smaller than 1 CSS pixel, unless we move the smartphone to its optimal viewing distance (see later the coin and the moon). Of course it does not make the differences in the actual pixel sizes disappear, however, it makes them disappear in the size of their projections. Read more about some other obstacles of the mobile responsive testing.

CSS pixel

Figure. The opaque red, green and blue squares.

The resolution

Knowing the device pixel ratio also helps us to calculate the resolutions (and thus the optimal break points) to which we want to optimize the design of our web pages. This resolution is also referred to as the "CSS resolution", and can be calculated in both dimensions (width and height) with the formula on Figure 5.

CSS resolution = physical resolution ÷ device pixel ration

Let's suppose a smartphone has the resolution of 720 × 1200 and its device pixel ratio is 2, then the CSS resolution in both dimensions is calculated like following:

  1. width: 720 ÷ 2 = 360
  2. height: 1200 ÷ 2 = 600
  3. CSS resolution = 360 X 600

Now we know, that the web browser on this smartphone will render our page with a resolution of 360 X 600, and we can prepare our design to accommodate this resolution. It can occur, that the numbers we get as a result are not whole numbers (aka integers). In that case they can be rounded to the nearest whole numbers. Again, it is important to remember that the CSS resolution also comes with (implies) an optimal viewing distance.

In the eye of the beholder

As we mentioned earlier the optimal viewing distance is a crucial element of the device pixel ratio definitions. Let's suppose, that on a beautiful starry, full-moon night we hold up a coin in front of us, next to the moon. If we move the coin closer to our eyes, it will seem larger than the moon, if we start to move it further away from our eyes at some point it will seem to have the same size as the moon, and if we move it even further away it will seem smaller than the moon. Without the knowledge of the fact, that the moon is vastly larger than a coin, and without depth-perception we could not tell which one is larger compared to each other. This interesting property of our vision will be the foundation of our frame of reference.

A super-short biology lesson about the human vision
visual angle

How our vision works, can be demonstrated with the following simplified model on Figure 1:

Upon entering our eyes, the light gets focused onto the backside of it called the retina, resulting in an upside-down projection. There are specialized cells in the area where the light gets focused called photoreceptor cells. These cells convert the light hitting them to nerve impulses and these impulses are then forwarded to the brain. At a first glance it might seem contradictory to our experience that our eyes actually receive an upside-down image of what we see, since we do not perceive the world upside-down, but this is because our brain does a great deal of processing of the visual signals it receives from our eyes. The actual mechanisms involved in the human sight are far more complicated than that, but this approximation gives us sufficient information to build our frame of reference.

First steps towards a frame of reference
frame of reference

If we move the coin to a distance from our eye where it seems to be of the same size as the moon and then we move it again in the front of the moon, causing a self-made moon eclipse, the size of the projection of the coin will be exactly the same as the size of the projection of the moon. To put it in slightly more technical terms, the coin will subtend the same visual angle at our eye as the moon. Figure 2: Coin and moon

This is an interesting observation. The right alignment of objects of the same shape but different sizes creates a projection of one certain size. If we could find a way to express the projection size with either a numeric value or a formula, we would be able to use it as a unit of measurement in our frame of reference. If we look at Figure 2, we can observe that the 2 straight lines representing the light rays are sharing a common endpoint right before they enter the eye, forming an angle called visual angle, highlighted with green on the picture. There are several units of measurement for an angle and solely for practical reasons (to accommodate the w3c standard) we'll use degrees.
There is also another important thing to notice: the size of the visual angle depends on the size of the object we look at and on the distance between our eyes and the object. That is why according to our picture we had to move the coin to the "right" distance to create our mini moon eclipse. Another way could have been to fix the distance of the coin and change its size, but that would be rather impractical. Luckily for us, our model does not impose such limitations on us, so we are free to change the size and distance simultaneously if we want to, as long as we ensure, that we do not change the size of the visual angle.

It's time for a recap: we found 3 values that influence our perception of size: the visual angle, the object size, and its distance from our eyes. We also found out, that the size of the visual angle depends on the object size and its distance from our eyes. In the later sections we'll gradually formalize these observations.

First steps towards formalization

In the previous paragraph, we stated that we are free to change the distance and the size of the object simultaneously, as long as we ensure that the visual angle stays the same. Another way to put it, is that if we increase or decrease the object size and the distance with the same factor, it does not change the size of the visual angle. To illustrate this, we can make some drawings like the ones on Figure 3. We can make an isosceles triangle out of the lines representing the light rays and the line representing the object we are looking at, illustrated with the blue opaque triangles on both drawings.

This is good news, since isosceles triangles have some nice attributes on which we can later rely on when we refine our model. The first thing we notice is, that these triangles are similar, almost the same, they only differ in size. If we can express what similarity means among geometrical objects and translate it to algebraic expressions, we will be able to express the relation between visual angle, object size and viewing distance.

Size perception

The basic geometric definition of triangle similarity states that: 2 triangles are similar if and only if the corresponding angles have the same measure. Let's see, if our models hold up to this definition. Since the visual angles have to be the same to produce projections of the same size, we can be sure, that at least one pair of the corresponding angles is of the same measure. But what about the remaining 2 pairs of corresponding angles? This is the first occasion when isosceles triangles can really shine: their base angles have exactly the same measure. This also means that the remaining 2 pairs of corresponding angles are also of the same measure. So, it seems that in geometric terms, we have 2 similar triangles. Can we somehow translate our previous discovery to algebraic formulas? Not yet, because the only values we have are the object size and the view distance.

A further look at our pictures tells us, that the object size is actually the length of the base of the triangle and the view distance is its altitude to the base. Previously we've established the similarity of the 2 triangles and building on that we can derive another similarity: since the two triangles are similar, their corresponding bases and altitudes to bases are similar as well. Now we can start to translate things to algebraic formulas, if we find a way to express the similarity of bases and altitudes.

Figure 3: Size perception

One possibility to express similarity in algebraic terms is the equality of 2 ratios (or fractions) called a proportion, e.g.: 3 ÷ 4 = 9 ÷ 12. In our case this ratio is going to be: size ÷ distance . Let's walk through the formulas on figure 3:

  1. We assume, that there is a relationship (R?) between the visual angle (angle) and the size ÷ distance quotient and that this quotient is the same as the smaller ÷ closer quotient. Furthermore the angle remains the same.
  2. The size ÷ distance quotient is also the same as the farther ÷ bigger quotient and the angle remains the same.
  3. Since closer ÷ smaller = size ÷ distance and size ÷ distance = farther ÷ bigger it follows by the transitivity of equality that closer ÷ smaller = farther ÷ bigger , or simply put: all 3 quotients are the same (equal) and of course, the angle remains the same.
  4. This one tells that the size ÷ distance quotient remains the same if we apply the same scale factor on both of them and scaling does not change the angle.

Check and finalize

In the previous sections we've assumed that there is a relationship between the visual angle and the size ÷ distance quotient. It's time to check this assumption and see what mathematics has to say about it. There is an entire branch of mathematics which is devoted to the study of relationships involving the side lengths and angles of a triangle and what most of us remember fondly called trigonometry. It defines a similar relationship we've assumed called the tangent function.

There is only one important detail left: the trigonometric functions are defined on right triangles but our triangles are isosceles triangles and we've assumed an angle to base ÷ altitude relationship not an angle to opposite ÷ adjacent relationship. At times like this isosceles triangles can come to our rescue: we can easily divide an isosceles triangle to 2 right triangles by simply cutting it along is altitude (or distance in our case) to 2 pieces. We now have to identical right triangles, both having the half of the object size as the length of the opposite side, the viewing distance as the length of the adjacent side, and half of the visual angle as the angle. Since it does not matter which half-triangle we use to our calculations, we've picked the upper-half, marked with red lines on figure 4.

And now let's see the walk-through on the formulas on Figure 4:

  1. This one picks up where Figure 3 Formula 4 left off
  2. Division by 2 is the algebraic way of cutting the isosceles triangle into 2 pieces of identical right triangles
  3. Simple algebraic cosmetics to simplify the compound fraction on the right hand side
  4. The definition of the tangent function applied to our model
  5. Tangent tells the quotient to an angle, and Arcus tangent tells the angle to a quotient
  6. Multiplication by 2 pieces the 2 right triangles back together to an isosceles triangle giving us the visual angle

The road so far

Based on our observations of the human vision and how we perceive size, we figured that we could use the size of the projection of what we see as a unit of measurement. Once we have this unit, it is possible to express the projection-sizes of other objects relative to it. During the gradual fine tuning of our model it turned out, that in order to be able to that, we need at least 3 values to describe this basic unit, and these are the size of the object we look at, the distance we look at the object and the visual angle resulting of the former 2 values. Now we can examine how the w3c standard, the device manufacturers and web-designers can use this measurement unit to deliver the "same" visual experience.