The Fold: What Is It and Why Is It So Important?

Introduction

The fold is a very important concept when it comes to web page design and SEO. I have mentioned the fold before in my other articles when talking about largest content paint in Pagespeed Insights and also when showing you how to make your website faster. I want to go deeper specifically on the fold because you need to know how much space you have to show your best stuff. I will talk about what the fold is and where it is on a web page. Then I will talk about how to leverage it on your web pages.

What is the Fold?

The fold is basically a line that designates an upper and lower portion of your website. Think about folding a piece of paper. If you fold the paper in half, then you have a crease in the middle and then you have an upper and lower half. When you first load the page, whatever you see without interacting with the screen is above the fold. Everything else that requires scrolling is below the fold.

The Viewport: What Is Currently Showing On Your Screen

There is some terminology that I would like to introduce now, the viewport. The viewport is just basically your screen or monitor. Whatever content is showing on your screen is however much you can see within your viewport. Think of the viewport as the camera on your phone. Your camera can only see a portion of your surroundings at a time. If you want to see more, you can either zoom in or zoom out. You can also move your phone around to get the perfect shot. However, you can only see so much of what is on your phone camera at a time. That is your viewport. The viewport is important because it gives you boundaries within your vision. So you know when things start and end at around the edges, or borders if you will.

You can also think of the viewport as a window. If you could move your window around, which you normally you cannot then, you could see more than what your window offers. Both of these examples are what the viewport is. You should know this because a website is typically longer than your phone if you are mobile, or a monitor if you are on a desktop or laptop. So on mobile phones, your viewport is typically in portrait mode, which is when your phone is vertical. The other mode is landscape, where your phone is horizontal. You switch between the two but people usually use portrait mode because it is easier to read website content when your phone is vertical.

This means that on mobile, your viewport has a height that is longer than its width. This contrasts to a desktop or laptop monitor, in which the screen is in landscape mode. So the width is greater than the height. This distinction is important to know because the dimensions of the screen do affect how much content you can view at a time on your device.

Where is the Fold?

The fold in the simplest terms is described as an invisible line that separates your page in two sections, an upper and lower portion. In most cases, if you have a long web page, your fold line will be toward the top of the page. The reason why is because the longer that your page is, the more scrolling is needed to read all of the content on the page. You really need to strategize and realize how crucial it is to place the best content above the fold. 

Scrolling: Trying to Reduce it as Much as Possible

Scrolling can be the bane of many websites if people are expected to scroll forever to reach the bottom. Long scrolling web pages are common if you have a lot of content to show. In some cases, you might need to condense information on the page if it is too “scrolly”, or rather too much scrolling is needed. Unless you have some reason to make a page really long like you are showing pictures or you have a lot of products, you should move some of your content to other pages. One of the biggest mistakes that people make in creating pages is that they assume that people will actually read an entire page and scroll all of the way to the bottom. 

Why Do People Stop Scrolling?

Here are a few reasons why people would stop scrolling on your page:

• People have found their information and will leave your page
• People click on a link or button that takes them to another page
• People cannot find what they are looking for and leave

Let me explain why these are the reasons why having long pages is not always the best idea.

People Have Found Their Information and Will Leave Your Page

Consider this a win, people found the information that they are looking for and left your page. This action has satisfied the user’s intent and this is what the main goal of your blog is. Often, people just look for what they need and leave. They might stick around and read more if they are interested but they are mainly looking for information that will help them do something. Once people have achieved that goal, they no longer need to stay on your page so they leave. 

People Click on a Link or Button That Takes Them to Another Page

People find a link or button on your page that interests them and they click it. When they perform that action, they will be sent to another page. This is also a good sign because you have convinced people that they should go to another page to learn more details about something, contact you or purchase a product. This too would stop someone from scrolling because they are moving from their current page to another.

People Cannot Find What They Are Looking For and Leave

Unfortunately, this is the worst scenario to be in. Someone visited your website because they thought that you have something to offer them. They thought that you have some sort of information that can help them out. When they went to your web page, they could not find exactly what they were looking for. If you do not provide answers right away, then users will just leave and find them somewhere else. This is common and is referred to as what people call the bounce rate. The bounce rate is the percentage of visitors who leave your website after just one page. Of course, bounce rate has been deprecated as a useful web tracking metric. This is why Google Analytics stopped measuring it when they transitioned from UA to GA4.

The Problem with Bounce Rate

In Google Analytics UA, bounce rate used to be very popular with people. The problem is that some people just go to a page, get their information and leave. Bounce rate cannot tell us if they had a positive or negative experience. All that bounce rate tells us is if someone clicked on a link after landing on a page or not. Since bounce rate does not record the user experience, it became deprecated. 

Is Time Spend on a Page Better Than Bounce Rate? Let Us Think About It

GA4 replaced bounce rate with average engagement session time, which is used to record how long someone spends on your page. Recording this time helps us infer that the longer someone spends on your page, the more positive the user experience is. The user is reading your content and sticking around to learn more. Again, record the time is not perfect, it still suffers the same fate as bounce rate. For example, if someone spends 30 seconds or one minute, we cannot tell if it only took 30 seconds for someone to find the information or after 60 seconds, they gave up. Lower times might mean that your pages answer questions quickly, which is good.

What Content Belongs Above the Fold? Your Most Important Content

You need to put your best content right on center stage when your page loads. This means large font and very few words. You want to create a strong first impression when users hit your page. So you need to deliver your message to them hard and fast. If your message is too long and takes too long to process, then users are already developing a negative impression of your content. That is why all of the details go under the fold. This also means that you need a call-to-action button to get people to convert as soon as they land on your page.

Call-to-Actions: Make Them Large and Easy to Click On

A call-to-action is something that makes a user perform a specific action. This action might be calling your business or buying a product. The goal is to convince your users that they need to do something on your page after giving them a brief amount of persuasive information. This is where imagery is important. An image showing your products and the benefits that it gives users is critical. That is why you see so many pages where the product is a background image with foreground call-to-action buttons. Just remember to optimize your images because those above the fold count more toward your page speed score than those below the fold. The page speed score that measures your above the fold images is typically largest content paint (LCP) because images tend to be larger in size than text.

If you would like to know more about how to optimize your images, I have a couple of articles that can help you. This article talks about speeding up a slow website and this other one discusses the LCP metric. So images are great because they can tell a story to your users. After all, a picture is really worth a thousand words. Just be sure to optimize your images and make them load fast.

Contact Information: Make It Easy For People to Find You

Other information that you should have above the fold is your contact information. I already mentioned your business number in the previous section. You should also consider your email and address. For many people, it is easier for them to just contact you directly than trying to find information on your website. Your website might have the information that the user is looking for, but the user may not know where it is. Especially if the information is at the bottom of the page or it is on another page that the user cannot find. This is very common and is not something that you can prevent. How you structure your website might make sense to you but not necessarily to your users. Plus each user has a different idea of where you have laid your content out. 

Headers and Top Sticky Bars

So just calling you is fast and easy and wastes a lot less time. This is why contact information must always show at the top. This is why many websites display contact information prominently in the header. Chances are, headers always load above the fold. Go one step further and have a sticky bar at the top showcase any really important information. This might be new updates to your website or a special offer. Sticky bars stay at the very top of the website as users scroll and are another way to make sure that your information never leaves the user.

Focus on Loading Content Early

The tricky part about getting above the fold content to load fast is to tell the browser to load it before content below the fold. There are ways to do this, one way is to make sure that any CSS styles that are used for above the fold content is preloaded. Preloading just prioritizes loading these styles over other assets. You can learn more about preloading CSS in this article.

What Content Belongs Below the Fold? Additional and Supporting Content

Creating content for below the fold is tricky because you need to think about how much scrolling you want for your users. We know that users will not scroll that much before they get bored and do something else. The only way for users to keep scrolling is if they feel that there is something interesting later on and they want to find out what it is. This requires keeping the user engaged. Otherwise, the user will stop scrolling and lose interest. 

Answer Above the Fold Content Questions With Details

Content that goes below the fold tends to be information that supports the information above the fold. For example, depending on what you put on the top, you might want to explain it in detail below. This is to help answer questions that people might have about your product and allay any apprehension or concerns that they have. Like I said before, if you do not address these concerns right away, the user will either move on or possibly contact you with questions.

Send Users Back To the Top Fold Once They Are Ready to Convert

This is why it is very common to see “back to top” arrows that push people back to the top when they have scrolled down so much. This helps people return to the section that is above the fold with the call-to-actions. Then when people are ready to click on those action buttons, they can do so after reading the supporting information below the fold. Spending time under the fold allows users to make an informed decision before they actually perform a call-to-action. This is how you leverage the fold and understand why it is so important and what the different selections of the fold are used for.

Impulsive Versus Cautious Buyers

Depending on the urgency that users need something, they might be able to just perform a call-to-action without the need to read any details below the fold. This is why you should place call-to-action buttons above the fold for those who are ready to commit right away. The supporting details under the fold are for those who need to read a little bit more to be convinced. Having your call-to-action buttons above the fold gives your users opinions and caters to a wider audience. You have the more “impulsive buyer” who will click on buttons right away and the “cautious buyer” who wants to read and think more before committing.

Convert Cautious Buyers with Call-to-Action Buttons Below the Fold

You can also make it even easier than just using a back to top arrow button to convert your users below the fold. Just set up your call-to-action buttons below the fold and then your users will not have to return to the top to find the buttons again. This is actually ideal because you can then include a copy that encourages users to convert if they are ready.

Lazy Loading Images

If you have any images below the fold, you will need to lazy load them. I wrote about that in this article about how lazy loading images make your website load faster. I wanted to make sure that I included this link because it deals with the fold.

Summary

The fold is a very important concept that involves two main sections of your web pages, above and below the fold. The fold is an invisible line that separates the upper and lower portions. The viewport is the screen of your device and allows you to see only a portion of your web page at a time. In order to see more, you must scroll to see more content under the fold. You need to leverage the fold and place your best content above the fold. This usually powerful imagery that is meant to convert your users using call-to-action buttons. Use the section below the fold to detail and support your content above the fold.