The world has released a huge number of various computers, laptops and even more mobile devices – smartphones and tablets. From the point of view of web site design, such diversity leads to one, very serious problem – it is far from always possible to adequately assess the width of the layout.
Everything is easier with the height, it can be different depending on the amount of content, the number of sections, etc. In general, scroll to help you. The width of the use of the scroll bar is extremely inconvenient, so the task of the developer is to choose some universal format. Ideally, there should be several layouts, they open depending on the device. In this case, we can talk about the currently extremely popular adaptive site.
Most popular site sizes
As you know, the resolution of any information display device is defined in pixels, i.e. points. The following are the most common:
- for desktop – 1920, 1600, 1440, 1366, 1280, 1024;
- for tablets – 1024, 768;
- phones – from 320 and above.
It is clear that there may be higher indicators, but in this case we are talking about the most popular formats for which responsive sites are built.
The problem of "big" layouts
At first you might think that creating a portal with a high resolution – this is good, they say, a lot of content is contained, large control elements can be placed. But the problem is that large layouts are cropped when opened on devices with lower resolutions.
Try to find old, once popular sites on the Internet, but recently they have been thoroughly neglected. Open them on a modern large monitor and mobile phone with a resolution of 480 pixels. Feel the difference, as they say. Why is it about old sites? There were no mobile devices then, but good monitors appeared. It was under them that they "molded" projects of web designers of the old guard.
Most popular containers for different resolutions
- If the monitor of a stationary or portable computer supports a resolution of more than 1200 pixels wide, then a container with 1170 px will be most in demand for it. At the same time, it is important to understand that only 1140 of them can be used by a web designer in his direct work. Another 30 (15+15) pixels will make up the outer indents on both sides. By the way, this interesting parameter (external indents) is specified in the HTML code and can be easily changed if desired.
- For monitors whose resolution is in the range from 992 to 1200 points, a container with a width of 960 px is relevant.
- 768-992 – respectively, 720 pixels.
- For the smallest values of old mobile phone models, layouts from 320 pixels can be used. However, in the vast majority of cases, the work starts with a value of 375 px.
There is another approach, in which, for example, a grid of 1200 or 1280 units is installed. As a creative approach, you can use the calculation of elements as a percentage of the width of the screen, which is taken as 100%. For example, an image half of the total image will have a value of 50% of the screen width.
The problem with this approach is that all elements, including control buttons, must be implemented as a percentage. Then on mobile phones with a low resolution, they will be very small, almost imperceptible. The functional component is lost. And on modern desktop monitors, on the contrary, they are very large. And if they are created using not vector, but raster graphics, then the quality of the image will drop significantly, and the aesthetic component will be lost.
Selecting an approach
Determining the possible permissions on user devices and, accordingly, the selection of containers begins with the definition of a basic approach, and there are two of them:
- Mobile First;
- Desktop First.
In the first case, versions for mobile phones become the main ones, it is precisely such layouts that are developed first of all. And only then, if there is time, resources and desire, they start working with tablet and desktop versions.
It should be noted that Mobile First is currently the most popular and relevant approach. The fact is that the majority of users who are currently on the Internet use phones and smartphones. This indicator already exceeds 90% and is constantly growing. As a result, almost the entire target audience is in the mobile segment.
Desktop First also has its fans, including among professional webmasters. According to the technology, the largest layout of the site is first formed. It includes full functionality and all elements, both in the field of content (graphic, text, video, animation, text), and in the field of management. And already on the basis of the available expanded material, you can move towards simplification, clearly understanding what and in what sequence to remove from the layout.
What about pixel density?
Another important problem that specialists are facing more and more recently – is the pixel density. And the most interesting thing is that there are difficulties with displaying information on innovative mobile devices, where the resolution and density are high. It happens that sites are displayed incorrectly, and some elements are distorted. The solution to the problem can be considered the practical application of pixel multipliers that adjust the quality of the image.
In conclusion, it must be said that a competent approach and accounting for the resolution of different types of screens, the creation of several layouts for adaptive sites – is a sign of skill and qualification of a web designer.
Constantly strive for perfection, and then you will be able to take even small but regular steps forward.