When you look at your webpage and hear the terms “above the fold” and “below the fold”, you may wonder what they’re even talking about seeing that you’re looking at your screen and there are no obvious folds. Believe it or not, your website does have a fold and it is important when it comes to where you place content. We’re going to show you how to determine where your website’s fold is and how that can be useful when creating a knockout website.
What is the Fold?
The phrase “above the fold” comes from the newspaper days. 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. This is why the most important or eye-catching stories and photos were often displayed above this fold to increase the sales of the papers.
When it comes to websites, you can use the same concept, but it’s all about being “above the scroll”.
Above The Scroll
Above the scroll includes the contents of the webpage that can be seen without scrolling. Think about your typical screen. A default screen resolution will display approximately 600 pixels. After that, the user needs to scroll down to see the rest of the content. The big question is, will they?
You’re taking a gamble to assume that they’re going to want to continue scrolling to get to the good stuff. You’re going to have to give them enough above the scroll to make them want to continue reading. If not, they’re not only going to stop scrolling but there’s a good chance they’ll find another site that gives them what they need above the scroll.
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.
Using heat maps is a great way to help you determine where that fold is located on your webpage.
Heat Maps
Heatmap tools collect data from real-life users and display the results in a variety of colors. Dark red showcases 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 heat maps available for websites. There are heat maps used for displaying the areas of a webpage 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 heat maps 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.
Content to Include Above the Scroll
When it comes to your webpage, there are several items you’ll want to include above the fold. This can increase your chance of visitors staying on your site and hopefully doing business with you. Here are some things to consider:
Your Brand Logo
You want people to recognize your brand by your logo. Having it displayed above the fold allows visitors to know exactly what page they’re on before even reading the text or searching for something.
Unique Selling Proposition (USP)
Your unique selling proposition is what sets you apart from the rest. It will immediately show visitors what you’re offering and how they’ll benefit from further exploring your page. You’ll also want to include some explainer copy along with it to briefly explain what your product or service does and why people would want it.
Navigation Tool
If this is someone’s first time on your site, you’ll want to provide a navigation tool that will allow them to explore your site. This tool should be easy to use.
Contact Information
People don’t want to go crazy to learn how to contact you. Providing a telephone number or email address at the top of your page is an easy way for people to discover how to contact you. It doesn’t need to scream at them when they’re on the site, it just needs to be there.
Call to Action
Some people say this is a must, while others say it doesn’t have to be. So, the choice is ultimately yours. But, if you include a call to action above the scroll, people have a clear idea of what you’re offering. It’s clear and to the point. Placing it below the fold assumes that visitors will continue to scroll down and hopefully see it.
Placing your Content Correctly
Now that you know what to include above the scroll, you want to place it 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.
Final Thoughts
Always 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 action. Don’t forget to include your contact information as well as a handy navigation tool to help your users.
Source link
