Mastering above the fold element is vital to design, SEO and conversions.
Learn how to improve the above the fold elements with these examples and a checklist.
What is above the fold ?
The term “above the fold” derives from the top part of newspapers; when a newspaper was folded on a newspaper stand, the most important stories and headlines appeared at the top of the paper.
Above the fold is all the content that will be visible without scrolling down into other parts of a web page.
We can say that everything from the top left corner to the bottom right corner belongs to the Above-the-Fold area.
This includes a header, footer, navigation bar, logo, images, videos, text boxes, buttons, links, menus and forms.
Dimensions
There are hundreds of different devices and screen dimensions; desktops, laptops, tablets and phones.
The most common screen resolution is 1920 x 1080 pixels which is typically a laptop or desktop computer.
However, with over 63% of Google traffic coming from mobile phones, designers need to design responsively to accommodate all screen sizes.
I’m currently using the iPhone 7 Plus with dimensions of 414 x 736 pixels, but there are 28 other iPhone models, all with different dimensions.
And there are another 50 plus mobile phone brands, each with multiple models and different screen sizes.
Above the fold checklist
From July 2019, Google started using mobile-first index ranking for websites.
They use the mobile version of your page content for ranking.
https://developers.google.com/search/mobile-sites/mobile-first-indexing
Whilst this guide is technical in nature; you can do a simple above the fold check.
Enter the page URL into your mobile phone browser and DO NOT SCROLL.
- Can you read the page title or header of the page?
- Can you read the first sentence of your page ?
- Is there a clear benefit to scroll down the page ?
If you answer NO to any of these questions, you could have a problem with click-through rates, your rankings and users hitting the back button.
From a technical perspective, these elements need to load first and fast.
For further information about above the fold elements, please refer to Google’s UX Playbook guides.
Online tools and prototyping
You might get lucky to choose a theme or template for your website, but in most cases, you will have to customise your web page layouts to ensure important elements appear above the fold.
UX designers and developers have embraced tools such as Figma, Draftium and Sketch to mock-up or wireframe web pages prototypes before moving into production.
Whilst this is an expensive process, consider the traffic value of ranking organically on page 1.
User experience
Most people are impatient and use the content above the fold as a quick check “I’m on the right page” or “this page may answer my question“.
According to CrazyEgg, this is the 15-second rule; if you’ve not captured the user’s attention quickly, they will leave the page, and your bounce rate will soar.
So the right content above the fold can encourage users to scroll and skim down the rest of the page to read, watch or take action.
SEO and above the fold
Going as far back as 2012, Google wrote, “users want to see content right away” and “If you click on a website and the part of the website you see first either doesn’t have a lot of visible content above-the-fold or dedicates a large fraction of the site’s initial screen real estate to ads, that’s not a very good user experience.
Such sites may not rank as highly going forward”.
Above the fold examples
I have randomly chosen websites to critique home pages, category, product, service and blog post pages to provide you with good and bad examples of above the fold content on a mobile device.
I have used the checklist against each page for you to learn from these examples.
Above the Fold Home Page Examples
1st home page example
Above the fold checklist
This is the home page of CrazyEgg.com
Can you read the title or header?
YES
Can you read the first sentence?
YES
Clear benefit before scrolling?
YES – “30-day free trial.”
2nd home page example
Above the fold checklist
Allbirds is a fashion brand selling online
Can you read the title or header?
YES
Can you read the first sentence?
YES
Clear benefit before scrolling?
MAYBE – the shoe design could be a benefit
3rd home page example
Above the fold checklist
Cazoo sell cars online and deliver to your door
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “love it or return it“.
4th home page example
Above the fold checklist
Cinch also sell cars online and deliver to you.
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “love it or return it, “free delivery“
5th home page example
Above the fold checklist
Crunch do accounts for the self employed
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “free software“, “get Crunch free“
6th home page example
Above the fold checklist
Draftium helps you draft up a website before designing it
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “get start for free“
7th home page example
Above the fold checklist
Figma helps teams of people to create and test designs.
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “try Figma for free“
8th home page example
Above the fold checklist
Plum is a money saving and investing app.
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “get started for free in 2 minutes“
9th home page example
Above the fold checklist
Preview install doors, siding and windows in Texas.
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
MAYBE – “low maintenance exteriors“
10th home page example
Above the fold checklist
Tom is a web developer and coach
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
MAYBE – “10 years experience“
11th home page example
Above the fold checklist
Vizzlo create better looking charts than Excel.
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “create charts in seconds“
Above the Fold Ecommerce Category Page Examples
1st ecommerce category example
Above the fold checklist
Allbirds product category page
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO
2nd ecommerce category example
Above the fold checklist
Beatport sell music; this is one product category page
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
YES
3rd ecommerce category example
Above the fold checklist
Callaway sell golf equipment; this is a product category page.
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
YES
4th ecommerce category example
Above the fold checklist
GuitarGuitar sell music equipment; this is their Fender guitar section
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
YES – “ex demo bargain“
5th ecommerce category example
Above the fold checklist
Clarks sell shoes; this is the mens black shoe section
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
MAYBE – “up to 50% off”, “further reductions“
6th ecommerce category example
Above the fold checklist
Earthbits sell eco products; this is their shampoo bars section
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
MAYBE – “transform your hair“
7th ecommerce category example
Above the fold checklist
Rexona is a Unilever brand selling deodorant
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO
8th ecommerce category example
Above the fold checklist
Warby Park sell eyewear; this is the mens section
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “pick 5 pairs to try for free“
9th ecommerce category example
Above the fold checklist
Ping sell golf equipment; this is their range of irons,
Can you read title or header ?
NO
Can you read first sentence?
NO
Clear benefit before scrolling?
YES – “longest, most forgiving irons“
10th ecommerce category example
Above the fold checklist
The gaming chair section of Smyths Toys
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
YES – “Only at Smyths“
11th ecommerce category example
Above the fold checklist
The men’s section of Sure Deodorant website
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO
Above the Fold Ecommerce Product Page Examples
1st product page example
Above the fold checklist
A product page from Allbirds
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “limited edition” = urgency
2nd product page example
Above the fold checklist
A product page at Beatport music store
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – click play to preview
3rd product page example
Above the fold checklist
A product page at BoysStuff retailer
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
NO
4th product page example
Above the fold checklist
Product page at car retailer, Cazoon
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
NO – but there is get started button just below the fold
5th product page example
Above the fold checklist
Product page at Earthbits
Can you read title or header ?
NO
Can you read first sentence?
NO
Clear benefit before scrolling?
NO
6th product page example
Above the fold checklist
A Nike product page.
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO – but add to bag is a strong call to action
7th product page example
Above the fold checklist
A Ping golf product page.
Can you read title or header ?
NO
Can you read first sentence?
NO
Clear benefit before scrolling?
NO
8th product page example
Above the fold checklist
Smyths Toys product page
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
YES – price and “Only At”
9th product page example
Above the fold checklist
Product page for Trends.vc that sells digital products
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
NO
10th product page example
Above the fold checklist
Product page at Warby Parker
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “save 15%“
11th product page example
Above the fold checklist
Product page at Box.co.uk retailer
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
YES – stock alert and free and easy returns
Above the Fold Service Page Examples
1st service page example
Above the fold checklist
Johnston Carmichael accountants service page
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “on hand to listen and grow your business“
2nd service page example
Above the fold checklist
Service page for mortgage broker
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “offering help to first time buyers“
3rd service page example
Above the fold checklist
Service page at Tax Assist
Can you read title or header ?
YES
Can you read first sentence?
YES – just
Clear benefit before scrolling?
NO – chat button hides text
4th service page example
Above the fold checklist
Service Page at mortgage broker
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO
5th service page example
Above the fold checklist
Service page at another mortgage broker
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “Free quote,” “quick”, “simple“
6th service page example
Above the fold checklist
Service page of financial advisor
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “take control of future“
7th service page example
Above the fold checklist
Service page from accountant
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “save time”, “take the stress out”, “stay on top”
Above the Fold Blog Post Examples
1st blog post example
Above the fold checklist
Blog post from Plum saving app
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO
2nd blog post example
Above the fold checklist
A guide from a web software company.
Can you read title or header ?
YES
Can you read first sentence?
JUST
Clear benefit before scrolling?
NO
3rd blog post example
Above the fold checklist
A guide from a copywriter
Can you read title or header ?
YES
Can you read first sentence?
NO
Clear benefit before scrolling?
NO
4th blog post example
Above the fold checklist
Advice website for freelancers
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
MAYBE – no benefit in web copy but benefit on green overlay button
5th blog post example
Above the fold checklist
Blog product from Drip; email marketing tool
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO
6th blog post example
Above the fold checklist
Guide from art and design retailer in Ohio
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO
7th blog post example
Above the fold checklist
A guide from car retailer; Cinch
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
NO
8th blog post example
Above the fold checklist
A guide and opt-in page from betting website
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “course is free“, “teach you everything“
9th blog post example
Above the fold checklist
Guide to seo from Backlinko
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “these strategies have helped my site“
10th blog post example
Above the fold checklist
A comparison guide from a coaching website
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “get the best technology right for you“
11th blog post example
Above the fold checklist
My guide to seo web design
Can you read title or header ?
YES
Can you read first sentence?
YES
Clear benefit before scrolling?
YES – “rank higher in Google“
Summary
Use the checklist to ensure these 3 main content elements appear above the fold to help improve rankings, click-through rates and the user experience.
Thanks very much for all your tips.
I am trying to do SEO on my own website. Can be a challenge.
It’s good to read your tips and experience.
Especially trying to get local seo.
Keywords are low in Ubersuggest and even though low and have a CPC it’s still hard to rank for them.