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.