Vertical Media Queries

Media Queries aren’t just about adapting the width of a site. They can adapt the height too.

Some people are just too damn humble in my opinion. Take for example Ed Merritt, one of the designers here at Headscape. He is one of the most talented designers and front-end coders I have ever met, but the chances are you have never heard of him. That is because, unlike me, he just keeps his head down and churns out amazing stuff.

One example was some groundbreaking work he did in 2010. In fact it was so ground breaking that it has been featured in a new book Implementing Responsive Design by Tim Kadlec. When I found out he was featured I begged Ed and Tim to allow me to feature it here. They kindly agreed…

The project

In mid–2010, while designing a new website for the Environmental Defense Fund, I happened to read Ethan Marcotte’s article “Responsive Web design.” I loved the thought of adapting the layout to the viewing environment. The idea was still very new and the design was already underway (proposing a fully responsive approach at that point would have been outside the scope of the project), but I was keen to include at least some elements of the approach.

The problem

The homepage featured a carousel front and center, with the rest of the page following below. This worked very effectively, but we discovered that on a 1024px x 768px screen (visitors’ second most common resolution, according to the organization’s stats), with the most common setup (browser window fully expanded, with no additional toolbars), the viewable area ended just after the carou- sel. in testing we learned that because users weren’t seeing any content cut off at the bottom of the viewable area, they were falsely assuming this was the end of the page and very few scrolled at all.

These days, concerns about the fold are behind us for the most part, as users are happy to scroll, but as our testing showed, in some cases the layout of the page can actually misguide users into thinking they’ve already reached the bottom of the page. In their browser, there’s a definite point at which the visible area ends and if the content appears to end too, why would they scroll further? The challenge was to show them that there was more to see.

The solution

I’d already settled on creating two fixed widths for the site: a “full” layout (for view- ports of 1024px wide and above) and a “narrow” layout (for widths from 800px to 1024px). This solution wasn’t fully responsive by any means, but it was a step in the right direction for my first project making use of media queries.

I realized that by using a vertical media query I could alter the layout for devices with a vertical resolution below 768px. The narrow version already reduced the width of the page to three-quarters of its original width, reducing the height of the carousel proportionally. All I had to do was induce the narrow version for shorter screens too.

Screenshots of EDF.org at different screen sizes

Obviously in windows with short but still wide viewable areas there was horizontal space that was now going to waste. Fortunately, below the carousel the page was split into a main column of three-quarter width and a right column of one-quarter width. resizing the carousel to three-quarter width created space alongside it for the right column to move into.

The end result

This approach appeased the client and made users aware that there was more content on the page to be seen. It also made more effective use of the available space, a nice bonus. (I’d rarely want a carousel to fill the entire viewable area anyway.) And all of this was accomplished by simply adding a media query for short but wide viewports.

This was a solution to a specific issue, but the principle was one that I could apply elsewhere. in subsequent projects, I’ve always taken a moment to sit back and ask myself, are there any circumstances (be it heights or widths) where the viewport would adversely affect the presentation of this content? And if so, is there anything I can do about it?

Excerpted from Implementing Responsive Design: Building sites for an anywhere, everywhere web by Tim Kadlec. Copyright © 2013. Used with
permission of Pearson Education, Inc. and New Riders.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • http://twitter.com/gentle_media Ralph Echter

    I did in the past some experimenting with vertical MQ’s too, because I had a fixed footer that I wanted to change to a show/hide footer for the Kindle Fire (1024 x 600 pixels) The fixed footer covered the content, so I wanted to solve that with vertical MQ’s. It did work, but it gave display issues in IE8. I can’t remember exactly what the issue was and I didn’t investigate further what was causing that. I do use respond.js in all my projects to bring MQ support in IE8 and below and perhaps respond.js couldn’t handle vertical MQ’s at that time.

  • Mike

    “These days, concerns about the fold are behind us for the most part …”

    How are concerns mostly behind us? You always need to be concerned about the fold so it’s never blindly “behind you.”

  • http://twitter.com/sbrandwoo Stephen Brandwood

    “with the most common setup (browser window fully expanded, with no additional toolbars)”

    Is this really the case? I’d have thought you’d struggle to find a Windows machine without an additional toolbar and this doesn’t cater for the varying levels of toolbar chrome in different browsers.

Headscape

Boagworld