Hardik Dewra
2 min read
Does above the fold still matter?
Yes, but the job is smaller than most heroes assume. Show the visitor they are in the right place, then make the next scroll worth taking.
The fold moved, the question stayed the same
There is no single fold any more. A 1440 by 900 laptop shows about 750 pixels of your page once the browser chrome takes its cut. An iPhone in Safari shows around 650, and less when the address bar sits at the bottom. So every visitor sees a different slice of what sits above the fold. What they want from that slice has not changed. Am I in the right place, and is this worth another scroll?
People scroll now, and they decide fast
Anyone who has used a phone since 2010 scrolls without thinking about it. The thumb moves before the brain finishes the sentence. So the old fear that nobody reads below the fold is out of date. People still leave quickly though. Someone clicks your ad, reads the headline, cannot find what the ad promised, and is gone in seconds. Scrolling costs the reader nothing. Their attention is the scarce part.
Measure your fold before you design it
Open your page on the three devices your analytics actually show. For most of my clients that means an iPhone, a 13 inch MacBook and a 1080p external monitor. Take a screenshot of the top of the page on each one, without scrolling. The phone usually shows a headline and half a button. The big monitor usually shows a headline floating in 400 pixels of empty space. Design for both, separately.
What usually wastes the space
Three things eat the first screen and give nothing back. Rotating carousels lose people on slide one, so slides two and three never get seen. Abstract headlines like “Growth, reimagined” would sit happily on any site in any category. Oversized hero images push the button off a phone screen. Check that last one on a real handset, because the Framer canvas is generous in a way phones are not.
What earns a place above the fold
Five things, in rough order of priority. The name of the product and the category it belongs to. The outcome the buyer gets, written in their words. One piece of proof, like a logo row or a single number you can defend. A primary button with a verb on it. And a picture of the real product or the real work, rather than a stock photo of a smiling team.
Give the scroll somewhere to go
The bottom edge of the first screen should look cut off on purpose. Start a section just above the fold line. Show half a logo row. Let a heading peek up from below. A hard border and a wide gap at that exact line tell the eye the page has ended. On long pages I keep the hero to about 80 percent of the viewport height, so a sliver of the next section always shows.
How to check yours in ten minutes
Show the top of your page to someone outside your company for five seconds. Hide it, then ask what the company sells and who it is for. If they cannot answer, the fold has failed, and no amount of animation will save it. After launch, look at a scroll map. If a big share of sessions never reach the second section, the problem sits inside those first 650 pixels.
WeDesignLandingPages.com
A sub-brand of WeDesignBrands.Agency