Posted in Website Optimization. 8 min read
Have you picked up a newspaper lately?
The term above the fold comes from the good old days when newspapers were among the most valued ways to find out what was happening in the world.
When you looked at a newspaper in a newsstand or bookstore, it would usually be folded so you could see the masthead – the part with the name and publisher located at the very top of the front page. Just below it would be the day’s most important headlines.
Below that was the fold: The giant crease marking (roughly) the halfway point.
You couldn’t see things below the fold unless you actually went over, picked up the paper, and turned it around. And that, in turn, wasn’t something you’d do at a newsstand unless you were already thinking about buying a copy of the paper.
In short, items above the fold are what attracted you to buy in the first place. Publishers were betting you would spot something you wanted to learn more about in that highly visible space.
These days, newspaper circulation is in collapse, with some of the lowest numbers in the history of journalism. Still, some of the lessons that this legacy media pioneered can still be useful to digital marketers who might never even read the funny pages.
How “Above The Fold” Really Works in Digital Technology
One of the biggest things to remember is this: Put the most vital elements above the fold.
Online, that means making sure the most useful or compelling aspects of your Web design are found on the first screen your users encounter. They should never have to scroll to get to the good stuff!
(Incidentally, making frustrated readers hunt around for the part of the story that matters most also has a name in print journalism: It’s called burying the lede.)
This raises a problem Web designers and UX experts will notice right away: Where the fold is depends on the size of your display, the level of magnification, the orientation if you’re using a mobile device, and a wide range of other factors. As marketers, we don’t control any of these.
That means it’s even more essential that you use data analytics to understand what technology your Web visitors use and plan accordingly. Even the best responsive design won’t guarantee precisely identical results. With that in mind, you have to think about the fold from the start.
Even when a user reaches the right landing page for them, what they see first after loading often determines whether they stick around or not. So, if a page has an abnormally high bounce rate, one likely culprit is whatever is (or isn’t) above the fold.
With that said, let’s dig deep into what should be above the fold:
5 Above the Fold “Must-Haves”
These are the items that never go wrong positioned above the fold. Unless you have a clear reason (and measurable outcomes to go with it), you should strive to include each of these every time.
1. Unique Value Proposition (UVP) or Selling Proposition
If your visitors are going to read – or even skim – a whole page, they need to know why they should care as quickly as possible. Your unique value proposition tells them that. It should show up on every landing page and throughout every marketing campaign you run.
There are three major elements to the unique value proposition:
- The main benefits of your offer.
- How you solve a pressing customer problem.
- What makes you better than the competition.
A well-written unique value proposition is concise and compelling, so you should be able to fit all or most of it above the fold across a wide variety of platforms.
You should revisit the UVP on occasion with an eye toward removing more words from it until it is lean and laser-focused.
2. Explainer Copy
Your explainer copy begins the process of unpacking the details of what you just shared in your unique value proposition. Odds are good that if you have anything but the simplest commodity product to sell, you can’t fit all of your explainer copy above the fold.
But there is still a way to optimize it that uses the fold well.
If you’re capturing user session info with data analytics, it’ll soon be clear to you what display size and device type most of your traffic takes place on.
You can make your pages more effective by using your explainer copy as a trail of breadcrumbs users will want to follow.
Simply let your text break in the middle of a thought that’s charged with emotional or evocative language and people will be that much more likely to scroll down.
In an optimized landing page, each element of your copy is enticing enough to lead readers on a little further. At a certain point, they’ve built up enough momentum that they’re sure to continue on their own.
Work toward this natural outcome and make sure you start laying that trail above the fold.
3. Brand Logo
Every page on your site should be part of a branded, cohesive package with a standardized visual style. Most Content Management Systems now offer presets to ensure your logo is always top of the fold and – potentially – even follows users down the page alongside the navigation bar.
If you’re still looking for the logo design that’s right for you, check out our post on 10 Logo Shapes and How They Impact Us Psychologically.
This will help you make sure your logo, whatever it might be, is the perfect match for your brand’s unique style.
4. Option for a Direct Next Step (Or CTA)
For users to take the next step on any business or e-commerce website, that next step has to be explicit. Even when people know exactly what you want them to do, they probably won’t do it without a clear call to action. Ideally, there should be one right there above the fold.
“But wait,” I hear you say. “Shouldn’t the CTA be at the bottom of the page?”
It might take a few paragraphs to fully explain an offer, but that doesn’t mean you should wait until then to pop your CTA onto the page.
CTA buttons – using strong text and color contrasts – should be located throughout a page so users can access them without scrolling.
So, yes: A CTA button will be at the bottom of the page, of course.
But it should also be at the top ... above the fold.
5. Simple Navigation
Modern design conventions around navigation bars are so locked in at this point, it’s pretty hard to do them wrong.
The main thing to recognize is that a nav bar that breaks across multiple lines has a tendency to look messy and unprofessional. It’s up to you to prioritize and put only the most useful options on the main nav bar so it’ll be clean and inviting.
Naturally, different members of the team will have different ideas about this. Executives love “About Us” and “Our Story” pages, for example, while the average Web visitor would probably rather go to the dentist than read them word for word.
Luckily, there’s a useful compromise: You can use the main navigational bar, typically at the top of the page, to hold customer-centered pages that are accessed frequently, while less-used “vanity” pages go to the footer menu.
Above the Fold “Could-Try”
Each of these items can make a big impression above the fold, but they might not be necessary in your situation. Since real estate above the fold is so precious, you should utilize analytics and A/B testing to determine whether any of these more creative items causes an appreciable bump in conversions.
1. Engaging Video
Research has shown that including a video on a landing page raises conversions by up to 85%. A positive effect on outcomes is noticeable even if the user doesn’t actually click on the video.
That’s right: Just seeing that a video is there influences conversion behavior.
Inevitably, some of your users will click the video before they read the rest of the page, while others will scan down the page and return to the video when they get bored.
Knowing that, your video should summarize the most relevant and interesting points that appear on your page.
2. Added Movement or Animations
Additional animation can make the difference between a user clicking “Back” or scrolling down just out of curiosity.
Animations should be branded and relevant: It’s not a good idea to stick your favorite cat .gif on the page, no matter how cute and fluffy it is.
3. Conversion Form
Conversion forms are a key element in most landing pages. It may seem logical that they should be as high on the page as possible, but they can be very successful at the bottom of the page, too.
Sometimes, short landing pages are designed so a video, the body copy, and the conversion form can sit side by side – a great design pattern to have in your toolkit.
4. Smart Content
The more you know about a particular Web user, the better your smart content can be.
For users who have filled out forms on your website before, first name personalization is usually the most powerful single element you can tailor to them.
Depending on your site’s content, you could customize offerings and structure based on things like the user’s language settings, geographical location, referring link, and platform.
Be judicious about how you use smart content for users who have just arrived on your site for the first time. B2B decision-makers and B2C consumers alike are more alert than ever to concerns about their data security – no one wants to be greeted, “Welcome Firefox User in Cleveland, Ohio!”
5. A/B Test Imagery
Images can have a tremendous impact on the performance of a landing page ... especially those “hero shots” featuring relatable characters benefiting from your solutions.
Although there are some general guidelines for these images – characters should face the viewer or have their gaze pointed at an action item such as a “buy” button – much depends on your audience and what resonates with them. Only testing can tell you which images soar.
In a world of limited time and attention spans, directing your users to what’s most crucial is best for both them and you.
By using the premium space above the fold wisely, you help ensure users will absorb more salient points about your offer and make more informed decisions.