There’s no one best screen size to design for. Websites should transform responsively and fast at all screen resolutions on different browsers and platforms. Accessible. Mobile-friendly. Design for your audience, first. Design from 360×640 through 1920×1080.
Also:
- Design for desktop displays from 1024×768 through 1920×1080
- Design for mobile displays from 360×640 through 414×896
- Design for tablet displays from 601×962 through 1280×800
- Check Google Analytics and optimise for your target audience’s most common resolution sizes
- Do not design for one monitor size or screen resolution. Screen sizes and browser window states vary among visitors.
- Design should be responsive and fast. Use a liquid or responsive layout that transforms to the current user’s window size.
- Monitor Google Search Console mobile-friendly and usability alerts
Your website should still look good and work well at all screen sizes. The accepted best practice is to have a responsive website template.
Some key things to keep in mind when approaching responsive design are: using flexible grid-based layouts, using CSS media queries, being mindful of different aspect ratios and screen resolutions, and testing the website on a variety of devices.
The three main criteria for optimising a page layout for a certain screen size are:
- Web Page Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
- Web Page Readability: How easy is it to read the text in various columns, given their allocated width?
- Web Page Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly — that is, are captions immediately next to the photos, etc.?
Usability guidelines also recommended you consider all three criteria at the full range of sizes,. Check the browser window from 360×640 to 1920×1080 screen resolutions.