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.

  1. 1366×768 – (25.94%)
  2. 1440×900
  3. 1280×800
  4. 1280×1024
  5. 1600×900
  6. 1920×1080
  7. 1024×768
  8. 320×480
  9. 320×568
  10. 768×1024
  11. 720×1280
  12. 360×640
  13. 1680×1050
  14. 1280×720
  15. 1093×614
  16. 480×800
  17. 1536×864
  18. 1301×731
  19. 1360×768
  20. 1438×808