Six breakpoints and a prayer

There’s a block of CSS I have copied into the top of a stylesheet on probably 15 projects. You know the one. It’s 4 or 5 media queries with comments above them saying which device each one is, phone and tablet portrait and tablet landscape and desktop, and the numbers are 320 and 480 and 768 and 1024.

I copied it because everybody copied it, and everybody copied it because those were the actual dimensions of the actual iPhone and the actual iPad in about 2011. Which is a completely reasonable basis for a decision in 2011 and a completely unreasonable one now, and the transition between those two states happened without anyone announcing it.

Sent from my iPhone

I built a site in the spring that looked fine on everything at home but wrong on the client’s phone, and the reason was that their phone was 360 wide, not 320. Forty pixels of difference, which sat in the gap between two of my breakpoints, and the layout in that gap was a thing I had never once looked at because there was no device in my list that lived there.

And that’s the actual problem with device breakpoints. It isn’t that the numbers are wrong, it’s that a list of devices tells you where to look, and everywhere you don’t look is untested by construction. The design was broken at 360 the whole time. I just had no reason to drag the window to 360.

Then I went and looked at the numbers properly and it got worse. There are Android phones at 360 and 384 and 412. Tablets at 600 and 601 and 800. Phablets, which is a word we’re apparently doing now, sitting right in the middle of what I’d labeled “tablet portrait.” The iPhone that came out last year is taller but not wider so it doesn’t even show up as a new number, and rumor has it that the next ones are wider which will move everything again.

There is no list. There was never going to be a list. I was maintaining a taxonomy of a thing that doesn’t hold still.

A list of devices tells you where to look, and everywhere you don't look is untested by construction.

No more lists

The alternative I keep seeing described, and I’ve now done it on two projects, is so simple that it feels like it’s missing something.

You start narrow. You drag the window wider. At the point where the layout starts looking bad, you put a breakpoint there. Then you keep dragging.

That’s it. The breakpoints end up at numbers like 620 and 940 and one memorable one at 1123, and they don’t correspond to any device on earth, and that’s the point. They correspond to the width at which this particular line of text gets too long, or this particular nav runs out of room. Different components break at different widths, because they’re different components.

_nav.scss

/* Nav goes horizontal when the six items stop
   wrapping, which happens at 46em on this typeface. */
.site-nav {
  display: block;
}

@media (min-width: 46em) {
  .site-nav {
    display: block;
    overflow: hidden;
  }
  .site-nav__item {
    float: left;
  }
}

SCSS

Two things I’ve picked up doing this. The first is that em-based media queries behave better than pixels when somebody bumps their default font size, because the query scales with the text rather than ignoring it. It’s the same behavior you get from zooming, and browsers handle it more consistently than I expected.

The second is that the comment matters more than the number. 46em means nothing to me in six months. “The nav stops wrapping here” means something forever, and it tells the next dev what to check on if the nav gains an item.

Min-width, and doing it in the right order

The other thing that fell out of this is that I stopped writing max-width queries.

If you start from the desktop layout and write max-width queries to walk it back down, then the small screen, which is where most of your traffic is and where the network is worst, has to parse and then override the whole desktop stylesheet. Everything is a correction of something and you can feel it in the code, like there’s a lot of resetting things to auto and none and static.

Going the other way, the base stylesheet is the small one and every query adds rather than undoes. Which is nicer to read, and also happens to mean IE8 gets the mobile layout, since it ignores media queries entirely and just takes the base styles.

The honest caveat

I want to flag the thing this makes harder, because most posts about this don’t.

Device breakpoints are terrible for the reasons above, and they are easy to talk about. You end up with three designs, phone and tablet and desktop, and everybody knows what’s being agreed to. Content breakpoints don’t give you that. Nobody comps a layout at 620. So you end up making a lot of small calls in the browser that nobody signed off on, and if you have a client where the comps are the contract, that’s a genuine friction and not a hypothetical one.

I don’t have a clean answer. What’s worked on the two projects is showing the client the thing in a browser early and dragging the window in front of them, which turns “here are three pictures” into “here is the actual product.” That sounds like a process win and it mostly is, but it’s also just the honest version, and I’d prefer to have the awkward conversation sooner rather than later.

So, no list of numbers in this post, sorry. That’s kind of the whole thesis. The numbers come out of the content and the content is different every time, and the tool for finding them is the corner of your browser window, which you already have.