Homepage structure: what goes above the fold and why

Above the fold, a company homepage needs four things: a headline that says what you do and for whom, one line of supporting detail, a single primary call to action, and a piece of proof such as a row of client logos or one specific number. Below the fold come the services, the proof in full, how you work, a short About section and a final call to action, in that order. A hero image or video is optional and is the first thing to cut if it slows the page.

What does "above the fold" mean on a phone?

The fold is the bottom edge of the screen before anyone scrolls. On a desktop that is roughly 700 to 900 pixels of height; on a phone it is about 650 to 800 pixels tall and 360 to 430 pixels wide, with the browser bar taking some of it. Most visitors to a company site are on a phone, so plan for the phone fold: a headline of eight to twelve words, one supporting line, one button, and perhaps a logo row. Anything that needs two columns to make sense will not fit.

The first screen also decides your Largest Contentful Paint, the Core Web Vitals measure of how fast the main content appears. As of October 2026 Google's threshold for a good LCP is 2.5 seconds, per web.dev's documentation. A 3 MB hero image or an auto-playing video is the usual reason a homepage fails it. If you use a hero image, compress it (our image compressor does this in the browser) and give it explicit dimensions so the text does not jump when it loads.

What must be above the fold?

The headline. What you do and for whom, in plain words. "Payroll outsourcing for companies with 20 to 500 staff in the UAE." Not "Building the future together", which could be anyone. On the company websites we build, the headline is the first thing we write and the last thing we finalise, because every other section is a summary of a page that depends on it.

The supporting line. The one detail buyers care about most: speed, location, specialism, a guarantee. "Set up in a week, run by chartered accountants in Dubai."

The primary call to action. One button. "Get a quote", "Book a call", "See pricing". A second, quieter link is fine ("See our work"); a third is not.

Proof. A row of recognisable client logos, one number ("140 clinics fitted out since 2017"), or a short rating line. Proof above the fold is what makes the headline believable. If you do not have logos you are allowed to use, use a number; if you have neither yet, leave it out rather than fake it.

Navigation. The menu is above the fold by definition. Keep it to five to seven items with the contact action as a button on the right; our post on website navigation covers grouping the rest.

That is all. A hero image earns its place only if it shows the work: the product, the installation, the team doing the job. Abstract illustrations and stock photos of handshakes add weight and say nothing.

What goes below the fold, and in what order?

The order matters because each section answers the next question a buyer has. "What do you do?" (headline), "for me?" (services), "can I trust you?" (proof), "what happens if I enquire?" (process), "who are you?" (about), "what does it cost?" (pricing), "fine, how?" (call to action). Our website copywriting guide covers how to write each.

Every section should link somewhere. The homepage is a routing page: its job is to send the visitor to the service page or the contact page, not to hold them. It gets the shortest copy on the site and the most links.

What should the homepage not do?

Carousels and sliders. Visitors rarely click past the first slide, so slides two to five are invisible, and the slider adds script weight and layout shifts. Pick the one message and show it.

Auto-playing background video. Heavy, often the reason LCP fails, and on mobile data a cost to the visitor. If video shows the work, embed it below the fold with a poster image and a play button.

Trying to serve everyone equally. A homepage for "individuals, SMEs and enterprises" says nothing to any of them. Lead with the main customer; route the others with one link.

Three competing calls to action. "Get a quote", "Download the brochure", "Subscribe to the newsletter" in the first screen. Pick the one that leads to an enquiry.

Explaining everything. Full service descriptions on the homepage leave nothing for the service pages and make the homepage 2,000 words long. One line per service and a link.

Pop-ups on arrival. A newsletter modal before the visitor has read the headline costs more enquiries than it gains subscribers.

How do you write the headline?

Start with the formula "[what you do] for [whom], [the detail that matters]". Then cut. Test it with one question: if this line were the only thing a visitor read, would they know whether to stay? The word counter tells you if you have drifted past twelve words.

Write five versions. Read each aloud. The one that sounds like what you would say to a stranger at an event when they ask what you do is usually right. The one that sounds like a tagline is usually wrong.

How do you check the homepage works?

• The five-second test. Show the first screen to someone outside the company for five seconds, then ask what the company does and for whom. If they cannot say, rewrite the headline.
• The phone test. Open it on a mid-range phone on mobile data, not on the office Wi-Fi. Does the headline appear in under three seconds? Does anything jump?
• The contrast test. White text on a photo often fails. Our contrast checker tests your text and background colours against the WCAG thresholds.
• The analytics test. After a month, check where homepage visitors go next. If most leave without clicking anything, the problem is usually the headline or the first call to action. Our post on traffic but no leads covers the diagnosis.

The homepage is the first page most clients want to see designed and the last one we recommend finalising, because its sections summarise pages that do not exist yet. Plan the service and proof pages first, then build the homepage out of them; the order is laid out in our guide to planning a website.