This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

A few ways to define breakpoints in a responsive site

There are a few ways to determine the breakpoints for layout in a responsive design. The first one is based on the size of common screen sizes. The second one adds breakpoints when the content breaks. The third one is based on things like font-size. And there’s another one which uses a system of predefined columns.

When the content breaks

Stephen Hay says that defining breakpoints is easy. You start with a small window. You make sure things look good on this small window. Then you slowly make this window bigger until the content doesn’t look good anymore. There’s your breakpoint. This works only if you have a good feeling for proportion. Good designers might have this feeling. I don’t think all developers have this. Developers like systems.

Using typographic rules

Robert Bringhurst says that anything between 45 and 75 characters is a good length of line. And Josef Müller-Brockmann says that 10 words is a good measure. These are simple rules that can be translated to code. As soon as the body copy becomes wider than 10 words, something should happen. Unfortunately there’s no words unit, so we can’t do something like this: p {max-width: 10words}. We’ll need a tool for that. This results in logical breakpoints based on the content, and based on the typography.

Using columns

A while ago I saw a brilliant talk by Wilhelm JoysAndersen. In it he promoted to use predefined columns. He decided to use columns that are 300px wide. Which, he said, somehow corresponds with common screen sizes. Any component in this system has a few different states, all based on multiples of 300. A system like this is much easier to design, and much easier to maintain. I think he has a good point. Instead of 300px I would advice to use 10em or 20em as the base width of your columns, though. It turns out that most common screen sizes are multiples of 10em. And 10em is easy to work with.

An example

If we design a media component in a modular gridsystem like this it could have a few appearances. A media component consists of an image with some text. One of the appearances could be a 20em wide image with the text below it.

It could also exist like a 20em wide image with the text in a 20em wide column next to it. This would look something like this:

If you must, you could create a version that’s 60em wide, but this would probably be in conflict with the rules about the ideal length of line.

This is not just the design for different screen sizes. The small media component could look exactly like this in an aside, next to the 40em wide main content as well. I really like this modular idea. It’s very clever.

Wilhelm also promoted the idea of not creating fluid layouts. Using columns with a fixed, yet logical width is much easier to design, and to maintain, he says. And you are sure it will always look good. I can’t really think of any reasons why this would be a bad idea. Actually, I think I like this approach to defining breakpoints as well.

Device sizes

I still believe defining breakpoints based on device sizes is silly. There are thousands of devices that don’t fit in the multiples of 10em size. So if you’re fluent in fluid thinking, I think creating your breakpoints based on simple typographic rules is the best idea. But the idea of working with columns is clever as well. And if you do choose to use columns, why not base them on some value that’s pretty common? Like the easy to work with width of 20em.