21

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

migrated from webdesign.stackexchange.com Oct 3 '14 at 22:56

  • You should design for mobile first, and then implement a breakpoint whenever your design breaks as you scale your site up to larger sizes/resolutions. – TylerH Sep 23 '14 at 21:22
  • @TylerH Yes, but what resolutions? How do I know if my 320px phone is the right choice vs. a 420px phone? I'm asking about methods of determining numbers. – Lauren Ipsum Sep 23 '14 at 23:16
  • 1
    You don't worry about specific device resolutions. Worrying about that for mobile is a lost cause before you've even started. Develop for the smallest screen size you care about, and then drag your browser window to make it bigger, until stuff looks weird/bad/spaced out. That resolution (whatever it is, 800x600, 548x908, 81x14, doesn't matter) is where you make your first breakpoint. Rinse, lather, repeat. – TylerH Sep 23 '14 at 23:30
  • Off-topic: First off, LOVE the name. Haha. Back on-topic: While you stopped my answer with 'no analytics' Stephan and @TylerH are basically, correct. Let the design guide the process. I start with the smallest screen size I care most about first , and then work my way up. If you do it right, it should work out just fine. – Oberst Sep 25 '14 at 22:24
  • 1
    Advice from Google: developers.google.com/web/fundamentals/layouts/rwd-fundamentals/… – Dom Nov 7 '14 at 10:23
14

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.

  • 3
    It's also important to mention that developer's efficiency and a site's consistency come into play. Sometimes developers are crunched for time in which case using pre-made breakpoints may make sense. In every case, breakpoints should be as consistent as possible among pages of a website and usually consistent across networks of websites – Zach Saucier Sep 23 '14 at 21:39
  • 4
    I also apply the mobile first way and I think @andy covers the most common breakpoints. But most of the time I also apply a max-width breakpoint (< 768) for a lot of mobile-only styles (specific mobile header & navigation stuff for example). This way these styles don't have to be overwritten at the desktop-breakpoints later on. – AdmireNL Sep 24 '14 at 8:52
7

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!

  • 3
    How did you choose these breakpoints? Why 320 and not 480? – Lauren Ipsum Sep 23 '14 at 20:57
  • 1
    @LaurenIpsum because the 480 falls between 321 and 641. A lot of the time the 321px rule makes the landscape iphone work just fine. If it doesn't, i'll add a landscape query in. I chose these breakpoints after a lot of personal trial and error and found that they work fine for all the sites i build :) – Andy Holmes Sep 23 '14 at 21:08
  • I'm lost at the 1025 vs 1201. Is 1025 for landscape specifically? I can't think of another reason to differentiate above 1000px. – Scott Sep 23 '14 at 21:51
  • 2
    Okay.. so 1201 is purely your choice and not rooted in any specific reasoning beyond your own preference. Thanks. – Scott Sep 23 '14 at 22:29
  • 1
    That's right yeah :) Tried to get that across by saying "personally" haha – Andy Holmes Sep 23 '14 at 22:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.