The most popular screen resolutions. How to get back lost traffic or why statistics on display resolutions are useful

You may not even be aware of the fact that your site does not display correctly on a screen with a resolution of 320x480 and all readers with such a smartphone leave your blog without studying the information on it.

May it be great there interesting information(for the blog), the most low price for the product (for an online store), super useful course, but if the page is crooked, the buttons are not visible, the lines of text overlap each other, then with this display you will not see sales pages.

Therefore, it is necessary to analyze the statistics and identify the permissions from which visitors leave and take measures to correct bugs.

Screen resolution statistics

Everything is clear there, enter the site URL:

Now you can choose various options. Moreover, like standard smartphone resolutions (tab 3):

So, randomly enter the resolution in numbers (tab 5):

I showed you how to use the tool, now improvise for your sites.

How to fix errors

In conclusion, the question arises: “Why do I need all this, study browsers, permissions, etc.?”

The answer is simple - to increase traffic and sales.

In my case, the losses are minimal, less than 2% of visitors left in a year because my blog was poorly displayed on their device from which they accessed the site. These are small numbers, yours may be higher or lower, but you need to understand that such trickles can add up to a large flow of losses.

The author of the site may think that he has bad design, usability, he doesn’t know how to write articles correctly, or he has a bad product, a high price, but in fact the reason may be different. If you know it, then the problem can be solved, remember this.

If your site has a lot of resolution issues, the template is most likely not responsive or of low quality and needs to be replaced. Please note that mobile traffic will only increase over the years, so about responsive template(or mobile version of the site) needs to be thought about as early as possible.

I talked about this topic in detail here:

I would like to hear about the results of your site analysis, which screen resolutions have the most failures?

If you have any questions, write in the comments, I will definitely help.

Notes

First, a little about the theory. Screen resolution may vary depending on the device you are using. Some users mistakenly believe that screen size and monitor screen resolution are the same thing. For example, screen size and its maximum resolution equals 1600 x 1200, and the user can set the resolution, for example, 800 x 600. Naturally, the image on the screen will be formed according to the principle that was set by the user himself. As a result, it turns out that the screen size and its resolution are a bit different concepts. In order to achieve the perfect picture, you need to set the maximum resolution that your monitor supports and then the image will be of the highest quality.

What screen resolutions are there?

Today there is huge amount monitors and the same number of resolutions. It should be noted that all these devices have different aspect ratios, for example: 4:3, 5:4, 16:9, 16:10 and many others. Widescreen devices with an aspect ratio of 21:9 are in great demand. It's simply not practical to use such devices today, since they are best suited for watching movies shot using the CinemaScope standard. This is directly related to the fact that if you set a different resolution on such a monitor, for example, FullHD (1920 x 1080p), then wide black bars will remain at the edges of the monitor.

As for the resolution of monitors themselves, they are divided among themselves, as you might guess, by aspect ratio. The following are highlighted: For aspect ratio 4:3 -1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536. For 16:9 aspect ratio: 1366x768, 1600x900, 1920x1080, 2048x1152, 2560x1440, 3840x2160. For 16:10 aspect ratio: 1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400. The most popular resolutions today are: 1920x1080, 1280x1024, 1366x768.

It is worth noting that the higher the screen resolution, the better the image itself will be, but it can be very small and some owners of such devices will have to change it to a smaller one in order to see anything on the monitor. As a result, of course, everyone can see immediately before purchasing a device in a store what kind of image will be on it and whether it suits them.

Today there are a huge number of products from various fields on the investment market. We thought it was worth drawing your attention to the rapidly growing mobile device market. No, there will be no reviews here, we want to look at this market through the prism of screen characteristics. A mobile phone, tablet, laptop are already firmly entrenched in our lives; in fact, we spend more time with them than with living people around us.

What the statistics say

We spent a long time studying statistical reports of various metrics from partner sites. Watched technical specifications the most popular mobile devices. The situation is that large devices have begun to dominate the market among all mobile devices. cell phones, the diagonal of which starts from 5.5" and ends at 6.2". Let's add here Apple's desire to release a product with a 6.5" diagonal to the market by the end of the year. And our brain begins to have difficulty digesting the need for such technology. You can't put this in your pocket anymore, and it won't fit in every bag. However, if you look at the ways of use phone modern smartphone. then it becomes clear why. This is a strange fact: the telephone seems to have been invented for voice communication, and are increasingly used as a device for surfing the Internet. To put it simply - the current trend is good quality mobile phone with an excellent screen, camera and Internet. This is a convenient “harvester”, you just need to charge it once a day.

Now about permissions. The most popular resolutions remain 1366*738 and 1920*1080. These are not mobile resolutions. But the most popular mobile resolution has become 360*640. In fact, these are the top three.

The complete table with market information is as follows:

Conclusion

The mobile device market does not stand still. Today we need to look for options for investing in this market.

A very multifaceted process. But still, all its stages can be divided into two main components - functionality and 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 focusing only on functionality will be the right decision. But this is true in very, very rare cases, usually for startup projects at the beta testing stage. Otherwise graphic design and the user interface simply must be convenient, but we should not forget about the future of the site, taking into account it.

The first cornerstone a front-end designer, or designer, faces is the width of the site's layout. After all, it is necessary to draw interfaces for it. 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 incorrect, but first things first.

Standard website width in pixels for RuNet

Before the development of adaptive layout, the development of a website with a width of a thousand pixels was a widespread phenomenon. This figure was chosen for one simple reason - so that the site fits on any screen. And this has its own logic, but let’s assume that a person still has at least an HD monitor on his desktop. In this case, your layout will appear as a tiny strip in the middle of the screen, where everything is stuck together in one pile, and on the sides there is a huge unused space. Now let's assume that a person has visited your website from a tablet with a screen of 800 pixels in width, and in the settings there is a checkmark "Show full version website". In this case, your site will also not be displayed correctly, since it simply will not fit into the screen.

From these considerations we can conclude that fixed width It definitely doesn’t suit us for the layout and we need to look for another way. Let's explore the idea of ​​a separate layout for each screen width.

Layouts for all occasions

If you choose as a strategy to create layouts for all screen sizes present in the market, then your site will become 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 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 the interface designer, designer and layout designer are forced to do the same work 5 or 6 times, the project will cost disproportionately more than the originally budgeted price.

Therefore, boasting an abundance of versions under different screens Maybe only one-page sites, the purpose of which is to sell one product and be sure to do it well. Well, if you don’t have one of these landing pages, but a multi-page site, then it’s worth discussing further.

Most popular website sizes

A compromise between the two extremes is to render a layout for three or four. 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 site width? Below we present statistics from the HotLog service for May 2017, which shows us the distribution of the popularity of different device screen resolutions, as well as the dynamics of changes in this indicator.

From the table you can learn how to determine the size of the site to use. In addition, we can conclude that the most common format today is a 1366 by 768 pixel screen. 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 him.

Designing a layout

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

1. Laptop version with a width of 1366 pixels.
2. Full HD version.
3. Layout is 800 pixels wide for display on small desktop monitors.
4. The mobile version of the site is 360 pixels wide.

Let's say we have decided what size to use to create the source for the site. But such a project will still be expensive. So let's look at some more options, this time without using a fixed width.

Making the layout flexible

There is an alternative approach, when you only need to adapt to minimum size screen, and the site sizes themselves will be set as percentages. At the same time, such as menus, buttons and logos can be specified 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 websites as a limitation for the designer and skillfully play with this nuance.

What is the golden ratio, and how can it be applied to web page layout?

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

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

Let's get 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. Having calculated according to the definition of the golden ratio formula, we obtain the irrational number 1.6180339887..., but for convenience you can use the rounded value of 1.62. This will mean that our page blocks should be 62% and 38% of the whole, regardless of what size of the site source you are using. You can see an example in the following diagram:

Use new technologies

Modern website layout technologies make it possible to convey the designer’s idea as accurately as possible, so now you can afford to implement more daring ideas than at the dawn of Internet technologies. You no longer need to rack your brains over what the size of the site should be. With the advent of things like block adaptive layout, dynamic loading of content and fonts, website development has become much more enjoyable. After all, such technologies have fewer restrictions, even though they still exist. But as we know, without restrictions there would be no art. We suggest you use one truly creative approach to design - the golden ratio. With its help, you can effectively and beautifully fill whatever site sizes you specify in your templates.

How to increase the working space of the site

There's a good chance you won't have enough space to fit all the UI elements into your layout small size. In this case, you will have to start thinking creatively or even more creatively than you did before.

You can free up as much space on your website as possible by hiding the navigation in a pop-up menu. This approach is logical to use not only mobile devices, but also on desktops. After all, the user does not need to constantly look at what categories are on your site - he came for the content. And the user's wishes must be respected.

Example good way hide menu is the following layout (photo below).

IN top corner in 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 not necessary; you can leave the navigation, which will always be visible. But you can make this 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. This will also allow your site to make more efficient use of the screen space on the user's device.

The best website is responsive

If you don’t know which layout to choose for your website, then everything is simple for you. To save on development costs without losing your audience due to a poor layout for some device, use responsive design.

Adaptive design is a design that looks like different devices equally good. 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 due to automatic changes width of the screen working area. By using responsive style sheets for your website, you are making the best decision possible.

What is the difference between adaptive design and having different versions of a website?

Responsive design is different from mobile version site in that in the latter case the user receives an html code that differs from the desktop one. This is a disadvantage from the point of view of optimizing server performance, as well as search engine optimization. In addition, it becomes more difficult to calculate statistics on different versions site. The adaptive approach does not have such disadvantages.

Adaptability for different devices is achieved through a layout with a percentage width setting, either by moving blocks into the available space (in a vertical plane on a smartphone instead of horizontally on a desktop), or by creating individual layouts for different screens.

Learn more about adaptive design and its development you can from textbooks.

Based on materials from the Deviceatlas website

Knowing which smartphone screen resolutions are most popular today will help you optimize your website to take into account the differences between various devices. DeviceAtlas collected the latest device usage statistics related to this issue.

New screen resolutions on the market

IN recent years all flagship Android OS devices had Full HD (1080x1920) and QHD (1440x2560) resolution. In 2017, several devices with non-standard resolutions appeared on the market, mainly due to the new trend for edge-to-edge screens (the entire width of the device). Including:

• Samsung Galaxy Note 8: 1440 x 2960 pixels
• Samsung Galaxy S8: 1440 x 2960 pixels
• LG V30: 1440 x 2880 pixels
• LG G6: 1440 x 2880 pixels
• Sony Xperia XZ Premium: 3840 x 2160 pixels
• iPhone X: 1125 x 2436 pixels (just announced)

Of course these non-standard resolutions have not yet been included in our statistics. But, one way or another, we can expect that the S8 standard may become one of the most popular on the list due to the enormous popularity of the Galaxy S family: for example, the previous flagship - S7 - became the most common Android device in the world.

The most used smartphone screen resolution is 720x1280

According to traffic statistics for July-August 2017, the most popular screen resolution on smartphones has become the ratio 720x1280 pixels, which is used on most mid- and budget-class devices. It is the most used resolution in 11 of the 20 countries analyzed, including India, Italy and Spain. It is closely followed by the 750x1334 ratio, which is used in popular ones in the USA, UK and Australia iPhone models. In France and Germany, in turn, the most common resolution has become Full HD in mid- and budget-class smartphones.

The table shows the most popular smartphone screen resolutions in all 20 countries participating in the study.

The graphs below show the share of traffic that came from smartphones with a screen resolution of 720x1280 in July-August 2017 in the countries participating in the study.

Full HD is taking over the market, QHD adoption is slowing down

We also analyzed how quickly the use of several popular resolutions grew over the year - from Q4 2016 to Q3 2017. Despite active growth earlier, the spread of QHD resolution (1440×2560) has now slowed down.

In France, India, Nigeria and the US, QHD devices even lost market share (-4% in the latter country). Over the past 4 quarters, FHD (1080x1920) devices have grown faster, adding 5-10% in Brazil, France, Japan, Poland, Spain and the US.

Traffic share of Full HD devices (1080x1920) over the last 4 quarters:

Share of traffic of QHD devices (1440x2560) for the last 4 quarters: