What is “Above the Fold”?

The human attention span is about 8 seconds. If you’re designing a website, that’s a number you have to hold in your mind. You have 8 seconds from the time someone enters your website to grab their attention.

First Impressions matter in person and on the web. If your ads are getting a lot of clicks, but you aren’t getting very many conversions - your “above the fold” might not be capturing that 8 second attention span.

“Above the Fold”

This term refers to the portion of your website that is visible before you scroll. The term dates back to the early days of publishing, when newspapers were sold from newsstands on every corner, before digital and e-commerce choices were widely available. The newspapers were folded in half and displayed so just the top half of the front page was visible. If the newspaper failed to capture attention with the portion visible to the public, they were going to have a poor sales day. Publishers quickly realized the value of this “Above the Fold” section and worked to ensure that it showed the most engaging content.

My Fold is Different Than Your Fold.

Obviously people have different sizes of screens. If you’re viewing a web page on a huge monitor, the fold will be lower than if I am visiting a website on a tiny laptop. A good rule of thumb is that “Above the fold” is somewhere between 600-1000px tall. Aim to capture attention, have a call-to-action, and show what your website is all about in that first 600-1000px. 

Keep mobile devices in mind when establishing the fold's placement. This might be an added difficulty in your design. However, the overall premise remains the same; important content should still be placed near the top of the page. 

The fold is merely a design guideline for a web page. It's crucial, but how it's implemented differs, so be skeptical of any advice that's given in black-and-white terms. Your website isn’t doomed to fail if you can’t fit everything in the first 1000px. Maintain a simple design so users know where to look first, and make sure your content is optimized for search engines (SEO). If you do these things, you'll notice an increase in conversion rates.

Best Practices

Okay, so what do you need to get in above the fold? In general, here are some things you should include, and some general guidance.

• Your H1 tag. Tell people what problems you solve right off the bat.
  Keep it short, keep it clear, and make sure it’s legible.
• Call To Action. Ask the reader to do something. This should happen before people scroll, so that the reader knows what you do, and how to make you do it for them.
• Navigation. Your navigation should be above the fold since that’s where people will expect it to be. Try to keep the number of links around 5-7. Any more and it can feel overwhelming.
  Your website's design should direct visitors to where they should go. When there are too many options, it can lead to decision fatigue and confusion.
• Background Images. If you use a background image, make sure it is relevant to your brand and doesn’t distract from any text.