The breakpoints we tested in 2021 & 2022, and the ones to test in 2023

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 and 2023.

1. Base it off device groups: mobile, tablet, laptop and desktop.
2. Use the breakpoints from popular CSS frameworks.
3. Using the dimensions your visitors use.
4. Using the most used breakpoints of 2021 and 2022.

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:

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:

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. If you want an overview of them, generate your own browser size wall.

For example, here's the 5 most used dimension on this site:

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 and 2022

That leaves us with the last method: using the breakpoints that have been used the most in the past years. For that we can use two sources: the Web Almanac and Polypane.

From the Web Almanac

Each year, the Web Almanac analyses over 8 million websites (8.2 in 2021, 8.3 in 2022) 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-widths for 2021 and 2022

Between the two years the order of these stayed the same (remember, most of those 8 million websites were created before 2021). There are some percentage point changes her and there but nothing worth calling out.

Max-widths for 2021 and 2022

Likewise for the max-widths there was no change in the order of these and there were slight changes in the percentages.

Comparing min and max widths

When it comes to the difference between min-width and max-width though, apart from the 1px differences here and there, an interesting difference appears: the spread for min-width is much wider. 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.

In addition, when using min-widths you are more likely adding breakpoints based on the content. With each website's content breaking in different places, that means that the number of different breakpoints will be higher.

The most-used breakpoints in Polypane in 2021 and 2022

We can also look at the most used pane sizes in Polypane in 2021 and 2022. 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:

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.

And here is the top 10 for 2022:

These percentages are very different from 2021. That's because as Polypane has grown over the years, so has the diversity of breakpoints people use to test.

We love this because it means people are increasingly letting go of designing for devices in favor of picking breakpoints that work for their content.

The breakpoints to develop on in 2023

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 trial available, click the link below to sign up!