Breakpoints and reference points
Jeffrey Zeldman on the state of the web:
Of course, if breakpoints are dead, responsive design is dead, because responsive design relies on breakpoints both in creative workflow and as a key to establishing user-need-and-context-based master layouts
As usual, Jeffrey elicits great comments, like this one from Ethan Marcotte:
There’s nothing that says our breakpoints, whether in our designs or in our CSS, need to be pixel-based. […] As I mentioned on Twitter, em-based breakpoints have the benefit of being tied to our content, and might present a more future-proof alternative.
Em-based media query breakpoints sound great, but I suddenly feel the need to differentiate between what seem like two different things: breakpoints (the numbers to which our media queries respond) and reference points (the keyframe compositions to which our designs respond).
For instance, when I wrote this in More Meaningful Typography:
Viewport sizes are good to know, but setting a composition’s width to one of these exact values and pouring in text is not ideal.
And this, in the same article:
When building toward a responsive design reference point—a carefully measured layout for one particular setting—we can use numbers from a modular scale and then convert to percentages as we normally would.
I was talking about reference points. A compositional reference point could use a max-width of 30rem, meaningful to its particular content and typography, and be centered in device viewports until a 40rem breakpoint (media query) invokes rules that build toward a different reference point.