What is the ideal screen size for a responsive design | BrowserStack (2023)

As of 2020 there are3.5 billion smartphone usersin the world. That is45% of the world population. As of 2019, people accessed the internet withMore than 9000 different devices. Every user expects every website they access to render perfectly on their mobile device. This means that website developers need to design websites that display on multiple screen sizes around the world.

In other words, they need a responsive design.

But as any designer knows, implementing responsive design has to start with knowing what screen sizes to design for. This article explores this question and discusses the best screen sizes for responsive design.

Was it a responsive design?

responsive web designrefers to a design strategy that creates websites that work well on mobile, tablet, and desktop. Websites without a responsive design risk alienating a significant number of users:80% of usersindicated that it rejects websites that do not work well on their devices.

In addition, Google takes into account "optimization for mobile devices" as a ranking parameter. to quote thatGoogle Webmaster Center Blog,

„Starting April 21, 2015, we will expand our use of Mobile Friendly as a rating signal. This change affects mobile search in all world languages ​​and has a significant impact on our search results. As a result, users find it easier to get high-quality, relevant search results that are optimized for their devices..“

How do I find the ideal screen size for a responsive design?

Supervision:To understand why responsive design is critical to website success, one must understand the huge and growing nature of device fragmentation.Download our ebooksee Device Fragmentation for the latest information on this phenomenon.

Global Mobile Screen Resolution Statistics: September 2021 to September 2022

image source

Common screen resolutions for mobile devices:

• 360 × 800 (8,56 %)
• 414×896 (6,95%)
• 360×640 (6,45%)
• 412 × 915 (4,77 %)
• 390×844 (4,75%)
• 360 × 780 (4,56 %)
• 375 × 667 (4,43 %)
• 375 × 812 (4,35 %)
• 360 × 760 (3,84 %)
• 393 × 851 (3,56%)
• 393 × 873 (3,13%)
• 412 × 892 (2,74%)
• 428 × 926 (2,4%)
• 360 × 720 (2,23 %)
• 385 × 854 (2,14 %)
• 412 × 869 (2,14 %)
• 414 × 736 (1,94 %)
• 412 × 846 (1,78 %)
• 360 × 740 (1,64 %)
• 384 × 854 (1,3%)

Please note that users switching from smaller screen sizes (393*373) have decreased. Even if there's a dip, that's a very important mobile screen size to achieve, most of the audience stays there. Would you like to check how your website looks in this resolution?check it now.

Worldwide Screen Resolution Statistics: September 2021 to September 2022

image source

According to the worldwide screen resolution statistics (September 2021 to September 2022), the most common screen resolutions on mobile, desktop and tablet devices are:

• 1920×1080 (9,94%)
• 1366 × 768 (6,22 %)
• 360 × 640 (5,88 %)
• 414×896 (4,21%)
• 1536×864 (3,94%)
• 375 × 667 (3,74 %)

Of course, the emphasis on mobile usability doesn't mean anyone will abandon desktop devices. As the chart below shows, desktop devices still account for a significant portion of Internet usage.

Desktop, Mobile and Tablet Market Shares Worldwide: September 2021 to September 2022

image source

RespectivelyMicrosoft Documentation,

With a large number of target devices and screen sizes across the Windows 10 ecosystem, instead of optimizing your UI for each device, we recommend designing for a few key width categories (also known as "breakpoints“):

• Small (less than 640 pixels)
• Medium (641px by 1007px)
• Large (1008px and larger)

Despite this information, keep in mind that there is no standard screen size for web design. Depending on the nature of the website, users may be using certain devices that do not support the above screen sizes and resolutions. Invest in analytics to determine the correct screen sizes for web design. Find out what your target audience is likely to use. If those devices don't meet the mentioned resolution, add them to the mix.

Check website responsiveness for free

Best practices for implementing a responsive design

Making a website for different screen sizes is much easier with the following guidelines:

• Know your breakpoints: In responsive design, a breakpoint is the "point" at which a website's content and design are adapted in a specific way to provide the best possible user experience. To make a website responsive, designers need to add a breakpoint when the content appears misaligned. Depending on the number of devices the website is targeting, multiple breakpoints must be set to ensure its responsiveness. See this article aboutsensitive breakpointsto know them and their effectiveness in detail.
• Create flowing layouts: Fluid layout refers to a layout that can change (expand and contract) to fit the viewport of the device it runs on. A fixed layout layout will distort undesirably in all viewports with which they are not aligned. Work on layout layouts with percentage units and maximum widths to ensure the layout fits in mobile viewports without becoming too wide in desktop viewports.
• reduce friction: It basically means that the theme should be easy to use on multiple devices. Responsive design involves not only how a website looks, but also how it works in terms of accessibility and usability. Pay particular attention to the friction of small screens, as web parts have less space to display as screen size shrinks and are more likely to blend and distort.
• Design first for mobile devices: Since scratches are more likely to occur on smaller screens, consider designing with amobile boarding first. It is more difficult to restrict the layout of a workspace to a floating window, while it is easier the other way around. When designing mobile first, the designer considers what is absolutely necessary to provide the best user experience.

Here are some ways to use the mobile-first theme to accommodate more screen sizes:

1. Prioritize important menu options
2. Eliminate all visual distractions
3. Optimize the layout to play it: make everything easy to play
4. Eliminate unnecessary forms and information fields
5. Highlight the main call to action
6. It offers prominent search and filter features.

• More functionality, less typing: Obviously, typing on mobile is more difficult than on computers. So it makes sense to minimize typing on mobile versions of websites. Replace typing with mindful use of device features like GPS, QR code scanning, biometric identification, and more. Make it easy for users to share, email, or call relevant numbers by placing links that launch the required functions. Remember that the best responsive design is to simplify and eliminate cumbersome mobile interactions.

Although responsive design may seem difficult, the information in this article is intended to make the process easier for both developers and designers. By doing the above, it becomes much easier to create websites that appeal to your target audience, no matter what device they use to access that website.

How to test responsive design in real browsers and devices

Once a developer or designer knows the best screen sizes for a responsive layout, they do the work and build a responsive website. However, to ensure that the website actually displays as intended on the devices it was built for, it should be tested on that.

A simple way to do this is to use aResponsive Design Checker. Instead of running the website on individual devices with different views, enter the URL into the checker and see how it appears on a variety of newer devices with different resolutions from commonly used devices. The scanner linked above offers responsive scanning on the latest mobile devices like iPhone X, Galaxy Note 10, iPhone 8 Plus, and more.

Plus, use the BrowserStack cloud to see how a website is rendering on 3,000+ mobile and desktop devices. Simply sign up for free, select the device you want, navigate to the site and see how it appearsactual conditions of use.

Try Responsive Checker for free