Let's be honest. Choosing CSS breakpoints often leads to more than enough breakpoints and a boat-load of related bugs in development. Today I want to shed a little light on how to choose breakpoints and implement a pragmatic set of breakpoints.
With one of my customers I was looking at the very same design problem, when I took over UX and Design work a few weeks ago. They are step-by-step changing their e-commerce site to full-responsive. For their new responsive pages they are using five breakpoints. But actually most pages just need three.
Now, if you are working on some highly specialized know-client (!) web software, you might want to optimize for special viewports, otherwise you will be safe with the following:
This image is a 0.5 scale of a possible 1600px wide screen/browser window. The black lines indicate breakpoints with problems attached. The blue background indicates a pragmatic solution.
You only use min-width media queries. In almost all cases you can work with these. In very few cases you may use max-width media queries; but this should be prevented for performance and maintenance reasons.
Your default media query is mobile. This way light-hearted mobile devices do not have to analyze too much code. As devices get bigger, they usually have more power too. You don't need to make multiple mobile breakpoints. There are very few devices between ~420px and 768px screen width; just make sure your site does not look totally broken. This viewport usually has a one column design anyway. I call this the smartphone viewport.
Next up are tablets in portrait mode. Again, you don't media query the screen direction: Only work with the screen width. Content will fall into place below. Define a min-width 768px media query. Here developers will add rules that change the layout, based on what we have defined (or not defined) in the smartphone viewport; don't repeat yourself.
When users turn their tablets to landscape mode, these are mostly in 1024px width. This is you next breakpoint. It is designed for tablets and small computer screens. Again, developers will add rules that need to change, based on all previous media queries above.
Last but not least is a 1440px breakpoint for those larger computer screens that are around these days. This is usually where you define a maximum width for the entire page and it's content (mostly centered or from left).
A typical CSS file looks like this:
- Styles for smartphone viewport
- min-width 768px (optional)
- min-width 1024px (optional)
- min-width 1440px (optional)
By the way: I am recommending component based design like atomic design. This will enable you to define styles in a small scope, reuse them often and save time, when changes need to be made.
Hope this helps. Feel free to contact me, if you found this helpful or have questions.