Do you know what people spend the most time doing on the Internet?
BUT, users don’t scroll because they want to. They scroll because they have to.
They scroll because they’re looking for a solution.
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, 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 them.
Its job is to keep the readers hooked to the page and scroll down to consume the rest of the information.
‘Above the fold’ is a topic that has long baffled tons of eCommerce brands. Before we jump to the examples, we will be answering some common questions that have long been unanswered.
In this blog post, we'll cover:
What is considered above the fold?
‘Above the fold’ is the part of the website that a user sees before scrolling down.
Here is an image of the above the fold page of Calvin Klein.
The page is separated a fold as shown in the image below.
And as we scroll, this is an image that appears separated by a fold.
12 above-the-fold content tips for better conversions
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 a few content optimization best practices to help you make the best use of your visitor’s time on your website:
1. Understand how to optimize each element
When it comes to above-the-fold content, it’s important to reserve the space only for vital, high-priority information.
Each element should serve an important purpose that relates to or finds closure further down on the page.
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.
This is your opportunity to stand out from the crowd with your branding elements such as logo, font, and brand colors.
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.
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. Make it count.
- 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).
2. Aim for the Google featured snippet
When your page hits the Google featured snippet, it’s effectively hit gold. This piece is like the gold standard of search results — and is definitely something you should aim for.
This snippet is usually drawn from the best-performing pages: those that Google sees in a positive light for regularly sharing high-quality content.
There are a variety of different formats Google uses for these: paragraphs, listicles, bullet points, tables, videos, etc. The example mentioned below features a paragraph with images.
Want to see it for yourself? Check out Why is My Conversion Rate Dropping? And How to Fix It
To be considered for the Google featured snippet, your content should have three primary characteristics: it should be easily digestible, convenient to skim through, and it should answer the user’s question.
To do this, you should format the content well using bullet points, a table of contents, short copy, descriptive images, and CTAs that drive response.
You should also understand which words are more likely to be met with a featured snippet. Here’s a quick list you can keep handy:
- Opt for HTML if you are developing content in a tabular format. While graphics do tend to look better, HTML is more likely to be picked up by Google.
- You may want to consider adding videos to your best-performing pages. Google has recently been experimenting with videos and is hence showing a preference for those pages that have video content. Always a good idea to bank on that!
- Integrate your web pages with the AMP library launched by Google. This will help them load more quickly and even show up more prominently in the Google search results.
3. Image optimization is a must
The truth is: visuals sell.
As people, we love pretty things.
And aesthetic images are a great way for brands to use this.
But you must prioritize speed and optimize images for an ideal experience.
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.
- 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 an array of image optimization tools on hand. Use ImageOptim (to optimize images), PictureFill (for polyfill support), HTMLImageElement.Sizes (for feature detection), etc.
- Where needed, you can look at customizing the widths and size values of images used. Use the PictureFill WP plugin for this.
4. 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.
Notice how the above-the-fold content in this example from SkinnyTies is all optimized for the device screen it’s hosted on? See how it would not be ideal if it was done in any other way?
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. The last thing you’d want is a well-designed website that cannot be clicked and hence used.
That’s why it’s important to check for finger taps. Ensure the navigation, menus, and buttons are all accessible by both fingers as well as styluses.
We love how Amazon has not only absorbed responsive design into its website across devices but actually integrates it into the UX so that visitors on all devices can have a truly engaging experience.
This ensures that every single customer is looked after and that they all can have a pleasant time shopping online. And isn’t that what it’s all about?
- Make Google’s Mobile-Friendly Tool your best friend. This will audit your above-the-fold content and give you an understanding of what’s working and what can be improved. It’ll also help you determine how to make your overall website experience more engaging.
- Look into developing your website along a fluid grid. This will allow your website to smoothly adapt to the dimensions of the screen it’s being hosted on and modify the corresponding elements.
5. Place the CTA exactly where it should be
Fun fact: 90% of those who read your headline also read your CTA.
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.
This is a great example that shows one CTA (the more prominent one) above the fold and one (the less prominent one) below the fold. Do you see the difference in how these two would be perceived and hence used?
Placing it somewhere in between (600–1000 pixels) may offer the best of both worlds—higher reach and greater engagement.
We love how The Mountain builds into the CTA they have placed here. From having all the information available at easy access on the top to leading into the CTA towards the midsection of the page, this is truly fantastic placement.
Create high-converting CTAs by telling people exactly what action to take. Here’s 21 ways to create call-to-action buttons that convert
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.
- Look into color psychology and understand which colors would be a good fit for your above-the-fold CTA. According to studies, orange, blue, red, and green work best for CTA buttons.
- You may want to give special attention to the exact words you’re using here and how they’re perceived by the audience. Research has found that words like now, get, and free perform better than words like try, quote, and me.
- Use tools such as Google Optimize and CRO360 to test out different CTAs. You’ll be able to see which ones attract more visitors.
SHORT ON TIME? HERE'S A QUICK SUMMARY OF THE AREAS TO LOOK AT:
6. 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.
A good example is Spotify. They use a common customer problem as a hook and instantly engage anyone who comes across this page.
If they’re in the purchase stage, your heading should focus on problem-solving.
We love what Away does here to introduce their AirPods Cleaning Kit
- Ask questions or use numbers. This is a great psychological trick that instantly draws the audience into the conversation as people have a natural tendency to pay attention when they’re being asked something or are provided with figured facts.
- Write multiple headlines & A/B test them to understand which one your audience would respond to best. Want to take it up a notch? Reverse the experiment and track whether your results still hold true.
- Be extremely specific. Reserve one headline for one message and don’t beat around the bush: get right to the point.
7. Keep the navigation simple and uncluttered
Once your copy convinces the visitor, they’ll look at 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.
It's important to think about how a customer will shop on your website.
They only have so much time to make a purchasing decision, so if they're overwhelmed or distracted by your navigation, then they'll leave.
Ideally, you want to keep your navigation consistent throughout the website while still being user-friendly.
We love how NewBalance has developed its navigation to account for an intuitive menu as well as provide navigable sections across the homepage.
- Get an understanding of your customers’ Behaviour Flow from your Google Analytics insights and then develop categories (and subcategories) that will work to their advantage. Place these along the top of the fold for easy accessibility.
- Implement quick-action categories such as ‘Whats Hot’ and ‘Whats New’ to streamline navigation for customers who’d like to get a brand perspective.
- Develop breadcrumbs across the website and display them prominently across the top fold. Use these to not only track customer journeys but also help them understand where they are. This is especially important for those websites that have deep-level categories.
- Adding a floating chatbox or the contact option in the navigation bar are also good options.
Want more? Check out 11 navigation changes (across the funnel) to improve conversions
8. Time is crucial; make your pages load superfast
Both for SEO and UX, your page load time should be minimum.
0 - 4 seconds, to be specific. The quicker it loads, the better your conversion rate.
What’s interesting is that this speed holds value not just for customer experience, but also from an SEO perspective.
Google shows a preference for those websites that load quickly and are not too heavy on the interface. The sweet spot here is 3 seconds.
Quicker page load times also benefit CPC and other performance marketing campaigns.
In short, keep your speed in check. Here’s what happens when you don’t:
- 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.
9. Remove all distractions
Think of your above-the-fold content as an interaction: the first look a customer has into your brand.
Would you rather have it be distinct and memorable or scattered and all over the place?
When you make this first interaction unique and on-brand, customers are more likely to be invested in what else you have to offer.
So, take away the extras. Focus on creating a singular yet distinct experience that doesn’t leave customers overwhelmed.
Remember, the idea is to put your most important content on the top fold, not all your content.
- Keeping website differentiators such as trust signals, social proof, etc. right at the fold can improve the chances of conversions below the fold.
- When it comes to rich content, it’s best to weigh the value of the content against the take it takes to load. Stuff like carousels, videos, and AI elements should only be included if they do not take too much time.
10. Include specific product categories
Mentioning product categories that are specific and not broad help users in finding what they’re looking for.
The Body Shop mentions specific product categories on their above the fold header.
Doesn’t it make clear on types of products offered? When you click further it refines the product category further.
The drop down consists of By Product Type, By Concern, and Recommended. What stands out is how ‘By Concern’ makes it easy for people looking for acne products , dry skin, and sensitive skin.
- Always go for *fewer* categories. Too many categories is a cause of concern as users find it overwhelming.
- It is also a leading cause for the alarming site abandonment rates. You see, too many clicks spoil the fun.
11. Include returns policy in above the fold header
38% of customer journeys start on the retailer’s homepage. For first-time customers to develop trust in you, having a sense of security is critical. Including a returns policy in your above the fold header inspires confidence and security in customers to make a purchase.
Plus, it has other benefits—improves conversion rates, increases repeat customers, and improves profitability.
BlackMilkClothing includes its return policy above the fold. Thanks to high visibility, it addresses the customers’ objections, if any, and influences purchase decisions. In fact, 67% of customers visit the returns page before making a purchase.
It rules out buyer’s remorse and reduces the sense of perceived risk encouraging customers to buy.
- Highlight the return window in above the fold header to make things clear. Specify if it’s a 30-day or 60-day return timeframe. 62.58% of customers expect eCommerce brands to allow up to 30 days to return.
- Include a know more link so customers can learn about the terms and conditions of the returns
12. Add visual cues to drive attention
Your site has multiple elements but you would like your customers to click on something particular. Enter Visual Cues—elements on the website that subtly draw the attention of users and help them interact with the site.
Incorporating visual cues in your above the fold design invokes heuristics—mental shortcuts that enable decision making and solving problems quickly. It reduces the unnecessary load on the working memory and guides the users.
Dollar Shave Club has a visual cue in its above the fold website to subtly drive users to a CTA.
The image in this above example features a person stealthily looking towards the side. This is a suggestive cue—using images to draw the attention of your site visitors in a subtle manner without making it obvious.
- Use explicit cues like arrows, pointers, and human imagery to guide the users within the attention span of 6-8 seconds
- Include a search prompt in your above the fold website to nudge visitors into using search
- Place your visual cues to the left and the text to the right to enable cognitive ease
BONUS: 10 above-the-fold Website Examples to Inspire You
1. Hook ‘em with your copy like 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.
- 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
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.
- 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
Remember how we mentioned that 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.
- 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
Hey, you'll love this: 20 best product page design examples in 2022 (+ expert advice)
4. Keep it simple like 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, and 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.
- 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
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.
- 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
6. Use carousel to highlight your products like Lenskart
If you want your customers to view your products without browsing, then carousels are for you.
Lenskart showcases its sunglass collections using a carousel in its above the fold page.
The captivating visuals make it more effective in capturing the users’ attention span.
- While the carousel is the highlight of the post, options like Home-Eye Test & Trial, Store Locator, and 3D Try On are great hooks to keep the customers engaged.
- The wishlist option and the display of different product categories such as reading glasses, contact lenses, and computer glasses are strong suites of the Lenskart.
7. Highlight your brand values like Muroexe
Brands who produce animal free products often garner praise but how do you use it to drive customer attention?
Psst….. Add it to your above the fold content.
By displaying its brand value of producing 100% animal free products Muroexe projects a brand that is authentic and responsible.
- The use of Free shipping from 85€ is a smart hack to influence customer purchasing decisions. In fact, 73% of the online buyers stated that free shipping greatly impacts their purchase decisions.
- The summer sale images make it clear that men and women shoes are available
- The use of New In section works effectively in driving clicks and conversion.
8. Use background videos to increase dwell time
Videos sell better than static images and when videos that don’t require users to click ‘Play’.
81% of the marketers report that videos have increased dwell time.
GymShark uses a background video in its above the fold content to drive attention to its Gymshark x Whitney Simmons collection.
- The background video features Whitney Simmons, an American fitness influencer who battled depression and made a turnaround after taking to fitness.
A relatable story for the millennials and Gen Z.
- The copy Embrace your evolution in her latest collection is a way to inspire users to become like her.
- The CTA and the easy navigation bar showing Men, Women, and Accessories.
9. Trigger the first move with a free consultation like Be Bodywise
Valuable information offered for free always makes great lead magnets. More so, when it is included above the fold.
Be Bodywise offers a free doctor consultation for hair, skin, nutrition, intimate, and PCOS problems communicating trust signals.
- The ‘Consult a doctor for free’ is a value addition for a skincare brand. Normally, first time consultations offline aren’t free. Consulting a doctor for free is a subtle way of building trust signals.
- The other CTAs like Take a wellness assessment and Choose concern contribute well to drive interactions form site visitors.
So, freebies in your above the fold website page are great head turners.
10. Engage and convert with quizzes like Weight Watchers
Quizzes are a potent way to pique customers' interest. Weight Watchers uses a quiz in its above the fold website.
- Each body is different and hence there’s no one size fits all plan for weight loss. By including the quiz as the CTA, they quash the long prevailing myth of weight loss.
- Today: first 3 months free + free WW cookbook creates a sense of urgency
- The How it works, Pricing, Recipes, Healthy Living and Find a Workshop effectively increase dwell time and reduce risk aversion of the users.
AND some Quick FAQ before you go
1. 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).
So it’s safe to say that the average fold is 800 pixels.
It’s always a good idea to decide on your fold line based on visitor screen size data from your web analytics.
2. 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 them.
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.
3. 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.
- 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.
4. Is it OK to design below the fold?
Below the fold content has an extreme chance of less viewability since the user has to scroll down to see the content.
According to a Google Study, the median viewing time for below the fold ads was 40% while the above the fold ads fared better at 68%.
So summing it up, less scroll means higher viewability.
5. How has the fold evolved over time?
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.
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.
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.
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.
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.
6. What is above the fold copy?
Above the fold copy refers to the key messaging present in the first half of the website before scrolling down. It’s the first thing that a user sees within 5 seconds of landing on your eCommerce homepage.
Here’s an example of above the fold copy featuring RXBar.
The copy, formatting, and CTA are a part of above the fold copy. It is recommended that you don’t overstuff the above the fold portion and use carousels instead to display other elements.
7. What is above the fold vs below the fold?
Above the fold refers to the first portion of the page before scrolling down while below the fold is the latter part of the page appearing after the scroll.
While above the fold content has high visibility, stuffing it will cause friction and confuses your site visitors. It also adversely affects your UX resulting in high drop-offs and low conversion rates.
8. Does Above the Fold matter for CRO?
57% of users spent most of their time viewing above the fold content. This is due to the interaction cost—the collective effort including mental and physical that users must take to reach their goals while interacting on a site.
Above the fold has a low interaction cost. It takes minimal effort to view. Comparatively below the fold content has an invisible or higher interaction cost of scrolling to see what’s hidden.
Your above the fold is going to determine if a user decides to scroll further and take action. Above the fold content is critical for UX success because it includes important elements such as copy, CTA, categories, navigation menu, etc.
Summing up, yes, your above the fold content is important for CRO success.
To determine above the fold size, running a scroll map test will help you identify the areas where your users are spending the most time.
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?