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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s