Responsive Bases & Vertical Spaces
Build a responsive design and you’ll find yourself knee deep in relative units and percentage widths. Media queries are the weapon of choice to adjust CSS on viewport change. Almost every example I’ve seen (and made) are based exclusively on the viewport width.
What about height?
The Baseline Grid
As an exercise in ‘perfection’ when I last updated my website I snapped the vertical rhythm strictly to a typographic baseline grid. In theory this isn’t complicated. Just make all vertical spacing a multiple of your line-height. Not that easy in practice. Responsive images and videos — anything with a fluid width and aspect ratio — break the baseline. Trying to maintain it regardless is a headache.
Personally I just don’t agree it’s worth the hassle. Keep a baseline within textual content areas of course, but across the whole layout? Don’t sweat it. Arrange by eye. Or better yet, why not do it responsively?
Watch the demo video below and you’ll see what I mean.
Responsive design on two dimensions. And terrible screen recording, apologies for that but I hope it illustrates the point. This is the first prototype of a website we’re building at Browser that will go live next year. I’ll keep you updated. There’s a lot of experimentation to follow.
I define all vertical height, margins, and padding as one would do normally, then I progressively enhance with viewport-percentage units — e.g.
10vh being equal to 10% of the viewport height. Modernizr provides the hook (it’s a “none-core” detect), but you can just write two declarations with the fallback first. Web browsers ignore the second if unsupported.
For further tuning use min/max-height to limit the range, or scope the style with height-based media queries. In my opinion these techniques are massively under-explored. Show me what you can do!
Naturally, Chris Coyier already has an existing demo taking this further with full Viewport Sized Typography. Paul Boag also wrote long ago about the value of height-based media queries: Are Media Queries the answer to the Fold?
How responsive can you go?