Below the Fold Web Design: Tips, Examples, and Best Practices

Below the fold means the section of a website that you can only see after you scroll down. The digital marketing wisdom is that the content present above the fold is noticed more and so is more important than the content present below the fold website.

In simpler words, The area on your website which can only be seen if the user scrolls down is called below the fold. In the digital world, above the fold has more value than below the fold as it is more noticeable.

Before we start talking about below the fold in detail, let's talk about where this phrase originated. The term "folding" is ancient. It has been used since the beginning of paper journalism. Newspapers used to be printed on huge sheets and had to be folded when they reached the newsstands. So, there was an above the fold section that was the centre of attraction for people and a below the fold one which was hidden from them. This term is still used the same way in the digital industry and means the same. If people need to scroll down, then it is below the fold.

We have talked about the importance of below the fold website and how it has been used in this article, so continue reading.

What Is Meant by Below the Fold?

The phrase “below the fold” means the website section that a user can only see if they scroll down. A holdover from the ancient newspaper world, the word “below the fold” was taken when a physical fold was on the newspaper. “Above The Fold” means anything present on the top that the user can quickly notice, and “below the fold” is anything under the fold.

The content, which seems less essential, was placed below the fold, as that section was not that noticeable when the newspaper was on the newsstand.

During the 1990s, when publishing was shifted to a website, the word “below the fold” stayed the same. This term is still used in website designing and refers to the content on the bottom of a website, around 600 pixels from the top of the website.

Why Is Below the Fold Essential?

The placing of information on a website influences the number of user interactions and engagement. Below the fold, content is not noticeable when the user visits the site, and if they don’t scroll the page, they won’t even see it.

Data shows that the location of ads and below the fold content reduces its chance of being noticed by the user.

A Google study found that ads above the fold have around a 73% chance of getting viewed, while advertisements in the below the fold section have only a 44% chance of getting noticed. In advertising, an ad is only known as viewed if 50% of its pixels are on the screen of a user for at least 1-2 seconds.

Due to less visibility, ads located below the fold section mainly generate less revenue than the ads that are noticeable above the fold section. Companies that sell ads on their sites charge less price for locating them below the fold section as it has a less chance of being noticed. 

Read More: What does UI design mean?

How Do We Measure Below the Fold?

It is not possible to tell an exact location for the fold on a website, as its precise location can be altered according to the screen's resolution, as well as the size of the browser and screens for various phones, monitors, and tablets.

When finding an average calculation for the placement of an average fold, most web designers think that the fold line is around 600 pixels tall and 1000 pixels wide.

This is the most relatable measurement for most monitor and browser blends of 1024x786p while maximising the browser window and not installing any toolbars on its top, which pushes the content down.

Mobile Phone Considerations

For a lot of years, the most general dimensions were 1024x768. When the use of mobile phones increased, new standard dimensions were found, like 360x640 and 320x568.

The enhanced usage of mobile phones for browsing has made it harder to design the fold as these devices come in various sizes. Every device has different screen dimensions, which have its requirements and limitations.

An extra thing to consider is that users usually search in portrait mode on their phones and not really in landscape mode, while people who use tablets and computers mostly browse in landscape mode.

With many people using websites through various devices, current web designing practices have started using responsive design with the help of flexible layouts, style sheets and images.

By using responsive design, the page has no exact layout, and the content reflows to various screen sizes. Responsive websites respond to the size or device where they are browsed.

While the actual content should still be on the fold section, nowadays, the pages are designed to make the users scroll down, so they don’t miss out on the main content.

Tracking the Usage of the Website

As it has an effect on the engagement and conversions of the content placement, it is essential to monitor how the users have been engaging with your web page.

Google Analytics or other analytics platforms can help you get data about what percentage of the visitors on your website are using mobile phones, tablets, or PCs and the average screen size of your users.

CrazyEgg or other heat map programs help determine how far down your users are scrolling on your website and where they are clicking on your site.

Once you know how the users are using your website, you can start the A/B test and experiment with various layouts to improve the user experience and increase your conversion goals.

Read More: What are the advantages of a relational database?

Why Is Below the Fold More Relevant Today?

If this article had been written around ten years ago, this part wouldn’t have been included. But, everything has changed so much over a decade. It is obvious how above the fold was important back then, and no one would put any essential information below the fold area. They thought people would not even bother checking that area, just like the newspapers.

People would put all of their actual content and ads above the fold section, and there would be nothing left for the below the fold area. 

But, this method has drastically changed in the past years, and if you want to know why following are the reasons for that:

1- People Are Addicted to Scrolling Nowadays

Scrolling is the new norm nowadays. As a reader of our article, even you would know how normal it is to scroll down.

A user test was run by an agency where they tested four various designs. They were:

• A black control picture.
• An arrow for providing the users with a cue to scroll below.
• A short picture that has the below the fold data.
• An animated picture that leads the users to blow the fold.

The results indicated that almost all of them scrolled no matter the design.

A study discovered that, on mobile phones, around 50% of the users start scrolling down as soon as they open a webpage and 90% of the other percentage opens it within 15 seconds of opening the website.

These researches prove how people are addicted to scrolling nowadays and that it is the new norm now.

2- There Are Various Screen Sizes to Know the Exact Size of “The Fold”

The various screen sizes include Smart TVs, PCs, Tablets, and smartphones. And, obviously, they all have multiple screen sizes and viewing orientations. It is just too complicated to decide the exact fold area for every different screen size as there are too many of them.

There are a few ways to manage the landing page to make it compatible with every screen size. Responsive pages are just one of the ways. They will be matching themselves to the size of the screen, but even with this solution, fold prediction is complicated. This makes the boundary below and above the fold thin.

3- The Way of Buying Has Changed

If we say users try their best to avoid dealing with a salesperson nowadays, we are not exaggerating. They indeed prefer knowing and researching their purchase on their own. This is essential as it will cause the below the fold content to be more user friendly and relevant.

You should redesign the layouts of your website according to these reasons if you want to stay in the game.

How Is Below the Fold Helpful in Increasing the Revenue?

Below the fold allows you to provide more relevant content. Just imagine being an eCommerce. Where would you want to put your best products? Obviously, in the above the fold section. But, below the fold section can be used to provide detailed content on these products. It works the same way for editorial pages. You can link similar articles or more content on them below the fold. 

Some more benefits of using below the fold for increasing the revenue are Increased general session duration, more click-through rate, better customer loyalty, and helpful with conversion rate optimization.

Should Call-To-Action Be Placed Below the Fold?

This is an essential topic to consider. Where should your CTAs be placed? Should they be in Below the fold section? This might be a complicated question as there is no exact answer. But, putting the customer in the middle of our designers will help you know better.

1. Pre-sold Users: They are aware of what they want, so if you keep your CTAs on the above the fold section, this will be more helpful.

2. Interested Users: Your offer should be as straightforward as possible here, and you should explain to them how it gives them some value.

3. Uncertain Users: They need more time and content. If you ask them to buy quickly or sign up, they will avoid it.

Even if you group it this way, it is not as accurate as you think it might be.

We need to track the customers to know more about them properly. We should be aware of a customer's pain points or which parts of our website are the most relatable for them. These can be achieved with the help of some specified tools for such things.

Read More: How do you plan your software project?

Tips for Improving the Design of Below the Fold Section

We have covered the importance of below the fold and more details on it. Lets now check some tips for improving the design of your website: 

1- Not a Lot of Content for Below the Fold

If you are writing too much information on the below the fold section of an eCommerce website, then the search engine algorithm can confuse it as the primary focus of your website. So, it should be clear and concise so that nothing could backfire on you.

2- Don’t Use “False Bottom”

A false bottom means when a web page has some content in below the fold section but won’t let the customer know about it. So, most users will not go through that information, and it will hurt the conversion. 

3- Put a Clue for Below the Fold

If you want your customers to know about below the fold section, just put up a clue or hint for your user. You can do this by adding a simple arrow or being creative and designing it your way.

4- Be Simple

The art of being simple and transferring your thoughts this way is essential. Nowadays, people don’t want to give a lot of time to anything. They want to be quick in everything, So they open your website and scroll down quickly. That is your only chance to attract them, so make sure to do that. 

Conclusion

Being able to attract your customers nowadays is essential. Today, below the fold website section is more important and is noticed more than above the fold section. This is a great option to share your content with your customers and talk with them instead of convincing them to buy. 

We hope you could get as much information as you need about below the fold website with our article. Thanks for reading. If you’re looking for a software development agency, you can Contact ENOU.

FAQs

What is the meaning of the term Below the Fold in website designing?

The term below the fold means the area of a webpage that can only be seen when a user scrolls down below. 

Is below the fold website section important?

The placement of content on a website indeed affects the way users engage and interact with your content. Nowadays, people prefer scrolling all the way down just when they open a web page. This leads to the users interacting more with the below the fold section than the above the fold section. 

What is the difference between below the fold and above the fold website design?

Below the fold website design is anything found on the bottom-most of a webpage, while Above the fold design is anything on the topmost of a website.

More Articles

1- What are the types of SDLC?

2- How is Webflow different from Wix?

3- What is the process of Software Building?

4- Is Webflow or WordPress better?

5- Cloud Vs SaaS: The Main Difference

‍

‍