Above-the-Fold Website Design: Hero Section and Mobile UX Best Practices

Above-the-fold website design is the part of a page someone sees before scrolling. For a service page or homepage, it should explain what is offered, who it is for and what to do next. Use a specific headline, a supporting sentence, a relevant visual where it helps and a clearly prioritized call to action. The exact visible area changes with the device and browser.

At W-MAX, we noticed a recurring pattern while reviewing heatmaps and behavior across 11 websites in different niches: a useful offer became harder to follow when menus, floating prompts and decorative elements competed with it. On mobile, scrolling often reached roughly five screenfuls. That is a qualitative practice observation, not a controlled experiment or a universal limit. We do not have a measured conversion lift to attach to it.

What should be above the fold on a website?

Hero headline: say what the company actually does

“Boiler repair in Tampa” gives the visitor a place to start. “A new standard of comfort” leaves the service and location unclear. A headline can be direct without listing every keyword. Use the term the intended buyer understands and state the relevant boundary.

Supporting copy: answer the next question

The subheading should add scope, availability or a condition. Repeating the headline in different words spends space without helping the decision. An eyebrow (the small label above the headline) is useful if it supplies context, such as a service category. Remove it if it merely says “Welcome”.

Hero image: show something the visitor needs to understand

A product detail, service process or meaningful result can explain the offer. A large decorative photograph may push the practical information below the fold. Try the page without it: if understanding is unchanged, the image needs a clearer job. This does not mean every hero needs a picture.

Call-to-action buttons: establish one main next step

Make the primary action easy to identify and describe the destination. “Request an estimate” is clearer than “Discover more” when the next step is a quote form. A second action can help someone who is not ready to enquire, but it should have a distinct purpose and lower visual priority.

Mobile hero section examples: compare layout choices

What belongs on the second screen of a homepage?

Answer the next buying objection

After the first screen explains the service, use the next section to resolve an actual question: what is included, where you work, what happens after the request or what evidence supports the offer. Do not repeat the same slogan in a larger font.

For a repair service, scope and availability may matter first. For unfamiliar software, a short working example may help more. For a high-cost project, the process and credible evidence can earn the next scroll. Our service page elements guide covers the rest of the page; this article focuses on the early order of information.

Place proof beside the claim it supports

Use real evidence with a clear meaning. A review about response time supports a response-time claim better than an unrelated logo. Do not invent ratings or display client work without permission. When client screens cannot be shared, a labelled schematic can explain the process without pretending to be a case study.

One CTA vs two CTAs: which converts better?

There is no winner without the task and audience. One action can suit a focused campaign page. A homepage serving existing customers and new buyers may need more than one route. Count what the secondary button helps people accomplish, not just whether it receives fewer clicks than the primary button.

Test CTA hierarchy without changing the entire offer

Keep the traffic source and offer comparable. Change a defined element: secondary-button prominence, for example. Record the expected outcome and any risk, such as fewer useful visits to pricing. Measure completed enquiries and their quality, not button clicks alone.

What a low-click secondary button can mean

It may be unnecessary, poorly labelled, hard to see or simply relevant to fewer visitors. A low click count does not establish that removing it increases sales. Check its destination and the needs of people who use it before deciding.

Homepage carousels, pop-ups and animation: reduce competing demands

Baymard's carousel research describes implementation requirements, including controls and content visibility. It does not establish that every carousel fails. If an important offer sits on a later slide, make sure visitors can actually discover and operate it. A single static message is often simpler to maintain and test.

I would also check the page as a first-time mobile visitor. Cookie choices, chat, subscription prompts and a sticky promotion can arrive together. Each team may think its own element is small; the visitor experiences the combined stack. Keep essential controls accessible and remove avoidable interruptions from the buying task.

Choose interaction by task, not by age alone

A younger audience does not automatically need moving objects. A visitor over 40 may benefit from an interactive comparison. Test comprehension, device constraints and motion preferences. Use animation when it explains a change; allow it to stop and respect reduced-motion settings.

Mobile scroll depth: how far should a landing page go?

Our roughly five-screen observation is a reason to inspect placement, not cut every page to that length. A visitor may stop because the answer was found, the page was confusing or an enquiry happened. Scroll depth cannot distinguish those explanations on its own. Screenfuls also change with viewport height and text size.

NN/g's scrolling research supports prioritizing information near the top while recognizing that people do scroll. Do not keep the only enquiry route at the bottom of a long page. Provide a useful action after the opening explanation and again where later content resolves a meaningful objection.

Above-the-fold UX testing checklist

• Check a small phone and a larger display, including enlarged text. Can the visitor identify the offer and reach the action without an overlay blocking it?
• Ask someone unfamiliar with the company to explain the page in their own words. Record misunderstandings before explaining it yourself.
• Verify form delivery and the destination of each button. A clear layout with a broken contact route still loses enquiries.
• Segment observations by page, device and traffic intent. Keep the consent and analytics coverage limitations with the results.
• In a controlled comparison, define one primary outcome, sample requirements and stopping conditions before reading the winner. Small samples remain uncertain.

NN/g's homepage principles provide a useful check on purpose and navigation. In our own review, the decision is practical: what must this visitor understand now, and what can wait? For the rest of the route, see why service websites get visitors but few calls.