Above the fold
Above the fold refers to the content that sits in the first section of a web page that’s visible without the need to scroll. Anything lower is considered ‘below the fold’.
Where does above the fold come from?
The term ‘above the fold’ dates back to pre-internet times in the early days of publishing. Newspaper vendors would typically fold their newspapers in half so they’d sit comfortably on the stand. That meant publishers had to make their headlines enticing enough for readers to pick up and buy. The same principle applies to websites.✨
Why above the fold is important for ecommerce?
You’ve got about 7 seconds to make a good first impression with your website. People who’re shopping around are unlikely to scroll and click through to the rest of your website if they’re not enticed by content that sits above the fold. If they don’t like what they see, they’ll likely bounce and go to one of your competitors.
Best practices for content above the fold
Use a strong headline and image
Sounds obvious, but you should clearly state who you are and what you sell. An ambiguous tagline or off-message imagery is not going to cut the mustard for people who’ve never heard of your brand before. They need to know you’re going to solve their problems right away, or they’ll likely go somewhere else. Try using a punchy headline that summarises what problem you solve for your customers. And a good product or lifestyle image will help your audience understand what product they’re getting. (Make sure to use Dash to deploy these images to your website in just a few clicks 😇).
Include a clear CTA
Whether it’s your homepage or landing pages, website visitors need to know what to do next. A clear CTA above the fold can encourage them to head to a product page, read a customer story or simply keep on scrolling. ⬇️
Use responsive web designs for mobile devices
You’ll want to make sure your website content and elements work on all devices. You might have the best above the fold content on a desktop computer, but if it doesn’t work on a mobile or tablet, you’re going to lose people. Especially as 25% of internet users make a purchase on their mobile at least once a month - you want to make the most of that opportunity!
Most websites will offer responsive pages, which means your images, graphics and text will adjust to the screen size. However, it’s good practice to continuously monitor how your website is performing on various devices in case something’s not working.
Optimise for search engines
You need your content to be accessible to users and reduce bounce rates if you want search engines to recognise you as a trusted website. That’s why it’s important to consider your above the fold SEO. Here are some tips to follow:
- SEO-critical keywords should be above the fold - Google crawls content from top-to-bottom, so ensuring your most important keywords are front centre will leave no room for confusion.
- Don't make people scroll - make sure the most important information is visible without the need to scroll. That’s things we’ve already mentioned like clear messaging, images CTAs and responsive web designs.
Test different variations of your content above the fold
It’s good practice to be testing the copy and images on your website - particularly anything that sits above the fold. You can run A/B tests to see how your audience is responding to different variants. Do people tend to click on a CTA that sends them to your product pages? Or do they prefer a button that sends them to educational content about your product? The data you gather here will help inform future website decisions.
Monitor website activity
There’ll be a reason people are bouncing from your website. Use a tool like HotJar to monitor user behaviour. Are they scrolling down below the fold? Or are they immediately clicking back out of your website? Once you can see where people are clicking you can learn where the faults are and how you can fix them.
Make sure you stay consistent below the fold
You might dazzle your audience with your content above the fold, but if the rest of your website doesn’t live up to expectations, they’ll be sorely disappointed. 👎
Think about how your customer scrolls down your homepage. You need to make sure you keep them hooked throughout. To do this, make sure you follow up any claims you make above the fold with social proof, product benefits and tips on how to use your product.
You could include customer reviews, star ratings and user-generated product photos just below the fold. Or a step-by-step guide on how to use your product and a list of benefits. (We particularly like this example from Touchland).
Above the fold website examples from ecommerce brands
If you’re looking for some inspiration to help you with your own above the fold content, have a look at some of these website examples from ecommerce brands. ✨
Geez Louise
You don’t need to do much digging to work out that Geez Louise sells canned drinks that are good for your gut. This is clear by their messaging, product shots and fruit-filled header image above the fold. A centered CTA ‘shop now’ also leaves you in no doubt about where to go next.
Hylo Athletics
Sportswear brand, Hylo Athletics, uses lifestyle imagery above the fold to instantly connect with its target audience. Instead of a close-up product image of their trainers, they use this running shot to excite the aspirations of their customers. Any city-dweller looking for a good running shoe to take on the hard, tarmacked pavement is going to want a pair of these! 🏃♀️
Loop Ears
Loop Ears uses the space above the fold content on their homepage to explain what they do in two, short and concise sentences. You can choose to browse the shop or get help deciding what type of earplug to buy. By encouraging your audience to learn more about your product you’re inviting them in and reducing the risk of bouncing.