First things first: what is the fold?
The ‘above the fold’ concept came from broadsheet newspaper editors. They would put all the most eye-catching stories and headlines on the visible folded portion of the paper, enticing customers to read more.
Web design adopted this idea early on for everything a user sees before scrolling, basing the position of the fold on the most common screen sizes. Scrolling beneath the fold didn’t come naturally at first, and we didn’t know as much about user experience and behaviour as we do now. It’s an ever-changing topic, and people have a lot of opinions on the subject. Hopefully this will set a few things straight – at least until the next technological innovation.
Where is the fold?
As designers, we often get asked by clients to make sure a certain piece of copy or call to action is always visible above the fold. We understand the reason for the request but it can be tricky to guarantee, and here’s why: We tend to base website and email design on the most common desktop, tablet and mobile screen sizes but when you consider different devices, varying screen resolutions, browser sizes and constantly evolving technology, it becomes hard to know where the fold even is.
This scale only helps so much in making sure users see key content above the fold. Fortunately, we can dig a little deeper: we can use Google Analytics to see the most popular screen dimensions, which provides valuable insight when redesigning and improving websites and emails.
More and more websites are adopting a full screen approach where content is coded to fill the screen and snap to the sides, top and bottom regardless of the resolution. This is a good way of introducing your website and ensuring content is above the fold, but we’re still restricted on the amount of content by the limited screen real estate of a growing number of mobile users, who certaintly shouldn’t be neglected.
So does the fold still matter?
Yes. Provided users are engaged enough by your email subject line to open it, or to visit your website for the first time, they’ll only scroll below the fold if what is above the fold is promising enough.
It’s all to do with effort and time. Users are short on both. We live in an age where everything is immediate and communication is instant. Even if we have a unique, life-changing proposition our customers would be mad to pass up on, we can’t expect them to approach it with anywhere near the same enthusiasm as we might. So we need to ensure what needs no further action, what’s visible above the fold, is enough to entice users to scroll despite the extra effort required to do so. This applies to anything that’s hidden from the user.
Working above the fold
In the first few, all important seconds, which of these five aspects on your email/website is most important in getting your users from deciding to open your email/website to exploring beneath the fold? And why?
- The subject matter
This will determine whether the email/website is relevant to the user and whether when they see the subject line of an email or title of the website in their browser they open or ignore it.
- White space
So they’ve got as far as opening your email/website – great! Give yourself a pat on the back as the odds aren’t exactly in your favour – 63% of people will delete or ignore an email after reading the subject line (Direct Marketing Association Email Tracking Report, November 2015) and 40% of people will leave a website if it takes more than 3 seconds to load. But we’ve still got a way to go before they take the dive beneath the fold. You might be thinking “designers always bang on about white space” and you probably have a fair point. But it’s true that white space is really important as it’s perceived in milliseconds, way before the user begins to read your copy. It’s a big factor when users are determining whether they have the motivation to digest the information in your email or website – if they get instantly overwhelmed, they’ll give up there. If used correctly between paragraphs and margins it’s even been proven to increase comprehension by up to 20% (Dmitry Fadeyev, Why White Space is Crucial To UX Design). So squeezing your content up as far as possible, reducing white space and cluttering your email/website for fear of asking users to scroll is a false economy.
Here’s another really important consideration about time and effort: is your copy easy to read and therefore low effort to digest? This is all down to your choice of font, its size, its colour (contrast), leading (the spacing between lines), tracking (the spacing between letters in a word), line length and a clear hierarchy.
- Story telling
When read, does your copy grab (and hold) your audience’s attention? Does it offer something different or interesting? Is it written in the right tone of voice to appeal to your users? Research has shown that ‘readership falls off very rapidly up to 50 words of copy, but drops very little between 50 and 500 words’ (David Ogilvy, How to create advertising that sells). So we need to pay extra attention to those all important 50 or so words which appear above the fold.
- The fold
Perhaps only a few seconds have passed but we’ve had many molehills to climb before reaching the mountain that is the fold. If we’ve ticked all boxes so far, then users will scroll down and explore.
How low can you go?
Chartbeat, a data analytics provider, analysed data from 2 billion visits and found that “66% of attention on a normal media page is spent below the fold.” – What You Think You Know About the Web Is Wrong
It goes without saying that users won’t see irrelevant, cryptic content and decide to scroll around in the vain hope they’ll find something useful a few screens down. Once we’ve cracked what’s above the fold, long pages need to be smart. They can benefit from signposts that lead users down or to another page, links through to more content and glimpses of what’s coming next.
Naturally, as screens get smaller we can’t fit as much above the fold so we scroll more out of neccessity and habit. Users don’t scroll because they love to scroll, they’re just now more inclined to expect more valuable information is below the fold on mobiles.
Usability studies by the Software Usability Research Laboratory’s show that users can read long, scrolling pages faster than paginated ones. Their studies confirm that people are accustomed to scrolling. – The Impact of Paging vs. Scrolling on Reading Online Text Passages
Variations in design and content mean it doesn’t mean much to analyse scrolling in absolute terms. It’s more valuable to look at the proportion of an entire webpage is reached by scrolling, which is exactly what Clicktale did.
They looked at dropoff points and found that 22% of users got to the bottom of the 120,000 page views they examined, regardless of page length in pixels. What we can interpret from this is users continue to scroll until either they lose interest with the content or navigate to another page or site. So there’s no optimum length for websites, and the tendency to reduce white space to bring as much content up, with the intention of fitting it above the fold or to reduce relative scrolling, actually serves no purpose besides making the information more dense, less appealing, disengaging and harder to comprehend. The focus needs to be on keeping users riveted through clear and appropriate design, the right tone of voice and relevant content up until the point you want them to act. Which leads me to my next point…
Where do I put my all important call to action?
I know we’d all appreciate it, but there really is no easy answer to this question.
As everyone who lands on your website or opens your email will see what’s above the fold, does that mean CTAs should always be right at the top? Not exactly, but we can break users up into three categories so we can stragetically place CTAs:
- Convinced prospects who already want or need your offering on arrival – give them a call to action immediately!
- Uncertain prospects who need a little convicing will need some concise, clear and strong copy before they click your all important CTA. So put your CTA directly below this copy.
- Uncertain prospects faced with a complicated offering will need a reasonable amount of clear, well-written copy to hold their interest and convince them of the benefits of your offering all the way from headline to CTA.
It’s important to think about your users because asking for a commitment before explaining the value of your proposition can seem salesy and pushy, which is likely to make them anxious. Similarly, if users are in a rush and want to complete an action it can be frustrating to dig around for a CTA.
It’s a real balancing act, as you could have both convinced and uncertain prospects. The solution is either to design for the overwhelming majority if you have one, or if not, design for the prospective users as convinced and familiar users, will have more motivation to complete a particular action. Remember though, conversion rates have less to do with whether your CTA is above or beneath the fold and more to do with if it’s beneath the right amount of convincing copy.