12

Is responsive height the new frontier of design?

5 years ago from , Interaction designer

Just started to notice it more and more, sites that not only respond to the width of the screen but also the height.

In ye olden days there was the Medium post full screen photo. Example: https://medium.com/p/crafting-the-tools-of-time-bb64148e9550 The other day I noticed the responsive paintings at the Van Gogh: http://www.vangoghmuseum.nl/en/collection/s0176V1962

Then I noticed how it Zach used it to make his portfolio a great experience: http://zacksears.com/home/ And I saw this shopping site variation where some of the slides/screens/pages respond to screen height and some don't: http://www.leaderbagco.com/

And now the new Wired completely blowing it out of the water: http://www.wired.co.uk/

Am I just late to the game, is this just a trend, or is this a new exploration of what it means to be responsive?

What do you think/do you have any more examples?

8 comments

  • Liam MaddisonLiam Maddison, 5 years ago

    People are happy to scroll

    7 points
  • Ray BriglebRay Brigleb, 5 years ago

    Absolutely. Even Apple, late to the game on all things responsive, has vertically-responsive home page designs every now and again.

    3 points
  • Cameron MollCameron Moll, 5 years ago (edited 5 years ago )

    It's not a new frontier; it's an essential component of a holistically responsive experience that many of us tend to overlook when developing (and when browser support is an option).

    Browse many popular sites on a MacBook Air 11" and you'll probably encounter static headers, excessively tall hero graphics, and so forth that make for a somewhat frustrating experience. I say this having owned one for +3 years.

    Google does a terrific job with some of its sites/apps. For example:

    Gmail.com Inbox – Try resizing the height of your viewport. Note the height of the rows decreases to compensate.

    Google Drive, New Document – Note that the toolbar can be minimized, which is very helpful on screens with smaller heights.

    In contrast, consider an experience like http://www.degdigital.com/blog/ where the static header consumes 34%¹ of the screen on a MBAir 11". It makes for difficult reading experience but could be improved using vertical media queries.²

    ¹ I've spoken about this particular example in conferences before. I don't carry around stats like that in my brain, lest you worry :)

    ² See http://trentwalton.com/2012/01/11/vertical-media-queries-wide-sites/

    2 points
  • Pendar YousefiPendar Yousefi, 5 years ago (edited 5 years ago )

    Didn't MySpace start this trend over a year ago with their new design?

    2 points
  • Seth RubensteinSeth Rubenstein, 5 years ago

    I agree that responsive height is becoming more and more a consideration. Which, obviously, is a good thing. IMO the easiest way to implement it sans javascript if .element { height: 100vh; } the only problem there is vh support in browsers. Also Mobile Safari freaks the hell out about vh for some reason even though it technically supports it. Luckily there is viewport buggyfill to fix that. Then theres calculating viewport height and setting it with javascript, not hard, but just doesn't seem as elegant.

    I tried to get a recent client redesign to have his post headers be full height and the age old "above the fold" confusion shot that idea down. So thats probably the biggest issue to adoption right now - client ignorance.

    2 points
    • Sjors Timmer, 5 years ago

      Thanks for your feedback.

      Hopefully browsers pick on this, so we can push it further.

      0 points
  • Ryan MurphyRyan Murphy, 5 years ago

    It won't be as important as horizontal until the whole world can scroll sideways, as they do vertically.

    Also worth looking at: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

    1 point