"Above the fold" refers to whatever visitors see when they first land on your page, before they scroll. The term comes from newspapers, where the most important headlines had to be visible in the top half of the folded paper.
On websites, this is the only content you are guaranteed someone will see. Many visitors will never scroll. If you cannot convince them to stay in those first few seconds, everything else you have built is wasted.
What needs to be there
You need three things above the fold: a clear statement of what you do, some reason to believe you are legitimate, and a way to take action.
The clear statement is your headline and subheadline. Within about five seconds, someone should understand what your product does and whether it might be relevant to them.
The reason to believe is usually some form of social proof. This could be logos of recognizable companies, a usage number, or a brief testimonial. Something that suggests other real people have found value here.
The way to take action is your primary call-to-action button. If someone immediately wants to try your product, they should not have to scroll to find out how.
What to leave out
Everything else can go below the fold. Feature lists, detailed explanations, team bios, and additional social proof can all wait until someone scrolls.
The temptation is to cram everything important above the fold. Fight this urge. If your first screen is cluttered and overwhelming, people will not scroll because they will already be gone.
White space is your friend. A clean design with breathing room between elements is much more effective than trying to include one more thing.
Visual hierarchy
The most important element on your page should be the most visually prominent. This is usually your headline.
Your eye should naturally flow from headline to subheadline to call-to-action. If someone lands on your page and is not sure where to look first, something is wrong.
Common mistakes include: making the logo too big (nobody cares about your logo that much), having too many elements competing for attention, or burying the call-to-action in a crowded navigation bar.
Mobile considerations
More than half of web traffic is now on mobile devices. What looks great on a desktop monitor might be completely different on a phone screen.
Test your above-the-fold experience on an actual phone, not just a resized browser window. The things that fit above the fold on desktop might require scrolling on mobile.
On mobile, you have even less space, so ruthless prioritization becomes even more important. Your headline, a brief clarifying sentence, and your main button should all be visible without scrolling.
Common layouts that work
The classic startup homepage layout works well for a reason: headline on the left, product screenshot or illustration on the right, call-to-action button below the headline. Logos of recognizable customers along the bottom of the section.
Variations on this include: centering everything for a more dramatic feel, using video or animation instead of a static image, or leading with a bold claim and putting the explanation in the subheadline.
There is no perfect layout. What matters is that someone can quickly understand what you do and how to try it.
Testing and iteration
Your above-the-fold design should be one of the things you test most. Small changes here can have big impacts on whether people stay or leave.
If you are not sure whether your current design is working, try showing it to people who have never seen your product before. Watch where their eyes go. See if they can tell you what you do. Notice if they look confused or engaged.
Many companies spend months perfecting pages that people never see because they bounce from the first screen. Invest proportionally in the content that actually gets seen.