The Virtues of Vertical Media Queries

Share This:

Job Board

Devices come in all shapes and sizes, and pivot between portrait and landscape orientation, often in a single session. And, lest we forget, desktop and laptop browsers can also be contorted into all sorts of shapes (and not just by web geeks trying to see if a site is responsive). Just as we had to stop ignoring skinny viewports, it’s time to stop ignoring short (and tall!) ones and start employing them to creative and user-pleasing effect.

Strangely enough, the only prominent example of a creative use of vertical media queries comes from a company that, while known for its design leadership in other areas, has made rather a point of ignoring responsive design. (I won’t name them here, but they make iPhones, iPads, and MacBooks.) Happy Cog’s Anthony Colangelo deconstructs the Cupertino-based company’s vertically responsive page, makes a compelling case for vertical media queries generally, and even shares vanilla and Sass CSS samples showing how it’s done in yesterday’s brief yet pungent Cognition article, Go Vertical.

More from ALA

Columns

The number of predictions that algorithms can make about us from even minimal data is shocking. Although we’re offered privacy settings that let us control who of our friends sees what, all our information and behavior tends to be fair game for behind-the-scenes tracking. We simply don’t know everything that’s being done with our data currently, and what companies might be able—and willing—to do with it in the future. Laura Kalbag believes it’s time to locate the exits.

Displays that are more tiny than our lowest-size breakpoints require a more condensed range of type sizes. If you don't already have in place a typographic system that can absorb the demands of this new context (watches, wearables, digital sticky notes, whatever), now might be the time to consider it. Matt Griffin was ready for anything because his site was simple and built to be future friendly.

March 19, 2015

From the Blog

It's all about us this week at ALA. From steps to sleep to social activities, we're counting every kind of personal data you can think of. But what's all that data add up to? How could we look at it—and ourselves—differently? In this week's On Our Radar, we ask ourselves—and our self—the tough questions.

That old monitor you've got lying around? Time to put it to work. Susan Robertson reminds us of how important it is to test our designs on older screens and ensure the things we build work well for everyone.

The future is here, for better or for worse—and this week, the ALA staff has been thinking about what that means: for our code (the impending arrival of HTTP/2), our content (publishing on Medium), and the cost of constant noise.

This week, the ALA staff is thinking about color accessibility, the process of building a vocabulary, the current state of web typography, and the lessons we can learn from skater culture. In other words: it's all about inclusion.