Respect the Fold.

In November 2014, Google released this report on Viewability. TL;DR? Forget impressions served, if less than 50% of your ad isn't on screen for 1 second, then technically no one is seeing it.

By Google's reckoning 56% of ads weren't seen, and more importantly, ads above the fold had 73% viewability compared to just 44% for below the dreaded fold. That's an enormous drop off, just look at the graph beneath for a stark visual representation of that drop off.

This graph from Google's report really highlights the effect of the fold on an ad unit.

This graph from Google's report really highlights the effect of the fold on an ad unit.

Cue advertisers feeling understandably annoyed that their inventory wasn't being seen, and they were still paying premium fees for the privilege.  

The enormously respected Nielsen Norman Group released their own findings in January of 2015. They found that the 100px directly above the fold were viewed 102% more than the 100px below it. 

What is the fold all about?

So, what is the fold and where is it? The fold has it's roots in the days of the printed newspaper and was the term for the literal crease in a newspaper as it was bent in half - the theory being that readers didn't pay any attention to what lied in that second half. That has been carried through to web design, and as far back as 1997 the NN Group were theorising as to the importance of the fold vs scrolling. 

In the year 2000, an incredible 56% of web users had an 800x600 screen resolution, and although screens have made vast leaps in the last 15 years (and that number has dropped to less than 1%), the average screen resolution is still only 1024x768. That's only an extra 168px from the top of the screen. 28% of extra vertical real estate in 15 years

And although 1920x1080 screens are on the rise, an even greater rise is being witnessed in the 1366x768 category, making it safe to assume that the 768px fold is going to be with us for some time to come.

Everybody scrolls

So what role does scrolling play in web browsing patterns? Everybody scrolls apparently. A test conducted by HugeInc. found that 96% scrolled, and 87% actually reached the bottom of the page! Combine those numbers with Content Verve's example of a button at the bottom of the page outconverting the same button at the top of the page by 304%, and things become truly confusing.

However a pattern does emerge. 

Obviously users pay more attention to what's above the fold - afterall, it's the first thing they see. It stands to reason that this is the most important part of the site to get right. Often you see designs where the top of the page looks like the entire site, and perhaps a user won't realise they need to scroll.

Paypal's homepage looks like there is no fold - so they rely on a user following the direction of that subtle little arrow.

Paypal's homepage looks like there is no fold - so they rely on a user following the direction of that subtle little arrow.

But more often than not, research shows that if a user realises there is content beneath the fold, they will scroll to find it. The key is in designing a page which entices the user to want to scroll. Nielsen Norman posit that it's about interaction cost, but to me, the process of scrolling has zero cost - it's second nature (and if you watch the way children use tablets it's verging on first nature). 

It's about quality

The Content Verge example of the 304% conversion increase may be a best-case scenario, but the methodology behind their approach is sound; they focused on good copy followed by a clear call-to-action. The CTA performed better because it was at the foot of a good spiel. The copy could just as well have been 1 paragraph long with a CTA above the fold and had good conversions - but the key is still the quality of the paragraph. 

Adapt

What we're seeing now, are sites adapting to these findings. With revenues driven in part by the advertisers, the need to have viewable ads is paramount. The Guardian have lost the right-hand column traditionally seen on news sites in favour of a short column with an MPU and 5 "Most popular" stories. On a current site I'm working on, I'm following the Guardian's approach, except making the column sticky. The Ad will travel with you.

The Guardian's article page has prioritised an Ad unit to ensure it's 100% viewability.

The Guardian's article page has prioritised an Ad unit to ensure it's 100% viewability.

This forces other issues to the fore. Where in the past designs have relied on an abundance of links in their right-hand column (see the Daily Mail) for their 2nd click, designers are now having to come up with new ways to surface that content. Some sites include links midway through an article, or like the The A.V. Club they make use of "Next" and "Previous" buttons. 

There is also the emerging trend, popularised by Medium and adopted by Bloomberg of continuous scroll, where you just continuously scroll to the foot of an article and another will load, giving you the feeling of scrolling through the longest site in history. This can leave users feeling all at sea, losing the context they've become accustomed to.

Computer screens may not have added much vertical space, but the horizontal space has grown further, and responsive design gives us the choice to use that extra width. There will surely be new solutions out wide.

These are new challenges - certainly in the world of designing with the advertisers in mind; viewability is without doubt the topic du jour in these circles.

The fold is not a myth

The fold is real, and it should affect your design, but it shouldn't inhibit it. If you design something that entices the user enough to scroll, then they will scroll and odds are they will engage. The content and the design you place in those first 700 pixels are as important as ever.

Tom Wood