Above the fold

The fold is the bottom edge of the browser window when a page first loads. Everything above it is visible without any action, and everything below costs the visitor a scroll. There is no fixed pixel height: a 13-inch laptop, a large monitor and a phone each put the fold somewhere different. That is why Nielsen Norman Group describes the fold as a concept as much as a line. It is a reminder that the top of the page does most of the persuading.

Their research backs this up. In a 2018 eyetracking study, people still spent 57% of their viewing time above the fold, and 81% within the first three screenfuls. Scrolling is normal now, but attention falls fast as the page goes on.

Why it matters for a SaaS website

The first screen has to answer three questions quickly: what is this, is it for me, and what do I do next. On a SaaS homepage or landing page that usually means a plain headline, one supporting line, a primary call to action, a product visual and a hint of proof such as customer logos.

It is also where performance is won or lost. The hero image or video is often the Largest Contentful Paint element, so a heavy hero slows the very part of the page every visitor sees.

How DesignMe handles it

Hero messaging is one of the outputs of our UX foundations step, before any visual design starts. On Seamless.AI, the audit data showed only around a quarter of homepage visitors scrolled past the fold. Our opening three-day audit sprint ended with one concrete recommendation, a refreshed hero section. Seamless implemented it fast and saw an immediate lift, which opened the door to the full redesign.

We also design for a range of screens, not one desktop frame, and give hero media a lightweight poster so the first screen renders quickly.

Example

Say a security startup’s hero shows a looping 3D shape, the line “Security, reimagined” and two equal buttons. A visitor learns nothing. The rewrite says “Find and fix exposed secrets in your code”, adds one line on how, keeps a single “Start free” button, puts five customer logos underneath and swaps the 3D loop for a real product screenshot.

Common mistakes

• Cramming everything in. The first screen should earn the scroll, not hold the whole page.
• Slogans instead of meaning. Clever lines that don’t say what the product does waste the most valuable space.
• False floors. A layout that looks finished stops people scrolling. Let the next section peek into view.
• Heavy hero media. Autoplaying video without a poster hurts loading on mobile.
• Designing at one size only. Check real phone and laptop viewports.