What’s Your Vertical?
You know that thing where you think of the same solution twice in one week to two different problems? Well for me that’s a huge, screaming klaxon that it’s time for a blog post.
Earlier this week, Anna Debenham had a terrific article on A List Apart about websites on gaming consoles. One of the issues she brought up had to do with responsive layouts on portable gaming systems. Since portable game screens tend to be very horizontal in their aspect ratio, they’ll get wider site layouts from our width-based mediaqueries. But because the screens are so relatively short, these layouts are often not so useable.
This morning I saw this tweet from Stuff & Nonsense’s Andy Clark. Now of course Andy is well aware that the new iPhone’s screen is no shorter than the 4 or 4S. It’s just that the width, in landscape mode, is wider. And on responsive sites, that means you – again – get a wider layout on a shorter screen.
The problem that I see here is that responsive designers have often been making the assumption that wider screens also means taller screens. And we adjust our layouts accordingly.
All this brought to mind Trent Walton’s article from way back in January about vertical media queries. And that’s when I started putting it together.
Don’t Forget About the Shorties
Right now at Bearded we take a mobile-first approach to our SASS/CSS. That means that we have a bunch of base styles that define the site design for the smallest browser viewport widths. Then we layer on additional styling for increasingly wider widths, each building atop the other. For instance, for the AAHomecare site we’re redesigning right now, our media queries look like this:
@media only screen and (min-width: 500px) {
@import "layout/small";
}
@media only screen and (min-width: 650px) {
@import "layout/medium";
}
@media only screen and (min-width: 900px) {
@import "layout/large";
}
@media only screen and (min-width: 1100px) {
@import "layout/extra-large";
}
@media only screen and (min-width: 1200px) {
@import "layout/huge";
}
That means our breakpoints are, conceptually: small → medium → large → extra-large → huge
For a slight adjustment to that model, what we might consider is: small → medium → large → extra-large → huge → short
Because of the order of the cascade, this would give us one final shot at making some generalized adjustments for short screens.
Par Exemple
As the AAHomecare site progresses to greater widths, we’re doing some very basic things to help with expanding line lengths and the claustrophobic feeling that comes with filling a big screen with wall-to-wall content. The two simplest things we’re doing are increasing the font size of anything in the main content area, and reducing the width of the site container so that the auto margins on the left and right will increase as well, and give us some breathing room. I’ve included the media queries that control the entire imported SCSS file, to aid in readability. The rules, then, look something like this:
@media only screen and (min-width: 900px) {
#main-internal-content {
font-size: 110%;
}
}
@media only screen and (min-width: 1100px) {
.container {
width: 90%;
}
#main-internal-content {
font-size: 115%;
}
}
@media only screen and (min-width: 1200px) {
.container {
width: 80%;
}
#main-internal-content {
font-size: 120%;
}
}
The most obvious thing to do with our new short media query is to undo this stuff. Keeping the original mobile site margins and font sizes could go a long way to making a more comfortable page layout on short displays. To wit:
@media only screen and (max-height: 700px) {
.container {
width: inherit;
}
#main-internal-content {
font-size: inherit;
}
}
While we’re at it, we could do some nice generalized changes here. For instance, we could rethink the type sizes for all our basic typographic elements (paragraphs, headings, lists, etc.). But before we go too far with our tweak-ery…
That’s Not B-Roll
In general, I’d avoid getting into noodly overly-specific styling changes here. Especially on big sites, those kinds of things have limited impact and can lead to inconsistency across the site. I think it’s best for a final override stylesheet like this to go for the low-hanging fruit. Extensible, generalized changes that will help our diminutive display friends look their best.
There may be a need for some feature-specific tweaking, however. The AAHomecare site, for instance, uses the same kind of responsive event list / calendar layout that we created for the Children’s Museum of Pittsburgh. What if we decided that the events list layout that we use for smaller widths was preferable to the calendar layout on short displays?
I’m not sure the small stylesheet is the best place for something like this. For one thing, it’s very feature-specific. It would also be a lot of work to un-do all of that calendar styling.
A better approach might be to refactor the calendar SASS/CSS such that the wider calendar layout stuff happens inside of a vertical media query – similar to how we might approach a resolution-oriented media query. And since, in our case, we’ll already be inside the medium media query, we’ll just express it like this:
@media (min-height: 700px) {
...
}
… since we don’t want to double up on the “only screen and” – our browser wouldn’t appreciate that at all.
Mixing It Up
Often on our sites, I create SASS mixins for dividers. For instance:
@mixin divider-bottom {
padding-bottom: 1em;
border-bottom: 1px solid $border-color;
margin-bottom: 1em;
}
I can – and will – use that little baby all over the site. But what if I wanted to conserve some vertical spacing on short screens? How about this addition to our mixin?
@mixin divider-bottom {
padding-bottom: 1em;
border-bottom: 1px solid $border-color;
margin-bottom: 1em;
@media only screen and (max-height: 700px) {
padding-bottom: 0.5em;
margin-bottom: 0.5em;
}
}
Now shorter screens use half the spacing around the borders of any element that’s using the divider-bottom mixin. Cool.
Wrapping It Up
And there we have it. Some initial thoughts about short screens and media queries. It’s probably clear that this is far from a refined and documented solution to anything (is there ever such a thing on the ever-changing Internet?). But this is how far I am today. I’d love to hear more thoughts from all you smart web people out there. Feel free to hit me up on the Twitter, and we can talk about how to further increase our vertical.
–MG
