How To Design Above-The-Fold Landing Page Experiences

Make a Powerful First Impression and Increase Conversion by Focusing on the Vital Space “Above the Fold”
Newspapers & Landing Page ‘Above-the-fold’ Tactics Aren’t All That Different (Image Source)

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.

The Charlotte Observer - Above The Fold

Newspapers use the same tactic online with their digital versions. Here’s The Los Angeles Times above the fold.

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.

“tease” tactic - The Daily Telegraph

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.

Unbounce Above The Fold

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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!”
  9. 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.
  10. 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

Rental Express - Above the fold

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

acne product landing page - above the fold
  • 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

Fly with Class - Above the Fold
  • 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.

– Scott Martin


About The Author

Photo of Scott Martin

Scott Martin is a direct response copywriter based in Charlotte, North Carolina. He’s also written a book about Caddyshack.
» More blog posts by

Comments

  1. Stella Wane says:

    Hi, Scott
    I think the newspaper idea is one of the orthodox method but it is strange and I always wander and I am happy it always work.

    Thank for the nice sharing.

  2. Rob says:

    I have to disagree with you on some points in this. The whole above the fold argument is getting a bit deprecated. There are a myriad of different devices that people use phones, tablets, laptops, desktops and the oddball ones like watches. Each of these has a different “fold”

    I think the most important thing to consider is your audience. What devices are they on? Where is your largest portion of traffic coming from? What are the trends for rising mobile traffic? Many of these examples are complete failures for users on tablets. Especially considering many studies show people on iPads spend more money vs other devices. #FoodForThought

    • Josh says:

      I agree, the examples above would not fare well on a mobile device. However, a landing page designed for mobile would look strange in a desktop browser. It would seem like a good option if you have a large amount of visitors on mobile devices is to redirect them to landing pages optimized for the platform they are using .

    • Scott Martin says:

      I appreciate the comment. You’re right, the pages above came from my laptop screen. However, every device has a space “above the fold” and it’s important…it’s the first thing the potential customer sees.

      So it’s valuable to look at the above the fold space on every device.

  3. I’m still unfamiliar with the idea of “above the fold”. I know article directories like Ezinearticles prohibit this, but when creating articles for my site, i clearly put links “above the fold” on my site. Doesn’t matter to me though… i create my articles for my email subscribers. Direct marketing for me – not SEO.

  4. These were interesting landing page examples. For the most part I’ve been using Optimize Press (WP Theme) to produce my Squeeze Pages . They have there only particular style. Would you recommend them ?

  5. Gregg Cantor says:

    As time goes on, “above the fold” will not matter. With smart phones, tablets etc. there is no fold. If websites are built with responsive design, formatting uniquely for the different devices, the fold will be a thing of the past.

    • I respectfully disagree – there is still a fold on mobile devices, smartphones, etc. Generally speaking, it’s the top of the page for any/all devices & browsers. Whether that means 700px or 200px makes no difference.

  6. Mark Ford says:

    I always design a sites home page with “above the fold” in mind and base that fold on a PC/laptop screen.

    Some of the previous comments are correct in that the fold is in a different place on a mobile or tablet device but as it stands all of my design clients receive the majority of their traffic from a PC or laptop.

    Unless you are offering responsive design (which I’m not) I say go with the majority.

  7. Reginald says:

    Hi Scott,

    I think you did a great job here. Excellent write up and examples. Honestly speaking, I visited this page twice!

    Keep it up and thanks for writing this. Appreciate it.

    Reginald

  8. Ricardo says:

    Good post!! Particularly like the theory and practical examples.

  9. Jason Rose says:

    Our site is one of the examples and we have believed in the philosophy of one page one purpose and working with Marketing Results we have received a considerable improvement from our original page

  10. Good post mr martin