Screen resolution usage statistics. How to get back lost traffic or how statistics on display resolutions are useful

You may not even know the fact that your site is not displayed correctly on a screen with a resolution of 320 × 480 and all readers with such a smartphone leave your blog without having studied the information on it.

Let there be super interesting information (for a blog), the lowest price for a product (for an online store), a super useful course, but if the page is crooked, the buttons are not visible, the lines of text overlap each other, then with such a display of sales pages, you not to be seen.

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

Screen resolution statistics

Everything is clear there, enter the site URL:

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

And arbitrarily dial the resolution in numbers (5 tab):

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

How to fix mistakes

In conclusion, the question arises: “Why do I need all this, to study browsers, permissions, and so on?”

The answer is simple - to increase traffic and sales.

In my case, the losses are minimal, less than 2% of visitors per year left because my blog did not display well on their device from which they accessed the site. These are small numbers, you can have them higher or lower, but you need to understand that such streams in total can result in a large stream of losses.

The site author may think that he has poor design, usability, he does not know how to write articles correctly, or he has a bad product, 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 low quality and needs to be replaced. Keep in mind that mobile traffic will only increase over the years, so you need to think about an adaptive template (or mobile version of the site) as early as possible.

I talked about this topic in detail here:

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

For any questions, write in the comments, I will definitely help.

Notes

A very versatile 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 be convenient, but do not forget about the future of the site, given it.

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 site width in pixels for 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 assume 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 will not 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.

Models for all occasions

If you have chosen as a strategy to create layouts for all screen sizes on 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 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 cost disproportionately more than the price originally budgeted.

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

The trade-off between the two extremes is to render the layout for three or four. Among these, one must be a mobile layout. 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 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 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.

We design the layout

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

1. Notebook version with 1366px width.
2. Full HD version.
3. An 800px wide layout 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 of the generated source for the site should be used. 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 adjusting only to the minimum screen size, and the site sizes themselves will be set by percentages. At the same time, such as menus, buttons, and a 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 to apply it to web page layout?

Back in the Renaissance, many architects and artists tried to give their creations an ideal shape and proportion. For answers to questions about the values ​​of such a proportion, they turned to the queen of all sciences - mathematics.

Ever since antiquity, a proportion has been invented that our eye perceives as the most natural and elegant, 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 section formula, we get the irrational number 1.6180339887..., but for convenience, you can use the 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 you use to create the source for the site. You can see an example in the following diagram:

Use new technologies

Modern web site layout technologies make it possible to convey the idea of ​​a designer and designer as accurately as possible, so now you can afford to implement bolder 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, such technologies have fewer restrictions, although they still exist. 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 efficiently and beautifully fill in whatever sizes of sites you set in your templates.

How to increase the working space of the site

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

You can free up space on the site as much as possible 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 (photo 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. This will also 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 the audience due to a bad 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 site, you are making the best decision possible.

What is the difference between responsive design and having different versions of the site

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 is devoid of such shortcomings.

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

You can learn more about responsive design and its development from the tutorials.

Today, the investment market has a huge number of products from various fields. It seemed to us that it is worth drawing your attention to the rapidly growing market for mobile devices. No, there will be no reviews here, we want to consider this market through the prism of screen characteristics. 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 have been studying statistical reports of various metrics from partner sites for a long time. We looked at the technical characteristics of the most popular mobile devices. The situation is such that the market among all mobile devices began to be dominated by large cell phones, the diagonal of which starts from 5.5 "and ends at 6.2". Add to this the desire of Apple to launch a product with a diagonal of 6.5 "by the end of the year, and our brains begin to digest the need for such technology with difficulty. You can’t put this in your pocket anymore, and it won’t fit in every bag. However, if you look at the ways to use phone of a modern smartphone, it becomes clear why.This is a strange fact: the phone seems to have been invented for voice communication, but it is used more and more often as a device for surfing the Internet.To put it simply, the current trend is a good quality mobile phone with an excellent screen, camera and the Internet.This is a convenient "combine", you just need to charge it once a day.

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

The full table with information on the market is as follows:

Output

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

According to Deviceatlas website

Knowing which smartphone screen resolutions are the most popular today will help you optimize your website for differences between different 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) resolutions. 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 (only announced)

Of course, these non-standard permissions are not included in our statistics yet. But one way or another, we can expect that the S8 standard could become one of the most popular on the list due to the huge popularity of the Galaxy S family: 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 is 720×1280 pixels, which is used on most mid-range and budget devices. This is the most used permit in 11 countries out of 20 analyzed, including India, Italy and Spain. It is closely followed by the ratio of 750x1334, which is used in popular iPhone models in the US, UK and Australia. In France and Germany, in turn, Full HD became the most frequent resolution in smartphones of the middle and budget classes.

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 fell on smartphones with a screen resolution of 720x1280 in July-August 2017 in the countries participating in the study.

Full HD takes over the market, QHD adoption slows down

We also analyzed how fast the use of several popular permissions grew during the year - from Q4 2016 to Q3 2017. Despite the active growth in the past, now the spread of QHD resolution (1440×2560) has 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 (1080×1920) devices have grown faster, gaining 5-10% in Brazil, France, Japan, Poland, Spain and the US.

Share of traffic of Full HD-devices (1080x1920) for the last 4 quarters:

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

First, a little about 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, the screen size and its maximum resolution is 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 size of the screen and its resolution are slightly 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 are the screen resolutions?

Today there are a huge number of 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 is simply not practical to use such devices today, as 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), wide black bars will remain along the edges of the monitor.

As for the monitor resolution itself, they are divided among themselves, as you might guess, by the aspect ratio. The following stand out: For 4:3 aspect ratio -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 at the same time 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 just before buying a device in a store, what image will be on it, and whether it suits it.