Successful responsive web design should account for short screens, as well as computers, tablets and phones. Here are a few ways vertical media queries can help.
This article assumes a basic understanding of responsive web design. If you need to get up to speed, here is an excellent introduction from Ethan Marcotte.
Responsive web design is all the rage these days. Increasing amounts of sites are being built to give users a consistent experience on devices of all shapes and sizes. While this is a great step toward accessibility, the majority of these considerations are focused on the horizontal dimensions of a device.
Computers, tablets and phones are the three most common targets when designing and developing responsive websites. While this approach makes a lot of sense, it ignores an entire category of devices—short screens.
I define “short” screens as 800px or less vertically. There are plenty of improvements and optimizations that can be made for these screens using vertical media queries. Moving prominent calls to action above the “fold”, using a smaller line-height on type, and decreasing vertical white space wherever possible are good examples.
Since we make a big deal about giving mobile and tablet users an optimized experience, it would be silly to not do the same for devices that command ~39% of all web traffic on average. It is surprising this isn’t more widely addressed.
Vertical Media Queries in Action
Recently Adpearance had the privilege of redesigning Portland Therapy Center. Since this was going to be a fully responsive site, we found this to be a great opportunity to experiment with vertical media queries.
While we made sure to hit the “big 3” devices, we also did a lot of work to improve the site for short screens. Below you can see how the homepage reacts at 800px and below. This keeps all the core areas of the site above the fold for (almost) all screen sizes. They are simple adjustments, but they greatly improve the experience on these shorter screens.
While responsive web design is already mainstream, there is still plenty of room for enhancement and additional best practices. Hopefully this article has inspired you to keep vertical considerations in mind and add “short screens” to your list of targeted devices.