"Above the fold" is still key for high conversion

When I worked at Trivago one of the most challenging design problems was to make more visitors consume content below the fold.
I saw dramatic decreases with each pixel people had to reveal by scrolling down.

Out of sight, out of mind

 The term "above the fold" comes from newspapers. I'm sure you noticed the visible part has an engaging title and image. The same principle applies to landing pages. But to a smaller degree. 

Above the fold example from Convo app
Above the fold example from Convo app

UX designers have a guiding principle called "out of sight, out of mind". It essentially means that if you hide something, chances are it will not be seen or used. A "hamburger menu” is a good example.

This doesn't mean you have to dump everything on the first screen. You need to rank what you show and reveal secondary content gradually. 
This has a fancy name: "Progressive disclosure".

You have only 10 seconds 

Assume that you don't have more than 10 seconds. Maybe even 5. 
Research done by Nielsen Norman group
states that "Users often leave Web pages in 10–20 seconds, but pages with a clear value proposition can hold people's attention for much longer".

You hold people's attention by crafting a great hero section. I wrote how to write a great headline and design a good call to action

Use the "hero image" or "hero video" to show what is your value proposition and inspire quality. 

Hook your visitors

The good news is that you don't have to squeeze everything above the 600px mark (safe space for your hero section). You need to make people interested in your product.
You grabbed attention, now people are in getting the message mode.

Assume that with each scroll people will "bounce" from your website.
Carefully choose each section that goes below the fold. It always depends on each website but usually, it's social proof, benefits, and footer.
Each section needs a dedicated article to make it great.

Sections below the fold. Price, Social Proof, Footer.

Landing page on mobile

Consider all tips above about websites and for mobile make it even more rigid. People have even less time or desire to check your landing page on a mobile device. "Content is abundant, attention is scarce".

Remove your image on a landing page even if it's amazing or you paid good money for it. Make sure you don't have to scroll for your call to action. If you need to remember one point from this article this is it.

You can test how your website looks on different devices inside the browser of your choice. For Chrome: Right-click on a page, Inspect
More on how to make a great mobile landing page in my other article. 

Example of Conversion Design on mobile
Example of Conversion Design on mobile

🐟 Just give me the fish

Don't assume people will scroll to understand better your product. You have only 10 seconds to make an impression of what are you offering and how. Craft and refine your hero section diligently.
Put your call to action above the fold. Especially on mobile.

If you’re looking for a tool to build your website. Use Webflow.
It’s the best and has no constraints on design. Iterate for conversion.


— Oleg

Get your website analysed for conversion for 5$.
90%off promo code: XK1NVSWR

Get Conversion Analysis

Here's an example for Resumey.

Practical conversion tips and cases. Weekly.

Awesome! We sent you an email confirmation
Oops! Something went wrong while submitting the form.

Join Our Community

To learn from practical tips and case studies: join my community of founders

We're affiliated with some products we recommend to support us. We don't suggest ones we wouldn't use.

More Articles

All Articles

Timeless visual design to increase conversion

Great websites using foundational design principles
View ArticleArrow Button
All Articles
Animations

How to use animation to increase conversion

Influence your landing page visitors with animations
View ArticleArrow Button