Vertical Media Queries & Wide Sites

I’ve been tinkering with the font-size and the media queries that trigger width-based changes for this site regularly over the past month. I thought that maxing out at 20px for body copy at widths above 900px would be my final answer, but I decided to drop in one more increase last week:

media screen and (min-width: 1234px) and (min-height:700px) {
body {font-size: 137.5%;}
}

This bumps body copy up to 22px for those bold enough to view the site at least 1234px wide. Why 1234px? Just because that’s where, with all % values for widths & container padding, my site hits its max-width.

What’s with the vertical media query? I used min-height to target screens that are wide enough to trigger the change, but not tall enough for it to make sense. As an example, my wife has an 11” MacBook Air that has a screen resolution of 1366px X 768px. With the menu bar & browser window, the screen is not tall enough to trigger that final bump up in font-size unless you enter into full screen browsing, which to me is a good thing.

But maybe vertical media queries could do much more than this. For projects where the fold *gasp* is a concern, perhaps setting min/max-height could be a new way to control how content is served up to screen widths and heights of any size. If you just have to get that sign up button in view without a scroll, you could trigger a smaller banner image or nav bar to make room when necessary on shorter screens.

For what it’s worth, it’s stuff like this that gets me excited about the future of web design. We’re leaping past any point where the word webpage makes any sense, and into a a world where what is seen at any one screen size (or Photoshop comp) only captures a sliver of the display capability responsive websites muster.

Update: 6/10/12

I recently decided to bump up the font-size even more at wide views—now we’re at 150% (24px). The road goes on forever and the party never ends.

Update: 3/22/13

I’ve updated this site’s layout. The values mentioned above have changed, but the reasoning behind the usage remains. I’m also now using ems instead of px for media queries.

20 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Christopher Meeks

    I have to humbly admit that I wasn’t even aware that you could use media-queries for screen heights. With so much focus on screen widths, that idea completely passed me by.

    You are absolutely right that there are a myriad of reasons why a vertical media-query comes in handy. One example comes from a site I’m working on at the moment. I have two stacked fixed header items (a horizontal nav and a horizontal branding element). When screen heights get too small, it makes a huge negative impact on the flowing area of the page. Everything feels way too tight.

    By using a vertical media-query to eliminate the branding header or simply minimize its height, I’ll give users a much more usable experience. Thanks for the insight!

  • Chris Mousdale

    Great post, i was thinking about going into CSS columns after a certain width, but i think it’d make more sense to use height and width to determine columns.

  • Gonzo the Great

    Hi Trent,

    I first read about this on boagworld, in the article “Are Media Queries the answer to the Fold”, there you can read (if you haven’t already?) about some practical aspects of these ‘vertical media queries’.

    Must admit tho that I haven’t had the time to experiment with this. Nice article BTW ..!

    Cheers & Ciao ..

  • Alexandre Plennevaux

    Here at our school, we try to find alternatives to the word “page” or “webpage” and get away with terms like:
    - node (if you are working on designing the mesh of internal urls)
    - frame (if you’re working on designing the global user experience unfolding in time, in that case, each point in time of the experience is like a frame of an interactive movie)
    - screen state (from the graphical point of view, and taking into account that although the url is static, the screen layout changes its state in time thanks to techniques like ajax )

    but maybe there is one word that rules them all: “url” ?

    Thanks for this great article.

  • Viljami Salminen

    I had vertical Media Queries on my own site earlier so that the content below the orange header would show up on a small screen without scrolling, but later I decided to remove them. Mainly because they made the site look/scale in a bit weird way when the user scaled the window on a big screen. It also made the typography look a bit unbalanced when applied (well, that’s actually my fault).

    I’ve been also using vertical Media Queries on client projects for a bit over a year now and clients seem to love the idea. Especially those clients who are overly worried about “the fold”.

    But the more I use them, the more it feels somehow *hacky*. I’m not sure why, but it might have something to do with the fact that I also feel that the current way of building responsive sites is sometimes overly complicated and adding more Media Queries into the mix doesn’t help at all with that fact. It might be also that there’s something wrong with the design in the first place. Not talking about your site Trent, but one example could be fixed footer/header that fills up too much of the top and the bottom of the screen already in the first place.

    Anyway, vertical Media Queries might be really useful in some cases, but I’d say that one needs to carefully consider before using them.

  • Elliott F.

    i’ve been working on a horizontally scrolling website, and important info keeps dropping to the bottom on some screens. so the vertical media query is needed here.

    glad someone else is looking into this too!

  • Ethan

    Great write-up, Trent. (And yet another reason I wish you could nest @media declarations.)

  • Ben Brignell

    Great ideas and technique - with a hint of yeesh - potential for “above the fold“ness. Sigh. My marketing department are going to love this... :)

  • Trent

    @Viljami Salminen:

    I also feel that the current way of building responsive sites is sometimes overly complicated and adding more Media Queries into the mix doesn’t help at all with that fact.

    I completely agree. Maybe a good way to phrase it would be that we should use media queries sparingly to help fluid layouts along, not to solve design problems or create new ones by packing in even more content.

    @Ethan: Brilliant! I hadn’t thought about that.

    @Ben Brignell: Fair point! Batten down the hatches!

  • Chris Krycho

    One of the most interesting ideas I’ve seen so far is using combined height and width queries to lay out columns and then paginate the content. I believe Opera has a demonstration (I don’t know where exactly) of that concept; it makes for much nearer a book-like experience than we’re accustomed to on the web, and it’s rather neat. Instead of scrolling, you use arrow keys or click the link to navigate to the next page. Optimal for all websites? Certainly not. Eminently sensible for some? Definitely.

    The other place I’ve been thinking of it making sense is when someone just prefers a narrow window. One of the arguments I’ve heard against the standard practices that are developing in responsive, namely presenting the “mobile” version to any average browser sized down that far, is that some people just like to narrow their windows, and don’t want the content to radically reflow or especially resize. It might make sense to consider keeping font size higher, for example, if the screen width is 600px but the height is 1000px... You might still reflow the content, but with a consideration that the viewport doesn’t demand smaller text.

    It’s certainly exciting, in any case.

  • Cameron Moll

    Bravo. There needs to be much more discussion about vertical adaptation. We’re a little too fixated on horizontal responsiveness right now.

    I spoke about this at HOW Interactive back in November and pleaded the cause. Mentioned how Gmail’s row height changes depending on screen height. But that was about the only positive example I could find at the time.

    More examples from us all, please!

  • Cole Henley

    I think vertical media queries definitely have a place - I experimented with using these for a site last year where the client felt screen estate was really important. I used them to hide non-text content on the home page for lower viewports.

    Alas the client really didn’t like the idea but still think it has merits and will be useful in a lot of contexts.

    A video of the effect in action is up on Flickr at http://flic.kr/p/9foDEy

  • Nate

    @Ben Brignell: Already had a client insist on certain content blocks being visible “above the fold” on the tiny laptops in their internal network. At least we could target them and not butcher the experience for all visitors.

  • Tim Kadlec

    @Ethan: Oh man, same here! Until that support comes, I like Stephanie & Bryan Rieger’s idea of ‘minor breakpoints’ to give a similar effect. They talk about the implementation here: http://www.slideshare.net/yiibu/pragmatic-responsive-design/23

  • Miller Medeiros

    I was talking about font sizes with @simurai on twitter, and I fell that vertical media queries are just the begin of true readable text over multiple screen sizes and pixel densities, maybe in a few years we will be setting font-size using “physical size” instead of pixel values as suggested by @simurai. Cheers.

  • ArleyM

    I just wrote a post (with demos) about using vertical responsive web design to keep content above the fold for CSS Tricks.

    http://css-tricks.com/responsive-web-above-the-fold/

  • brianlmerritt

    I found this because I was really hacked off that all the great commentary on width ignored the fact that those massive Twitter bootstrap hero sections and jumbo sliders were eating into our content.

    @media query min-height is now in the toolbox.

    Any new news about mobile friendly responsive image techniques?

  • Antonio

    Uh, I like what you’re doing and whatever but seriously, when I open this website on my 22″ iMac screen I feel like I’m opening up a 2.5″ dumbphone app gone fullscreen on a huge TV. Why the hell is your font SO big?

  • Keaton

    Antonio, I dub thee... KING OF THE INTERNET.

  • _justinandrew_

    I kind of agree with the ^2. But I’m really interested in where the inherent trends are going for x/y layouts based on media queries. Now that the trend is to design for flat and ‘no-fold’ sites. I can see a huge demand for people to design for app like, single pane, “responsive” experiences whenever they go to a new page.
    I mean, just look at the bell curve towards mobile vs desktop visitors. Mobile = vertical, desktop/tablet = horizontal.

Leave a Reply