Let content define media query break­points

Today I have read a couple of posts advocating the use of content, rather than device screen size, to define media query breakpoints. At first this idea may be a daunting prospect – the unfamiliar is off-putting. This post draws on my reflections on my own working practices to demonstrate how you may already unknowingly be halfway there.

Designing Andy’s sketchbook

In a recent post I discussed redesigning this blog, and how I had taken a content-out approach. To briefly recap, I based the design around the body text and built the design up from there.

I also (mostly) allowed the content to dictate the site’s media query breakpoints. Not that this was a deliberate action. It only came to light after reading posts on Design Shack and MrQwest, and then re-examining my own code.

To be honest, I did have specific (yes, Apple) devices in mind when starting this project. For me they are familiar and tangible devices from which to derive constraints. I work better with a few constraints. As I went along I adjusted the breakpoints to better suit the content. It is a process I have subconsciously repeated with my current project.

Earlier experiments with responsive layouts were much more clunky, suffering at turns from excess white-space and cramped content. I had been more rigid in attempting to force a design to fit very specific device screen sizes. This is where I was failing.

Device width as a starting point

If your practice has been to start with a fixed canvas or two based on known device screen sizes and push content elements around until they play nicely together, then this does require a change in thinking. It is very easy to treat the fixed canvas and resulting media query definitions as an irrefutable constraint. Instead we must interrogate them continually when working through our prototypes, to arrive at the optimum breakpoints for our content.

Today it is okay to use popular device screen sizes as a starting point. A starting point is all they are though. 320px and 768px is where I began on this site, until finding the content worked better with the breakpoints set at 360px, 560px and 770px. Yours may depart from this starting point more dramatically.

This is the halfway house.

A better process

Technology is ever changing. Basing our sites on today’s known device widths will be tomorrow’s headaches and become our users pain points. To embrace the idea that content informs our media queries, we need a better process to arrive at breakpoint decisions.

The Design Shack post suggests starting with a large design, and reducing the browser side, tweaking the layout as you go. For me this is too reactive.

I prefer to have planned how the site appears in single- and multiple-column layouts and use these to guide breakpoints. Taking the single column layout as the lowest common denominator, I then use min-width media queries to build the site up from this into its larger multiple-column form, tweaking or adding breakpoints as I go.