Are Media Queries the answer to the Fold?

The fold is still one of the hottest topics on the web. Clients are concerned users will miss key content and web designers denying the fold exists. Could responsive design hold the answer to this debate?

“There is no fold”. At least that is what many web designers (myself included) have said in the past. Although this is true, strictly speaking, it is a simplistic argument and does nothing to address a real problem.

Drew Mclellan holding a there is no fold banner

Does the fold exist?

The “Fold” is a hangover from the newspaper industry. It is the point where a newspaper is folded in half to display on a new stand. People walking by the stand only see content above the fold and so it is important that key messages appear above this point.

The fold does not exist in this form on the web. There is no specific point that defines what users see without taking action (picking up the newspaper or starting to scroll). Instead there is an arbitrary line which is dependant on screen resolution, window size and browser setup. What is more research has shown us that the majority of users do scroll.

76% of the page-views with a scroll-bar, were scrolled to some extent.

That said, Jakob Neilsen’s research shows that although users do scroll, their attention is focused on content higher within the page.

Web users spend 80% of their time looking at information above the page fold.

We therefore need to ensure that important content is kept as high on the page as possible and that this content encourages scrolling. Neilsen sums it up when he writes:

The implications are clear: the material that’s the most important for the users’ goals or your business goals should be above the fold. Users do look below the fold, but not nearly as much as they look above the fold.

Some argue that this is problematic because we don’t know where the fold falls. However, that is not strictly true.

What if we knew where the fold was?

Recently there has been a lot of excitement surrounding responsive design. The idea behind responsive design is that your site adapts depending on the size of the viewport. In other words if you view the website on a small screen device like an iPhone, the site will look different from when it is viewed on a widescreen monitor. This is achieved through the use of Media Queries.

Example of responsive design

These media queries allow us to detect the width of the viewport and deliver different CSS depending on that size.

Where things get interesting is that you are not restricted to detecting a viewports width. You can detect the height too. This means we know exactly where the fold appears.

Adapting to the fold.

The consequences of knowing the viewport size without resorting to javascript is that we can adapt the design based on where the fold falls. Take for example this site Ed Merritt has recently designed for the Environmental Defence Fund (EDF). It looks great on my high resolution monitor:

EDF.org viewed on a high resolution monitor

However, things could have been problematic at lower resolutions.

A mockup of what EDF.org could have looked like at lower resolutions. Key content is hidden below the fold.

Not only could have key content been hidden below the fold, it would not have been immediately obvious that users had to scroll.

Fortunately Ed and the rest of the team at Headscape overcame this problem by using Media Queries.

EDF.org shown at a lower resolution with content reformatted.

They reformatted the content to show key elements higher on the page when the viewport height was low.

This technique allowed us to maintain the high impact visuals on bigger viewports without compromising the usability at lower resolutions.

Because this technique uses the same media queries used on responsive websites, it is perfectly possible to combine the two techniques. Ed does this on EDF which adapts depending on both the width and the height of the viewport. Although the EDF site is not fully responsive, it could easily have been.

 

 

What this means for the fold.

Having a technique like this at our disposal means that we can avoid a lot of the awkward conversations with the client where we try to explain how the fold does not really exist. It also enables us to have more freedom with our layouts and use of whitespace without being concerned over whether key messages will be missed at lower resolutions. In short it takes the sting out of the fold debate.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

  • http://twitter.com/ArleyM Arley McBlain

    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/

  • Jack Roberts

    Interesting, I think we need a remodel, we have found the same statistics on our website.
    http://www.biosphereplastic.com

  • http://cubicleninjas.com/ Cubicle Ninjas

    Agreed! There should always be content high up on the page that encourages the user to scroll. I think this is something that the newspapers did much better than web designers; having intriguing photos and headlines that make the viewer want to read farther down the page.

Headscape

Boagworld