Lets Talk Vertical Media Queries - Adpearance

Lets Talk Vertical Media Queries

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.

Stats from W3Counter.com

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.

Portland Therapy Center on phone, desktop, and tablet

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.

Portland Therapy Center on a “tall” desktop screen (left) and a “short” laptop screen (right). All major areas of the site are still visible and above the fold.

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.

Get monthly newsletters with timely blogs and occasional announcements for resources including in-depth reports, data-driven insights, and webinars. Once subscribed, you can select your preferences to get only what matters to you.

On-Demand Webinar
Why Connected TV is Taking Over Traditional TV Advertising
On-Demand Webinar
How to Measure Your Digital Success
About the Author

User

Adpearance is the digital marketing company obsessed with generating quality leads. Our solutions combine cutting-edge technology, premium tracking, and an expert team to transform business results.

Follow Us

Leave a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

Subscribe to our newsletter

Come on... You know you want to.

Subscribe to our newsletter

Get monthly newsletters with timely blogs and occasionally announcements for resources including in-depth reports, data-driven insights, and webinars.

Subscribe Form

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.