07 11 / 2011

Responsive Design & Breakpoints

There’s an interesting discussion going on at the moment about how using fixed breakpoints to define how a site’s content responds to it’s container is probably not the best way forward in the long term.

It’s true that doing that is still designing canvas in - all we’re really doing is faking more canvases by making up more fixed containers for our content to live in.

Certainly it’s not feasible or desirable to do this for the myriad of devices and resolutions that seem to constantly be released almost on a daily basis. And you can’t physically rework layout for every incremental shift in size. 

However i’m not sure it has to be that complex. Before the idea of responsive design came along we made fluid sites quite happily. The only drawback with fluid sites was they literally scaled to fit. They were dumb, and as a result, most fluid sites layout became a problem pretty soon, with horrible line-lengths and weird wrapping issues aplenty.

Along came media queries and we started to figure out that targeting screens with specific dimensions was nice and easy. The ubiquity of the iPhone and iPad lead to a lot of “responsive” sites just having treatments for both those devices resolutions - to hell with what fell between - which of course is fundamentally flawed.

The idea of breakpoints is useful if you have lots of data to show what devices and resolutions you want to target. Sometimes it’s desirable too if you really don’t care about supporting everything…

When i think about breakpoints I generally just think about ranges of widths. Most ranges right now map directly to device resolutions, but more recently when I’ve been prototyping I’ve been using broader ranges, defining less of them, and then using % based fluid layouts inside them. That way you have the benefit of both techniques. Sure you lose the finite control but we have to start to embrace that lack of control - the broadening of device dimensions is not a maybe - it’s an inevitability. So as much as it pains me as a control freak Virgo, I know this is how it has to be.

Permalink 1 note