Above the Fold Content: What to Put in Your First Screen

Above the Fold Content: What to Put in Your First Screen

Above the fold content is whatever a visitor sees on your page before scrolling. The term comes from print newspapers, and online it means the first screen: your headline, a line of support, one clear action and a visual that proves you are the right business. Its job is not to say everything. Its job is to earn the scroll.

This guide shows what to put there, what to leave out, how to keep it fast, and how a local service business can check its own homepage in about 15 minutes.

TL;DR

• The fold is a fluid zone, not a fixed line. It changes with every phone, laptop and browser window, so design for the first screen rather than a pixel count.
• People still give the top of the page more attention. Nielsen Norman Group eyetracking found 57% of viewing time goes to the part above the fold.
• Put four things there: what you do, who it is for and where, proof, and one next step.
• Do not cram. A clean first screen with a visible cue to keep scrolling beats a cluttered one that tries to say everything.
• Protect speed. A lazy-loaded hero image or a pop-up covering the page can cost you both visitors and rankings.

Table of Contents

• What above the fold content means today
• Why the first screen matters more than the rest
• The four things every first screen needs
• Do you need to fit everything above the fold?
• Signals that tell people to keep scrolling
• Speed: the part most designers skip
• Pop-ups, banners and ads in the first screen
• Examples of strong first screens, described by pattern
• Perspective: what we see on local business sites
• A 15-minute audit of your own first screen
• When to get help
• FAQ
• Sources

What above the fold content means today

The fold was the crease in a folded newspaper. Editors put the best story on the top half so it showed on the newsstand. On the web, the fold is the bottom edge of the browser window when the page first loads.

The catch is that there is no single fold. A phone in portrait shows a narrow, tall slice. A laptop shows a wide, short one. An iPad rotated sideways shows something else again. That is why people on forums ask whether the fold is still a thing. The answer: the line moved, the effect did not.

Nielsen Norman Group has argued for years that what appears at the top of the page versus what is hidden always shapes the experience, whatever the screen size. Its eyetracking work found that people scroll more than they used to, but they still look more above the fold than below it.

Why the first screen matters more than the rest

Two numbers from the same research are worth remembering. About 57% of page-viewing time is spent above the fold. And the average difference in how users treat content above versus below it is 84%.

Read that carefully. It does not say people never scroll. It says attention is front-loaded. Visitors decide in the first screen whether the page is relevant, and only then do they invest in the rest.

For a local business, this has a plain consequence. Someone searching for a plumber, an accountant or a small agency often has three or four tabs open. If your first screen does not tell them in seconds that you do what they need, in their area, they close it. They do not scroll to find out.

The same logic now applies to AI search tools, which summarize pages by pulling clear statements about who you are and what you do. A first screen that states your service and location plainly helps both people and machines. We cover that angle in our guide to making your business website eligible for ChatGPT search.

The four things every first screen needs

When we look at a small business homepage, we check for four elements. If one is missing, that is usually the first fix.

1. A headline that says what you do and where

Skip slogans. “Excellence in every detail” tells a visitor nothing. “Water heater repair and replacement in the San Fernando Valley” tells them they are in the right place.

A good test: cover your logo. Could a stranger tell what you sell and who you sell it to? If not, rewrite.

2. One line of support

Use a single sentence to add the detail the headline could not carry: how fast you respond, what you handle, what makes the job easier for the customer. Keep it to one or two lines on a phone.

3. One primary action

Choose the thing you most want a visitor to do and make it obvious: call now, request a quote, book a consultation. Two actions can work (a call button and a form link), but five cannot. A button label should say what happens next, such as “Get a free estimate,” not “Submit.”

On mobile, a tap-to-call button in the first screen is often the highest-value element for home service businesses. Make sure it is a real phone link, not an image of a number.

4. Proof, small and close

Trust has to show up early. Put one piece of evidence next to the action: a review rating with the source named, a license number, years in business, or a photo of your actual team or work. Stock photos of handshakes do the opposite of what you want.

Only state what is true and checkable. If you say “licensed and insured,” the license should be findable on the site.

Do you need to fit everything above the fold?

No, and trying to is the most common mistake. Nielsen Norman Group’s guidance is that the biggest error is cramming too much into the top, which creates clutter and what it calls false floors: spots that look like the end of the page so people stop scrolling. A scrolling page with clear, chunked messaging often does better than a cramped single screen.

Think of the first screen as the opening of a conversation. It introduces you, shows you are relevant, and makes the next step easy. The details, such as service lists, pricing ranges, process steps, FAQs and reviews, belong below.

The same principle applies to any marketing offer. A well-built brief or landing page leads with the promise, then builds the case. If you want a parallel from another field, this piece on writing a creator brief that converts shows how an opening frames an offer and moves the reader toward action.

Signals that tell people to keep scrolling

Since the fold moves, you cannot control where the screen ends. You can control the cues. NN/G’s research describes designing around “scrolling signifiers”: visible hints that more content waits below.

Practical ways to do it:

• Let the next section peek in. A card, image or line of text cut off at the bottom of the screen invites the scroll.
• Avoid a full-width block of white space or a hard horizontal line right under your hero. It reads as the end of the page.
• Use clear headings and consistent spacing so each section starts where the reader expects.
• Keep the logo bar or trust strip modest. A tall, solid band can create a false floor.

This is also why testing on real devices matters. Open your homepage on your own phone, then on a laptop, then in a narrow desktop window. At each size, ask: can I tell what this business does, and is there a hint that more is below?

Speed: the part most designers skip

A great first screen that loads slowly is a bad first screen. Google’s Core Web Vitals set a target for loading: Largest Contentful Paint should happen within 2.5 seconds of the page starting to load, measured at the 75th percentile of visits. On most business homepages, the largest element is the hero image or headline block, so your above-the-fold design decides your score.

A common pitfall is lazy-loading the hero image. Lazy loading is great for images far down the page, but for the main image it delays the very thing visitors need. Google Chrome’s performance guidance says images in the first screen should load eagerly, be discoverable in the HTML and use a high fetch priority, rather than waiting behind carousels or secondary scripts.

A short checklist to hand to whoever manages your site:

1. Do not lazy-load the hero image.
2. Compress and size the hero image for phones. A 4,000-pixel photo is wasted on a 400-pixel screen.
3. Avoid auto-playing background video and sliders in the first screen.
4. Keep fonts limited to one or two families.
5. Reserve space for images so the layout does not jump as things load.

If you want to see where you stand, run your homepage through a free speed test and look at the LCP figure for mobile first.

Pop-ups, banners and ads in the first screen

The first screen is where many sites get greedy. Two Google policies are worth knowing.

Intrusive interstitials. Google has said that pages where a pop-up blocks the content a visitor came for may rank lower. Exceptions include legal needs like cookie notices, age verification, and login dialogs for private content. A full-screen “Get 10% off” overlay on arrival is the classic offender, particularly on phones. A modest banner that leaves the page usable is fine.

Too many ads. If your site carries advertising, Google’s page layout algorithm looks at whether the top of the page is loaded with ads to an excessive degree. According to Google’s John Mueller, it is less about counting ads and more about how hard it is to find the actual content. Most local service sites do not run ads, but the lesson holds: do not push your content below a wall of promotion.

Examples of strong first screens, described by pattern

Rather than name brands, here are three patterns that work for the kinds of businesses we see in Los Angeles.

Notice what these share: no carousel, no vague slogan, one main button, and proof within a thumb’s reach of it.

For a wider set of brand examples, HubSpot’s roundup of above-the-fold examples shows how bigger companies handle headlines, video and calls to action. Take the ideas, but scale them down. A local electrician does not need a product video. A clear photo of a real technician beats it.

Perspective: what we see on local business sites

We audit small business sites in Los Angeles, and the first screen is where we find the quickest wins. Three patterns show up again and again.

First, the headline describes the owner’s feelings about the business, not the customer’s problem. “Where quality meets care” could belong to a dentist, a roofer or a law firm. When we rewrite it to name the service and the neighborhoods served, inquiries become easier to attribute to the page because visitors now know what to ask for.

Second, the services are explained deep in the site, so the first screen sells nothing. A visitor, and an AI tool summarizing the page, cannot tell whether the business does residential or commercial work, or whether it covers their area. Fixing that costs far less than buying more traffic. Our checklist of 12 contractor website checks before you pay for more traffic starts from this idea.

Third, owners are afraid of the fold, so they stuff in everything. We would rather you earn the scroll. State what you do, prove it once, offer one next step, and let the rest of the page do its work.

We do not believe in a magic pixel number. We believe in checking the page on real phones, with a real customer’s question in mind.

— Ash

A 15-minute audit of your own first screen

You can do this without a developer.

1. Open the page on your phone, without scrolling. Take a screenshot.
2. Show it to someone outside your business for five seconds. Ask what you sell, and where. If they cannot say, the headline needs work.
3. Find the action. Is there one obvious button or tap-to-call link? Is its label specific?
4. Find the proof. Is there a rating, license or real photo within the same screen?
5. Check for blockers. Does a pop-up, cookie banner or chat widget cover the content on load? Keep legal notices, but shrink anything else.
6. Check the load. Run a speed test and note mobile LCP against the 2.5-second target.
7. Look for the scroll cue. Does something visibly continue below the screen’s edge?

Write down what fails. Fix the headline and the action first, since they cost little and affect the most visitors. If the problem is deeper, such as a layout that cannot be fixed without a rebuild, our piece on what a $1,000 website refresh includes and when you need a rebuild can help you decide.

If visitors reach your site but do not take action, the issue may also sit on the landing page itself. See how to build local landing pages that match what searchers want.

When to get help

If your first screen is unclear, slow or cluttered, it is usually a symptom of a site that was never structured around the customer’s question. That is the work we do at Picshaw. We start with an AI Visibility Audit that looks at how your site is structured and where it fails to explain your services, then give you specific next steps rather than a generic report.

If you already know the site needs work, our website redesign packages are published with prices: a Website Refresh is $1,000 one-off, a Growth Site starts from $2,500 one-off, and Monthly Partner support starts from $500 per month. Contractors and home-service businesses can also see our web design for contractors page.

FAQ

What does above the fold content mean?

It is the part of a web page visible when the page loads, before any scrolling. Anything you must scroll to see is below the fold. Because screens differ, the exact line changes from device to device.

Is above the fold still relevant?

Yes. Nielsen Norman Group’s eyetracking research found that 57% of viewing time is spent above the fold, even though people scroll more than before. What changed is that you do not need to fit everything there. Use it to prove relevance and invite the scroll.

What is below the fold content?

It is everything a visitor reaches by scrolling: service details, process steps, reviews, FAQs and secondary calls to action. It still matters, but people reach it only if the first screen convinced them to continue. Chunk it with clear headings so it is easy to scan.

Should the call to action be above the fold?

Usually yes, for local service businesses, because many visitors are ready to call or request a quote right away. Repeat the action further down for people who need more reassurance first. Keep it to one primary action in the first screen so the choice is easy.

Sources

• Scrolling and Attention, Nielsen Norman Group
• The Fold Manifesto: Why the Page Fold Still Matters, Nielsen Norman Group
• Web Vitals, web.dev
• Performance guide, GoogleChrome modern-web-guidance-src on GitHub
• Helping users easily access content on mobile, Google Search Central Blog
• Google’s Mueller Clarifies Page Layout Algorithm, Search Engine Journal
• 18 Above the Fold Content Examples, HubSpot
• How to Write a Creator Brief That Converts, ANT Management

Recommended

• Local Landing Pages: How to Build Ones That Earn
• 12 contractor website checks before you pay for more traffic
• Local SEO for small service businesses
• Google Business Profile Categories: How to…