Website development technology 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 among webmasters, back-end and front-end, respectively. People who order their websites from web development studios often naively believe that it is worth focusing only on functionality, and this will be the right decision. But this is true in very, very rare cases, usually for startup projects at the beta testing stage. Otherwise, the graphic design and user interface simply must comply with web development standards and be convenient.
The first cornerstone that the interface designer, or designer, faces is the width of the site layout. After all, for it it is necessary to draw interfaces. Purely intuitively, two approaches arise - either make separate layouts for each popular screen resolution, or create one version of the site for all displays. And both options will be wrong, but first things first.
Standard website width in pixelsfor Runet
Before the development of adaptive layout, the development of a site with a width of a thousand pixels was a mass phenomenon. This figure was chosen for one simple reason - so that the site fits into any screen. And this has its own logic, but let's assume that a person still has at least an HD monitor on a desktop. In this case, your layout will seem like a tiny strip in the middle of the screen, where everything is stuck together in one heap, and on the sides there is a huge unused space. Now let's say that a person accesses your website on a tablet with an 800px wide screen and "Show full website" is checked in the settings. In this case, your site will also be displayed incorrectly, as it simply won't fit into the screen.
From these considerations, we can conclude that a fixed width for the layout is definitely not suitable for 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 for all screen sizes on the market, then your site will be the most unique on the entire Internet. After all, it is simply impossible today to cover the entire range of devices, trying to fine-tune for each option. But if you focus on the most popular resolutions of monitors and device screens, then the idea is not bad. Its only disadvantage is financial costs. After all, when an interface designer, a designer and a coder are forced to do the same work 5 or 6 times, the project will costdisproportionately higher than the originally budgeted price.
Therefore, only one-page sites can boast of an abundance of versions for different screens, the purpose of which is to sell one product and be sure to do it well. Well, if you have not one of these landings, but a multi-page site, then you should think further.
Most Popular Site Sizes
A compromise between the two extremes is rendering the layout for three or four screen sizes. Among them, one must be a layout for mobile devices. The rest should be adapted for small, medium and large desktop screens. How to choose the width of the site? Below we present the HotLog service statistics for May 2017, which shows us the distribution of popularity of various device screen resolutions, as well as the dynamics of this indicator.
From the table you can find out how to determine the size of the site you want to use. In addition, we can conclude that the most common format today is a screen of 1366 by 768 pixels. 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 videos, games, and therefore for creating website layouts. Further in the table we see the resolution of mobile devices 360 by 640 pixels, as well as various options for desktop and mobile screens after it.
Designing layout
SoAfter analyzing the statistics, we can conclude that the optimal site width has 4 variations:
- Laptop version with 1366px width.
- Full HD version.
- A 800px wide layout for display on small desktop monitors.
- Mobile version of the site - 360 pixels wide.
Let's say we have decided on the size of the generated source for the site. But such a project would still be costly. So let's look at more options, this time without using a fixed width.
Making the layout flexible
There is an alternative approach, when it is worth adapting only to the minimum screen size, and the site sizes themselves will be set by percentages. At the same time, 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, on the contrary, will be stretched according to the specified percentage 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 skillfully beat this nuance.
What is the golden ratio and how can it be applied to web page layout?
Even in the Renaissance, many architects and artists tried to give their creations the perfect shape and proportion. For answers to questions about the values of such a proportion, they turned to the queen of all sciences - mathematics.
Since antiquity, a proportion has been invented that our eye perceives as the most natural and graceful,because it is ubiquitous in nature. The discoverer of the formula for this ratio was a talented ancient Greek architect named Phidias. He calculated that if the larger part of the proportion is related to the smaller one as the whole is related to the larger one, then such a proportion will look the 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 the golden ratio, you can design pages that will be as pleasing to the human eye as possible. Calculating according to the definition of the golden ratio formula, we get the irrational number 1, 6180339887 …, but for convenience, we can use a rounded value of 1, 62. This will mean that the blocks of our page should be 62% and 38% of the whole, no matter what size the generated source for the site you are using. You can see an example in this diagram:
Use new technologies
Modern website layout technologies make it possible to accurately convey the idea of a planner and designer, so now you can afford to implement more daring ideas than at the dawn of Internet technologies. You no longer need to think hard about what the size of the site should be. With the advent of such things as block adaptive layout, dynamic loading of content and fonts, website development has become much more pleasant. After all, these technologies arefewer restrictions, although they are still there. But as you know, without limits there would be no art. We suggest you use one truly creative design approach - the golden ratio. With it, you can effectively and beautifully fill the workspace, no matter what site sizes you set in your templates.
How to increase the working space of the site
There's a good chance you won't have enough room to fit all the UI elements into a small layout. In this case, you will have to start thinking creatively or even more creatively than you did before.
Maximum free up space on the site by hiding the navigation in the pop-up menu. It is logical to use this approach not only on mobile devices, but also on desktops. After all, the user does not need to look all the time at what headings are on your site - he came for the content. And the wishes of the user must be respected.
An example of a good way to hide the menu is the following layout (pictured below).
In the upper corner of the red area, you can see a cross, clicking on which will hide the menu into a small icon, leaving the user alone with the content of the website.
However, this is optional, you can leave 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 or even instead of text links. it's the samewill allow your site to make more efficient use of screen space on the user's device.
The best website is responsive
If you do not know which layout to choose for the site, then everything is simple for you. To save on development costs and at the same time not lose your audience due to poor layout for some device, use responsive design.
Responsive design is a design that looks equally good on different devices. This approach will allow your site to be understandable and convenient even on a laptop, even on a tablet, even on a smartphone. This effect is achieved by automatically changing the width of the working area of the screen. By using responsive style sheets for your website, you are making the best decision possible.
What is the difference between responsive design and different website versions
Responsive design differs from the mobile version of the site in that in the latter case, the user receives an html code that is different from the desktop one. This is a disadvantage in terms of server performance optimization as well as search engine optimization. In addition, it becomes more difficult to calculate statistics for different versions of the site. The adaptive approach does not have these disadvantages.
Responsiveness for various devices is achieved through a layout with a percentage of the width specified or by transferring blocks to the available space (in the vertical plane on a smartphone instead ofhorizontal on the desktop), or creating individual layouts for different screens.
Learn more about responsive design and development in our tutorials.
