From responsive design - back to “rubber”
What should be the design of a modern website? Of course, adaptive. Then why do I call 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 emergence of "rubber", and in the future and "adaptive" design is a variety of technical means for browsing the web.
First, what is the idea of rubber design. Suppose the ideal case 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 greater the resolution, the smaller the picture will be. If you specify the display of pictures in% of the width of the screen, then the size of the picture on all screens will be 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 larger the resolution of the screen, the larger its geometric size. In this case, you can safely set the display image 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 in relation to desktop monitors.
')
Now back to the main limitation, which imposes a "rubber". All screens must have the same geometric size. Or the same angular size. What part of the field of view does our personal computer monitor occupy? Of course, it depends on the distance to the monitor. In general, the angular dimensions are quite large.
You have 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 normal in size. Therefore, for desktop computers, the rule is: the higher the clarity, the larger the geometric dimensions of the screen. In this case, it is wiser to use the natural size of the images. To ensure that on widescreen full HD monitors there is no empty space on the sides, we can assign different styles using responsive design. For example, instead of a two column display of text, we can specify a three or four column display.
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 screen resolution of smartphones varies widely, and its dimensions are not much different. In the sense that they are, of course, different, but equally small . The case of the same geometric (or angular) screen size is an ideal case for applying a rubber design. Therefore, here it is necessary to apply it.
You can see how the rubber design is implemented in the mobile version of the Teleport-1M website. 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 tasks the website solves. If your client most likely searches 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 a choice, 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 as simple as it seems at first. What happens if a smartphone user turns his screen from vertical to horizontal? The size of the letters will not change, just the lines of text will be 2 times longer. But the pictures will be clearly larger. If for mini-smartphones, in which the screen is “smaller than the smaller”, this is not so striking, but for modern smartphones with a screen of 5 inches diagonally, this is already too noticeable. Therefore, here we had to apply adaptability, set two different styles for portrait and landscape orientation of the screen.
I am also a supporter of adaptive design, and not a retrograde any, I just urge to take into account the difference between the two fundamentally different angular screen sizes for mobile phones and stationary devices. Considering that the mobile version of the site becomes mainstream, and the fact that for all mobile phones there are only two options for a rubber layout (portrait and landscape), I say: “From adaptive” design - back to “rubber”!
The reason for the emergence of "rubber", and in the future and "adaptive" design is a variety of technical means for browsing the web.
First, what is the idea of rubber design. Suppose the ideal case 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 greater the resolution, the smaller the picture will be. If you specify the display of pictures in% of the width of the screen, then the size of the picture on all screens will be 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 larger the resolution of the screen, the larger its geometric size. In this case, you can safely set the display image 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 in relation to desktop monitors.
')
Now back to the main limitation, which imposes a "rubber". All screens must have the same geometric size. Or the same angular size. What part of the field of view does our personal computer monitor occupy? Of course, it depends on the distance to the monitor. In general, the angular dimensions are quite large.
You have 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 normal in size. Therefore, for desktop computers, the rule is: the higher the clarity, the larger the geometric dimensions of the screen. In this case, it is wiser to use the natural size of the images. To ensure that on widescreen full HD monitors there is no empty space on the sides, we can assign different styles using responsive design. For example, instead of a two column display of text, we can specify a three or four column display.
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 screen resolution of smartphones varies widely, and its dimensions are not much different. In the sense that they are, of course, different, but equally small . The case of the same geometric (or angular) screen size is an ideal case for applying a rubber design. Therefore, here it is necessary to apply it.
You can see how the rubber design is implemented in the mobile version of the Teleport-1M website. 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 tasks the website solves. If your client most likely searches 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 a choice, 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 as simple as it seems at first. What happens if a smartphone user turns his screen from vertical to horizontal? The size of the letters will not change, just the lines of text will be 2 times longer. But the pictures will be clearly larger. If for mini-smartphones, in which the screen is “smaller than the smaller”, this is not so striking, but for modern smartphones with a screen of 5 inches diagonally, this is already too noticeable. Therefore, here we had to apply adaptability, set two different styles for portrait and landscape orientation of the screen.
I am also a supporter of adaptive design, and not a retrograde any, I just urge to take into account the difference between the two fundamentally different angular screen sizes for mobile phones and stationary devices. Considering that the mobile version of the site becomes mainstream, and the fact that for all mobile phones there are only two options for a rubber layout (portrait and landscape), I say: “From adaptive” design - back to “rubber”!
Source: https://habr.com/ru/post/264971/
All Articles