In responsive design, a breakpoint is the “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience. To make a website responsive, designers must add a breakpoint when the content looks misaligned. Depending on the number of devices the site is being aligned to, multiple breakpoints have to be set to ensure its responsiveness.
Design the content to fit on a small screen size first, then expand the screen until a breakpoint becomes necessary. This allows you to optimize breakpoints based on content and maintain the least number of breakpoints possible.
Best Screen Size to Design
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 optimize for your target audience’s most common resolution sizes
Do not design for one monitor size or screen resolution. Screen sizes and browser window state 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 sizes, which is why Hobo Web *used to* recommend a highly accessible liquid layout using percentage widths to control layout. Now the accepted recommendation is to have a responsive website template.
The three main criteria for optimizing 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.?
With a huge number of device targets and screen sizes across the Windows 10 ecosystem, rather than optimizing your UI for each device, we recommended designing for a few key width categories (also called “breakpoints“):
Small (smaller than 640px)
Medium (641px to 1007px)
Large (1008px and larger)
Despite this information, remember that there is no standard screen size for web design. Depending on the nature of the website, users might use certain devices that do not offer the screen sizes and resolutions mentioned above. To identify the right screen sizes for web design, invest in analytics. Find out what your target audience is most likely to use. If those devices don’t adhere to the aforementioned resolution, then include them in the mix.
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. Your page should score high on all criteria throughout the entire resolution range. Your page should also work at even smaller and bigger sizes, though such extremes are less important. Although such users should certainly be able to access your site, giving them a less-than-great design is sometimes an acceptable compromise.
Once a developer or designer knows the best screen sizes for responsive design, they do the work and create a responsive website. However, to ensure that the website actually renders the way it is meant to on the devices it has been built for, it needs to be tested for exactly that. An easy way to do this is to use a responsive design checker. Instead of running the website through individual devices with different viewports, enter the URL into the checker and see how it appears on a variety of the latest devices at different, frequently used device resolutions. The checker linked above offers responsive checking on the latest mobile devices such as iPhone X, Galaxy Note 10, iPhone 8 Plus, and more.