First things first: what is the fold?
The ‘above the fold’ concept came from the way newspapers are folded in the store. Put the biggest stories of the day on the visible bit, and customers will want to read more.
Straightforward stuff. Then along came strategic design for digital experiences, which decided that the ‘fold’ lay above everything you didn’t need to scroll to reach. Encouraging people to scroll down beneath the fold wasn’t a natural instinct right away, as we didn’t know as much about user experience and behaviour as we do now. And of course today, UX and UI insights are always changing the way we deal with the topic, and different people will tell you different things.
We’re here to set it all straight.
Next, where is the fold?
Clients often say they’d like to see a certain piece of copy or call-to-action above the fold. We understand why, but it’s a tricky thing to guarantee.
That’s because website and email design is normally based on the most common desktop, tablet and mobile screen sizes. Of course, when you consider the different devices, screen resolutions, and the technology we’re using – it becomes difficult to point a finger at the screen and say “this is the fold”.
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, which are resolution agnostic. This way, you can ensure key information always sits above the fold. But there’s only so much space on any screen – and bombarding users with all the content you’re sure is really important can hinder, rather than help them. That’s particularly true when you think about smartphone users. And with Google’s AMP Project now up and running, this is a group you simply can’t forget about.
So are you saying the fold doesn’t matter?
You still need to wow first-time visitors to your site, or people opening your emails for the first time. They probably don’t, at that point, have any particular loyalty to your brand, and might never come back if you don’t make a great first impression.
Your customers don’t have time or effort to spare. They’re used to getting an immediate response, all the time. So even if your proposition could literally change lives, unfortunately we can’t expect people to approach it with the same enthusiasm before they know anything at all.
So we need to think about putting certain things above the fold, to keep them scrolling. Getting them past the fold, the first hurdle, is essential.
Strategic design: working above the fold
Which of these five things is most important in getting your users to explore below the fold, and why?
1. The subject matter
“Is it relevant to me?” is the first question your users will ask. It will determine whether people engage or not. You’ll never capture the hearts and minds of every single person. But you need to be clear about what you’re all about. So that the people who would be interested know they’ll be interested.
2. White space
If you got past step 1, well done. 63% of people will delete or ignore an email after reading the subject line 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. If you’ve worked with a design agency before, you’ll know that ‘white space’ is a big deal for designers. But we’re not being divas – it’s a really important aspect of any design, and impacts users’ opinions way before they start reading.
If users feel instantly out of their depth, they’ll leave. If you use white space strategically, you can boost comprehension by up to 20%. So causing clutter to squash extra messaging into a small space isn’t a great idea, in our book.
Can people read your copy?
This isn’t just down to the choice of language (our preference: simplicity).
It’s down to the fonts you choose, the colors you use, the contrast, leading (line spacing), and how things are put together in development. This is a key thing to consider after setting out any strategic design approach – there’s no point having amazing visuals if the development doesn’t reflect the original visuals.
When you read it, does your copy grab (and hold) your attention? Or does it drift off on a tangent?
Research shows that readership falls off very rapidly when reading up to 50 words. But it reduces very little between 50 and 500 words. So it’s those 50 or so words which appear above the fold that seal the deal.
5. The fold
If we’ve ticked all boxes so far, then users are far more likely to scroll down below the fold (wherever it appears) and explore your site. And more importantly, they’ll actually find out about your products and services.
How low can you go?
From a data analysis of 2 billion visits, research has found that 66% of attention on a normal media page is spent below the fold.
So one-third of users never make it that far. If they see irrelevant content that doesn’t shoot straight, it’s unlikely users will scroll any further.
So you need to give them signposts to lead them down the page or deeper into the site. You can also supply ‘breadcrumb’ trails to help them explore your content and give them an idea of what’s coming up. Remember, your users with smaller screens are actually used to scrolling, out of necessity and habit. So be sure to keep your engaging design up all the way down, so that people scrolling past stop when they see something interesting.
In fact, usability studies show that users can read long, scrolling pages faster than paginated ones. And What proportion of a website is reached by scrolling? Well…
22% of users got to the bottom of the 120,000 page views they examined, regardless of page length in pixels.
What this says to us is that users will keep going until they lose interest or navigate away. So while there’s no ‘perfect’ length, you need to work hard to keep things interesting. Not bringing all your killer content above the fold actually helps you do this.
Where do I put my call-to-action?
Well, sorry, but there’s no one-fits-all answer to this one.
It depends on how the site is designed, and it’s often a good idea to surface certain CTAs while pushing others below the fold for users to pick up later on.
Let’s have a quick look at three key profiles of people who will use your site to expand on this idea:
- Warm prospects who already want what you’re selling. Put a call-to-action front and centre!
- Uncertain prospects who need a little convincing? Give them some concise, clear and strong copy. Then in comes your CTA.
- Uncertain prospects faced with a complicated offering will need a reasonable amount of clear, well-written copy to hold their interest. Convince them of the benefits of your offering all the way from headline to CTA with detailed strategic design and copy.
If you come across too pushy and sales-y, you might not win any business. But if you don’t give people what they need, it’s easy for them to become frustrated and drop off. It’s a balancing act.
The solution is to use strategic design to suit the needs of the overwhelming majority, if you have one. If you don’t, design for convinced and familiar users, who’ll have more motivation to complete a particular action. Remember though, ultimately your conversion rate is more to do with the quality of your website than just what’s above or below the fold.
Still unsure? Talk to outré creative, and we’ll point you in the right direction.