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.
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.
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.
🐟 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.
Get your website analysed for conversion for 5$.Get Conversion Analysis
90%off promo code: XK1NVSWR
Here's an example for Resumey.
Practical conversion tips and cases. Weekly.
Join Our Community
To learn from practical tips and case studies: join my community of founders