Standard site sizes: features, requirements and recommendations
Web site development technology is verya 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 are simply required to conform to web development standards and to be user-friendly.
The first cornerstone with whichthe interface designer, or the designer, is facing 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 incorrect, but about everything in order.
The standard width of the site in pixels for RuNet
Before the development of the adaptive layout of a mass phenomenonwas the development of a site with a width of a thousand pixels. This figure was chosen for one simple reason - that the site fit into 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 thatThe fixed width for the layout does not exactly fit us and we need 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 forall sizes of screens present on the market, then your site will become the most unique on the whole Internet. 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 differentscreens can except that single-page websites, whose purpose is to sell one product and be sure to do it well. Well, if you do not have one of these landings, and a multi-page site, then it's worth discussing further.
Most popular site sizes
The trade-off between the two extremes isDraw a layout for three or four screen sizes. Among them, one must 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 different resolutions of device screens, as well as the dynamics of this change.
From the table you can learn how to determine the sizesite that you want to use. In addition, we can conclude that the most common format today is the screen 1366 at 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.
Designing a layout
So, after analyzing the statistics, we can conclude that the optimal width of the site has 4 variations:
- Version for notebooks with a width of 1366 pixels.
- Full HD version.
- A 800-pixel-wide layout for display on small desktop monitors.
- The mobile version of the site is 360 pixels in width.
Let's say we have decided what is necessaryuse 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 whenTo adjust it is necessary only under the minimal size of the screen, and the sizes of sites will be set by percent. In this case, such interface elements as menus, buttons and logos can be set in absolute values, focusing on the minimum size of the screen width in pixels. Blocks with content, in contrast, will be stretched according to 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 andartists 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 was inventedthe proportion that 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, youyou can design pages that will be most pleasing to the human eye. Calculating by the definition of the formula of 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 technologies of website designallow 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 size 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 are. But as you know, without limitations there would be no art. We suggest that you use one truly creative approach to design - a golden section. With it, you can effectively and nicely fill the workspace, no matter what size of sites you specify in your templates.
How to increase the site workspace
Chances are that you will not haveenough space to fit all the interface elements into a small-sized 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,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 categories 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 upper 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 canLeave the navigation, which will always be in sight. 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 simple for you. To save on development costs and yet not lose an audience due to a poor layout for a device, use an adaptive design.
Adaptive is called a design thatlooks 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 is the difference between adaptive design and the availability of different versions of the site
Adaptive design is different from the mobile versionsite in that in the latter case the user receives an html-code that differs from the desktop code. 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 achieveddue to the 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 adaptive design and its development you can from the textbooks.
</ p>
