The concept of “above the fold” derives from newspapers and the way they were folded in half when displayed on newsstands. Due to this fold, only the top half of the daily newspaper’s front page was visible.
In terms of website design, Merriam-Webster Dictionary defines above the fold as:
Located prominently near the top of the page in an electronic document (such as an e-mail or a web page)
To simplify this definition, it’s easiest to know what the fold is on your electronic screens (Since we can’t physically fold them in half like a dusty old newspaper).
The fold refers to the very bottom of your screen. On a Mac, it’s where your dock of apps rests. On an iPhone, it’s where your favorite apps like iMessage and Safari sit. (I’m a dedicated Apple advocate, so naturally my metaphors would follow suit.)
So, when a webpage loads on your screen, anything you can immediately see is considered above the fold. Anything else further down that webpage that requires scrolling is considered below the fold.
For example, when I load our blog homepage on my desktop, this is what I can see above the fold (left). And when I load it on my iPhone, this is what I see (right).
The fold is the line that cuts off the rest of the website concept from your line of sight. To view any more content on this page (in this case, to view our recent blog articles), you would have to scroll below the fold.
If more than half of your visitors will spend less than 15 seconds on a website page, it’s imperative that you design your website to captivate their attention early on.
If they like what they see, they’ll stick around. If you can’t hook them with your above-the-fold content and design, they’ll leave empty handed.
There is a kind of a debate as to whether or not putting your most important content above the fold is actually essential. Some marketers believe people are willing to scroll further to find what they’re looking for, whereas others argue that if it’s not above the fold, they don’t care to keep searching.
But here’s the thing: You should want to hook visitors right when they arrive on your site and give them a reason to continue checking out what your business has to offer or even convert them into fresh leads.
And, by placing the right elements above the fold on your homepage, you can do just that.
Your homepage is the most important page on your website hands down. It (most likely) gets the most views, but more importantly, it creates the first impression of your website and brand as a whole.
So, you can see why you’d want to dazzle your visitors instantly.
When it comes to the content you place above the fold, there are a few essential elements to put at the top of your list.
This may be silly to include in this list because it’s obviously an essential element, but we had to include it – well – because your logo is what brands your website.
The best placement for your company logo is at the very top of your website. At Bluleadz, we chose to place our logo front and center on our site, but many companies do prefer placing theirs in one of the top corners. Also, keep your logo "sticky" on your site so as your visitors continue to scroll through your various pages, your logo remains in sight.
Tip: Don't forget to hyperlink your homepage to your logo. A report by KoMarketing revealed that when visitors come to a business website through referrals, 36 percent of them will click on the company’s logo to direct them to the homepage.
Having visible, easy-to-use navigation is what will help guide your visitors through your website. If a prospect has a hard time navigating different pages on your site, this can impact their decision making and potentially cost you a deal.
Include all your most important pages in your navigation bar, including – but not limited to – about us, blog, pricing, products/services, and contact us. (This is more standard for B2B businesses. Obviously, what you include in your navigation depends on your industry, what you sell, etc.)
Don't carelessly throw your navigation together, either. Make sure you keep user experience top of mind when you build out how users want to travel around your site.
A strong value proposition makes a huge impression on visitors and provides a clear picture of what your brand has to offer. And, surprisingly, I think Wikipedia defines it perfectly:
A value proposition is a promise of value to be delivered, communicated, and acknowledged. It is also a belief from the customer about how value will be delivered, experienced and acquired.
Sharing your value proposition directly on your homepage can help differentiate yourself from your competitors. When figuring out what your value proposition should say, consider:
Calls to action (CTAs) are key to getting leads and encouraging users to take a next step on your website.
And, a CTA placed above the fold on your homepage gives visitors easy access to what they're looking for.
Some of the best CTAs to put front and center on your homepage include demo requests, contact us buttons, and learn about us, not to mention a buy now callout!
Whether this is an animation, graphic, pattern, or photo, grab your visitors’ attention with a captivating visual element.
One classic visual you can use above the fold on your website is a picture of your product. What's a better way to showcase what your company does than plop it right where visitors can see it?
Animations or videos are also a great way to add movement to your homepage – if you stick around long enough on the Bluleadz homepage, you’ll see a plane flying by, waving a Bluleadz flag.
One thing to be cautious of, however, is clutter.
You want to create an appealing introduction to new visitors coming to your site for the first time. If your various elements are crowding each other and you just can't focus on one thing, chances are it's going to hurt future business.
Luckily, there are some great homepage designs that perfect above the fold content. Take notes!
Strong imagery – check. Clear call to action – check. Simple design – check.
When checking out AirBnb's website, you immediately know what they offer: the chance to rent a vacation home or experience new things anywhere in the world.
Plus, they even immerse you right into their homes and experiences through their large featured images (which transitions between four different high-quality shots).
If this doesn't make you want a Frosty Cookie Sundae, I don't know what will.
Wendy's sells their business well on their homepage, highlighting the latest and greatest menu items front and center. Plus, if you're enticed enough, you can even start your online order right from the homepage.
Greenhouse, a talent acquisition software company, knows how to use CTAs right on their homepage.
They actually include four different calls to action, all above the fold when you check out their site. On the top right, you'll see a sticky CTA for requesting a demo. However, as you remain on their homepage, the above the fold content actually changes.
First, you'll see their value prop "Build Stronger Teams with Diversity & Inclusion," which redirects you to some valuable resources about diversity and inclusion. One slide over is a promo for the Greenhouse OPEN 2019 conference where visitors can register. The final slide calls out some of their customers and offers visitors the chance to check out some awesome testimonials.
They let their product do the talking (good choice on the vivid blue vehicle), but they also make sure you know that they want you to love their products just as much as they do because, at the end of the day, it's their name on it.
With HubSpot, there really is a better way to grow.
HubSpot is a top inbound marketing, sales, and service software that prides itself on helping customers grow and improve their business efforts. On their navigation bar, they include direct access to all the pages a visitor would want, including pricing, resources, and information on their software.
Want to try out HubSpot for yourself? You can do it straight from the website's homepage because they included the perfect CTA above the fold – one that gets people using their product.
When you come to a shopping website, don't you want immediate access to search and filter capabilities to help you find exactly what you want?
ASOS understands that desire, so they made sure to put their search right up top in the navigation and include a "shop women" and "shop men" button above the fold.
All in all, what happens above the fold really does matter.
With the right design and the right content, you can shed light on who your company is, what you can offer new visitors, and even provide them immediate next steps to take to learning more or joining your side.
So, what elements does your business have above the fold?