Above the Fold: What to Put There
"Above the fold" is a term borrowed from newspapers. It refers to the part of a page visible without scrolling. On the web there is no single fold, because screen sizes vary, but the idea still matters: the first view creates an impression and decides whether visitors keep going.
The fold is not fixed
Phones, tablets, laptops, and monitors all show different amounts, and browser toolbars take space. Design for a range of devices rather than one number. Check your page on a typical phone and a typical laptop.
Do people scroll?
Yes, if the first screen gives them a reason to. Visitors scroll when content seems relevant and well organized. The point is not to cram everything into the first screen. It is to make the first screen compelling and clear.
What belongs there
A clear headline. Say what you do and who it is for. Visitors should know they are in the right place within seconds.
A short supporting statement. One or two lines with the main benefit or how it works.
A primary call to action. A visible button for the main goal, such as "Get a quote" or "Shop now." See calls to action.
Navigation. A simple menu so people can find other pages. See navigation best practices.
A relevant image. A photo or illustration that supports the message, not a generic stock picture. See using images.
A hint of proof. A rating, client logos, or a short testimonial reassures visitors early. See social proof.
Contact details for local businesses. A phone number or location can be crucial for people ready to call.
What to avoid
- Auto-playing sliders that hide your message
- Large banners with no text or action
- Vague slogans such as "Welcome to our website"
- Pop-ups that cover the page immediately
- Cluttered layouts with too many competing elements
- Slow-loading hero media. See Largest Contentful Paint
Design the hierarchy
Use size, contrast, and spacing so the eye lands on the headline, then the call to action. See visual hierarchy and whitespace.
Give a cue to scroll
Content that peeks above the bottom edge, or a subtle arrow, signals more below. Avoid designs that create a false end of the page.
Keep mobile in mind
On phones, the first screen is small. Make the headline and button fit without crowding, and ensure tap targets are comfortable. See touch target sizes.
Test what works
Use heatmaps and A/B tests to see whether visitors engage with your first screen.
The bottom line
Make the first view clear, relevant, and action oriented. Tell people what you offer and what to do next, then reward their scrolling.