Which screen size to choose? Statcounter knows what your audiebce selects.
Article in Ukrainian here / Стаття українською мовою тут (Copy+Paste) - https://tseux.medium.com/який-фрейм-для-дизайнів-обрати-ui-ux-дизайнеру-81576383c2df
For UI/UX designers, understanding how different browsers handle the safe area for displaying web content is crucial. The safe area is the portion of the screen where content is visible and accessible to users without being obstructed by system UI elements, such as the address bar, tab bar, or navigation controls. Different browsers, such as Safari and Chrome, handle these elements in distinct ways, which can significantly affect the user experience (UX) across macOS, iOS, Windows, and Android. In this article, we’ll explore how the UI/UX design of Safari and Chrome influences the size of the safe area and how designers can account for these differences in their designs.
One of the most common questions among beginner designers is: "What screen size should I choose for my layouts?" If you've been searching for answers to this question online, you've probably come across many clear recommendations like: "1440 px for desktop." It seems like a universal answer that can be applied in all cases. But is it really? Do these recommendations truly reflect modern realities?
To find an up-to-date answer, we should turn to Statcounter — a service that analyzes web traffic across various parameters such as device types, operating systems, browsers, and screen sizes. In this article, we’ll explore how to use this tool to make the right decisions during design development, depending on your target audience.
Before diving into the statistics, you need to clearly define the main 2 parameters of your project:
1. Target audience – for whom
*Once you define your target audience, in each subsequent section of Statcounter, focus on the statistics that relate specifically to it.
2. What are you developing?
*This information is necessary to understand which approach to use (Mobile First or Desktop First) and to ultimately choose the guidelines for the interface.
A. Website with responsive design
You need to determine which device is used most frequently. To do this, go to the "Desktop vs Mobile vs Tablet Market Share" section:
- Desktop. If most users are using desktop computers, start by developing the desktop version and then adapt it for other devices.
- Tablet. While this is still a hypothetical scenario, if tablets become the primary device, it would be best to start with the tablet version and then adapt it for the second most popular device (desktop or mobile).
- Mobile. If mobile devices are the primary ones, start with the mobile version and then adapt it for other platforms.
B. Interactive platforms (gaming products, educational platforms, PWA)
*The "Desktop vs Mobile vs Tablet Market Share" section will not provide the necessary information. In this case, you should focus on the specifics of your product.
Gaming solutions can be designed for comfortable use on mobile devices or for playing on a computer in a more relaxed environment. Educational platforms may involve tasks in programs available only on desktops or be adapted for mobile devices to facilitate learning on the go. Depending on the product's specifics, determine the primary device to focus on during development.
C. Admin portal (SaaS, CRM)
*The features of a portal differ from websites, so there is no universal rule, even if statistics show that mobile devices are used more frequently. This is not always the case. Our approach should be based on the goals of the portal itself.
If the target audience spends a lot of time on the go (for example, sales representatives), it makes sense to design the portal for smaller screen sizes — phones or tablets. However, if our users are office workers, it makes sense to prioritize the desktop version.
Additionally, it's important to remember that mobile devices are more vulnerable when handling confidential information. Access settings and complex business processes are better implemented on desktop platforms.
If both mobile and desktop versions are planned, it is recommended to apply the principle of Progressive Enhancement: start with the mobile version, implementing basic features, and then expand them in the desktop version, adding more capabilities and details.
D. Dashboard / Data Visualization
*The choice of devices for dashboards and data visualization depends on usage scenarios. While mobile devices dominate general statistics, analytical solutions require specific approaches.
Mobile devices are convenient for quick access to key metrics, especially for managers on the go. However, due to the limited screen size, the mobile version should display only the necessary data. Desktops are suitable for deep data analysis, complex reports, and large datasets, while tablets provide a balance between mobility and functionality. The best approach is a responsive interface: key metrics for mobile devices, basic analytics for tablets, and detailed features for desktops.
E. Mobile app
*Here, you can decide whether to design only for phones or to include tablets as well. This decision should be based on the goals of the app.
For example, if it’s an app for reading books, a large portion of users will likely use tablets. In such cases, it's better to conduct research among your target audience, such as through surveys, to gather data about the devices they use. This will allow you to create a more personalized experience, focusing on the real needs of users.
Let's explore Statcounter's other features!
1. Screen Resolution Statistics
This section contains the most important information about the most common screen sizes among your users. By focusing on these parameters, you can create layouts that provide a comfortable and enjoyable viewing experience. It's essential that interface elements display correctly, without being cut off, and maintain a balanced, visually appealing composition.Why screen size matters?
- Desktop: The most popular resolution for desktops is 1920×1080. However, if you take a closer look at the statistics, you’ll notice that 1440 px, which is often recommended for design, ranks only fifth in popularity.
- Mobile devices: Even when a new smartphone model with a larger screen is released, users don’t immediately switch to it. The most common resolution for mobile devices remains 360×800, and this should be considered when developing mobile designs.
By adapting your designs to the actual behavior of users, you create a more intuitive and accessible product for your audience.
In the "Screen Resolution Stats" section, you can see the most commonly used screen sizes for mobile devices, tablets, and desktops. This allows you to understand user preferences or filter by device type for more specific data.
2. Browser Market Share
How Web Browsers Impact Design: On desktops, Chrome takes up more space with its top and bottom panels, reducing the space available for displaying content. On mobile devices, control panels can be positioned either at the top or bottom, which affects the choice of UI element placement. Additionally, the size of these panels varies depending on the browser.It is important to test all platforms separately and compare the differences to understand where to focus. For example, if the mobile version is the primary one and the product is targeted at the US market, most users there use iPhones and Safari. In contrast, Safari is rarely used in Asia, where Chrome dominates.What to do if desktop users prefer Chrome, but mobile users prefer Safari? Focus on the devices most commonly used in the specific country. For example, in Canada, there is a high usage of desktops, while in India, 75% of users prefer mobile devices. This means that more attention should be paid to the mobile version and the most popular browser for that platform.
In the "Browser Market Share" section, you can see the most commonly used browsers for mobile devices, tablets, and desktops. This allows you to understand user preferences or filter by device type for more specific data.
3. Operating System Market Share
Data on operating systems help determine which guidelines are best to use: Windows / Android — focus on Material Design. macOS / iOS — follow Human Interface Guidelines.
In the "OS Market Share" section, you can view the most commonly used operating systems for mobile devices, tablets, and desktops. This helps you understand user preferences or filter by device type for more specific data.
4. Device Vendor Market Share
Each company has its own design guidelines that users are already familiar with. If your audience primarily uses mobile devices (for example, in India, where 75% of users prefer mobile), and you follow a mobile-first approach, it's important to provide a familiar user experience. Place elements where users expect to see them and avoid radical changes to minimize the time required to adapt to your product. If most of your users use Samsung devices, it might be worth considering the One UI design system, as users are accustomed to a certain interface look.
In the "Device Vendor Market Share" section, you can see the brand names for tablets and phones.
Conclusion
Adapting to the devices of your audience will help create a more convenient and effective interface that meets users' needs. Use Statcounter to make informed decisions based on real data and improve your product's user experience! However, it's important to keep in mind that while Statcounter provides valuable insights into your audience, the data may not be 100% accurate, as it depends on a sample of websites using this tool. Therefore, the results may differ from the overall picture, but they still offer useful guidelines for further improving your product.
