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?


Leave a comment