Above The Fold Content Checklist & 51 examples

Written by Fraser McCulloch.

Mastering the above the fold element is vital to design, seo and conversions.

Learn how to improve your above the fold elements with these examples and checklist.

Or download the guide NOW and continue reading.

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 basically all the content that will be visible without scrolling down into other parts of a web page.

We can say that everything from top left corner to bottom right corner belongs to Above-the-Fold area.

This includes 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 accomodate all screen sizes.

I’m currently using the iPhone 7 Plus with dimensions of 414 x 736 pixels but there 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.

  1. Can you read the page title or header of the page?
  2. Can you read the first sentence of your page ?
  3. Is there a clear benefit to scroll down the page ?

If you answer NO to any of these questions, then 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 choosing a theme or template for your website but in most cases you are going to have to customise your web page layouts to ensure important elements appear above the fold.

Tools such as Figma, Draftium and Sketch have been embraced by UX designers and developers to mockup or wireframe prototypes of web pages before they move 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 capture 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 user to scroll and skim down the rest of the page where they can 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.

Download Above the Fold Guide

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 title or header ?

YES

Can you read 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 title or header ?

YES

Can you read 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

Download Above the Fold Guide

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

Download Above the Fold Guide

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

Download Above the Fold Guide

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

Download Above the Fold Guide

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

Download Above the Fold Guide

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%

Download Above the Fold Guide

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

Download Above the Fold Guide

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

Download Above the Fold Guide

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

Download Above the Fold Guide

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.

1 thought on “Above The Fold Content Checklist & 51 examples”

  1. 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.

Comments are closed.