We are the part of the holding

Common Screen Sizes for Responsive Web Design

  • 12-13 min read
  • September 01, 2021
  • 👍 Rating — 4.8 (35 votes)

Imagine the situation when 5% of new website visitors use the latest iPad or iPhone but your website’s design is in the older version. The visitors expect your website to be responsive, and they are ready to go through a wonderful user experience. Because your design is outdated, the interface will be distorted, buttons poorly readable, and all essential elements like CTAs, links, or contact forms will expand beyond the screen sizes. Only think about this 5% of new visitors having a bad first experience. Are they willing to come back to your website? Most certainly is not. It can lead to dramatic effects on the website conversion and, therefore revenue. 

Since screen resolutions and devices are constantly changing, they demand quick and qualified updates and improvements. We want to show the latest screen resolution statistics and recommend best practices on implementing them into your design by this article. 

What is Responsive Web Design?

To begin with, we would like to define what responsive design is. Responsive web design is a design approach that lets you adapt the website content to diverse screen and window sizes like desktop, mobile, and tablet. This approach helps to visualize the screen look on different screens to make it responsive anyway. Responsive design also gives the ability to transform the content according to particular screen sizes. 

We offer you to watch a video where you can find more basic knowledge about responsive web design and see its examples.

Why does responsive design matter?

So why is it so essential to provide a responsive design of your content? Everything is pretty clear. Today people use different devices to surf the internet – laptops, computers, tablets, smartphones, smartwatches. There is no longer a need to create a single variant of web design. It should be variable and consider the screen size of these devices. You can not guess if your potential visitors will use a smartphone or a desktop version, so you need to create a responsive design to involve all visitors and make them stay on your website as users are not willing to get back to the website if they had a bad experience even one single time. The content should be engaging and easy to read. Otherwise, the number of visitors will be decreasing. 

📚
Related article
We also recommend you to check the article on How to Design a Successful B2B Website.

Responsive vs. Adaptive Web Design

As we have already mentioned, responsive design is an approach that adapts the content according to screen sizes. So here comes a question – what is the difference between responsive web design and adaptive web design? And the answer is that the adaptive design approach provides numerous versions of the same page to make it readable from different devices. The responsive approach renders and transforms the one version’s content to make it suitable for diverse screen sizes.

responsive vs adaptive web design

Let us conclude the main advantages of these two design approaches. 

Responsive design:

  • will be properly displayed on all available screen resolutions;
  •  the page content will load faster;
  • demands less time, costs, and efforts to create.

Adaptive design:

  • makes the website more convenient for users;
  • excellent usability testing that greatly influences website conversion.

Both of these approaches are frequently used for design creation, and they are essential but just different. Generally, responsive design has one template and renders it differently, and adaptive design has several templates and shows one that responds to users’ screen requests.

lamp

Responsive or adaptive?

What design type could suit your website better?

Common screen sizes

Further, we would like to bring the latest screen resolution statistics to your attention. We chose the period from January 2020 to January 2021.
Source: StatCounter

Desktop Screen Resolution Stats Worldwide

desktop worldwide 2020-2021

1366×768 22.6%
1920×1080 20.87%
1536×864 8.52%
1440×900 6.97%
1280×720 4.81%
1600×900 4.1%
1280×800 2.95%
1280×1024 2.65%
1024×768 2.59%
768×1024 2.47%

1280×720 is considered to be the most suitable screen resolution for the desktop website version. Usually, the desktop version provides the best user-experience and supposed to be the most convenient and wide.

Mobile Screen Resolution Stats Worldwide

mobile worldwide 2020-2021

  • 360×640 – 12.98%
  • 414×896 – 7.82%
  • 375×667 – 6.65%
  • 360×780 – 6.02%
  • 360×760 – 5.27% 
  • 375×812 – 5.15%

For mobile screen sizes, 360 and 375 widths are considered to be the perfect match. Thus, the content is well readable and convenient for users.

Tablet Screen Resolution Stats Worldwide

tablet worldwide 2020-2021

 

  • 768×1024 4- 6.11%
  • 1280×800 – 7.38%
  • 800×1280 5.9%
  • 601×962 – 5.15%
  • 962×601 – 3.52%
  • 810×1080 – 2.83%

What about the tablet screen resolution,  1280×800 and 768×1024 are the best choice. As we can see, the statistics match our architect’s decision.  It also depend on the tablet model and its screen size.

Desktop vs. mobile vs tablet worldwide

desktop vs mobile vs tablet

 

  • Mobile – 55.73%
  • Desktop – 41.46%
  • Tablet – 2.81%

Desktop Screen Resolution Stats USA

US desktop resolution 2020-2021

 

  • 1920×1080 – 20.66%
  • 1366×768 – 13.96%
  • 1440×900 – 9.16%
  • 1536×864 – 7.79%
  • 1280×720 – 4.74%
  • 768×1024 – 4.72%

Mobile Screen Resolution Stats USA

mobile us 2020-2021

 

  • 414×896 – 20.52%
  • 375×667 – 13.18%
  • 375×812 – 12.65%
  • 414×736 – 6.63%
  • 360×640 – 5.41%
  • 412×869 – 3.67%

Tablet Screen Resolution Stats USA

tablet us 2020-2021

 

  • 768×1024 – 50.14%
  • 800×1280 – 7.07%
  • 1280×800 – 6.55%
  • 601×962 – 6.03%
  • 810×1080 – 3.7%
  • 962×601 – 3.27%

Desktop Screen Resolution Stats UK

desktop resolution uk

 

  • 1920×1080 – 24.28%
  • 1366×768 – 15.29%
  • 1440×900 – 10.45%
  • 1536×864 – 8.89%
  • 1280×720 – 5.68%
  • 768×1024 – 5.52%

Mobile Screen Resolution Stats UK

mobile resolution uk

 

  • 414×896 – 16.73%
  • 375×667 – 14.47%
  • 375×812 – 8.65%
  • 360×640 – 7.12%
  • 360×780 – 5.62%
  • 412×869 – 4.4%

Tablet Screen Resolution Stats UK

tablet resolution uk

 

  • 414×896 – 16.73%
  • 375×667 – 14.47%
  • 375×812 – 8.65%
  • 360×640 – 7.12%
  • 360×780 – 5.62%
  • 412×869 – 4.4%

Responsive design examples

We would like to present several examples of responsive design of the website that we all know and use constantly. 

New York Times Website

The New York Times is a worldwide top newspaper. Of course, they should have provided suitable screen size for different devices, particularly desktop, tablet, and mobile. The interface looks like a traditional newspaper – white background and black script. This classic combination is easily readable from different devices. The navigation also differs – the desktop version shows the entire menu on the first screen; in the tablet and mobile version, the menu is separated in the side columns providing a more convenient user experience. 

Amazon e-commerce Website

Amazon is a worldwide e-commerce leader. As thousands of people worldwide visit Amazon, it is a crucial condition for them to provide a variable interface that is readable from any device. The amazon website versions have several differences according to screen resolutions. Mobile and tablet versions have smaller content packages, and some navigation buttons are removed to a side column.

YouTube

Youtube is the number one online service to watch any videos you want. Each user sees a particular list of videos that match their interest or recent searches. All their versions are supposed to be convenient. As usual, the main difference in version is navigation. The desktop version has enough space to show the menu from one side. Desktop and mobile versions have separate tabs with subscriptions, recommended videos, etc. The mobile version is extremely convenient as the app menu is located close to thumbs.

How screen resolution affects professional designers?

Screen sizes remain to be a web design component that definitely worth considering. The common screen resolutions constantly change as web technologies continue to progress every day. So a web designer has to possess best practices suitable for a particular audience. 

Depending on clients` preferences, the ways of reaching the visitors and what experience they will have defines the future design – responsive or adaptive. It is impossible to say what way is the best for use as both of them have their pros and cons, as they suit different websites and industries. However, device resolution is crucial to consider as you can not predict what device your visitors will use to surf the website.

📚
Related article
 

Best common sizes for desktop, mobile, and tablet screens

Our dedicated CSS developer provides the top common sizes for different website versions, particularly desktop, tablet, and mobile.


Desktop resolution
As for the desktop version, the best choice is the 1280×720 screen resolution. It is a minimal size for desktop devices. Usually, the desktop version is user-friendly and perfectly readable if the screen resolution width is more than 1280.
Tablet resolution
The tablet screen resolution varies between 1280×800 and 768×1024. The last one is a tablet portrait view, and the 1024×768 size is consequently landscape orientation. Therefore, the tablet design should be performed on the resolution with the width of 768px.
Mobile resolution
The minimal mobile screen resolution is 320px in width that is suitable for iPhone 5\SE. For the latest version of smartphones, screen resolution depends on the target audience. So it can be 320, 360, or 375 in width. For example, it is for iPhone8 or iPhone X.

Best practices for implementing responsive design

To design the website using a suitable design approach, it is better to research the most successful practices for implementing responsive design. Here below, you can find the list of the key design practices:

  • Define your breaking point

Breakpoint defines in what way the content and design will be adapted to provide an excellent user experience. Usually, breakpoint marks the disharmony between content and screen resolution. The number of breaking points depends on the number of devices and their screen sizes to monitor if it provides responsiveness. 

  • Create variable designs

Each design mockup needs to have the ability to change and extend. When a design is fixed, the screen view can be warped. A designer has to be 100% sure their layouts are perfectly sized according to a particular device.

  • Minimize the differences

Despite the various devices, the interface has to stay the same and contain a minimum of differences between versions. The easiest mockup is a desktop version, as it provides enough space for the reading of all elements. Talking about tablets and mobile screens demands major attention as there can be less space to render each element correctly. 

  • Mobile is the priority

As we have already mentioned, due to smaller screens of mobile devices, the possibilities of differences are more likely to happen. So it is better to design a mobile version first that narrows the desktop one.

  • Widen the functionality

We all know that it is not really convenient to type on the mobile version to search for something or log in. It is more useful to add functions of QR codes, fingerprints, or face ID for authorization. Responsive design is all about simplifying the user experience. 

  • Testing is crucial

Testing is one of the most important steps in the development process. To ensure that the design is responsive and properly displayed on different screen resolutions, you need to test it using responsive design checking tools. 

📚
Related article
Pay attention to our blog article where we described 2 Different Ways to Convert a Website to an App.

Tools to test website for different devices friendliness

We prepared the best tools to test the website for different device friendliness that are actively used in our company. 

Browser Shots

Browser shots are considered to be a classic testing tool to monitor if the device interface is user-friendly. This is an online service that gives the ability to make screenshots as quickly as possible in any version you would like to see. These screens help to check if there are any errors or misalignments. Browser shots are a completely free and simple in-use testing tool. However, this tool is suitable for simple content, so if the website is more interactive, you’d better find another testing tool. 

Browser Serling

Browser Serling is one more online screen resolution testing tool. This service provides full interaction with the website, meaning not only showing the interface but testing its functionality. Here you can choose any version you would like to see and start page rendering. Even though the tool is free, you will have to wait for your turn as the number of active users can vary. 

Browser Stack

Browser Stack is a cloud testing tool for checking the web and mobile interface friendliness on desktops, tablets, and smartphones. The web version can be easily tested in various browsers and the mobile version on different mobile devices and operating systems – iOS and Android. 

📚
Related article
Our blogpost on Website Redesign ROI is a must-read for you. Click the link!

How to make your website mobile friendly?

The interaction between user and interface should be considered. Meaning, all buttons and links should have suitable and convenient sizes to provide easy and accurate clicking for users. Navigation is a crucial component and depends on a particular website and its services. There are several popular navigation examples like:

  • hamburger menu
  • tabs panel
  • separate page

For the website’s mobile version, scripts should be well readable and bigger than the web version has. The Mobile version demands a high page load but should be thrifty according to traffic. Pictures adaptations are essential as well, and all images at high resolution should shrink on a mobile screen.

FAQ

Responsive testing provides website scalability and automated matching the sizes of different device screens. Consequently, it positively influences the user experience and builds a great brand reputation.
There is a wide range of responsive design testing. Our specialists usually use three of them: Browser Shots, Browser Serling, and Browser Stack. All you need to do is to copypaste the URL and sign up for the page you want to check.
The variety of devices is wide and constantly updating. Among the most popular website testing devices are iPhone 8 and iPhone X, Samsung Galaxy S8, and GooglePixel. All these devices are usually available in online testing tools.

To end up

Correct screen resolution selection is possible only through intensive testing. Before the design release, you make a 100% effort to provide your page content’s readability and scalability. Due to the appearance of new devices and screen sizes, the website design should respond to these changes and improvements. We recommend you stop wasting your time and losing your potential clients. Contact our specialists right now to start building a responsive design for your solution. We ensure you will get an individual approach and creative solution for your website as we know how to make it more profitable for you.

lamp

Time to make your web design responsive

Want to discuss the building of responsive design for your website?

Creator

Due to my Master`s Degree in journalism, I focus on the details while doing the research on the topic. My particular curiosity is about the latest mobile app developments that start in 2015 that make life easier and save much time to spend it more productive. I am an expert in reviewing and consulting web projects related to web applications, especially if they are connected with wearables.
Yana

Expert

Yana is both a picky and thoughtful perfectionist, able to concentrate not only on the general looks, but also on the functionality itself. She plans the layouts, creates highly intuitive designs using her extreme expertise in psychology, handles user experience practices and utilizes user behavior knowledge. Extreme care, harmony, and taste will always give away the work of Yana.
Leave a comment

How can we help you?

  • Indicating scope, timeframes, or business challenges would allow us to provide a better response
  • Our expert team will get back to you within 24h for free consultation
  • All information provided is kept confidential and under NDA

Looking forward to your message!

spinner