From responsive design - back to rubber

What should be the design of a modern website? Of course, adaptive. Then why do I urge you to go back to the "rubber"? Firstly, not always and not everywhere, but only where it is needed, and secondly, adaptive design is just a complex of certain ideas, and not all of them are correct.

The reason for the appearance of the "rubber", and in the future, "adaptive" design is the variety of technical tools for viewing web pages.

First, what is the idea of ​​a rubber design. Suppose the ideal case is when all screens have the same geometric size, but a different number of pixels per inch. The same picture will have different geometric dimensions depending on the resolution of the screen. The higher the resolution, the smaller the picture. If you specify the image display in% of the screen width, then the image size on all screens will become the same.

But the geometric dimensions of the screens are not the same. Therefore, we consider the following ideal case when the geometric dimensions of the pixels are the same, and the greater the resolution of the screen, the larger its geometric size. In this case, you can safely set the image to display in its natural pixel size and at the same time it will have the same geometric size on all screens. In reality, there is no such unambiguous relationship between resolution and screen size, although this situation is more likely with respect to desktop monitors.

Now back to the main limitation that the “rubber” imposes. All screens should have the same geometric size. Or the same cornerthe size. What part of the field of view does a personal computer monitor occupy in us? Of course, this depends on the distance to the monitor. In general, the angular dimensions are quite large.

Have you probably noticed how inconvenient it is to view web pages that have a rubber design on widescreen monitors? The screen is almost 2 times wider than usual, the pictures are unusually large. However, it is noted that the user uses a full HD monitor in 1920x1080pix mode, if only this monitor is much larger than usual in size. Therefore, the rule works for desktop computers: the higher the sharpness, the larger the geometric dimensions of the screen. In this case, it is more reasonable to apply the natural sizes of the pictures. In order to prevent empty space on the sides of full HD monitors, we can assign different styles using adaptive design. For example, instead of two columns displaying text, we can specify three or four column displays.

For desktop computers, everything is clear - the angular dimensions of the screen are large and occupy all or almost the entire field of view. And what about the mobile version of the site? Let's first understand what devices it is intended for. For mobile phones. These are small devices that fit in the palm of your hand. The angular dimensions of the screen are small, occupying only a small part of the field of view. The resolution of the screen for smartphones varies widely, and its size is not much different. In the sense that they are, of course, different, but equally small . The case of the same geometric (or angular) screen sizes is an ideal case for applying a rubber design. Therefore, here it must be applied.

You can see how the rubber design is implemented in the mobile version of the Teleport-1M website. It looks equally good on all smartphones.

I want to say that there should be two different versions of the site - for screens with a large angular size and for screens with a small angular size, and which of them should be considered the main one - depends on what goals and objectives the website solves. If your client is most likely looking for your goods and services from his mobile phone, then probably the main version of your site is the mobile version. And at the same time, it is necessary to leave the client the opportunity to choose, let him decide which version he wants to see - mobile, fast, concise, or desktop - detailed, convenient in its own way, with “architectural excesses”.

Of course, the rubber design for the mobile version of the site is not so simple as it seems at first. What happens if a smartphone user flips his screen from vertical to horizontal? The size of the letters will not change, just lines of text will be 2 times longer. But the pictures will become clearly larger. If for mini-smartphones in which the screen is “smaller than the smaller one”, this is not so striking, but for modern smartphones with a 5-inch screen, this is already too noticeable. Therefore, here we had to apply adaptability, set two different styles for portrait and landscape screen orientation.

I am also a supporter of adaptive design, not some kind of retrograde, I just urge you to take into account the difference between two fundamentally different angular screen sizes on mobile phones and stationary devices. Considering that the mobile version of the site is becoming the main one, and the fact that for all mobile phones there are only two options for the rubber layout (portrait and landscape), I say: “From adaptive” design - back to “rubber”!

Also popular now: