Responsive Web Above The Fold

This post’s title isn’t just a weak attempt at SEO stuffing, it’s also a blind-folded scissor kick into a beehive convention! Few topics in web production can bring a nerd’s blood to a rolling boil as quickly as “The Fold” and “Responsive Web Design”, so it’s high time we combine the two and bring this server to its knees under the sheer weight of trolls sharing how they really feel about me as a person.

Before the Webbys have to invent the “Best Use of Naivety” award I’d like to point out that for years I’ve been in the “The Fold is Dead” camp. Nothing used to please me more than comparing a website to the source of the scrolling metaphor; papyrus scrolls (bonus points when I could work a font joke in). “Sure, and when scribes wanted to avoid scrolling they probably wrote letters on fortune cookie paper, amiright?!” (clients probably love sarcasm). However, recently I’ve been forced to admit that maybe I should be a bit more accommodating of the Fold’s proponents, rather than simply beating them over the head with my sack of used mouse scroll wheels.

Recently Google (incidentally a company whose clean “above the fold” website is merely a gateway to lots of scrolling search results) added a new feature to their Google Analytics suite that allows you to see what size of browsers users are visiting your site with. This allowed me to stop pretending that the data from the user’s monitor resolution actually meant something relevant, and to begin to learn more about the way users are surfing my site.

Google Analytics is a useful tool, and can do more than just shatter your faith in humanity’s ability to upgrade their web browser. This tool can literally tell you how your site is being used. You can easily see who is scrolling and clicking those big shiny buttons you painstakingly designed, even after they’ve been pushed well out of sight by multiple instances of the “Ask Jeeves” toolbar. It will literally show you a percentage of who is scrolling and clicking individual links!

This new analytics tool made me start thinking about the fold afresh. I used to think of the fold as a weakness or handicap of Luddite users, but for the first time I saw that the fold has a huge bearing on the way that I (a savvy webmaster) surf the web as well. I had to admit to myself that I bounce a lot (Google Analytics probably has me pegged with the attention span of a goldfish). I’ll often making the decision to leave a website within a second of arriving if I don’t immediately see what I came for, or if I think the site looks like it was built by rodents. Judging books and websites by the cover doesn’t usually hurt until a lack of results has me return to that same page to look harder, only to find the content in question sitting smug just below the fold.

Getting Started

The new browser size analytics feature has been around just long enough now that you can see some real data on how your current site design fares with impatient people like me! You’ll see that many users aren’t using their browsers full screen. While this has always been true of Mac users (most bitterly say they prefer their windows smaller after not being able to figure out what that UI “+” button does), it turns out that many PC users probably don’t either (probably trying to look cool to the aforementioned Mac people).

I’m guessing the results of the reports will motivate you to do one of two things: personally confront each user on their questionable computer habits in dimly lit remote areas, or make you want to fine tune your design. The latter is where some handy vertical responsive web design comes in (for the former I recommend a sack full of used mouse scroll wheels).

Vertical Responsive Web Design

For the last couple years we’ve all been resizing our monitor widths like giddy accordion players to better understand RWD. The magic behind those is the now-common Media Query:

@media screen and (min-width: 768px) {  
  marquee { font-size: 43em; }
}

To get started with vertical RWD is a simple matter of addressing heights. Cinchy.

@media screen and (min-height: 768px) {  
  blink { color: pink; }
}

I wanted to make a couple practical vertically responsive demos to tantalize and delight!

Example #1: A Cuddlier, Squishier Fold

The most obvious use of vertical RWD would be to keep your all-important calls to action above the fold. To make this example extra fun I’ve chosen to do this on an existing horizontally responsive layout courtesy of Twitter Bootstrap. Being responsive on two axes is good fun, and is a great opportunity to make some messy code, if you’re into that kind of thing.

When you vertically resize this demo site on desktop I’ve decided that I want to keep all four of the buttons in view as much as possible (hopefully the average site will just have one key CTA). For mobile sizes I only will require the blue CTA button to stay visible. For this demo I’ve decided not to worry about screens shorter than 320px. Realistically that should cover the extremely small desktop users and mobile users alike. We should be comfortable to talk about the users with smaller viewports in the tone that we usually reserve for IE6 users.

With this Twitter Bootstrap layout there are four horizontal break points – all but the last one (when the lower 3 columns get stacked) I am able to keep my buttons in view. This is all done by a few media queries which you can find in a <style> block at the bottom of the document’s source code.

All in all, it was pretty cinchy to retro fit this layout to work in this way (he said with confidence despite deliberately picking a layout lacking media above the fold), especially by piggy-backing on existing horizontal break points.

Of course we also need to address the ugly elephant that basically lives in this room like an ever-unwelcome squatter: what shall we do about the old versions of Internet Explorer? There’s a lovely little JavaScript library called CSS3MediaQueries.js that does the trick fairly well. I’ve included it in this demo in conditional IE tags. While it doesn’t resize as fluidly as a modern browser, on the page load the user will see the responded version of the layout. Beauty.

Twitter Bootstrap demo:

View Demo

Example #2: WordPress Dashboard Navigation Tweak

This example is much simpler: one tiny media query with a simple bit of CSS that completely changes the ordinarily relative positioned left navigation that all WordPress admins are familiar with:

@media screen and (min-height: 500px) {  
  #adminmenuwrap { position: fixed; } 
}

Now, regardless of the navigation being in the collapsed or n00b mode (I jest), it will stay visible when you’re scrolling through taller pages – provided your vertical resolution is taller than 500px. If your browser is shorter than that it goes back to being a relative positioned element that will scroll with the rest of the site. I’ve chosen 500px which is enough for the standard menu, as well as a few extra menu items from plugins or themes.

This vertical oriented RWD positioning treatment can work very well for navigation, widgets, pictures of cats, page tools, and even the lovely ads, like the ones from the charming sponsors of this website!

For this proof of concept I’ve made a localized HTML version of the WordPress dashboard (all of the links are broken it’s a demonstration of the scrolling effect only):

WordPress Dashboard Demo (media query only):

View Demo

The 500px used in my example only works when you know the maximum height needed for the element. However, if the height of that object is unknowable or changes (an accordion navigation with multiple levels for example) you may want to consider a bit of jQuery that will compare the height of the object to the height of your window.

I have done this in the following variation of our demo by calling jQuery and using this script:

var setResponsive = function () {

  // Is the window taller than the #adminmenuwrap by 50px or more?
  if ($(window).height() > $("#adminmenuwrap").height() + 50) {

     // ...if so, make the #adminmenuwrap fixed
     $('#adminmenuwrap').css('position', 'fixed'); 
    
  } else {
       
     //...otherwise, leave it relative        
     $('#adminmenuwrap').css('position', 'relative'); 

  }

}

$(window).resize(setResponsive);
setResponsive();

WordPress Dashboard Demo (with jQuery):

View Demo

A Tall Order

So there you go.

A slight disclaimer: throughout this post I’ve been using the phrase “vertical responsive web design” – please understand that I’m just specifying the orientation of the responsivity, not coining a phrase. Whether the response is vertical or horizontal the term “responsive web design” captures it all.

I think there’s a lot more we can be doing with vertical responsive web design in relation to our best practices, our content, and our users. The advent of this snappy new Google Analytics tool makes this a great time to start. In the past these wily short-browsered users may have been unpredictable and frustrating enough to drive Berners-Lee to kick a kitten, but now we can learn from their behavior, and predict the common ways they’ll view important content.

Good news my friends, the fold is now undead.