Breakpoints and time travel: how does it all work?
I feel like our industry has partly missed the point of responsive web design. Some of us (that includes me, initially) took them as a way to create multiple layouts for popular device sizes. You’d see a phone, a tablet, a laptop, and usually always an iMac next to each other in your presentation. This is obviously one way to introduce the client to the joys of responsive design. However, do not let that thinking slip into your design process. That’s not how the web works.
There are obviously some cases where you might want to deliver multiple fixed layouts, but mostly it’s all about the content and when things become too, umm… tight. Responsive design is the default you build special layouts next to if you really need them.
But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?
I think it all fit so well when Ethan Marcotte referenced John Allsopp’s article A dao of web design in his now legendary Responsive Web Design from 2010. It’s like Allsopp first invented the time machine – let’s just say it was in the year 2024. Then he went back to 2010 to tell his younger self to read about responsive web design and preach about fluid web design in 2000 using a copy of that time machine old Allsopp brought with him. It’s all oh so confusing, but you get the idea. It’s a ridiculously good article that was ahead of its time. I also obviously have nothing, but respect for Marcotte’s Responsive Web Design either. They are both brilliantly simple, and in their time, completely different thoughts.
The point I was trying to make before going mad talking about time travel nonsense is that responsive web design feels like a subset and an evolution of the original fluid thinking Allsopp was trying to establish. That is: keep things based on percents and utilize the canvas as best as you can, whatever its current width and height just happen to be. It’s all about remembering how there is no fixed canvas, but rather an ever changing viewport to some content. Sadly, there’s more to this new age web thinking than just outer canvas measures like missing fonts, lacky CSS-support, crappy Javascript engines and so on, but responsive web design in itself is only trying to solve the problem of fitting content into a canvas of any size.
TL;DR
Just try using percents instead of pixels in your layout elements’ measures and rearrange stuff (e.g. apply a breakpoint) when content just doesn’t fit anymore or just looks and feels bad.
Oh and also, there aren’t any seals left in 2024. I can’t reveal my sources, but yes.