Back to all postsDesign

Homepage best practices: the anatomy of a page that converts

A section-by-section breakdown of the homepage that turns visitors into calls, with the question each section must answer and the attention data behind it.

Most small business homepages fail for the same reason: they are built as a brochure, not as a path. A visitor lands, sees a stock photo and a slogan, and has to work out what the business does, whether it serves their area and how to get a price. Homepage best practices flip that around. On a homepage that converts, every section answers one question a buyer has, in the order they have it, and every section ends with an easy next step.

This post walks through that anatomy section by section: the hero, the proof strip, services, process, reviews, FAQ and the closing call to action. For each one we cover what it must answer, what to put in it, and the mistakes we see most often on Calgary service business sites. If you want to compare overall page structures instead, our guide to homepage layouts that still convert covers eight patterns side by side.

Why homepage design that converts starts with attention

Before we get into sections, it helps to know how people actually look at a homepage. The research here is consistent and has been for years.

Google researchers found that visitors form a gut reaction to a site's look in as little as 17 to 50 milliseconds (published 2012). The same study found that designs which were both simple and familiar scored best. A cluttered page was judged less attractive even when its layout was familiar, and an unusual layout was judged worse even when it was simple. For a small business, that is a strong argument for clean, conventional structure over clever experiments.

Once that first impression lands, the clock keeps running. Jakob Nielsen's analysis of Microsoft Research data (2011) showed the first 10 seconds of a page visit are critical, and people often leave within 10 to 20 seconds if they are not engaged. His conclusion: to earn minutes of attention, you must communicate your value proposition within 10 seconds.

Where people look matters too. In Nielsen Norman Group's 2018 eye-tracking work, users spent about 57% of their page-viewing time above the fold, down from 80% in their 2010 study. People scroll more now, but attention still drops sharply as you go down: 74% of viewing time fell within the first two screenfuls. And attention leans left. NN/g's 2017 study found 80% of fixations landed on the left half of the screen.

Horizontal bar chart showing share of page viewing time: 80% above the fold in 2010, 57% above the fold in 2018, and 74% in the first two screenfuls in 2018
Figure 1: Where viewing time goes on a web page. Source: Nielsen Norman Group (2018).

The practical lesson: put the most important words at the top and on the left, use headings people can scan, and do not bury your phone number at the bottom of the page. NN/g's research on the F-shaped scanning pattern shows people skim the first lines and the left edge of text when nothing guides their eyes. Good homepage design gives them those guides on purpose.

The seven sections, in order

Here is the structure we use as a starting point for most service businesses, from a plumber in Airdrie to a family dental clinic in Marda Loop. It is not a template. It is a sequence of questions, and the order matters because it mirrors how a buyer thinks: "Is this the right kind of business? Can I trust them? Do they do my job? What happens next? Do other people like them? What about my specific worry? How do I start?"

Annotated wireframe of a converting homepage showing seven stacked sections: hero, proof strip, services, process, reviews, FAQ and closing CTA, each labelled with the buyer question it answers
Figure 2: The seven-section homepage anatomy, annotated. Source: Clear Pixel.
#SectionQuestion it answersMust include
1HeroWhat do you do, and for whom?Headline with service and area, one supporting line, primary CTA, one trust signal
2Proof stripCan I trust you?Review rating and count, years in business, licences or memberships
3ServicesDo you do my job?3 to 6 services, each with a one-line outcome and a link to its own page
4ProcessWhat happens after I contact you?3 or 4 numbered steps, realistic timing
5ReviewsDo people like you?3 real reviews with names, link to Google profile
6FAQWhat about my specific worry?4 to 6 questions on price, timing, area, guarantees
7Closing CTAHow do I start?Repeat the primary action, phone number, hours

You can add a short "about" or "meet the team" block between reviews and FAQ when the owner is the brand, which is common for lawyers, dentists and trades. Just keep it short and put the full story on the About page.

Section 1: the hero (and what belongs above the fold)

The hero is the part of the homepage people see before they scroll. Given that more than half of all viewing time happens here, it has to do four jobs at once.

1. A headline that says what you do and where

"Quality you can trust" says nothing. "Furnace and boiler repair in Calgary, same-day service" tells a visitor in one line whether they are in the right place. Name the service and the area. If you serve Calgary plus Airdrie, Cochrane or Okotoks, say so in the subheading. We cover headline writing in more depth in how to write website copy that sells.

2. One supporting line

Use the line under the headline to add the most important differentiator: price model, speed, guarantee or speciality. "Upfront pricing, no overtime charges on weekends" is a real reason to choose you. Avoid stacking three or four claims here; one strong one is easier to remember.

3. One primary call to action

Pick the action you most want. For emergency trades it is usually "Call now". For dentists and lawyers it is often "Book a consultation" or "Book online". Make it a high-contrast button, put it on the left or centre where eyes land, and on mobile make the phone number tap-to-call. A secondary text link ("or get a free quote") is fine, but it should look clearly secondary.

4. One trust signal

A star rating with a review count ("4.9 from 212 Google reviews") is the strongest single trust signal for most local businesses. Put it right under the button.

What to leave out of the hero: sliders, autoplaying video with sound, long paragraphs and a generic stock photo of a handshake. A real photo of your team, your van in a recognizable Calgary neighbourhood or your clinic's front desk does more than any stock image.

Sections 2 and 3: the proof strip and the services block

The proof strip

Right below the hero, add a thin band of evidence. This is where visitors who hesitated after the headline decide whether to keep reading. Good items for the strip:

  • Google rating and review count
  • Years in business ("Serving Calgary since 2009")
  • Licences, certifications and memberships relevant to your trade
  • Warranties or guarantees in plain words
  • Service area ("NE, NW, SE and SW Calgary, plus Airdrie and Chestermere")

Keep it to three to five items, each short enough to scan in a glance. Logos of associations work well here if they actually mean something to customers.

The services block

This section answers "do you do my job?" Show three to six services as cards. Each card needs a clear name, one line describing the outcome (not the process), and a link to a dedicated service page. A roofing company might show "Roof replacement", "Hail damage repair", "Inspections for buyers" and "Gutters and soffits". That hail line matters in Calgary in a way it does not in Vancouver, and visitors notice when a business speaks to their actual situation.

Two rules we follow:

  1. Lead with your most profitable or most searched service. Since attention leans left and top, the first card gets the most looks.
  2. Every card links somewhere. Service pages are where you rank and where detailed buyers convert. The homepage is the index, not the whole book.

If you have more than six services, group them ("Heating", "Cooling", "Plumbing") and link to category pages rather than cramming twelve cards onto one screen.

Sections 4 and 5: process and reviews

The process section

People hesitate to contact a business when they cannot picture what happens next. Will someone pressure them? Will they get a price before work starts? How long until a technician shows up? A simple numbered process removes that friction.

Three or four steps is the sweet spot:

  1. Call or book online. "We answer 7 a.m. to 9 p.m., seven days a week."
  2. Get a clear quote. "Written price before any work starts."
  3. We do the work. "Most repairs finished same day."
  4. Follow-up. "We check in a week later and back the work with a one-year warranty."

Use your real timing and promises. If the honest answer is "within 48 hours", write that. Vague steps like "Consultation, Strategy, Execution" look like filler and do nothing to calm a nervous homeowner in Cochrane waiting on a furnace repair in January.

The reviews section

Reviews carry enormous weight for local services. BrightLocal's 2026 Local Consumer Review Survey found 97% of consumers read reviews for local businesses, and 54% visit the business's website after reading positive reviews. In other words, many of your homepage visitors arrive having already read your Google reviews, and they are checking that the site matches.

What makes a reviews section convincing:

  • Real names (first name and last initial is fine) and, if relevant, the neighbourhood or town.
  • Specific reviews that mention a service, a timeline or a problem solved. "Fixed our leaking hot water tank the same afternoon" beats "Great service!"
  • A link to your Google Business Profile so visitors can verify.
  • Recent dates. The same BrightLocal survey found 74% of consumers only consider reviews from the last three months.

Never write reviews yourself or edit them beyond trimming. Beyond the ethics, Canadian consumer protection rules and Google's own policies both treat fake reviews seriously.

Sections 6 and 7: the FAQ and the closing call to action

The FAQ section

By the time someone reaches the FAQ, they are interested but have one specific worry. Answer the four to six questions you hear on the phone most often. For service businesses those are almost always some version of:

Common questionWhat a good answer includes
How much does it cost?A starting price or range, and what changes it
Do you serve my area?Named communities and towns, any travel fee
How soon can you come?Typical response time and emergency options
Are you licensed and insured?Licence type, insurance, WCB coverage where relevant
Do you guarantee the work?Warranty length and what it covers
Do I need to be home?The practical logistics

Keep answers short, two or three sentences, and link to deeper pages where needed. An FAQ also helps with search because it uses the same words people type into Google. Use an accordion only if the page is getting long; otherwise, open text is easier to scan.

The closing call to action

The final section exists for the visitor who scrolled the whole page and is now ready. Do not make them scroll back up. Repeat the primary action in a full-width band with a short headline ("Need a plumber today? We answer 7 a.m. to 9 p.m."), the button, the phone number and your hours.

If your main action is a form, keep it short. Every extra field costs leads, which we cover in detail in why your contact form isn't converting. Name, phone or email, and a short "what do you need?" box is enough for a first contact.

Homepage best practices that tie the sections together

The sections give you the skeleton. These habits keep it working.

Repeat one primary action four times

Header, hero, after process, and the closing band. Same wording, same colour. Visitors should never have to hunt for the next step, and they should never wonder whether "Get started", "Contact us" and "Request a quote" are different things.

Write for scanners

Short paragraphs, descriptive headings and bold key phrases. NN/g's F-pattern research shows that without visual cues, people read the first line or two and then skim the left edge. Your headings should make sense on their own, because for many visitors they are the only text they read.

Design for the phone first

On the local service sites we build, we typically see more homepage visits from phones than from desktops. That means a sticky call button, tap targets big enough for a thumb, and a hero that fits the headline, button and rating on one screen without zooming. Check the page on your own phone in bright light, the way a contractor on a job site in the SE would.

Keep it fast

A beautiful homepage that takes five seconds to show its headline loses the 10-second race before it starts. Compress images, avoid heavy video backgrounds, and keep third-party scripts to what you actually use.

A quick self-audit

Open your homepage and answer these honestly:

  1. Can a stranger tell what you do and where within five seconds?
  2. Is there a visible way to call or book without scrolling?
  3. Is there at least one trust signal above the fold?
  4. Does every service link to its own page?
  5. Do you show real, recent reviews with names?
  6. Does the page end with a clear next step?

If you answered "no" to two or more, your homepage is probably leaving leads on the table. Our conversion-focused web design starts every project with exactly this structure, adjusted to your trade and your customers. You can see it at work in our recent projects.

Frequently asked questions

01What should be above the fold on a small business homepage?

Four things: a plain-language headline that says what you do and where, one supporting line, a primary call to action (call or book), and one trust signal such as your review rating. Nielsen Norman Group found users spend about 57% of their viewing time above the fold, so this space has to do the most work.

02How long should a homepage be?

Long enough to answer the questions a buyer has before they contact you, and no longer. For most service businesses that is seven sections: hero, proof strip, services, process, reviews, FAQ and a closing call to action. Eye-tracking data shows about 74% of viewing time lands in the first two screenfuls, so put the essentials early.

03Should my homepage have a slider or carousel in the hero?

We recommend against it. A rotating hero splits one message into several weaker ones, and most visitors only see the first slide. One clear headline with one call to action outperforms a carousel in almost every small business project we build.

04How many calls to action should a homepage have?

One primary action, repeated. Put it in the header, the hero, after the services or process section and at the bottom of the page. A secondary, lower-commitment option (such as a free quote form) is fine, but every button should lead to one of those two actions.

05Do reviews really belong on the homepage?

Yes. BrightLocal's 2026 survey found 97% of consumers read reviews for local businesses, and 54% visit the business website after reading positive ones. Those visitors arrive looking for confirmation, so show real reviews with names and a link to your Google profile.

Want a second opinion on your homepage?

If your homepage gets traffic but the phone stays quiet, the structure is usually the problem, and it is fixable. Book a free 15-minute call and we will walk through your homepage section by section, flag what is missing and show you what to fix first.

Sources

  1. Scrolling and AttentionNielsen Norman Group
  2. How Long Do Users Stay on Web Pages?Nielsen Norman Group
  3. Horizontal Attention Leans LeftNielsen Norman Group
  4. F-Shaped Pattern of Reading on the WebNielsen Norman Group
  5. Users love simple and familiar designs: why websites need to make a great first impressionGoogle Research
  6. Local Consumer Review Survey 2026BrightLocal
Written byDimitri

Dimitri runs Clear Pixel, a Calgary web studio building fast, clean websites for small businesses across North America.

Let’s talk

Book a free 15‑minute call.

Tell us about the project. We’ll map out scope, timeline, and a fixed price. No pressure, no obligation.