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?
The 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 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.