Breakpoints. Break. Points. Points at which things break in your design.

But, at what point did they start becoming ‘the point at which I will create a new layout entirely’, or ‘the point at which I introduce a new canvas’. What started out as a method to optimise your designs for various screen widths has turned, ever so slowly, into multiple canvas design. We’re creating pages again, and we probably need to stop it.

A breakpoint should not necessarily be a point at which we wholesale swap out to another layout. It can be – and I think there are good reasons to make some of those big, macro changes to grid system or navigation patterns. BUT, I think we’re missing a trick for using breakpoints to make lots of subtle design optimisations.

Jared Spool said in his recent article strategy for responsive design

A responsive design can have multiple breakpoints, say for a small-screen phone, then a large-screen phone, then a tablet, then a laptop/desktop. Many teams try to decide on breakpoints using average screen sizes.

However, it’s better to look at what the content and navigation wants to be. By letting the content and navigation drive the breakpoints, teams find they can often get away with fewer screen configurations. For example, a high-resolution Retina iPad might easily share the same configuration as a well-constructed laptop display, while lower resolution tablets might just need a little adjustment to that same configuration.

Our experience at Mark Boulton Design is that we can actually tend towards more breakpoints than fewer if we take the approach of optimisation rather than a device-centric, display-size approach. We’re moving towards including all media-queries in-line in the CSS, rather than abstracting them into their own 480.css file, and we keep the big macro-layout changes in the Gridset CSS. But, interestingly, what we’re seeing is we have less styles associated with more breakpoints as we’re not creating a whole slew of different, fixed layouts and all that goes with that.

‘But, what is content-out design?’

I first discussed the idea of content-out design in the context of a page. A page with edges that is used to define an aesthetically pleasing layout within. On the web – especially the responsive web – we don’t have edges, so it’s best to define your layout from your content. But – and I get asked this a lot – what does that actually mean in practice?

Firstly, it means defining your grids (your big macro break-points, and the columns and what-not) from actual content and not from devices or screen widths. This could be the size of an image, or an ad-unit, or the typographic measure. Just some ‘fixed’ constraint. This will give you your grids.

As you’re building out your responsive design, you should be focussed on watching how the content adapts as the viewport changes. Somethings I look out for:

  • Type size and leading. Does it need to change?
  • White space (macro and micro). Do you need to adjust margins and padding?
  • Vertical space. Do you need to reduce it and make the content more or less dense?
  • Flow. How is the readers eye movement going to change as you change these elements?
  • Words. Are there now too many on one line? Or too few?
  • Source order. Are the right things in the right place?

Focus on the in-between

Content-out design means defining your underpinning design structure from your content, and then focusing on what happens in between ‘layouts’. This approach of optimising your design by adding media queries (I like to call these optimisation points than break points, because nothing is broken without them, just better), means you are always looking at your content as you’re working. You become more aware of the micro-details of how the content behaves in a fluid context because your focus shifts from controlling the design in the form of pages, to one of guiding the design between pages.

For more reading on this, have a look at ‘There is no breakpoint’ by Ben Callahan in which he details optimisation points in a little more technical detail.

Things are a changin’

I find this period of change we’re in right now fascinating. Not only is centuries old design theory being rewritten, but the process of how design happens is changing too. It’s becoming more collaborative, more fluid, lower fidelity. Less about being squirrelled away in a dark corner crafting a beautiful thing, and more about scribbling away in public and repeatedly throwing our work in a big trash can. And the more we’re doing that, the better we’re getting.

Optimisation points are just one way we can start thinking content-out. And thinking content-out is what we need to be doing to create truly native experiences on the web – wherever the web is.