Eight homepage layout examples that still convert in 2026
Split hero, Z-pattern, service grid, map-led local and four more. Eight homepage layouts that still work, and how to pick the right one for your business.
Read articleA 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.
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.
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.
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?"
| # | Section | Question it answers | Must include |
|---|---|---|---|
| 1 | Hero | What do you do, and for whom? | Headline with service and area, one supporting line, primary CTA, one trust signal |
| 2 | Proof strip | Can I trust you? | Review rating and count, years in business, licences or memberships |
| 3 | Services | Do you do my job? | 3 to 6 services, each with a one-line outcome and a link to its own page |
| 4 | Process | What happens after I contact you? | 3 or 4 numbered steps, realistic timing |
| 5 | Reviews | Do people like you? | 3 real reviews with names, link to Google profile |
| 6 | FAQ | What about my specific worry? | 4 to 6 questions on price, timing, area, guarantees |
| 7 | Closing CTA | How 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.
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.
"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.
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.
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.
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.
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:
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.
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:
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.
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:
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.
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:
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.
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 question | What 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 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.
The sections give you the skeleton. These habits keep it working.
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.
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.
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.
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.
Open your homepage and answer these honestly:
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.
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.
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.
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.
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.
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.
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.
Dimitri runs Clear Pixel, a Calgary web studio building fast, clean websites for small businesses across North America.
Tell us about the project. We’ll map out scope, timeline, and a fixed price. No pressure, no obligation.