MrQwest

Breakpoints led by design, not device

It’s funny that quite often, you have good ideas whilst in the shower… Maybe it’s caused by the shower massaging your head / brain or some other magic, but I tend to find that good ideas quite often appear whilst having a shower.

This morning, whilst in the shower, I was thinking about responsive design as I’m going through the process of learning it properly for my 12412 January project.

What follows is a bit of a brain-dump. Just some thoughts I’ve had this morning. It may well be a silly idea, it may well be current practice, but it’s an idea none-the-less.

Both Stephanie Reiger and Jeffrey Zeldman have blogged recently about breakpoints and how working on a specific set of px-based breakpoints aren’t a good idea because of the immensely large current set of screen resolutions used by smart phones & other devices these days.

This got me thinking. We shouldn’t be basing our breakpoints on a device, a range of devices or all devices, but “the content”. Making your design fluid will mean it’ll resize with the ebb & flow of the viewport. Big screen? no problem. iPhone? You’re covered.

That idea is suitable for single column websites, in fact, it’s remarkably easy in it’s basic form but when you add columns to your design, making it fluid becomes a bit more difficult.

This is where media queries and breakpoints tend to come in. Some designers will set a breakpoint at 480px to then remove all the floats to the design so then everything becomes linear. You’ll have the logo at the top, followed by navigation, content, sidebar, footer all in a single column.

But why set it to 480px?

Why not open the full multi-column site on your desktop and then slowly reduce the width of the browser until the layout feels uncomfortable, and set your breakpoint there.

Let your breakpoints be led by the design and the context! Not the device.

What are your thoughts?


Why not join the discussion?

  1. Stephen | Jan 10, 10:21 AM | Permalink

    Yeah. It’s a really simple example, but that’s how I figured out the points where the headline size and column count reduce on my site.

    There is an explicit rule for max-device-width at the bottom end but everything above that is done on what felt right.

  2. Paul Mist | Jan 10, 10:23 AM | Permalink

    I couldn’t agree more, and this is the solution I’ve followed on my newest site build (still in progress). I feel break points should be there to assist a fluid design in reordering/adjusting when appropriate.

    Some complain about having too many break points – but I actually couldn’t care less as long as they have a good reason, and are based on a solid fluid (odd phrase!) foundation.

    Chris Coyier’s article CSS Media Queries & Using Available Space gives good examples on optimizing a design, based on available space, not necessarily based on device specific break points.

    BTW. Your comment form is all over the place (Chrome)

  3. Phil Wareham | Jan 10, 11:11 AM | Permalink

    Is that a bit like what the Goldilocks approach refers to then?

  4. MrQwest | Jan 10, 11:49 AM | Permalink

    Stephen, I like that! Doing what feels right!

    Paul, I can’t wait to see the new site. I’ll have a read of Chris’ article – that’s kinda what I’m saying. Optimise dependant on space, not device.

    And yes, the comment form is still very messy. I’m re-aligning the site and the comments form are next on the list :)

    Phil, pretty much yeah! I read the Goldilocks approach post at the weekend too! I guess it took a little while to sink in ;)

  5. James Young | Jan 15, 01:48 PM | Permalink

    It’s a tough one, RWD is for the most part a great “80% solution” to problems and this is a sensible way of approaching it although to me it’s potentially problematic because when you’re working on something based on your feeling, it’s subjective and what you feel is right might not feel right to me – the reader.

    I think it’s a great time to bring it up though, the new Smashing Mag site is an example where clearly this has been a big part of the approach but having really, really tried to understand some of the design decisions, I’m not keen at all.

    It doesn’t matter what size screen I read it on, the decision to make it a “typography first” redesign has led to some clumsy and inexplicable breakpoints and I’m simply not a fan of the fact that on the homepage, I can’t scan the latest few articles – I can only see one – on a giant monitor.

    Each to their own though, there are no right answers, only iteration and I think done “right” this approach is perfectly sensible.

    J.

  6. Simon Cox | Jan 16, 09:39 AM | Permalink

    And the point at which it feels right is based on the measure you can read comfortably – my thoughts – http://simoncox.com/x/2i

  7. Charlie | Jan 25, 04:34 PM | Permalink

    On a side note… Thoughts occur most often to me away from a computer. Whether thats a shower, a dream, a walk or even just eating.

    The imagination thinking by not thinking is pretty powerful stuff. :)

  8. Richard Razo | Apr 13, 08:56 PM | Permalink

    You had me at the first paragraph… I too get little light bulbs flickering on when showering.

    I’m late to the RMD revolution. I just started to read up on it. As a RMD newb my first read was reading how to use Foundation (http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/) as a framework. If found it intuitive to pick up and alter but see that it doesn’t use the best coding semantics. What RMD frameworks you guys suggest that are superior? and why?

Textile help

You must preview your comment before submitting.

Search

Hire Me