Responsive Web Design: Breakpoints (Suck)

Posted on November 17, 2014
Updated October 1, 2019

I’ve been doing responsive web design since it hit the fan in 2010, and it’s really challenged and changed how I do web design in general.

(Primer: The basic idea is that the way elements are displayed on the screen changes depending on the width of that screen. That way, a website can look just fine on a smartphone, tablet or desktop. It’s an effective way of acheiving mobile compatibility without a separate mobile site. RWD, as it’s lazily called, is now old hat, and has been built on with new concepts that will shortly be assumed common sense barely worth articulation.)

RWD added to the workload involved in creating a simple webpage, but at the same time, moved the whole industry’s perspective from pixels and towards content and meaning (and semantic informational heirarchies!).

This change in perspective was a good thing becasue it relieved the pressure to compete on making pages visually detailed and the same in all browsers (responsive design meant pages would change, no matter what).

At first, wide eyed and eager I consumed Eathan Marcotte’s eminal classic that introduced the world to the concept and practice. I trawled forums for best practices. Still, I came across a number of issues I was forced to solve on my own.

Why do RWD breakpoints suck?

Breakpoints are groups of changes that occurr when specific criteria are met… such as a total screen width more than 30em, or the device held in orientation mode.

I started out grouping changes together like this. This might work if a website is visually simple, but add some slight interest to how the page is contructed, and you’re going to need to be more specific.

What I do instead of RWD breakpoints

These days I have responsive declarations all over the stylesheet, containing only one or two elements, independant of all other element’s declarations. In concert, multiple elements are responding at any given time, not necessarily at once or in obvious ways.

A standard CSS style declaration next to it's RWD counterpart.
A standard CSS style declaration next to its RWD counterpart.

At firstly I felt guilty for this, as if I was being disorganised. Later I realised this was a necessary technique for writing a legible stylesheet. Of course responsive declarations need to be grouped by elements. And of course elements should be styled for RWD independantly.

I do often use global breakpoints, for global elements such as body (font-size) and page (widths and margins). The baby stays in the bath.

HTML Frameworks such as Bootstrap don’t appeal to me as head starts, because they force elements to change in groups, at breakpoints, which means many look unnatural. A common example, even on high profile websites, is a rows of boxes jumping from a crowded four-across to a wastefully sparse vertical stack.

I like my pages to feel well designed all the way. Because, you know, I design websites. RWD is a useful tool, but it means careful consideration of how each element will look on different devices. I don’t believe there’s another way as long as RWD is my tool of choice.

There’s more on what-I’ve-learned-from-RWD to come.