What are best practices for determining responsive design breakpoints?


I've done a lot of research trying to figure out where to put my breakpoints for designing a responsive site. There seem to be at least three, maybe four common plateaus: phone, tablet, and two desktop (normal and gigantic). What I'm not seeing is a consensus on what those points are. 320 or 480 for phones? 768 for tablets? What for desktops?

What method do I use to determine what good breakpoints will be for my site? (Assume it's a new site so I don't have analytics of previous visitors.)

10/3/2014 11:21:00 PM

Accepted Answer

I think there's two popular ways to approach this: device-dependent breakpoints and design-dependent ones. While I do try to build my CSS from mobile on up towards large screens, I don't pre-define breakpoints.

I start with as many intrinsically responsive elements as possible anyway, making use of the inherent property of block-level elements to try to fit in their containers and using min-width and max-widths and percentages (and recently viewport units) on top of that.

Only then will I start resizing the browser from small to large, and as soon as I hit a point where an element starts to look like it shouldn't, I introduce a breakpoint. I might group a few if they're within like 20 pixels of each other, but after that I'll happily create a new breakpoint.

Most projects I work on end up with 3-6 breakpoints, each with a small handful of selectors. Sometimes even just one selector in a breakpoint to adjust that one element after a certain width. I never predefine them though.

In short: I let the design decide the breakpoints, not the device. Each design is different.

For further reading I recommend this blog post.

10/6/2014 2:50:00 PM