Which screen sizes to design, build and test on is a perennial topic in web development. While well-built responsive websites will work at any size, during development it's easier to use a small number of sizes to check with (even in Polypane!)
But what sizes to use? There's a number of different approaches we'll go over in this article, all updated to be relevant in 2022.
- Base it off device groups: mobile, tablet, laptop and desktop.
- Use the breakpoints from popular CSS frameworks.
- Using the dimensions your visitors use.
- Using the most used breakpoints of 2021.
Based on device sizes
There's mobile phones, tablets, laptops and desktops, so if you use size for each of that category, you cover them:
| Name | Width |
|---|---|
| Mobile | 375px |
| Tablet | 768px |
| Laptop | 1280px |
| Desktop | 1920px |
This gives a good overview, but you run the risk of missing the in-between sizes, smaller than 375px and between 900 and 1000px wide.
Both of those are often forgotten, but still see quite a bit of real-life usage. The first one in older mobile phones, and the second one on tablets, laptops and desktops in unmaximized browser windows.
Based on popular CSS frameworks
We've written about the breakpoints that popular CSS frameworks use before. These are excellent when you're also using the rest of the framework, or as a starting-off point. For example, here's the breakpoints in Tailwind CSS 3.0:
| Name | Width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
This gives a nice spread, though with a relatively high starting point you run the risk of having to do extra work after implementing the design to make sure everything fit on mobile devices.
Based on your visitor data
If you use Google Analytics, your visitors browser dimensions are stored as well. This means you can retrieve them from the Google Analytics dashboard and use those to test on.
For example, here's the 5 most used dimension on this site:
| Name | Width | Height |
|---|---|---|
| 4.55% | 1900px | 940px |
| 2.13% | 1900px | 970px |
| 2.02% | 1520px | 750px |
| 1.99% | 1350px | 660px |
| 1.95% | 1350px | 630px |
While you can use the above it's important to realize that our audience probably isn't your audience. Polypane is a tool for web developers, so the vast majority of our visitors are viewing our site on a desktop device, and fairly large ones at that.
Notice too that none of the most popular sizes here map to the traditional device widths mentioned above. Every audience is different, and it's best to cater to yours.
Create a Polypane workspace based on Google Analytics
You can also use our GA workspace creator to automate the process, select how many panes you want and how to sort them, and then opening them in Polypane with a single click.
The breakpoints we tested in 2021
That leaves us with the last method: using the breakpoints that have been used the most in 2021. For that we can use two sources: the Web Almanac and Polypane.
From the Web Almanac
The Web Almanac analysed 8.2 million websites, old and new, to make an overview of the most used web features, including breakpoints. That also includes all the sites in the web almanacs testing data that existed (well) before this year.
It has a chapter on CSS that includes a list of common breakpoints. It's worth reading the analysis: they make a split between min-width and max-width media queries because you can see a clear difference in sizes used (min-width is more often used for 767px while max-width for 768px, for example). We're splitting those out in the overview below as well, as they give a nice contrast.
Min-width
| Name | Width |
|---|---|
| 57% | 768px |
| 44% | 1200px |
| 40% | 992px |
| 31% | 600px |
| 25% | 782px |
| 24% | 480px |
| 16% | 1024px |
| 9% | 767px |
| 8% | 800px |
| 3% | 991px |
Max-width
| Name | Width |
|---|---|
| 52% | 767px |
| 38% | 600px |
| 38% | 768px |
| 36% | 480px |
| 30% | 991px |
| 27% | 1024px |
| 26% | 800px |
| 18% | 1200px |
| 13% | 992px |
| 10% | 782px |
When it comes to the difference between min-width and max-width, apart from the 1px differences here and there, is
that the spread for max-width is much more diverse. For min-width, the top 10 goes from 57% usage to 3%, while max-width starts lower, at 52%, and ends higher, at 10%.
Min-widths means you're adding styling as you get wider, while max-widths usually disable styling as they get smaller. Because of this, you frequently need less min-widths, and your styling works for a longer time before you need a new breakpoint.
The most-used breakpoints in Polypane in 2021
We can also look at the most used pane sizes in Polypane in 2021. The sizes that real developers have used the most in the past year to develop websites with.
This gives the most accurate look at what sizes modern sites are optimized for. Here is the top 10 for 2021:
| Name | Width |
|---|---|
| 5.48% | 320px |
| 4.49% | 1280px |
| 3.41% | 768px |
| 2.41% | 1920px |
| 2.19% | 500px |
| 1.89% | 568px |
| 1.86% | 800px |
| 1.81% | 375px |
| 1.69% | 1024px |
| 1.25% | 1440px |
If we look at these sizes we see a nice spread between device sizes, breakpoints from CSS Frameworks and the many presets that Polypane ships with.
The breakpoints to develop on in 2022
As you can see from the relatively low percentages, there are thousands of other sizes being used in Polypane. There is no single right set of dimensions.
So the best answer? Pick a set you like and adapt it. Any of the ones on this page are a good choice.
If you notice you often make errors at a size you're not currently developing for, make sure to add it. And if you find yourself fixing the same issue at multiple sizes, maybe you can hide one of them during development.
Regardless of which default sizes you choose to develop on, it's best to see all of them in one overview. That's what Polypane lets you do. All the other parts of your browser are synced as well: your interactions happen in all panes, our elements panel lets you edit and inspect elements in all
panes at the same time, and our console intelligently combines messages from each pane.
Polypane has a free 14 trial available. Check it out!
Top comments (0)