Where And How To Set Breakpoints In Media Queries

Flexible layouts work well to a point, but there comes a time when we need a more drastic change than simply allowing design elements to expand and contract. There comes a point where we need the ability to make larger changes in how elements flow within a design. Enter media queries. Now with official W3C goodness.

If you know your responsive design basics there are 3 ingredients to a responsive site.

  • Flexible layout
  • Flexible media
  • Media queries

Over the last couple of months I’ve been talking a lot about the first 2. It’s finally time to talk about the 3rd. The basics are easy and I’ve covered them before. However there are some decisions you need to make when using media queries, specifically how and where to set your breakpoints.

Screenshots of Piano Lessons Notingham website at various breakpoints

Media Query Basics

In some ways media queries are similar to the browser detection we did years ago. The major exception is they work better and are simple to implement. Instead of complicated Javascript we now have a simple css declaration to test various conditions.

1
2
3
@media screen and (min-width: 768px) {
  selector { property: value; }
}

You’ve likely seen this before, but in case you haven’t the above is checking to see if the browser width is at least 768px wide and if it is the css inside is applied.

While we have a few things we can test for, we’re still somewhat limited and most media queries tend to be a test against min or max width. The CSS4 editor’s draft adds a few things and I’m sure in time the list will continue to grow.

Browser makers are also working on devicePixelRatio, which can also be queried through Javascript.

A skateboard broken in half and sitting on a blue background

Setting Breakpoints

Where to set breakpoints is the big question with media queries. First thoughts are usually to choose breakpoints based on the size of popular devices. For example since the iPad has a screen width of either 768px or 1024px you’d set a breakpoint at each. This doesn’t make sense. The iPad, while popular is but one device. There are countless others and we may not be sure what device is being used to access our content.

If we’re trying to set breakpoints based on all the devices out there, it defeats the whole point of why we’re designing responsively in the first place.

Min or Max Width

As I said above we’ve mostly been testing against the width of the device being used. Assuming for a moment that’s what we test against, we have 2 choices to start. Should we test against a min-width or against a max-width?

The first fits better with a mobile first thought process. You would develop default css rules for your design on a smaller device and add media queries and css as the device gets larger and your design needs to adapt. With max-width the situation is reversed and you’d likely develop for a wider screen first, working your way back to mobile.

Either process can work, though I prefer the former starting on the mobile device and working up. You can also set both a min-width and a max-width on any media query to add rules over a range of widths.

Broad Street Tunnel: Sign reading Warning Headroom and Width of Tunnel Varies

Breakpoints Based on Content

Again it doesn’t make sense to set breakpoints based on devices. Better is to base breakpoints on your content. Set points where your content needs adjusting.

Thierry Koblentz wrote an excellent post for Smashing Magazine on a device agnostic approach to responsive web design. In the post Thierry tells us

The content of a box dictates its width. It is the minimum width of adjacent containers that create break points.

He continues and offers 3 things to keep in mind when making decisions about where to set breakpoints.

  • The width of a box should be as small or as wide as possible without impairing readability.
  • The max-width of a box should take into consideration the importance of following boxes. This is because the wider the box, the wider the viewport must be to reveal subsequent boxes.
  • The goal is not to bring everything above the fold (we don’t want to fill the viewport with clutter).

Much of his post walks through an example of setting breakpoints and I recommended giving it all a read if you haven’t seen it before. The key point is that breakpoints for media queries should be based on when the content needs to change and not because there’s a device out there with a screen of a certain size.

The letters EM painted on a concrete wall

Breakpoints Based on ‘em’ Instead of ‘px’

Typically when setting either a min-width or max-width media query, the measurement is ‘px’ based. If the idea is to set breakpoints based on our content, isn’t there a better measurement we can use? Are we tied to the pixel? Nope. There’s nothing stopping us from using em-based media queries.

One of the issues that most of us don’t consider is someone increasing the font size in the browser to zoom in on our layout. Zooming doesn’t trigger a media query, though perhaps it should. When you think about it the reason we set a breakpoint in the first place is because the space our content can occupy is either more or less than it wants to occupy. A similar thing happens when you zoom in or out of a page.

If instead of tying media queries to ‘px’ measurements, we use ‘em’, then our layout can adjust to the change in font-size. This further ties our breakpoints to our content. You can see this working in action on a post from Cloud Four Blog The EMs have it: Proportional Media Queries FTW!. Zoom in and out on the page and notice how at certain points the layout changes as though you were resizing your browser.

Chris Armstrong offers The Goldilocks Approach to Responsive Design, which has good advice for when to set breakpoints using ‘em’s.

A single column of text should ideally be about 66 characters per line or roughly 30em. The space available for to hold 30em will be too big, too small, or just right, hence the Goldilocks moniker for this approach.

  • too much space — you can move from a single to a multi-column layout
  • too little space — you can drop columns or reduce the outside margin
  • just right — good for you. there’s nothing to worry about.

Chris’s post goes into more detail and also links to a demo you can check and also contains some boilerplate code you can download. Definitely worth a full read and again it’s setting breakpoints based on the needs of the content, not arbitrary device sizes.

Reading the book Responsive Web Design on a tablet

Summary

Media queries are one of the big 3 of responsive design and using them is pretty easy. The big questions are where and how to set breakpoints.

It makes more sense to set breakpoints based on the content as opposed to the device. Content out and not canvas in. I prefer a mobile first thought process and test against min-width, though max-width or both to cover a range of values also works.

While setting breakpoints based on ‘px’ measurements has been common practice, better is to use ‘em’ measurements. It alleviates an issue with zooming and is also more closely tied to content instead of device.

Fewer breakpoints will usually be better than more. Design flexibly and add a breakpoint where your layout needs to do something more than expand or contract, usually when your content requires a change in the number of columns being used.

This series has now covered all 3 ingredients of responsive design. Next week I want to look at responsive workflows and some practical thoughts for developing responsively.

Download a free sample from my book, Design Fundamentals.

4 comments

    • I have to disagree with you. When I zoom in on sites with media queries set with px, the media queries aren’t triggered. I’ve tried in Safari, Chrome, and Firefox and none triggered the query.

      The same browsers all seem to trigger the query when it’s set in ‘em’ though.

      • On the contrary, Firefox has always triggered media queries with px and ems, Chrome only with em’s. Zoom 6 times on Firefox and you’re on Retina :D

        • Thanks Beto. I’ll have to check again. Do you know if things changed over the last year or is this how it’s always been. You mention always on FF. How about Chrome?

          It’s been awhile since I checked, but I’m pretty sure I did check before making the comment above and I didn’t see the media queries being triggered.

Leave a Reply

Your email address will not be published.

css.php