11 Examples of Superb Above the Fold Content

Back in the day when people bought newspapers off street-side stands, newspapers employed a technique called “the fold” to encourage buying.

The basic idea is this: the most important and interesting news story of the day was plastered across the top of the section. So, if the paper was folded in half and placed so that only this big news story was above this fold, facing upwards, then the papers would be able to drew attention to the most important story. The story would thereby intrigue readers and coax a purchase.

Above-the-Fold
Image source: Elvind via Flickr.

Nowadays, this isn’t as big of a deal since most of us get the paper delivered to our doorstep rather than going out and buying one at a stand.

Nevertheless, the concept lives on in web design. The only difference is that the fold here is the line at which the screen cuts off a page.

The first step to achieving a good first impression with your visitors is creating a homepage with an attractive, engaging above the fold section.

In this post, I’ve collected a list of 11 popular websites with terrific homepages that maximizes the use of their above the fold real estate. Analyze the pages below, and you’ll come away with enough inspiration to build an engaging above the fold section on your own website.

1. Quick Sprout

Quick Sprout is a blog run by a highly successful web entrepreneur, Neil Patel. It’s actually one of my favorite blogs (I find myself reading it at least once weekly).

The first time I got on this site a couple years ago, I was hit with a version of the above the fold content you see below (the design has been slightly updated since, but the basic elements are the same).

QuickSprout

What you’re looking at is a web tool that analyzes your website and shows you how to get more traffic to it — and who doesn’t want more traffic? It’s a great way to get visitors to immediately interact with the site.

2. Daily Mail

Daily Mail is one of the most popular online news portals. Like real-life newspapers, Daily Mail’s homepage uses the majority of its above the fold space to focus the reader in on one specific news story.

Daily-Mail

This helps to remove the overchoice inhibition that often turns readers away from websites.

3. SEMRush

SEMRush is a popular SEO research tool. Like Quick Sprout, they help to encourage interaction on their website by focusing visitors to their homepage on the functionality of their tool.

SEMRush

As you can see in the screenshot above, the part of the page above the fold includes a form visitors can use to instantly test drive the tool.

4. Ahrefs

Ahrefs is one of SEMRush’s most popular competitors. Like its rival, Ahrefs also incorporates the same interaction-encouraging element that allows visitors to trial out Ahref’s research tool.

Ahrefs

While both SEMRush and Ahrefs have awesome above the fold content, I personally prefer Ahrefs’ because it also provides a little bit of copy at the top to explain to first-timers exactly what the tool does.

5. ConversionXL

ConversionXL is a website belonging to Peep Laja, conversion rate optimization extraordinaire — so it seems obvious that the website would have a high-conversion landing page.

ConversionXL

Peep’s homepage has an attention-grabbingheadline sprawled across the top of the fold in a sizeable font: “Your website is leaking money.” Since no business ever liked to leak money, it’s only natural that visitors become encouraged to browse further.

You’ve also got a CTA just above the fold to join Peep’s email list in exchange for a freebie CRO eBook. Last but not least, there’s also the big ol’ picture of Peep that puts a face to the name.

6. Jeff Bullas

The homepage for the Jeff Bullas blog has an ideal layout that will work tremendously well for most blogs. It’s ultra-simple but also ultra-effective.

JeffBullas

The above the fold section of the Jeffbullas.com homepage is quite simple. You have a picture, navigational menu, and opt-in form in the sidebar, but the obvious focus is the attention-grabbing title of the first blog post that eggs you on to read the entire post.

The rest of the page shows the next five blog posts (in full — no “read more” links). This is a great tactic to use to increase average time on site and ensure that all your visitors get exposed to your blog posts. Several blogs, including the popular Problogger, also use this tactic.

Notice, however, that there is a dismissable notification bar up top that’s an affiliate link to one of the products Jeff promotes. To my knowledge, this appears to be a recent change to the blog design as I haven’t seen it much before now.

I’d advise you to tread carefully if you want to go with a similar affiliate link because that takes users away from your site; basically, you have to decide whether the increase in bounces is worth the increase in revenue.

7. Buffer

If you’re an active social media marketer, then you’ve probably already heard of Buffer: a social media scheduling tool.

The Buffer homepage is actually all above the fold. There’s no element below the fold.

Buffer

The main focus are the links that allow visitors to instantly sign in with Buffer and start using it. The Twitter sign in is highlighted, presumably because Twitter is the most popular network with Buffer users.

Below these sign in buttons, there’s a link to access the business version of Buffer. Finally, at the very bottom, you have a footer area with some links that go out to their blog, about page, FAQ, and contact page.

8. TweetDeck

TweetDeck is a web tool that’s pretty similar to Buffer; it allows for tweet scheduling and has some other functionality helping you to manage your entire account with a nifty dashboard. It’s built & owned by Twitter.

TweetDeck

TweetDeck’s homepage approach is also pretty similar to Buffer’s. Once again, there are no elements below the fold, and the main highlight is how to get started with TweetDeck instantly.

9. Men With Pens

I’m highlighting the Men With Pens homepage not for their actual layout, but rather for their quirky design. They sell web design and copywriting services, and they’ve done a terrific job of using their homepage to showcase their relevant abilities.

Men-With-Pens

Instead of a standard corporate-style website, MWP opts for a casual, fresh look that’s pretty rare to find on the web these days. In terms of actual interaction, there’s basically just a the navigational menu and a carousel. So while there may be room for improvement in the actual elements included above the fold, the interesting nature of the design compensates well for any lack that could be in that area.

10. Sidekick

Sidekick is a tool created by Hubspot that allows you to track your email opens & clicks when you send from Gmail.

SideKick

Their homepage’s slogan “Supercharge Your Email” is a spot-in; a great piece of copy that really draws visitors in. There’s also a button that, when clicked, will get Sidekick integrated with your Gmail account.

Finally, there is a smidgen of social proof (“200,000+ weekly active users”) to help build credibility.

11. Cyfe

Cyfe is a business management dashboard that consolidates data from all your analytics platforms into one uncomplicated app.

Cyfe

Their above the fold section on the homepage is very straightforward. There’s a bit of copywriting that succinctly explains what Cyfe does, and then a 3-field form to get you started using the tool.

Like Sidekick, Cyfe also leverages social proof by highlighting its 90,000+ users (which include high-profile names like AT&T, Vodafone, Groupon, etc.) and their various features in the media.

Wrapping Up

There’s no reason why your above the fold content can’t be just as awesome as that of any website we’ve looked at above. When you study sites with great homepages, and you’ll soon enough pick up on the elements that go into awesome, engaging designs that will wow visitors.

What does the above the fold section of your homepage look like? Do you have any improvements that you plan to make? Any tips to share? Please leave your thoughts in the comments!

Jonathan is a freelance writer and a conversion rate optimization enthusiast. He writes about online business, digital marketing, and WordPress.

Comments

  1. Hi Jonathan,

    Love these examples. I’m a huge fan of James Chartrand’s design over at Men With Pens, so it’s good to see her represented here.

    Of course, Neil, Peep, and the rest are great, too. Lots of good choices!

    Just shared this on Facebook and will tweet it shortly. Thanks for the great article, Jonathan. Enjoy your weekend!

    -Kevin

  2. abhilasha shrivastava April 5, 2017 at 7:36 am

    Hey John,
    solid choices, proved very helpful for me. Thanks

    1. Sharon Hurley Hall April 5, 2017 at 9:20 am

      Glad you liked it, Abhilasha. Check out our post on blog comments; there’s some cool data in there. 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.