Standard site sizes: features, requirements and recommendations

The technology of developing websites is a very multifaceted process. But still all its stages can be divided into two main components - the functional and the outer shell. Or, as is customary in webmasters, backend and front-end, respectively. People who order their websites from web development studios, often naively believe that it is worth focusing only on the functionality, and this will be the right decision. But this is true in very, very rare cases, usually for startup projects at the beta stage. In other respects, the graphic design and user interface simply have to conform to web development standards and be comfortable.

The first cornerstone faced by the interface designer, or designer, is the width of the site layout. After all, it is necessary to draw interfaces for it. Purely intuitively there are two approaches - either to make separate layouts for each popular screen resolution, or to create one version of the site for all mappings. And both options will be wrong, but about everything in order.

The standard width of the site in pixels for RuNet

Before the development of adaptive layout, a mass phenomenon was the development of a site with a width of a thousand pixels. This figure was chosen for one simple reason - to put the site in any screen. And this has its own logic, but let's assume that the person still has at least an HD-monitor on the desktop. In this case, your layout will seem like a tiny strip in the middle of the screen, where everything is piled in one pile, and on the sides is a huge unoccupied space. Now let's assume that a person came to your website from a tablet with a screen 800 pixels wide, and in the settings is tick "Show full version of the website." In this case, your site will also be displayed incorrectly, because it simply does not fit into the screen.

From these considerations, we can conclude that the fixed width for the layout does not exactly fit us and it is necessary to look for another way. Let's analyze the idea of a separate layout for each screen width.

Layouts for all occasions

If you have chosen as a strategy to create layouts for all screen sizes present on the market, then your site will become the most unique on the whole Internet. After all, it's simply impossible to cover the whole range of devices today, trying to make an accurate adjustment for each option. But if you focus on the most popular resolutions of monitors and device screens, then the idea is not bad. The only minus is the financial costs. After all, when the interface designer, designer and layout designer are forced to do the same work 5 or 6 times, the project will cost incommensurably more than the price originally set in the budget.

Therefore, boast an abundance of versions for different screens, except that single-page websites, whose purpose is to sell one product and necessarily do it well. Well, if you do not have one of these landings, and a multipage site, then it's worthwhile to argue further.

Most popular site sizes

A compromise between the two extremes is drawing a layout for three or four screen sizes. Among them, one must necessarily be a mockup for mobile devices. The rest should be adapted for a small, medium and large desktop screen. How to choose the width of the site? Below are the statistics of the HotLog service for May 2017, which shows us the distribution of popularity of various resolutions of device screens, as well as the dynamics of this indicator change.

From the table, you can learn how to determine the size of the site that you want to use. In addition, we can conclude that the most common format today is the screen 1366 by 768 points. Such screens are installed in budget laptops, so their popularity is natural. The next most popular is the Full HD monitor, which is the gold standard for video clips, games, and hence for creating site layouts. Further in the table, we see the resolution of mobile devices 360 at 640 points, as well as various options for desktop and mobile screens after it.

Design a layout

So, after analyzing the statistics, we can conclude that the optimal width of the site has 4 variations:

1. Version for laptops with a width of 1366 pixels.
2. Full HD version.
3. A 800 pixel-wide layout for display on small desktop monitors.
4. The mobile version of the site is 360 pixels in width.

Let's say that we decided how to use the size of the generated source for the site. But such a project will still be costly. So let's consider more options, this time without using a fixed width.

Making the layout flexible

There is an alternative approach, when it is necessary to adjust only for the minimum screen size, and the sizes of sites will be set by percent. In this case, such interface elements as menus, buttons and logo can be set in absolute values, focusing on the minimum size of the screen width in pixels. Blocks with content, in contrast, will stretch according to the specified percentages of the width of the screen area. This approach allows you to stop perceiving the size of sites as a limitation for the designer and talented to beat this nuance.

What is the golden ratio, and how to apply it to the layout of web pages?

Even in the Renaissance, many architects and artists tried to give their creations an ideal shape and proportion. After answering questions about the meaning of this proportion, they turned to the queen of all sciences - mathematics.

Since the time of antiquity, a proportion has been invented, which our eye perceives as the most natural and elegant, because it is everywhere found in nature. The discoverer of the formula of such a ratio was a talented ancient Greek architect named Phidias. He calculated that if the greater part of the proportion refers to the less, as the whole refers to the larger, then this proportion will look best. But this is the case if you want to divide the object asymmetrically. This proportion was later called the golden section, which still does not overestimate its importance for the world history of culture.

Back to Web Design

It's very simple - using a golden section, you can design pages that will be most pleasing to the human eye. Calculating by the definition of the formula for the golden section, we get the irrational number 1.6180339887 ..., but for convenience we can use the rounded value 1.62. This will mean that the blocks of our page should be 62% and 38% of the whole, regardless of the size of the source code for the site you are using. An example you can see on this scheme:

Use new technologies

Modern technology of website design allows you to accurately convey the idea of the designer and designer, so now you can afford to implement more daring ideas than at the dawn of Internet technologies. It is no longer necessary to seriously puzzle over what the size of the site should be. With the arrival of such things as block adaptive layout, dynamic loading of content and fonts, the development of the site has become many times more pleasant. After all, such technologies have fewer restrictions, although they do exist. But as you know, without limitations there would be no art. We suggest you use one truly creative approach to design - a golden section. With it, you can effectively and nicely fill the workspace, no matter what sizes of sites you specify in your templates.

How to increase the site workspace

There is a high probability that you will not have enough space to fit all the interface elements into a small size layout. In this case, you have to start thinking creatively or even more creatively than you did before.

Maximize the space on the site can be by hiding the navigation in the pop-up menu. This approach is logical to use not only on mobile devices, but also on desktops. After all, the user does not need to look all the time at what rubrics are on your site - he came for the content. And the desires of the user need to be respected.

An example of a good way to hide the menu is the following layout (photo below).

In the top corner of the red area, you can see a cross, clicking on which will hide the menu in a small icon, leaving the user alone with the content of the website.

However, you do not need to do this, you can leave the navigation, which will always be visible. But you can make it a beautiful design element, and not just a list of popular links on the site. Use intuitive icons in addition to text links or even instead of them. This will also allow your site to more efficiently use the screen space on the user's device.

Best site - adaptive

If you do not know which layout to choose for the site, then everything is easy for you. To save on development costs and still not lose an audience due to a poor layout for a device, use an adaptive design.

Adaptive is called a design that looks on different devices equally well. This approach will allow your site to be understandable and convenient even on a laptop, at least on a tablet, even on a smartphone. This effect is achieved due to automatic changes in the width of the working area of the screen. Using adaptive style sheets for the site, you make the most correct decision possible.

What distinguishes the adaptive design from the availability of different versions of the site

Adaptive design differs from the mobile version of the site in that in the latter case the user receives an html-code that differs from the desktop version. This is a drawback in terms of optimizing server performance, as well as search engine optimization. In addition, it becomes more difficult to count statistics on different versions of the site. Adaptive approach is devoid of such shortcomings.

Adaptability for various devices is achieved through a layout with a percentage of the width or by transferring blocks to available space (in the vertical plane on the smartphone instead of horizontal on the desktop), or creating individual layouts for different screens.

More information about the adaptive design and its development you can from the textbooks.