What are best practices for determining responsive design breakpoints?

Question

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.)

Answer 1

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.

Answer 2

Personally when it comes to break points, I start mobile first (as you always should), then I use the following:

@media all and (min-width: 321px) {
    // 321px and up
}

@media all and (min-width: 641px) {
    // 641px and up
}

@media all and (min-width: 769px) {
    // 769px and up
}

@media all and (min-width: 1025px) {
    // 1025px and up
}

@media all and (min-width: 1201px) {
    // 1201px and up
}

These work absolutely perfectly for 99% of the sites I design. Obviously, sometimes there are times where the design needs altering based on the orientation of the device (portrait or landscape) at which point I will just add them in where needed. There are also other times where the device needs to change at a breakpoint larger or smaller than the conventional ones due to the design looking incredibly messy. In some cases it comes down to the particular site you are working on.

Hope this helps a bit!