MD
Commonly 768px width.
Before you settle on basing design decisions on a handful of strict breakpoints, make sure you consider the vast fragmentation of screen sizes and browser viewports.
Here at Set Studio, we conducted a little casual experiment to answer “how fragmented are viewport sizes?”. We gathered over 120,000 datapoints with over 2,300 unique viewport sizes. The data mainly came from users in the USA and Europe, therefore it is not necessarily representative of a global audience, but still useful for this article.
The experiment only ran for 48 hours, but the data we got was pretty interesting. Let’s dive in and take a look.
It's important to understand just how many 120,000 is in relative terms. For comparison, let’s presume each datapoint is a person.
Wembley stadium has a capacity of 90,000, so our datapoints could fill Wembley once and still fill another third of the available capacity.
The population of our home town, Cheltenham, is around 116,000 so our datapoints could almost populate the entire town!
If we slice out the top 20 unique viewports from the gathered datapoints, it’s primarily small sizes. You could presume these are mobile devices — especially the top 10 — but it’s also worth considering that viewports vary on conditions too.
Even on one iOS device, there's a minimum of 3 environments a website could find itself in, based on operating system states.
This isn't a problem if you build in a fluid, flexible manner. That is illustrated in this diagram. If however, you tend to build with very specific breakpoints and hard values for typography, sizing and spacing, you might find that even with the best intentions, you’re not providing the optimal user experience.
Let's take an example of a “pixel perfect” UI with a fixed header and/or footer. It might look great when you shrink your development browser down, but how does it look in the conditions outlined earlier? How does it look when you visit from a tiny viewport like a smart watch? How does it look when you visit from a landscape phone?
Based on some of the combinations of aspect ratio and dimensions, we're confident those cases were represented in our data. Also, people told us too.
Before you commit to fixed headers and/or footers, consider how much content your users will actually be able to see in less than ideal conditions
We've only captured width and height for each datapoint for this experiment and these dimensions were gathered using window.innerWidth
and window.innerHeight
. We decided to treat any width greater than 800px as “desktop”, or as we prefer to call it, a large viewport.
You might be thinking “800px is way too small for desktop”, which if we were measuring screens, you would be right. We’re measuring viewports here though. A viewport is the window size of the browser, not the screen size.
If you’re on a desktop device reading this, how many windows are filling the entire screen? How much screen space does the browser you’re reading from take up?
It’s safest to presume that users on desktop or laptop devices are not filling their entire screen with a browser. Heck, even tablet users don't fill the screen with a browser, so make sure you consider that when figuring out your larger viewport designs — especially if you’re concealing content for small screens and showing it for “desktop users”. Ask yourself if needing to hide content for small screens and not larger screens means that content is as necessary as you initially thought.
Also consider the sheer fragmentation of “desktop” viewports when working with layouts. Yes, configuring layouts and font sizes using media queries might make sense if you’re using the classic 768px, 1024px and 1280px breakpoints, but what about the vast array of sizes in between?
Ok, we've passed on our advice but really, you're here to see a visualisation of the viewports aren't you? Your wish is our command.
Taking inspiration from the 2015 Open Signal report on Android screen fragmentation, we've laid the top 150 in a masonry layout. You can see all 2,300 too.
Commonly 768px width.
Count: 501
Percent: 0.42%
Commonly 1024px width.
Count: 367
Percent: 0.31%
Commonly between 1200px and 1300px width.
Count: 2566
Percent: 2.14%
1440px x 1024px
Count: 20
Percent: 0.02%
390px x 844px
Count: 36
Percent: 0.03% (this is full screen tho)
Just on width (390px) it's a much different picture.
Count: 14742
Percent: 12.29%
375px x 812px
Count: 0
Percent: 0%
Just on width (375px) it's a much different picture.
Count: 14557
Percent: 12.13%
The main point we’re trying to get across is that you simply do not know how users are going to visit your website or web app. Instead of making design decisions on strict, limited breakpoints, keep in mind the sheer amount of fragmentation there is in viewports.
Our recommendation to clients is always to be the browser’s mentor, not its micromanager. Create flexible rules and allow the browser to do what it does best: calculate the best outcome based on the conditions it finds itself in.
This goes all the way back to planning your projects too. When mapping out page content, ask yourself how it will be for the weird viewport sizes that don’t fit the typical mould? Always try to simplify and condense content to make it useful for everyone.
And finally, always remember that you do not know what conditions your website will be visited on and you have little to no control over that. Accept that lack of control and use the limitations to breed creativity and also, laser focus your UX work.
It’s certainly how we do it, here at Set Studio.
We help organisations set clear goals and deliver them with confidence, by helping them produce stunning websites that work for everyone.
We would love to help you produce stunning websites, too, so why not see what we're all about?