Website Design: Above or Below the Fold?

Above the fold or below the fold? Does the fold even exist? No matter where the fold Is, we can show you how to properly position your call to actions.

It has been a common debate for many years between website designers whether or not you should design your site for above or below the fold. Some say the fold does not exist and that it does not matter where content should be placed, while some argue it must be at the very top of the page. In this post, you will learn how to determine where your website’s fold is located and what you can do with that data.

What Is The Fold?

Does Above the Fold MatterThe phrase “Above the Fold” was coined way back when the golden age of newspapers. The fold was the separation between the upper and lower half of the newspaper. Newspapers were displayed to customers folded so that only the top half of the front page was visible. The most important or eyecatching stories and photos were often displayed above this fold in order to increase the sales of the papers.

Scrolling into the digital age…Being above the fold still matters.

Above The Scroll

In regards to website design, being above the fold was often referred to as “above the scroll”. The typical browser set to a default screen resolution will display approximately 600 pixels. After which, the user would need to scroll to see the rest of your content. Above the scroll is the contents of the webpage that is visible without scrolling.

Christopher Lara, project manager at TheeDigital, states that “Website design has become more advanced with multiple layouts for desktop, mobile, and tablet. It has become difficult to clearly define where the fold is located.”

Find your Fold

With all of the advancements in responsive website design and computer sizes, the fold on different machines by different users are seldom the same. Regardless of the screen size, we design all of our sites to take the fold into consideration.

There is a great tool available to help you determine where that fold is located: Heat Maps.


Heatmap tools collect data from real-life users and display the results in a variety of colors, with dark red showcasing the more used pieces of the pages, yellow for the middle, and light blue for the least used sections.

There are many different types of heatmaps available for websites. There are heatmaps used for displaying the areas of a web page that are most frequented by a visitor. They can track where users are clicking or tapping on your website. They can show where visitors have moved their mouse on the screen. This data can be used in conjunction with analytics to determine how often and how long users interact with each page on your website.

Scroll heatmaps are the ones you’ll want to use to determine where the fold on your website is. They track how far each visitor to your site scrolls down while looking at your page. Once you have your scroll heatmap set up and running for a few days, you can get an idea of where your users are spending their time on your site, and where they begin scrolling. This will tell you where the fold on your page is. It may be as little as 1/2, 1/3, or even 1/4 the length of your entire webpage.

Placing your Content Correctly

Studies have shown that 80% of time spent on a site is spent above the fold. As users scrolled further down the page, their attention span shortens and loses interest resulting in lower time on site and higher bounce rates.

With that being said, you should place your most important information in the upper half of the page above your website fold. Use the section of the web page that’s the darkest red to position your creative and compelling call to action.

In Closing

In conclusion, you should focus on creating compelling and relevant content without cramming too much information in any one section. Take advantage of the data gathered from the user behavior and use this knowledge to assess the proper locations on your web page to place your call to actions.

Most problems can be prevented by using a web design company that is also experienced in digital marketing. We can be that team for you. Don’t get overwhelmed about where to place your call to actions. TheeDigital is an experienced web design agency that also knows digital marketing. Contact our award-winning web designers in Raleigh, NC at 919-341-8901 or schedule a complimentary consultation and website review.