Above the Fold

The phrase comes from newspapers. Folded in half on a newsstand, only the top half shows, and what ran on that half drove sales. Screens work the same way.

Pagedeck's marketing page was built that way by accident. Three sentences describing the product and a screenshot went at the top, with the signup button sitting below them, a little past the edge of a laptop viewport. Analytics showed that 38 percent of visitors left without scrolling once. For that 38 percent, the signup button did not exist. Moving the button up beside the screenshot raised signup conversion noticeably within the same month, and nothing about the copy or the design had changed — only whether that element sat above the fold or below it.

The boundary isn't a fixed number; the viewer's screen size sets it. So it gets handled as several lines rather than one.

1. Every device draws the line somewhere else. A laptop cuts off around 780 pixels of height, a phone around 640, and a browser with two toolbars open cuts off higher than either. Rather than adopting one value, pick the two or three devices most of your visitors use and check each of them.
2. This area has two jobs: saying what this place does, and saying what to do next. Add a third and the type shrinks and the whitespace disappears, which blurs the first two as well. Deciding what goes here is mostly a matter of deciding what doesn't.
3. Let the next section be visibly cut off. When the top of the following block hangs at the edge of the viewport, people know there's more and scroll. A section that ends exactly at the fold reads as the end of the page.
4. On narrow screens, the columns of the grid system collapse and elements stack vertically. This happens most often on pages using responsive design, where a button sitting beside the screenshot on a wide screen drops below it on a phone and lands outside the fold.

"The signup button dropped below the fold. Let's reduce the image height."

The primary action has been pushed out of the first screenful.

"It's visible on a laptop and not on a phone."

The fold falls in a different place per device and only one was checked.

"Cramming everything above the fold got us 11-pixel type."

Ambition for one screenful produced a screen nobody can read.

The method Ravi and Noa used while reworking the landing page was blunt. They opened the page at phone dimensions, took exactly one screenshot, and asked five people outside the team to guess what the product did from that image alone. Two of the five said document storage. The word for working together wasn't in the first screenful, and moving that sentence up was the whole fix.