Web Design: Above the Fold

Above the Fold - Hero Section - CTA

March 21, 2021

What does “above the fold” mean?

How I would explain it is when you land on a website anything that you see at that moment, without scrolling, is above the fold; assuming you have your browser maximized.

This is really valuable real estate in web design and how it's used should be considered more than almost anything else on your website.

Your Home Page

If it's the home page, often what we call the ‘hero' is above the fold. It's a very special area that contains common elements. This is usually where a “Call to Action” or CTA lives.

The Headline

The headline can help the visitor quickly assess what your website is about and how they might benefit from the content. This is critical. People on the web are impatient. When they land on your web page, they'll bounce if it's not immediately handling what's on their mind or satisfies the intention behind their search.

Capturing leads or Buttons

You can provide an incentive or lead magnet to grow your list. THAT is the optimum action for some people. Don't make it difficult for someone to get on your list and get more information. Send it to them in the form of a report, ebook, videos.. whatever makes sense for your niche.

Also, you can include a button that opens a form or takes them to a profitable destination; or the next step in your visitor's journey.

Visually Appealing

Make this section visually appealing. A beautiful background or even a background video can tell your visitors what the site is about, what you are selling or a glimpse of who you are as a brand.

Product images or an image that shows what you provide for a service is a great idea too!

Internal Pages

Your internal pages can do some of those same things, but often it's to deliver specific types of content.

In this case you can use the ‘above the fold' to start telling your story or hooking them and encouraging them to explore more of the content.

If it's a blog post or static content, the title (heading) is critical. Just like the headline on the front page hero, this will immediately hook them by either telling them exactly what the content is about or creating curiousity.

Know the Next Action

You may have heard of user journeys or similar. Depending on where a person lands on your website, there is a journey you want your visitor to take. There is an action you want to lead them to; a next step.

  • Signing up to your list and generating leads
  • Reading your content
  • Exploring your catalog of products
  • Exploring the services you offer
  • Exploring the features page
  • Leading them to the pricing page
  • Simply learning more about your brand
  • Selling something on that page

Whatever it is, try and put yourself in their shoes and understand what they are looking for or the intent that brought them there… when they land on that page, “do you know what the next step or action is for them?”

Other Helpful Articles:
Matt Levenhagen

1 Comment(s)

  1. Pingback The "Website Audit" - Web Design & Development Projects - Matt Levenhagen


Your email address will not be published. Required fields are marked *

Recent Blog Posts

Please check out the latest blog posts below!

Unified Web Design

Translating your brand’s vision into code.

Learn more