818-646-7220

What Is Above the Fold and Why Is It Important?

A man is checking the above the fold of a website.

Above the fold is the web page’s top part, which visitors see immediately without scrolling. It is one of the essential parts of the homepage.
Why? Because the website visitors decide within 2-3 seconds whether they want to stay and continue reading or leave. It can often depend on this part. That is why it is worth designing the above-the-fold well.

What should an excellent above-the-fold look like?

On the one hand, it must be attention-grabbing. One of the goals is to keep visitors on the site. On the other hand, it must immediately clarify what problems the website or your business is solving. You should do this in the title.

Supporting Part

Below the title, usually, there’s a supporting copy section, which is an addition to the title. You can write a little bit more about what you mentioned in the title.

CTA

By all means, the above-the-fold section must contain a call to action (CTA). It should be what you want your visitors to do. E.g., ‘call now’, ‘subscribe’ or ‘buy now’ etc. The CTA is usually a button that takes you to the right page or performs the desired action. From a design point of view, this button should be prominent and attention-grabbing. It should also differ in color from the other colors of the page so that the visitor’s attention is immediately drawn to the title and the CTA button. After all, the goal is to make the expected action happen.

Most of the time, you need one CTA button. Still, if you need two, you should have a highlighted primary CTA button and a regular secondary button. (e.g., this secondary button should only have a frame, and the background color should be transparent.) Thus, the two CTA buttons will not compete with each other. E.g., such buttons as ‘Order now’ and ‘Portfolio’. Here, the primary CTA is the ‘Order now’ button, but the ‘Portfolio’ will also be there if we don’t convince someone immediately to purchase.

Services/Products

The above-the-fold section may consist of more than a large title and supporting copy. (plus a nice background image) You can immediately continue with the services section or write about your products if there is still space.
You can also write about the solutions for the website visitors’ problems here.

Forms

If the primary purpose of your page is to contact you or sign up for something, then it can be a form in the above-the-fold section.

Contact Info

It is also worth placing a phone number in this section, e.g., in the menu; often, the visitor only searches for a contact number and wants to call immediately. It can be very annoying if the website visitor has to search the entire website for an address or a phone number.

Design and Background Image

It is crucial to choose a good design and the right background. Regarding the background, I need to mention that you should optimize the image. Reduce the image size to the smallest possible, which does not cause quality loss. It’s crucial for page loading speed.

Above The Fold – Mobile Optimization

It is essential that above the fold (and the entire website) must be optimized for mobile. For example, the call to action must also be in the above-the-fold section in the mobile view.

Examples of Good Above the Fold

taco bell above the fold example

Taco Bell homepage in mobile view

Uber above the fold example. Desktop view.

Uber homepage. Mobile view.
BACK

Leave a Reply

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