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

Above the fold content is whatever a visitor sees on a page before they scroll. For a local or small business site, it should answer four things at a glance: what you do, where you do it, why a stranger should trust you, and what to do next. Everything else on the page can build on that.

The term comes from print newspapers, but the screen version is messier. There is no single fold. It moves with every phone, laptop, browser toolbar and zoom setting. This guide covers what the fold is today, what research says about it, what to place there, how it ties into SEO, and how to check your own pages.

Digital Marketing All

digitalmarketingall.org

Make Your First Screen Count

Digital Marketing All offers web design focused on conversions, alongside SEO and local search services to support your online visibility.

Explore digital marketing services

TL;DR

The fold is not a fixed pixel line. Test your real pages on a few phone and desktop viewports instead of designing to one number.
Nielsen Norman Group's 2018 eyetracking research found people spent about 57% of viewing time above the fold, so the first screen carries the most attention.
Put one clear headline, a line of supporting copy, one primary call to action and one strong trust cue in the first viewport.
For SEO, the first screen should confirm the search result's promise fast. It is not a ranking shortcut, and useful depth below it still matters.
Make the first screen load first. A fast, readable hero beats a heavy, animated one.

What "above the fold" means on today's screens
Why the first screen still matters
What belongs above the fold
Hero section examples you can adapt
Call to action: above or below the fold?
Above the fold and SEO
Make the first screen load first
How to check your own first screen
Common mistakes
Our perspective: the fold is a promise, not a pixel line
Where we can help
FAQ
Sources

What "above the fold" means on today's screens

Above the fold is the part of a page visible without scrolling. Below the fold is everything you reach by scrolling. The fold itself is simply the bottom edge of the first view.

That edge is different for each visitor. The U.S. Web Design System glossary describes the above-the-fold area as what is visible to the user, and uses it to define Speed Index, a measure of how quickly that area becomes visually complete. Nothing in that definition is a pixel number, because none exists.

Here is what moves the fold:

Screen size and orientation. A phone held upright shows a narrow, tall slice. A laptop shows a wide, short one.
Browser chrome. Address bars, tabs, bookmark bars and cookie banners eat vertical space.
Zoom and accessibility settings. Visitors who enlarge text see far less of your layout.
Responsive layout. Your design reflows. A two-column hero on desktop becomes a stack on mobile, and the call to action may drop out of sight.

The old advice to keep everything inside the top 600 pixels came from a different era of monitors. Treat it as a rough habit at most. A better approach is to pick a handful of representative devices your customers use and review the first screen on each.

Why the first screen still matters

People do scroll. But attention is not spread evenly.

NN/g's 2018 eyetracking study found that people spent about 57% of their page-viewing time above the fold and 74% within the first two screenfuls. On the sites they studied, more than 42% of viewing time fell in the top 20% of the page. Earlier NN/g research from 2010 put the share of time above the fold even higher, at 80%, before newer data on bigger monitors updated the picture.

The lesson is not that nobody scrolls. NN/g's own framing is that people keep going when the top of the page signals the page is relevant and worth their time. In The Fold Manifesto, NN/g argues that what sits at the top versus what is hidden shapes the user experience regardless of screen size.

For a local service business, this has a direct meaning. A homeowner searching for a plumber, or an office manager comparing accountants, decides in seconds whether your page is the right one. The first screen is where that decision gets made.

What belongs above the fold

Think of the first viewport as an answer, not an introduction. Five elements do most of the work.

1. A headline that names the service and the place

Say what you do for whom, in plain words. "Emergency AC repair in Tampa, same-day appointments" tells a visitor more than "Comfort, delivered." If someone arrived from a search for a service in a city, the headline should echo that service and location so they know they landed in the right spot.

2. A supporting line that adds the reason to choose you

One or two short sentences. Name the outcome, the speed, the guarantee or the specialty, but only what you can actually deliver. Skip superlatives you cannot back up.

3. One primary call to action

Pick the single action you most want: call, request a quote, book a visit. Make it a visible button with a verb on it. A secondary link is fine, but two equal-weight buttons make people hesitate. On mobile, a tap-to-call button is often the strongest choice for local services.

4. One strong trust cue

Show evidence near the top, not three screens down. Good options for a local business include a star rating with the review count, a recognizable certification or license line, a short customer quote, or a count of years in business. Use only what is true and verifiable. One real cue beats a row of generic badges.

5. A relevant visual

Use a real photo of your team, your work or your location if you can. Stock images of handshakes add weight to the page and little meaning. Compress images and set their dimensions so they do not push the layout around as they load.

What to leave out

Auto-playing carousels that rotate away the message before it is read.
Pop-ups, chat prompts, cookie banners and promo bars all stacked at once.
A wall of text or a long form that crowds the hero.
Vague slogans with no service, place or action in them.

A clean first screen does not mean a sparse site. It means the most important facts come first and the rest follows in order.

Hero section examples you can adapt

These are patterns, not copied pages. Swap in your own facts.

Business type	Headline pattern	Supporting line	Primary CTA	Trust cue
Home services	"[Service] in [City], [timeframe]"	Licensed, insured, upfront quotes	Call now	Review rating and count
Dental or medical office	"[City] dentist accepting new patients"	Evening and Saturday hours	Book an appointment	Insurance plans accepted
Law or accounting firm	"[Practice area] help for [client type] in [City]"	What the first consultation covers	Schedule a consultation	Years in practice, bar or license line
Restaurant or retail	"[Cuisine or product] in [Neighborhood]"	Hours, parking or pickup details	Order or reserve	Local press mention or rating
B2B services	"[Outcome] for [type of company]"	How it works in one sentence	Request a proposal	Client logos you have permission to show

Hero copy that works

Good hero copy is specific and short:

Name the customer: "for small clinics," "for family-owned restaurants."
Name the outcome in concrete terms: "more booked appointments," not "growth."
Avoid stacking adjectives. "Best," "premier" and "top-rated" say nothing without proof next to them.
Read the headline aloud. If a friend could not repeat what you do after hearing it, rewrite it.

A before and after

Before: a landscaping company opens with a full-width lawn photo and the slogan "Where your vision grows." The phone number sits in the footer.

After: the same photo, now with the headline "Lawn care and landscaping in [your town]", one line about weekly service plans, a "Get a free quote" button and a line showing the review rating. Nothing was added that cost much. The page just stopped making visitors guess.

Call to action: above or below the fold?

Put at least one clear action above the fold. People who already know what they want, such as a returning customer or someone who found you by name, should not have to hunt.

That does not mean the full sales pitch must fit in one screen. A visitor who needs more convincing will scroll to your proof, pricing explanation and process. Repeat the same call to action further down so it is within reach once they are ready. Keep it the same action, with the same wording, so the page feels consistent.

A simple rule: the first screen asks for the easy next step, and later sections earn the harder ones.

Above the fold and SEO

The SEO story is often overstated, so here is what the sources support.

In January 2012, Google announced a page layout algorithm improvement that looks at the layout of a page and how much content a visitor sees after clicking a result. Pages that show little visible content because of excessive ads can be affected. Google said at launch that the change touched less than 1% of searches globally. That is a historical figure, not a current ranking threshold.

Later, Google's page experience guidance explained that its systems still prioritize the best information overall, even when some experience signals are imperfect. So a great page with a mediocre hero can still rank, and a polished hero on thin content will not rescue it.

The practical reading:

Match the promise of the search result. If your title tag and snippet say "Same-day water heater repair in Denver," the first screen should say the same thing.
Do not push the content down with ads or banners. Visitors should see something useful without scrolling past a wall of promotions.
Do not stuff keywords into the hero. A headline written for a robot loses the human, and the human is who calls you.
Keep depth below the fold. FAQs, service details, location info and proof still belong on the page. A strong first screen gives people a reason to read them.

For more on writing pages that serve both readers and search engines, see our guides on SEO copywriting for users and search engines and searcher intent optimization.

Ads and viewability

If you run display ads on your own site, placement matters. NN/g cites a Google analysis in which ads just above the fold had 73% viewability versus 44% just below it. Google AdSense counts an impression as viewable when at least 50% of the ad's pixels are on screen for one continuous second. Those figures describe ad viewability, not lead conversion or rankings. For a service business that lives on leads, use the insight to protect your core offer and call to action, not to fill the top of the page with ads.

Make the first screen load first

A perfect hero is worth little if it appears late. Visitors on a phone with a patchy signal are common for local businesses, and they judge speed by what they see, not by when the last script finishes.

Google's Largest Contentful Paint guidance says sites should aim for 2.5 seconds or less, measured at the 75th percentile of page loads across mobile and desktop. LCP is usually the hero image or the main headline block, so your hero choices directly affect it.

Digital.gov's guidance on optimizing page resources recommends practical steps:

Enable compression and minify resources.
Optimize images.
Optimize CSS delivery, since render-blocking style sheets slow the page.
Prioritize visible content and load the visible HTML before secondary components.

In plain terms, load the headline, service context, trust cue and contact button first. Let the footer, social widgets and secondary scripts follow. The same guidance suggests an ideal server response time under 200 milliseconds. Treat that as an engineering target to discuss with your developer or host, not a ranking rule.

Some hero choices that help:

Use one properly sized, compressed image instead of a background video.
Declare image width and height so text does not jump.
Avoid loading a slider library for a single image.
Use system fonts or a limited set of web fonts.

For product pages and image-heavy sites, our guide to image optimization goes deeper.

How to check your own first screen

You do not need special software to start.

List your top five pages. Usually the home page, your main service pages and your contact page.
Open each on a real phone. Not just a browser resized on your desktop. Look at it without scrolling.
Ask the four questions. What do they do? Where? Why trust them? What do I do next? If any answer is missing, fix that first.
Repeat on a laptop and on a larger monitor. Note where the call to action lands.
Try it with larger text. Raise the browser zoom to 150% and see if the button is still visible.
Ask someone outside your business. Show a friend the page for five seconds, then hide it and ask what the company does.
Check speed. Run the page through a free speed testing tool and look at LCP on mobile.

Once the first screen works, test changes one at a time: a new headline, a different button label, a different trust cue. Keep the version that produces more calls or form submissions, and note the date so you can compare fairly.

Common mistakes

Designing to a pixel number. The fold varies. Test on devices instead.
Cramming everything above it. Attention drops after the first viewport, but people keep scrolling when the page looks worth it. Give them a visible cue, like a partly visible next section.
Hiding the contact method. A phone number that only appears in the footer costs calls.
Using the hero for decoration only. A beautiful photo with no words wastes the most valuable space on the page.
Stacking interruptions. A cookie banner, chat bubble, promo bar and pop-up on the same first screen make a page feel pushy. One clear call to action is safer.
Ignoring location pages. If you serve several areas, each page needs its own place-specific first screen. Our piece on multi-location landing pages covers how to scale that without producing thin copies.

Our perspective: the fold is a promise, not a pixel line

We work with small and mid-sized local businesses on visibility, and we see the same pattern often. A company invests in showing up in search, in map results and increasingly in AI-generated recommendations, then sends the visitor to a page that does not say what the visitor came for. The click was won and the customer was lost.

That is why we treat the first screen as part of visibility work, not a separate design task. Search, autosuggest and AI recommendations all bring people in with a specific expectation: a service, a place, a question. The first viewport has to confirm that expectation within seconds. When it does, everything upstream pays off. When it does not, even a strong ranking produces little.

Our view, in short: say the service and the place, show one real proof point, offer one clear next step, and make that screen load quickly. Then use the rest of the page to earn the decision with specifics, such as reviews, process, pricing context and answers to common objections. Do that in order and you do not need tricks.

— Diane O'Brien

Where we can help

If your first screen is solid but people still are not finding your pages, the problem is usually upstream. We help local and national businesses get found in search, map results and AI recommendations, and build conversion-focused websites that match what visitors expect when they arrive.

Two places to start:

Local visibility. Our Local Domination package is $450 one-off, and Advanced Local Domination is $600 one-off. It focuses on your Google Business Profile and local market presence.
Website and growth services. See the full list on our services page, including website design built for conversions, reputation and review generation, and advertising.

If you would like a second opinion on how your pages look to a first-time visitor, get in touch through our site.

FAQ

What does above the fold content mean?

It is the part of a web page that appears on screen before the visitor scrolls. The term comes from newspapers, where the top half of the front page was visible when folded. On websites the cutoff changes with each device, so there is no single line.

What is below the fold content?

Below the fold content is everything you have to scroll to see. It is the right place for supporting detail: service descriptions, process steps, reviews, pricing context, FAQs and location information. Make sure the first screen hints that there is more worth reading.

Is above the fold still relevant?

Yes, though not as a rigid rule. NN/g's 2018 research found that people spent about 57% of viewing time above the fold, even though they do scroll. The first screen decides whether a visitor stays and keeps going, so it deserves your best work.

How big is the fold on a phone or computer?

There is no standard size. It depends on the device, orientation, browser toolbars, zoom and how your layout responds. Check your key pages on a few real phones and computers rather than trusting a single pixel measurement.

Does above the fold content affect SEO?

It is not a direct ranking shortcut. Google has said that pages with excessive ads or very little visible content can create a poor experience, and that its systems still prioritize the best information overall. Match your first screen to what the search result promised, load it quickly, and keep useful depth further down the page.