The Problem

Managing the way that content is presented is fundamental to web design. It’s pretty much all we do when you think about it. This basically amounts to planning how the content, which is usually much longer than the viewport, will appear as the page is scrolled.

Over time, the industry has developed many strategies for structuring content in a coherent way, e.g. columnar grids, modular grids, widgets, heroes, etc. which has enabled us to take complex and varied information and presents a coherent message.

In recent years, multiple screens and form factors have forced us to abandon fixed width websites and the tight control that they offer in favor of media query based fluid layouts. Media queries have enabled the industry as a whole to accomodate the proliforation of different phones tablets and hybrid computers, all of which have different screen sizes and resolutions.

While this is all wonderful, I have noticed that most of the attention focused on media queries is on width-based media queries. That focus makes sense because a natural behavior for a user viewing a web page is to scroll, which means height flow is pretty much handled automatically.

However, height-based media queries also offer us a great deal of control over our sites and are pretty under utilized. They offer us the ability to restructure our content based upon the height of the viewport.

*If you are unfamiliar with media queries, take a gander at this article by Jay Barry for a great explanation of min-width based media queries.

Combining both types of media queries allow us to keep whatever content we want front and center in our designs.

Interested in more than just height-based media queries? Join us at BDConf in Nashville, June 19-20, 2015, for a unique look at the future of mobile design.

A Little Code

Most designers tend to use min-width media queries in their designs, but you could also use max-width media queries to great effect as well. Both are useful, given the right circumstances:

[css]
//simple min-width query
@media screen and ( min-width: 600px ){
background: black;
}
//simple max-width query
@media screen and ( max-height: 600px ){
background: blue;
}
[/css]

 

Pretty standard stuff, I know, but fundamental to the way that we restructure our sites with css.

Media Queries in Action

I created a little Pen over in CodePen that shows some of whats possible with height-based media queries. Load it up and play with your browser’s height and width.

In the design, when the browser is tall enough it flows just like a regular responsive site, floating content left and right to utilize the space more effectively. When the site is too short, the sidebars are positioned and fixed in the viewport and scrolling is restricted to the main content area. That way, all the content on the page is accessible regardless of the screen size, resolution, or proportions.

When the background is black, the height based media queries have taken over and having an effect. The code is really simple so you can check it out here, but hop over to CodePen to load it up full screen to see the magic happen.

See the Pen Height-based Media Queries

 

Height-based media queries are a powerful and underutilized tool. Let me know if you’ve used them in a project and what problems you’ve solved using this cool bit of tech.