Above The Fold Content Checklist

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.

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.

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.

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

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.

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.

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

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.

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.