Setting Media Query Breakpoints
I am a big fan of using analytics to make informed decisions and it is an important tool in determining break-points in CSS media queries. In Google Analytics you can check those by visiting…
Audience > Technology > Browser & OS > Screen Resolution
I look through the top 100 resolutions and make sure there isn’t anything out really wacky, like a trend in huge or small screens, then design for the most common devices and that will also depend on the goals of the website. I group the most common resolutions together in the breakpoints using “max-width” and “min-width” in the media query to save time. There’s a popular saying about designing for mobile first, I don’t believe that is necessarily true, I’m always going to design for the user first. There are a lot of factors to consider when determining the breakpoints for the design, but the user, content, readability, and usability should be at the forefront when making those decisions.
On side-note resolutions change all the time and it’s a good idea to check these periodically. Below are the top 20 screen resolutions for one of my websites. 1366 x 768 has held the top spot since 2012, before that it was 1024 x 768. With smartphones and tablets outpacing computers to access the internet it will be interesting to see what resolutions will be in the top 20 in a few years. Regardless of resolution or device, its a safe bet to design user first.
- 1366×768 – (25.94%)
- 1440×900
- 1280×800
- 1280×1024
- 1600×900
- 1920×1080
- 1024×768
- 320×480
- 320×568
- 768×1024
- 720×1280
- 360×640
- 1680×1050
- 1280×720
- 1093×614
- 480×800
- 1536×864
- 1301×731
- 1360×768
- 1438×808