Conversion Optimization

Above the fold: Why it matters + What to include (and 5 Stunning examples)

To fold or not to fold. That's the question. We answer in this post: if the fold really matters + what to keep above the fold + inspiration from brands.

Above the fold: Why it matters + What to include (and 5 Stunning examples)

The web page fold.

There’s a lot of discussion around the page fold. It has been a topic of heated debate since its inception in the 1700s. 

A look at Google Trends will show you how the topic above the fold is still a rave (100 denotes peak popularity of the topic). 

above the fold search trend
Source


It’s easy to be confused with all sorts of theories and myth-busting all around. 

That’s why we came up with this post: to answer every question you had about above-the-fold content but were afraid to ask. 

Does the page fold still matter? Settling the page fold debate once and for all

As you’re already aware, the concept of a fold began with journalism. Since they were stacked and folded on stands beside the street, only the top half was visible. 

It wasn’t long before publishers realized that the best way to sell more papers was by grabbing the people’s attention. So they reserved the top half for compelling headlines and eye-catching imagery. 

example of above the fold, the fold, and below the fold
Source


This translated to the digital world. On a website, above the fold means any content that’s viewable without scrolling. 

So websites would try to cram up all their information within the designated 600 pixels of space.

Like this website below has done. 

example of above the fold website content


Their excuse: what if people didn’t scroll!

But there’s a catch: website usability has changed a lot since 1994. The most remarkable change has been the habit of scrolling. Today, scrolling has become second nature to online users.

Add to that, the invention of a plethora of devices such as smartphones and tablets. This means a wide range of screen sizes and resolutions. 

Therefore, it’s a bit dicey to decide exactly where the page fold lies. 

This has led to many propounding that the days of the fold are long gone. You’re sure to have read such seductively titled pieces: the fold is dead or the fold is a myth

Here’s the research and data they base their case on:

  • Users scroll even before the page completes loading.
  • The most viewed section and the segment where visitor’s engagement reaches its peak is just above the fold.
  • The viewing time for above-the-fold pixels is the shortest.
data on above the fold content
Source


This data matches with the Nielsen Norman Group’s research

Their 2010 research had revealed the viewing time for above-the-fold content to be 80%. Their recent 2018 research revealed that the same had dropped to 57%. 

Another interesting research was carried out by MECLABS. They discovered that placing the call to action (CTA) below the fold boosted conversions by 20%.

These conclusions are NOT wrong. In fact, this helps us understand how the fold has evolved over time. 

So here’s the final verdict on your questions about the web page fold:

1. Is the fold still a thing? 

YES, it is. The fold is not dead and it applies to your eCommerce business. 

It’s true that users scroll and this habit has only grown over the years. 

BUT, users don’t scroll because they want to. They scroll because they have to

Remember, they’re not scrolling just because you took a lot of effort to present them with information. They scroll because they’re looking for a solution. 

This is even more true for mobile since smaller screens allow limited spaces.

As Amy Schade, Director of User Experience, Nielsen Norman Group, puts it: “Users scroll when there is reason to. When users fail to see information of value, they stop scrolling.”

So yes, users will scroll no matter what but whether they will scroll on your page or not is something that your above-the-fold content will decide. 

It made sense to stuff information above the fold in the 90s. Today, you’ll need to plan your content wisely between your top and bottom folds—however, above the fold still holds precedence in terms of retaining the visitor’s attention.

2. Where is the page fold?

This is a bit of a tricky question. 

Traditionally, most UX designers placed the web page fold at 1000 pixels wide and 600 pixels tall. 

But, today there are just too many screen sizes out there (and corresponding resolutions). 

screen size chart


So it’s safe to say that the average fold is at 800 pixels. 

It’s always a good idea to decide your fold line based upon visitor screen size data from your web analytics. 

3. How important is above the fold?

VERY important. The average difference between how users treat the information above the fold and the one below the fold is 84%. 

Users will scroll ONLY if they find the information above the fold useful enough to spend more time and explore further down the page. This intent is irrespective of the screen size. 

So above-the-fold content is still important, provided you fix your goal.

The top fold is ideal to gain your visitor’s attention and engage them, not necessarily convert. 

Its job is to keep the readers hooked to the page and scroll down to consume the rest of the information. 

This is where below-the-fold content comes in—it complements the above-the-fold content. 

This brings us to the last question.

4. Does above-the-fold content impact SEO?

YES, it does. Google’s updates have always focused on putting the customer first. And their research revealed that users wanted to see the content right away—instead of ads. 

People already have a short attention span. So if they don’t find something engaging on the top fold, they’ll leave. This will affect the average time spent by users on a page—which Google tracks. 

So putting your important content above the fold is going to boost user engagement—and consequently, search engine rankings. 

Key points to remember:

  • Scrolling is second nature to visitors—especially on mobile. As per this research, 50% of users start scrolling within 10 seconds and 90% within 14 seconds. 
user scrolling behavior
Source


  • There are multiple screen sizes so it’s a bit difficult to ascertain a specific fold line that includes all resolutions. However, 800 pixels is a standard resolution that takes into account both mobile and desktop. 
  • Customers are more interested in gathering information and understanding a brand first before purchasing. This shift in buying psychology means they’ll spend more time reviewing information before finally arriving at a decision. 
  • Above-the-fold content helps to shape the visitor’s perception of your brand and what to expect from the specific page.
  • The role of above-the-fold content is NOT to drive conversions but simply to create an opportunity for conversions to happen.
  • Below-the-fold content complements the top fold content in turning attention and engagement into conversions.

7 above-the-fold content tips to make it impossible for users not to scroll

Now you know that the fold works as a UX guide to ensure your above-the-fold content drives users to engage with the content below. 

Here are 3 key considerations to keep in mind before you start planning what to include above the fold:

  • Keep the top fold only for vital, high-priority information such as value props.
  • Be wary of creating false bottoms i.e. a section of your website that creates the illusion to the visitor of being at the bottom of the page, even though there’s more information below it. 
  • Lower the visitor’s interaction cost i.e. the effort (both mental and physical) required by the visitor to engage with your content. Information that’s easily visible will have a low interaction cost. Hidden information has a higher interaction cost (both the mental effort to figure out if there’s more information to be consumed and the physical effort to access it). 

Keeping these in mind, here are the above-the-fold content elements that you should prioritize:

  • Unique selling proposition (USP) - This will clearly tell them what you’re offering and how they’ll benefit from it. 
  • Primary copy - This brief introductory paragraph builds upon the USP and explains what the product does. This convinces the visitor to scroll down to the secondary copy below the fold. 
  • Branding - This is your opportunity to stand out of the crowd with your branding elements such as logo, font, and brand colors.
  • Navigation - This offers them the option to explore more through relevant touchpoints that are simple and easily visible. 
  • Contact info - This adds trust in the visitors’ minds and portrays you as a credible business.
  • CTA (optional) - Since your above-the-fold content isn’t always conversion-focused, you can choose whether to add a CTA or not depending on your audience and goal.

Check out Chipotle’s homepage. 

example of above the fold content elements


It has neatly laid out all the essential elements above the fold without making the layout or design look cluttered. 

So, a visitor scrolls to your website. You’ve already designated fixed attention-grabbing elements for your top fold. All they have to do is land on your page and engage. 

8 seconds is all you get to woo them with your web page. 

Here are a few above-the-fold content optimization best practices to help you make the best use of your visitor’s time on your website:

1. Address customer problems with your heading and primary copy

Start with a goal. This will depend upon your sales funnel and in which stage of the funnel your customers are. 

If they’re in the awareness stage, your heading should focus on problem identification. If they’re in the purchase stage, your heading should focus on problem-solving. 

Make sure that your headline conveys your value proposition clearly. 

Also, use an H1 tag for your beginning headline. 

Don’t forget to add your SEO keywords both in the headline as well as your primary copy. This will help visitors discover you easily. 

2. Place the CTA exactly where it should be

It’s important to have a goal for your call to action (CTA). This is intrinsically tied to your broader marketing goals. 

Coming back to this research, there are two types of goals you can assign for your CTA. One is reach maximization and the other is exposure time maximization

If you want to reach out to more people, placing your CTA above the fold makes the most sense. If you want it to be visible to users for more time, place it below the fold. 

Placing it somewhere in between (600–1000 pixels) may offer the best of both worlds—higher reach and greater engagement. 

Don’t settle for boring CTAs. Create high-converting CTAs by telling people exactly what action to take. 

For example, Start building your Order sounds more specific than Get Started.

Personalize them with pronouns such as you and I. Sprinkle the word free if you can. Throw in a bit of urgency with words such as Today or 30-days

3. Keep the navigation simple and uncluttered 

Once your copy convinces the visitor, they’ll look for taking the next step. 

If your navigation is cluttered and stuffed with too many actions, it can be counteractive. 

To keep decision fatigue at bay, keep the navigation items to a minimum of 5–7 items

Keep links only to the most important pages of your website. 

Keep the navigation bar easily visible. The About Us and Contact Us sections and the product pages are the most visited. Make sure it’s easy for the visitors to navigate to these sections. 

Adding a floating chatbox or the contact option in the navigation bar are also good options.  

4. Time is crucial; make your pages load superfast

Both for SEO and UX, your page load time should be minimum. 

Your above-the-fold content should be the first to load even before the rest of the page loads. It takes 50 milliseconds for visitors to form an impression of your content, so make sure to create a good impression fast. 

Use Google Page Insights to remove any CSS or JavaScript sources from making your website lag. 

As a next step, remove all unnecessary JavaScript from your header and optimize the CSS

5. Go beyond responsiveness; focus on mobile UX

You’re sure to know that a mobile-first approach is crucial while designing sites and landing pages. 

Don’t just stop there. Make sure the padding for above-the-fold content is customized for smaller screens. 

Further, pay close attention to the font as well. While a 22 px may work for desktop, you may need to resize it to 18 px for mobile. 

The same goes for navigation bars. Check how they appear on smaller screens. Make the options click-friendly. 

6. Remove all distractions 

Carousel banners are not in. 

There, we said it!

It’s not the 2000s. It’s time you got rid of the sliders. 

They’re not doing anything for conversions—but are bringing your above-the-fold UX down and slowing down your site. 

Too many elements—text, images, popups, sliders—can also distract the visitor away.

Remember, the idea is to put your most important content on the top fold, not all your content. 

Avoid videos if you can, unless absolutely necessary. If you do use it, ensure it doesn’t take the focus away from the copy. 

Keeping website differentiators such as trust signals, social proof, etc. right at the fold can improve chances of conversions below the fold. 

7. Image optimization is a must

If you’re using lazy loading for your site content, make sure you disable it for images. 

If you’ve added high-quality images to your banner, they may take a long time to load. In this case, just the text may load creating a bad user experience. 

Keep lazy loading turned off for images but active for the other areas of your site. 

Use large and heavy images with caution. While they’ll attract the visitor’s attention, they may also affect your page load speed. 

This is where your discretion comes in. If you feel a high-quality image is crucial to building a story after compromising a few seconds, go for it. If not, go for a solid background instead. 

free conversion optimization audit

5 above-the-fold website examples to inspire you

1. Hook ‘em with your copy like Frank Body

example of above the fold website content from frank body


It doesn’t get simpler than this. 2 sentences and this skincare brand hooks the customer by addressing their problem and offering a solution. 

The best part: it walks the talk with an accompanying image right beside the text. This gets the message across perfectly. 

Now we remember having said not to upload heavy images or GIFs to load your site faster and avoid distractions. 

On both counts, Frank Body performs. Their site loads fast enough. Also, their clean and subtle brand colors and web design help keep the focus on the content. 

Frank Body prioritized personalized communication without losing out on UX aspects. This is a call you’ll have to take for your brand.

What works: 

  • Simple, direct copy that points out the customer pain point in a nutshell and offers a ready solution
  • Places the CTA right at the fold so that interested customers can view it the moment they make the first scroll
  • Clean, soothing brand colors and an uncluttered UX keep the focus on the copy

2. Make them feel the brand like Allbirds

example of above the fold content from allbirds


Some brands tell you what they do. The best brands show what they do. 

Allbirds falls in the second category. 

Yes, you don’t just see that they sell shoes, but you experience how wearing them can make you feel. 

That’s the power of high-quality, contextual images. They help communicate the intangible brand qualities where just a copy may fall short. 

What works:

  • Conveying the experience of owning the product through real-life, high-quality visuals
  • Thoughtful personalization with segregation of men and women product lines and accompanying visuals
  • A handy chat section right next to the product range with the most asked questions to choose from. This reduces the interaction cost of customers to a great deal

3. Provide value upfront like Warby Parker

Example of above the fold example from warby parker


Remember how we mentioned, you’ve very little time to convince your customers to scroll?

You’ll need something attention-grabbing or valuable to hook your visitors. 

Something like what Warby Parker has. 

Their value proposition screams simplicity. The visual right beside shows exactly what they’re talking about in the copy. 

The subheading Take a quiz to find frames adds even more intrigue and offers an opportunity for visitors to interact with the brand. Of course, the fact that it adds a layer of personalization goes without saying. 

What works:

  • Nails the value-prop right with the heading and builds on it with the subheading
  • A clean and uncluttered layout keeps the visitor’s focus on the benefit
  • Adding a quiz offers room for visitor engagement and keeps the shopping experience fun

4. Keep it simple like Clarks

example of above the fold website content from clarks


Customers who have done a lot of online shopping know that nothing catches their attention like a simple website. 

Like the one by Clarks. 

Yes, it still retains the clunky sliders, although the personalization element makes it worthwhile.

But one look and you’ll be able to view everything without the need to process too much information. 

Keeping the search and add-to-cart icons instead of texts, adding the sale communication at the top where it’s easily viewable, adding separate links to the men’s and women’s range all add to the intuitive UX. 

The breathtaking product pictures (including the ones portraying the product in use by the customer) add to the brand experience. 

What works:

  • Clean and simple navigation as well as uncluttered positioning of elements
  • Easily viewable discount offer placement on the top encourages customer action
  • Smart placement of CTA (separate for men and women) right at the fold and below attractive product pictures improves the chances of conversions

5. Be inclusive like Jackie Smith

Example of above the fold website from jackie smith


Most often, your website will be designed to attract both new as well as returning customers. 

In that case, making your site design inclusive to target both audiences is important. 

This is what Jackie Smith does. 

They have multiple elements to encourage customers into exploring their range. This is what the sections New arrivals, Dear collection, and Our community do in the header. 

These are attractive enough for new customers and add extra value for existing customers. 

The prominent Jackie Club widget is a great way to boost customer retention and loyalty. 

What works: 

  • Keeps elements targeted for both existing and new customers
  • The loyalty program widget aims at acquiring long term customers
  • Offers USPs on top and a chat button on the side to facilitate communication

Final words

Hopefully, this post has been able to convey the importance of above-the-fold content.

It’s still an important aspect to consider while designing and optimizing eCommerce websites. 

Ensuring that you incorporate the right elements in the right part of the fold can help you meet your business goals easily. 

The examples are just a start. You can let your creativity flow to create an experience that suits your customer. 

Over to you! What is your view on the above-the-fold debate? 

You may also like

x
A FOUNDER’S GUIDE: Sales Secrets from 15 High-Converting Websites
Get the guide
Sent to your inbox
OK