If you’re just getting started with landing page design, a great place to start is to focus your attention and most important page elements above the fold.
The phrase “above the fold” originates from the newspaper industry and makes for a good analogy. Think of a broadsheet (larger format) newspaper like The New York Times or The Wall Street Journal. The space above the fold is simply the space above the crease in the newspaper.
The attention span of your landing page visitors is just as fleeting as those reading a newspaper headline as they pass a newsstand. If it doesn’t grab their attention right away, they won’t bother to stop and read.
Your job as the creator of your landing page, is to tell your introductory story as quickly and succinctly as possible.
Let’s look at some examples
Here’s the space above the fold on The Charlotte Observer.
Notice the core elements: eye-grabbing headlines and attention-grabbing photos. The main goal is to grab your attention and maintain your interest.
Newspapers use the same tactic online with their digital versions. Here’s The Los Angeles Times above the fold.
And here’s The Daily Telegraph from London. Notice that newspapers also use ‘tease’ tactics to entice the reader to continue to read.
Newspapers are in the news business but they’re also in the advertising business. The page stops you with a stunning photo but also aims to grab your attention with an obnoxious ad. The goal is to keep you scrolling down — or get you to click on the a banner ad.
Move to the Internet and the space above the fold is simply the content the reader sees as soon as they land on your page. Here’s what Unbounce displays above the fold on its home page.
The moral of the story: what you place above the fold is very important. Whether on a newspaper, website or landing page. But how do you choose what to place above the fold?
How to Choose What You Place Above the Fold
Keep the following 10 points in mind when crafting your powerful and high-converting above the fold space.
- Take a look at your competitors…especially the super-successful who pay to generate a ton of traffic. I’m not endorsing plagiarism but make a list of the elements your competitors include above the fold.
- Set a specific conversion goal for your landing page. A direct sale? Or an opt-in? This will determine which elements you choose above the fold. If you’re building a database, you’ll want a form above the fold. Visitors will quickly decide whether they want to stay or leave based on their initial impression. Make sure you are crystal clear. Give customers who are ready to convert the opportunity with a big CTA above the fold.
- Start with a ‘How To’ headline. In April, I attended a copywriting conference run by one of the more successful Internet marketers. In that company’s testing, the “How To” headline wins 90% of the time. If you’re selling a cure for Acne, a “How To” headline might be, “How to End Acne in Just 12 Days.” You can test other headlines down the road but start with the old classic.
- Keep it super-simple and super-clear. This takes work. But the value proposition must be easy to understand as soon as the potential client or customer sees the space above the fold. Trust simplicity and clarity.
- Keep the design free of graphic clutter and noise. Follow the Unbounce look more than the L.A. Times approach—which has too much going on for my taste.
- Maintain alignment. Many marketers create conversion leaks by failing to keep the space above the fold aligned with their traffic generation. For example, a PPC ad might say, “14 Day Acne Guarantee.” But the headline above the fold on the landing page reads “All-Natural Acne Cream Rocks!” Keep the messages aligned.
- Choose happiness when choosing graphics. Whether you’re selling a solution to a problem or a vanity product, you’re selling happiness. So choose images of happy, smiling people. You can pair these happy, smiling people with a dog if that boosts conversion.
- TELL THE READER WHAT TO DO…In the vital space above the fold, you must persuade the reader to click to a new page or scroll down. Tell the reader to “Click Here Now” or “Scroll Down Now.” First person buttons can outperform third person buttons. For example, copy for a button might read, “Yes! Make Me Acne-Free in 14 Days!”
- Try a proof element above the fold. This can include logos of major customers, customer testimonials, a count of customers or an industry review snippet.
- Remember the most important rule. The reader is asking, “what’s in it for me?” Answer that question above the fold but ONLY with the primary benefit – aka the unique selling proposition.
Follow the steps above and you’ll have a solid foundation for your landing page that you can use as the starting point for your future A/B tests.
Now let’s look at some landing page examples with these 10 above-the-fold tactics in mind.
Above-the-Fold Landing Page Examples with Commentary
One of my clients, Marketing Results, based in Brisbane, Australia, created this landing page for one of their clients. I can’t give actual conversion rates but let’s just say that everyone’s extremely pleased. Here’s the space above the fold.
Rental Express
It’s a landing page so notice the ultra-clear form. The rhetorical question headline is effective because the target audience already knows the answer. There’s a solid 3-month ‘free’ offer. You also see social proof in the form of logos and the 647 customers who switched…I also like the two bullets. Study this above the fold space closely for two reasons:
- The goal is to persuade the reader to fill out a form.
- It’s not a ‘how to’ headline but the target audience knows the answer to the question.
- Is this page super-simple and super-clear? You bet.
- It’s free of graphic clutter and noise.
- Perhaps what I like the most about the page: it tells the reader what to do in tandem with a strong offer.
- There’s a powerful social proof element…the 647 happy clients.
- Finally there’s an answer to the “what’s in it for me?” question. The 3 free months of service. That’s a big savings for a property owner.
X Out – Acne Treatment System
- The goal of the page is clear: buy! And there are two super-clear CTA buttons.
- There’s a “how to” headline; the copywriter simply left off the “how to.”
- There’s nothing super-complicated about the page. It’s extremely clear.
- One of the graphics uses a smiling image of a customer.
- I like the proof element above the fold; in this case the opportunity to watch a video. I like the subhead on the button.
- The answer to the “what’s in it for me?” question: an easy way to control acne.
Fly With Class
- The pre-head provides a benefit…one-stop shopping.
- I like the image of the smiling and attractive flight attendant.
- Logos of travel organizations and airlines for social proof.
- Clear benefit in the headline. It’s believable. Again…it’s a “How to” headline.
- The next steps are clear.
- The form is not overwhelming.
- You get two options to respond: call or complete the form.
- The headline for the body copy is clear: you’re going to save on business and first-class travel.
Break the Rules. And Test.
Just remember, guidelines are great to establish a baseline design for your page, but it’s not where you should end the process.
It’s at this point that you must start learning about your page and it’s impact, by gathering customer feedback and checking your analytics. This will allow you to start making informed design changes in your landing page optimization process and A/B test ideas.
Do you have any above the fold tricks you’d like to share? I’d love to hear your thoughts in the comments.
