The goal of this article is to systematize the knowledge of how to properly stretch a site for different screen resolutions.

Introduction

In the process of creating my own projects, I saw that it was not right to simply stretch it to the full screen when laying out the layout of each site. I noticed the presence of inconvenience when the monitor appeared on 22 inches. The most common resolution for such monitors is 1680 by 1050 points. Most designers draw layouts with a maximum width of 1280 points, given that for 17 inch, 1024 point monitors in width, the layout will simply taper. When a model is deformed in width to 200 points, it is not as noticeable as if it were deformed by 400, which happens on 22 inch monitors. Such a large deformation has the same unpleasant effect for many layouts, both for rigorous and for saturated graphics.


Here is the site yandex.ru with a large width.

Systematization of knowledge

Based on all this, I came to the conclusion that the site can be done:

1. Fixed (800 -1000 points wide)
2. Fixed, but with the addition of background graphics for long monitors.
3. Rubber with minimum width indication
4. Rubber, but with an indication of the maximum and minimum width
5. Rubber, indicating the maximum and minimum width, with the addition of minor graphics.

Free-Lance, an example of the first paragraph
')

2-go, example to the second item


Mojo, example to the fourth paragraph

The most functional version is the last, but it seems to me the most acceptable. It is worth paying attention to the fact that any of the options may be suitable for each specific layout.

The first option , with the constant fixation of the site under a certain width is good, for narrow layouts that are weakly saturated with information, if you stretch them to full screen, the user simply will not be able to focus on the entire site at once.

The second option , with the addition of secondary graphics on the sides, is needed when the site is focused not only on readability but also on beauty, then empty space should be filled with non-distracting, but thematic and beautiful graphics.

The third option : rubber, but with an indication of the minimum width, is acceptable for sites-tables. When to focus the user's attention on everything at once there is no need, but there is a need, on the contrary, to show on the page as much information as possible at once.

The fourth option - a rubber site, with an indication of the minimum and maximum width. It should be used for sites when there is a need to present the same thing at different resolutions. That is, if you specify a maximum width of 1200 points, the site will be narrowed or stretched to a maximum of 200 points, which should not affect the user's perception of the site.

The last option should be the most common. The site is deformed by a maximum of 200 points, an empty space, on very large monitors it closes thematic, beautiful, not conspicuous graphics (see the second option). It is important to make a beautiful transition from the main part of the site, which has restrictions on the width, to the background.

Idea

In addition to all these options for stretching the site, at the time of writing this article, an idea emerged to make a layout for each resolution. By prevalence, I distinguish three resolutions:

1. 1024
2. 1280
3. 1680

Accordingly, if you make three design options, without major changes, but taking into account the convenience of further use, you can please almost all site visitors. As an example, on large resolutions you can increase the font size, make a vertical menu. At low resolutions, the menu can be made horizontal.
There is one more thing to consider when thinking about rubber sites. Now many are watching full-fledged sites through mobile devices. For them, a separate version of the site should be created using a minimum of graphics and most importantly with a rubber text that will start from the left side of the display of the portable device and end at the right side.

Kotelnikov Valentin, 2008—2009
cross post on my blog