Vertical media queries

Tim Kadlec’s Implementing Responsive Design: Building sites for an anywhere, everywhere web, devotes a few pages to “vertical media queries” (2012, pp. 70-71). In a blog post from just several days ago, Anthony Colangelo asks why responsive web design has addressed viewport width but neglected viewport height (Go Vertical, 21 March 2013, Cognition – the blog of web design & development firm Happy Cog):

Long and skinny viewports, like an iPhone in portrait orientation, are a natural fit for websites. Their width is perfect for single-column layouts, and their height works well for seeing a whole block of content at once. Turn that sideways, and things get a little weird.

Images often don’t fit in the viewport. Scrolling, awkward zooming, and 11-finger gestures are required to see the whole picture. Large headings and generous line-height can severely limit the amount of text visible on screen at a time, making reading a chore.

Scrolling past a 400-pixel-high Google Map on a 320-pixel-high touch screen is like playing Operation (without the horribly traumatizing buzzer).

In all of these cases, a simple vertical media query would make a world of difference.

For an example, he provides a link to the iPhone landing page, though Apple is not known for its responsive web designs. I’ve quoted enough from Colangelo’s post and you can follow the link above to link to the Apple example he provides. I, instead, link to an example of the effect of a vertical media query at CSS-Tricks.com. Note how the text jumps to a smaller font when the viewport shrinks beneath certain breakpoints.

A few sentences about media queries

Here are some very brief remarks for the uninitiated on media queries.

Media queries are a means to assign different CSS (cascading style sheet) rules to different devices and device characteristics, according to Stephen Bradley’s How To Use Media Queries For Device Targeting  (2011). Ben Frain, in Responsive Web Design Using HTML5 and CSS3 (2012, p. 89), writes that media queries limit the shortfalls of a fluid layout and a fluid layout eases the change from one set of defined styles within a media query to another.

The three core ingredients for front-end responsive web design

Yet again I pull a couple of quotes from Ethan Marcotte (Responsive Web Design, 2011, p.9):

So what does it take to create a responsive design? Speaking purely in terms of front-end layout, it takes three core ingredients:
1. A flexible, grid-based layout,
2. Flexible images and media, and
3. Media queries, a module from the CSS3 specification.

These core ingredients can be used to:

create a design that can adapt to the constraints of the browser window or device that renders it, creating a device that almost responds to the user’s needs.

Mobile first meets media queries

Here again is Ethan Marcotte from Responsive Web Design (p. 124):

Speaking broadly, responsive design is about starting from a reference resolution, and using media queries to adapt it to other contexts. A more responsible approach to responsive design would mean building our stylesheet with “mobile first” in mind, rather than defaulting to a desktop layout. So we’d begin by defining a layout appropriate to smaller screens, and then use media queries to progressively enhance our design as the resolution increases.