Do you always need a “rubber” layout?
This article can be used by young web designers to expand their views.
Also, this information will be useful to potential customers of sites that are actively involved in the design of the project, collecting the basic package of requirements.
On writing this text I was prompted by the constant disputes that have arisen during my practice as a web designer. Actually, the first time I had to deal with "rubber sites" due to the whim of the customer. When the design of the project was completely ready, and the site itself was laid out and connected, the customer asked: “Why doesn't it stretch?”. It was a long time ago, but I hear this question about once every 4-5 months. About the "rubber" layout sites talked and wrote a lot. They said that it is obligatory, and vice versa, that the use of her mistake. Clearly, there were causes of rubber. And to assert that the use of this technology is 99% wrong, definitely not possible. Any technology needs to be applied if it is needed. I want to outline the approximate boundary of the use of rubber layout.
')
BEGINNING.
Any design is a solution to problems: aesthetics, which should work as needed; convenience that should guide you to a specific method of use or expand standard features, etc. Layout is one of the stages of a web project, which is designed directly by the designer. Choosing the type of layout, the designer solves specific problems, let's try to understand - which ones.
To understand the problems solved by rubber, you should start with the history of its occurrence.
The first sites with a layout (rubber) adapting to the screen size appeared in the period of disappearance of monitors with a resolution of 640-480, active use of a resolution of 800-600 and the first representatives of 1024-768. It should be recognized that the area of 640-480 and 800-600 is small for the full perception of information. And also navigation, and the banner should be hung up (in those days they were more efficient). Having stretched our site 1.6 times horizontally, we at least somehow approximate the format of the site to the A4 format well-perceived by all. We will do a huge favor to the owners of the new expensive “big” monitors. Moreover, we stretch not only the elements on the page, but also text blocks that decrease in height, and this sometimes removes scrolls! (and these are 30 pixels!). The benefits are obvious!
It turns out, the main task of "rubber" - to give the necessary space for the content, without compromising the dignity of the owners of old monitors.
Since we are considering the "rubber" layout in our time, you should pay attention to the modern park of monitors. and this (if you forget about netbooks) from 1024 x 768 to 2048 x 1152. Mathematically, we get a difference of 2 times, which is not much more than 10 years ago.
The size ratio between large and small monitors is almost preserved, are the tasks set before the designers?
HOW IT WORKS.
For a start, I would like to make out the main scaling methods and their features. We should also note that sites are scaled, usually horizontally.
1. Text blocks are well stretchable horizontally. They carry, at times, up to 90% of all information on the site (which means there are many of them! There is something to pull!). But infinitely stretch them simply can not. Our attention has a certain reserve of “perseverance”. If the text line becomes too long, we just have a hard time reading it - we get tired. Not without reason, the newspapers use restrictions on the width of a text block of about 50-55 characters, and this, even with increased letter spacing, is less than half the width of A4 paper. In general, the most optimal long line for fast and convenient reading is 45 characters. There is a minimum too, it is about 20-25 characters. That is, a text block can be increased from a minimum to a readable maximum by no more than 2 times. It is not recommended to split one text into several columns, as in a newspaper. Because when we look through the text, scrolling from top to bottom, it will be extremely inconvenient to go back to the top of the second column. Based on this, if the text is the main block of the page, then we cannot stretch it even to 900 px! And better is less.
2. The distance between the various elements of the site. With an adequate level of skill, these areas of the site can be scaled, seemingly lossless. But there is one "But." The fact is that “empty space” is not just “appendage” on the page. The intervals between the blocks perform very specific tasks: they divide, group together similar blocks, create an emphasis on the most important. All these tasks are solved by the difference in the size of the gaps. for example, several blocks separated by small intervals are visually perceived as related, or of equal value. A block having a lot of free space around it is definitely valuable, perhaps the main one on the page.
If we proceed only from the difference in the size of the blocks, it doesn’t matter how much we stretch them, because they will stretch proportionally. It seems that they all have to cope with their tasks ... But then another “But” appears. The fact is that the intervals still have their own “character”. Perhaps, to someone who is far from the sphere of design, this will seem insignificant, but I will remind you about the work of a dancer, musician, singer. The non-professional dancer can perform the same movements as the master, the novice musician will play by the same notes, the singer will sing the same song. We will recognize the piece, but we will most likely feel the difference. If we make gaps between related blocks of 5 mm, they will be perceived as related, but if we stretch them to 10-15 mm, they will begin to permanently divide the "relatives". And the situation will not be saved even by the fact that this is proportionally the smallest gap on the page.
The nature of the “empty space” can also affect the overall character of the page. For example, rubber sites often destroy the desired sense of alignment, stability and reliability. I will not go into this question much, simply because it is quite a specific topic, which is well covered in the literature on design, composition and visual arts.
3. Various graphs and tables with text content. If there are a lot of columns in the tables, and there are a lot of points in the graphs, then the extra space allows you to see overly long signatures for the cells. Extended graphics more conveniently show small and frequent changes in direction. In these specific cases, rubber may be necessary.
4. Raster images when stretched give distortion and moire when stretching in one direction. But you can change the size of the entire image, keeping the proportions. Or you can change the size of the "window" of the image, while maintaining its true size. Increasing the size of pictures is necessary in cases where these pictures need to be shown in the largest possible size, for example, in photo services, in the portfolio of designers and photographers ... However, one way or another, this is associated with additional technical complications.
Video. I can be mistaken, but I have not yet come across options for simply scaling the streaming movie window (in any case, this is a resource-intensive technology). As a rule, this is a real-size window + the ability to watch a movie on the full screen. But, our networks are still far from ideal, and we cannot talk about a total transition to a video format.
Widgets, navigation. As a rule, these are elements on which a lot of attention of the user is directed. Their internal components, of course, can be scaled. But changing the proportions adjusted by the designer often leads to loss of readability of these components. These components generally should be considered separately in each case, the main thing is not to forget about the danger of visually “breaking up” the component. Well, as always, technological tricks are required.
In addition to purely artistic aspects and laws of information perception, there is also the problem of “fatigue” of our eyes. In part, this is addressed above in the sanitary norms for text blocks. I will not go into the numbers. A simple example: very few people will hang in the workplace a sheet with important information on the current project behind their back or side of themselves, often sketches, diagrams and notes are generally glued around the monitor. The farther we glance, the faster we get tired. On a screen scale, this seems less significant. But in order to see 2 different pictures at the left and right edges of the 22 inch monitor, we already have to turn our heads a little, the monitors have already become too big for movement with just eyes. After 4-5 hours of network surfing, the user will defocus attention enough to make it difficult for him to find the necessary information on your stretched site.
After reviewing the basic methods of scaling and limiting the components associated with them, it can be concluded that the components themselves often simply do not have a “rubberiness” reserve. Of course, some limitations can be neglected, but this is fraught with the inconvenience to users, the loss of the design image or unreasonable technical complexity of the page.
WHAT WE HAVE.
Designers after 10 years still solve the problem of lack of working space, and solve it using a “rubber layout” that stretches all available materials on the monitor screen. But our monitors have long crossed the line of normal perception! You can disagree with this by looking at the next sequel of the STAR WARS saga or playing the eponymous shooter. The picture of the film and the game are similar to what we see with our eyes in life. There is a lot of unnecessary information in it, even the maximum effective angle of our view is only 5 °. Due to the reduced angle, the brain is unloaded from unnecessary information. We are not interested in all the details, but only in the picture in general. And the unperceivable space creates only an additional “entourage” - the green mass of the forest, the crowd ... Add to this the fact that we perceive the center of the screen best of all, and it is extremely inconvenient for us to study something at the edges ... And the site page is details, texts, announcements and navigation. Yes, you can make a person look for it all over the big screen. And as a rule, he finds. A person can read the text even in the lower right corner of the screen with the 9th size. Only this happens at the cost of additional efforts of sight and attention, albeit small at first glance. Add to this the extra hours of work of the maker-up and the designer to develop this type of layout.
It is worth noting that many designers have come to the conclusion that it is impossible to pull content indefinitely, just like compressing. Understanding this gave rise to "semi-rubber". If a person is comfortable enough to perceive information on 900 px width (a little more than the width of A4 sheet), then for the sake of what problem should it be stretched to 1100 px? And this is despite the fact that even the minimum resolution of modern monitors fits into a width of 1024 px, which means that it will not be necessary to compress.
Yes, it is impossible not to agree that with the increase in the size of the monitors, we are faced with the problem of extra space, which we now have to hide (these are the same white fields on the sides of the screen). But for this you can use the background, additional graphics that do not carry a semantic load and do not require additional attention. It is not necessary to touch the information blocks.
Having received a “cheerfulness charge” of the end of the 20th century, when problems with the square really existed, the designers continue to solve non-existent problems, and already “educated” customers require them to solve these problems.
Often you can hear about the "laws of the web", sort of like they have nothing to do with typographical rules. However, the main thing in the printing house is the delivery of printed text. But until the video and sound replaced the text (which is much more than 50% of the content of the sites), and we still see it with biological eyes, it would be foolish to abandon the research and experience accumulated over several hundred years of typography. Moreover, the text on the monitors due to the low resolution is much worse than the printed one (72 dpi against 200 dpi and more), and the monitors themselves do not contribute to the rest of the eyes.
For those who doubt the reality of perception problems, I suggest to look at 4 options for placing texts here: nano.a5.ru
JUSTIFICATION.
However, Do not completely deny the use of rubber layout. It is perfect in cases where a large presentation area gives an advantage. For example, Dynamically constructed tables with textual content and a large number of columns, the additional length of cells which allows you to display a long text. Or, with the specific requirements of the portfolio of designers, photographers, artists, when they need to submit many of their works at once, show the general level, without focusing on any one individually. But these are special cases that need to be considered separately.
There is another case of using a scalable layout that does not require any arguments for the right to exist - rubber, as an artistic technique. But in this case, one famous council acquires a new form:
Make only rubber sites = Make only sites of red (green, blue, orange, etc.) colors!
PS
I think many had to stumble on phrases like: “A good designer should be able to make the right rubber!”. In my opinion, the ability to choose the right one is more important: rubber or not?
Also, this information will be useful to potential customers of sites that are actively involved in the design of the project, collecting the basic package of requirements.
On writing this text I was prompted by the constant disputes that have arisen during my practice as a web designer. Actually, the first time I had to deal with "rubber sites" due to the whim of the customer. When the design of the project was completely ready, and the site itself was laid out and connected, the customer asked: “Why doesn't it stretch?”. It was a long time ago, but I hear this question about once every 4-5 months. About the "rubber" layout sites talked and wrote a lot. They said that it is obligatory, and vice versa, that the use of her mistake. Clearly, there were causes of rubber. And to assert that the use of this technology is 99% wrong, definitely not possible. Any technology needs to be applied if it is needed. I want to outline the approximate boundary of the use of rubber layout.
')
BEGINNING.
Any design is a solution to problems: aesthetics, which should work as needed; convenience that should guide you to a specific method of use or expand standard features, etc. Layout is one of the stages of a web project, which is designed directly by the designer. Choosing the type of layout, the designer solves specific problems, let's try to understand - which ones.
To understand the problems solved by rubber, you should start with the history of its occurrence.
The first sites with a layout (rubber) adapting to the screen size appeared in the period of disappearance of monitors with a resolution of 640-480, active use of a resolution of 800-600 and the first representatives of 1024-768. It should be recognized that the area of 640-480 and 800-600 is small for the full perception of information. And also navigation, and the banner should be hung up (in those days they were more efficient). Having stretched our site 1.6 times horizontally, we at least somehow approximate the format of the site to the A4 format well-perceived by all. We will do a huge favor to the owners of the new expensive “big” monitors. Moreover, we stretch not only the elements on the page, but also text blocks that decrease in height, and this sometimes removes scrolls! (and these are 30 pixels!). The benefits are obvious!
It turns out, the main task of "rubber" - to give the necessary space for the content, without compromising the dignity of the owners of old monitors.
Since we are considering the "rubber" layout in our time, you should pay attention to the modern park of monitors. and this (if you forget about netbooks) from 1024 x 768 to 2048 x 1152. Mathematically, we get a difference of 2 times, which is not much more than 10 years ago.
The size ratio between large and small monitors is almost preserved, are the tasks set before the designers?
HOW IT WORKS.
For a start, I would like to make out the main scaling methods and their features. We should also note that sites are scaled, usually horizontally.
1. Text blocks are well stretchable horizontally. They carry, at times, up to 90% of all information on the site (which means there are many of them! There is something to pull!). But infinitely stretch them simply can not. Our attention has a certain reserve of “perseverance”. If the text line becomes too long, we just have a hard time reading it - we get tired. Not without reason, the newspapers use restrictions on the width of a text block of about 50-55 characters, and this, even with increased letter spacing, is less than half the width of A4 paper. In general, the most optimal long line for fast and convenient reading is 45 characters. There is a minimum too, it is about 20-25 characters. That is, a text block can be increased from a minimum to a readable maximum by no more than 2 times. It is not recommended to split one text into several columns, as in a newspaper. Because when we look through the text, scrolling from top to bottom, it will be extremely inconvenient to go back to the top of the second column. Based on this, if the text is the main block of the page, then we cannot stretch it even to 900 px! And better is less.
2. The distance between the various elements of the site. With an adequate level of skill, these areas of the site can be scaled, seemingly lossless. But there is one "But." The fact is that “empty space” is not just “appendage” on the page. The intervals between the blocks perform very specific tasks: they divide, group together similar blocks, create an emphasis on the most important. All these tasks are solved by the difference in the size of the gaps. for example, several blocks separated by small intervals are visually perceived as related, or of equal value. A block having a lot of free space around it is definitely valuable, perhaps the main one on the page.
If we proceed only from the difference in the size of the blocks, it doesn’t matter how much we stretch them, because they will stretch proportionally. It seems that they all have to cope with their tasks ... But then another “But” appears. The fact is that the intervals still have their own “character”. Perhaps, to someone who is far from the sphere of design, this will seem insignificant, but I will remind you about the work of a dancer, musician, singer. The non-professional dancer can perform the same movements as the master, the novice musician will play by the same notes, the singer will sing the same song. We will recognize the piece, but we will most likely feel the difference. If we make gaps between related blocks of 5 mm, they will be perceived as related, but if we stretch them to 10-15 mm, they will begin to permanently divide the "relatives". And the situation will not be saved even by the fact that this is proportionally the smallest gap on the page.
The nature of the “empty space” can also affect the overall character of the page. For example, rubber sites often destroy the desired sense of alignment, stability and reliability. I will not go into this question much, simply because it is quite a specific topic, which is well covered in the literature on design, composition and visual arts.
3. Various graphs and tables with text content. If there are a lot of columns in the tables, and there are a lot of points in the graphs, then the extra space allows you to see overly long signatures for the cells. Extended graphics more conveniently show small and frequent changes in direction. In these specific cases, rubber may be necessary.
4. Raster images when stretched give distortion and moire when stretching in one direction. But you can change the size of the entire image, keeping the proportions. Or you can change the size of the "window" of the image, while maintaining its true size. Increasing the size of pictures is necessary in cases where these pictures need to be shown in the largest possible size, for example, in photo services, in the portfolio of designers and photographers ... However, one way or another, this is associated with additional technical complications.
Video. I can be mistaken, but I have not yet come across options for simply scaling the streaming movie window (in any case, this is a resource-intensive technology). As a rule, this is a real-size window + the ability to watch a movie on the full screen. But, our networks are still far from ideal, and we cannot talk about a total transition to a video format.
Widgets, navigation. As a rule, these are elements on which a lot of attention of the user is directed. Their internal components, of course, can be scaled. But changing the proportions adjusted by the designer often leads to loss of readability of these components. These components generally should be considered separately in each case, the main thing is not to forget about the danger of visually “breaking up” the component. Well, as always, technological tricks are required.
In addition to purely artistic aspects and laws of information perception, there is also the problem of “fatigue” of our eyes. In part, this is addressed above in the sanitary norms for text blocks. I will not go into the numbers. A simple example: very few people will hang in the workplace a sheet with important information on the current project behind their back or side of themselves, often sketches, diagrams and notes are generally glued around the monitor. The farther we glance, the faster we get tired. On a screen scale, this seems less significant. But in order to see 2 different pictures at the left and right edges of the 22 inch monitor, we already have to turn our heads a little, the monitors have already become too big for movement with just eyes. After 4-5 hours of network surfing, the user will defocus attention enough to make it difficult for him to find the necessary information on your stretched site.
After reviewing the basic methods of scaling and limiting the components associated with them, it can be concluded that the components themselves often simply do not have a “rubberiness” reserve. Of course, some limitations can be neglected, but this is fraught with the inconvenience to users, the loss of the design image or unreasonable technical complexity of the page.
WHAT WE HAVE.
Designers after 10 years still solve the problem of lack of working space, and solve it using a “rubber layout” that stretches all available materials on the monitor screen. But our monitors have long crossed the line of normal perception! You can disagree with this by looking at the next sequel of the STAR WARS saga or playing the eponymous shooter. The picture of the film and the game are similar to what we see with our eyes in life. There is a lot of unnecessary information in it, even the maximum effective angle of our view is only 5 °. Due to the reduced angle, the brain is unloaded from unnecessary information. We are not interested in all the details, but only in the picture in general. And the unperceivable space creates only an additional “entourage” - the green mass of the forest, the crowd ... Add to this the fact that we perceive the center of the screen best of all, and it is extremely inconvenient for us to study something at the edges ... And the site page is details, texts, announcements and navigation. Yes, you can make a person look for it all over the big screen. And as a rule, he finds. A person can read the text even in the lower right corner of the screen with the 9th size. Only this happens at the cost of additional efforts of sight and attention, albeit small at first glance. Add to this the extra hours of work of the maker-up and the designer to develop this type of layout.
It is worth noting that many designers have come to the conclusion that it is impossible to pull content indefinitely, just like compressing. Understanding this gave rise to "semi-rubber". If a person is comfortable enough to perceive information on 900 px width (a little more than the width of A4 sheet), then for the sake of what problem should it be stretched to 1100 px? And this is despite the fact that even the minimum resolution of modern monitors fits into a width of 1024 px, which means that it will not be necessary to compress.
Yes, it is impossible not to agree that with the increase in the size of the monitors, we are faced with the problem of extra space, which we now have to hide (these are the same white fields on the sides of the screen). But for this you can use the background, additional graphics that do not carry a semantic load and do not require additional attention. It is not necessary to touch the information blocks.
Having received a “cheerfulness charge” of the end of the 20th century, when problems with the square really existed, the designers continue to solve non-existent problems, and already “educated” customers require them to solve these problems.
Often you can hear about the "laws of the web", sort of like they have nothing to do with typographical rules. However, the main thing in the printing house is the delivery of printed text. But until the video and sound replaced the text (which is much more than 50% of the content of the sites), and we still see it with biological eyes, it would be foolish to abandon the research and experience accumulated over several hundred years of typography. Moreover, the text on the monitors due to the low resolution is much worse than the printed one (72 dpi against 200 dpi and more), and the monitors themselves do not contribute to the rest of the eyes.
For those who doubt the reality of perception problems, I suggest to look at 4 options for placing texts here: nano.a5.ru
JUSTIFICATION.
However, Do not completely deny the use of rubber layout. It is perfect in cases where a large presentation area gives an advantage. For example, Dynamically constructed tables with textual content and a large number of columns, the additional length of cells which allows you to display a long text. Or, with the specific requirements of the portfolio of designers, photographers, artists, when they need to submit many of their works at once, show the general level, without focusing on any one individually. But these are special cases that need to be considered separately.
There is another case of using a scalable layout that does not require any arguments for the right to exist - rubber, as an artistic technique. But in this case, one famous council acquires a new form:
Make only rubber sites = Make only sites of red (green, blue, orange, etc.) colors!
PS
I think many had to stumble on phrases like: “A good designer should be able to make the right rubber!”. In my opinion, the ability to choose the right one is more important: rubber or not?
Source: https://habr.com/ru/post/48735/
All Articles