What does above the fold mean? And why does it matter?

 

What does "above the fold" mean?

To understand the term "above the fold," we first have to take a look at where this phrase originated. It actually started with newspaper industry. Anyone who has ever picked up a traditional newspaper will know that they fold in the middle. The most important stories and color photos would be on the top half of the front page. That way they would be seen as people passed by the newspaper stand. The idea was to put something important or interesting on the front page to get people to pick up a copy.

The term "above the fold" means something similar for SEO. When you load any site there is a part of the site that is visible and then there are parts that the user must scroll down or navigate to see. The part the user sees on loading is called "above the fold" and is considered one of the most crucial parts of any site.

When the internet began finding out which part of a site would be considered above the fold was relatively easy. During that time all internet browsing was done on PCs and laptops and there were only a handful of web browsers. Now though the question is not as clear cut, there are many variations of screen sizes for tablets, mobiles, laptops, and PCs. Added to that are the many different variations of web browsers and the fact that they are much customizable than in the past. It is still important though to test our sites and try to optimize what is above the fold.

 Why is "above the fold"  important for SEO?

Increasingly SEO is becoming more and more about the end user. Things like Time Onsite, Bounce Rate, and Returning Visitors are easier than ever for Google to track and use as ranking factors. So, how are each of these affected by "above the fold" content?

• Time Onsite. This metric is used to estimate the time a visitor spends on your site although there is a flaw in how it is calculated. It is still an important metric and is affected greatly by the design of above the fold content. If your above the fold content does show the user what they are looking for they may leave without interacting with your site. Or they may spend very little time on your site before giving up and heading back to search.
• Bounce Rate. Related to Time Onsite is what is called the bounce rate, users who only see one page of a site and don't navigate further are said to Bounce and are counted as a zero for Time Onsite. A high bounce rate means that most people only view one page of your site. This could simply mean that a user found the information they needed and left. A bounce rate over 75% could be a sign that the site isn't well designed or the content isn't connecting with the audience.
• Returning Visitors. Google can also tell when a user that clicked on your site returns either through search or direct traffic (by typing the website in the address bar). If a user returns this is obviously a sign that they enjoyed the content on your site. Even if the previous session was counted as a bounce, a return visit is a sign that your site is engaging to users. You can increase returning users by building an email list, using push notifications, or using social channels. These types of actions should be emphasized above the fold to engage the maximum number of users.

How does "above the fold" design affect advertising?

Studies have shown that advertisements that appear "above the fold" get more views than those at the bottom of a page or embedded in the middle of post. If your site is monetized using something like Adsense you want to have some sort of advertising above the fold to maximize your revenue. However, you want use caution because large ads that distract from the actual content could turn off users and increase your bounce rate. Users tend to prefer non-intrusive ads without large graphics and animations. If you're supporting your site through affiliate commissions you may find that you can increase engagement on your site by removing visual banners and opting for contextual affiliate links (placing affiliate links within blog posts). It is important to balance advertising with user engagement and retention.

How to test your site?

Your site will likely not look exactly the same on all devices, most responsive designs work by moving certain elements around depending on the screen size. For that reason it can be a bit of a compromise when designing a site for all devices. Many responsive blogs will move sidebar content to the bottom of the page to feature the blog posts. Email subscription forms, ads, and social media channels that may be prominent on desktop can get lost below the fold on mobile devices. Incorporating, these elements in other parts of you blog and eliminating sidebars can be a good move for many blogs and help streamline design on mobile and tablets.

What makes great "above the fold" design?

• Makes use of visuals. Visuals can be used to gain the attention of the user and make clear what the page is about. When using images it is important that they show up correctly in each device. The last thing you want is a stretched or squished image being the first thing a user sees.
• Clear calls to action. Every page has a purpose. Whether it is a sales page, email subscription form, or a simple blog post. Your design should have clear calls to action above the fold that align with the purpose of the page.
• Social Media. Options to subscribe or share via social media are also good to include above the fold to increase the potential for likes and shares.
• Branding. Your logos and branding should make leave a clear impression of the name and of your blog and what you do. This will help users remember your site and perhaps return in the future.

Some people argue that above the fold design doesn't matter any longer because we have entered an era of mindless scrolling. While it isn't necessary to make sure every element of a page is above the fold it is still an incredibly important part of your site. Like newspapers from years ago the goal is to get and keep the attention of the user.