What does above the fold mean?
‘Above the fold’ refers to the portion of a web page that is visible to a visitor without them having to scroll down. This term originated from the newspaper industry, where the most important headlines and content were typically placed on the top half of the front page, which was visible when the newspaper was folded.
Why is above the fold important?
Above the fold is important in two main contexts:
- Appearing above the fold in search results on platforms like Google and Amazon
- Managing the content you place above the fold on your website or product pages to increase conversions
Let’s take a closer look at each.
1. Appearing above the fold in SERPs
When people search for something on the internet, search engines like Google show a list of web pages that match their search.
The link and a little bit of text from each page show up in this list. This list is often called the “search results” or “search engine results page” (SERP).
This dynamic is also in play on eCommerce marketplaces like Amazon, Walmart, and eBay.
- Why it’s important: Being “above the fold” in search results means your website or product is visible without having to scroll down. This is important because most people tend to look at the top search results first. If your website’s link and description are near the top, more people are likely to click on it and visit your website.
- How to improve it: To appear above the fold in search results on sites like Google, it’s essential to create high-quality content that matches what people are searching for. Use relevant keywords in your content, make it high-quality, and ensure it’s easy for search engines to understand. This increases your chances of ranking higher in search results and getting more website visitors. To improve ranking in results on eCommerce platforms like Amazon, the key is to drive as many sales as possible.
2. Above the fold website content
When someone visits your website, the content they see without scrolling is what’s “above the fold.”
- Why it’s important: The content above the fold is like the first impression of your website. It’s crucial because it’s the first thing people see, and it can determine whether they stay on your site or leave. If the content above the fold is interesting and easy to understand, visitors are more likely to keep exploring your website, possibly making a purchase or taking another desired action.
- How to improve it: Make sure the content above the fold is engaging and relevant. For an eCommerce site, this might include high-quality product images, a clear headline, and buttons that encourage visitors to shop or learn more. It’s important to give people a reason to stay on your site and explore further. Also, ensure your website loads quickly and works well on different devices because a slow or buggy website can drive people away.
In simple terms, being “above the fold” in search results and on your website is about making a good first impression and getting people’s attention. It’s like saying, “Hey, look at me!” If you do web design right, more people will notice you and your website, which can lead to more visitors and, hopefully, more success for your eCommerce business.
What content should be placed above the fold?
When carrying out web design for your eCommerce store, common elements you might look to place above the fold include:
- Product images: High-quality images of products or featured items.
- Headline and tagline: A compelling and concise headline that communicates the value or unique selling point of the products or the website. A brief tagline or description can provide additional context.
- Call-to-action (CTA) buttons: Prominent buttons for actions like “Shop Now,” “Buy Now,” or “Learn More.”
- Navigation menu: A menu that allows users to explore different categories, view their cart, or search for products.
- Promotions and offers: Special deals, discounts, or promotional banners.
- Trust signals: Trust-building elements like customer reviews, trust badges, and security icons to reassure visitors.
Optimizing above the fold content and its layout is essential for improving user engagement, conversion rates, and the overall user experience on an eCommerce website.
It’s important to make this area visually appealing, informative, and user-friendly to encourage visitors to continue their journey through the site and make purchases.
Keep in mind that what appears above the fold may vary depending on the device and screen size, so responsive design is important to ensure a good user experience across different platforms.
Mobile device considerations
When it comes to above the fold content on mobile devices, there are some important things to keep in mind:
- Screen size: Mobile screens are smaller than those of computers, so the space above the fold is limited. You need to be very selective about what you put there to make the most of the space.
- Loading speed: Mobile users are often on slower internet connections. So, whatever you put above the fold should load quickly. If it takes too long, people might leave your site.
- Prioritize important content: Put the most important stuff at the top. This could be your main message, a product you want to promote, or a call-to-action like “Shop Now.” Make sure your above the fold design is clear and stands out.
- Keep it simple: Most web designers like to make things look amazing, but mobile users tend to prefer simple and easy-to-understand content. So be careful you don’t clutter the space with too many things. It’s better to have a few clear elements than a jumble of stuff.
- Responsiveness: Your website should adapt to different mobile devices and screen sizes. This is known as having “responsive web pages”. It ensures that your content looks good and works well on all types of phones and tablets.
- Testing: Test your mobile website on various devices to see how it looks and functions. This way, you can fix any issues before they become problems for your visitors and you start losing traffic.
- Finger-friendly buttons: Make sure any buttons or links above the fold line are big enough for people to tap with their fingers without accidentally clicking the wrong thing. Small buttons can be frustrating on touchscreens.
- Navigation: Keep your navigation menu clear and easy to use. Mobile users should be able to find their way around your website without any hassle.
In short, above the fold on mobile devices is a valuable but limited space. Make it count by putting the most important and easy-to-understand content there.
Keep things simple, make sure it loads quickly, and ensure your website works well on different mobile devices.
This way, you’ll provide a great experience for your mobile visitors and increase your chances of success.
Above the fold content can play a big role in your SEO efforts too.
Including unique elements on each individual page can assist with SEO, according to Google’s John Mueller.
“The important part for us is really that there is some amount of unique content in the above-the-fold area.
“If you have a banner on top and you have a generic hero image on top, that’s totally fine. But some of the above-the-fold content should be unique for that page. And that could be something like a heading.”
So, give consideration to your above the fold content and make sure there are key aspects included like a H1 heading and other unique information.
Above the fold website examples
Here are a few good above the fold design examples from the eCommerce industry:
Always leading the way in design, simplicity, and punchy copywriting, this above the fold design for the iPhone is a visual masterpiece.
It highlights the core features of the camera and titanium shell, while giving quick, above the fold access to the most important actions – learning more and buying now.
A key role of the above the fold area in web design is quickly communicating the benefits of a product and the values of a brand.
Tesla do this expertly with a snappy video showing the multi-terrain benefits of their vehicles while also giving quick access for customers to take the next steps in their Tesla journey.
3. Kylie Cosmetics
When some customers see only the top half of a page before making a purchasing decision, it’s key to nail your branding. Kylie Cosmetics does that well with on-brand colors and clear CTAs.
4. Passenger Clothing
To finish up, here’s a good example of a well-laid-out eCommerce product page where the key information that impacts conversion rates is all placed above the fold.