Eight homepage layout examples that still convert in 2026

Ask ten web designers for the "best" homepage and you will get ten opinions. The honest answer is that a handful of homepage layout examples keep working year after year, and the right one depends on what you sell and how urgently people need it. A furnace repair company and a family law practice should not have the same homepage, even if both want the phone to ring.

This guide covers eight layouts we still use and recommend in 2026: split hero, Z-pattern, F-pattern, single-column story, service grid, video hero, quote-first and map-led local. For each, you get what it looks like, when to use it, when to avoid it, and what changes on mobile. If you want the section-by-section content of a good homepage (what goes in the hero, where reviews belong), read our companion piece on the anatomy of a homepage that converts. This post is about the overall shape.

Why layout still matters for conversions

Layout is the first thing a visitor's brain processes, before a single word is read. Google researchers found people form a visual judgment of a site in 17 to 50 milliseconds (2012), and that simple, familiar designs scored best. "Familiar" is important. A homepage that looks like what people expect from a plumber, a clinic or a law firm gets the benefit of the doubt.

Once people start looking, they mostly scan. Jakob Nielsen's analysis found that on an average page, users read at most 28% of the words, and 20% is more likely (2008). The layout decides which 20% they see.

Nielsen Norman Group's eye-tracking work identifies several scanning patterns. The F-pattern shows up when text has no clear structure: people read the top lines, then skim down the left edge. The layer-cake pattern, where people jump from heading to heading, is described by NN/g as "by far the most effective way" to scan, short of reading every word. A good layout is one that makes the layer-cake pattern easy: clear headings, distinct bands, one idea per section.

The eight homepage layout examples at a glance

Layouts 1 to 3: split hero, Z-pattern and F-pattern

1. Split hero

The workhorse. Text on the left (headline, one supporting line, button, rating), a real photo on the right. It works because it matches how eyes move: NN/g found 80% of fixations land on the left half of the screen (2017), so the words and the button get the first look while the photo adds context.

Use it when: you are a local service business with a clear offer and at least one strong photo of your team, work or space. A dental clinic in Kensington or an electrician in Okotoks fits perfectly.

Mobile: the photo moves below the text or becomes a short band above the headline. Do not let a tall image push the button off the first screen.

2. Z-pattern

The eye moves across the top (logo to header CTA), diagonally down to the left (headline), then across again (supporting point to button). It suits pages with little copy and one clear action.

Use it when: you sell a simple, single offer, such as a mobile car detailing service or a seasonal Christmas light installer. The Z gives you exactly four "stops" to fill.

Avoid it when: you have a lot to say. Once content goes past the first screen, the Z breaks down and you need a different structure below the fold anyway.

3. F-pattern

Strong left-aligned headings, short paragraphs and lists, with the most important words at the start of each line. NN/g treats the F-pattern as a warning sign when it happens by accident, but you can design for it on purpose by front-loading every heading.

Use it when: you have many services or a lot of information to share, like a multi-trade renovation company or an accounting firm with several practice areas.

Mobile: the F becomes a single column of headings. If each heading makes sense on its own, mobile visitors can skim it like a menu.

Layouts 4 and 5: single-column story and service grid

4. Single-column story

One column, scrolling top to bottom like a well-designed one-pager: problem, approach, proof, process, offer. Each section is a full-width band with one heading and one idea.

Use it when: the purchase is considered and the buyer needs to understand your approach. A family law practice, a custom home builder or a financial planner benefits from telling the story in order.

Avoid it when: visitors are in a hurry. Someone with water in the basement in Tuscany at 7 a.m. does not want a story. They want a phone number.

Tip: put a CTA after every two or three sections so ready buyers never have to scroll back up.

5. Service grid

A short hero, then a grid of service cards (usually four to eight), each with an icon or photo, a name, a one-line outcome and a link. This is the most practical layout for trades and clinics because the first question visitors have is "do you do my job?"

Use it when: you offer several distinct services and want each one to rank on its own page. An HVAC company with furnaces, air conditioning, water heaters and duct cleaning is a classic fit.

Mobile: the grid becomes a stacked list. Keep cards short so people can scan four or five without much scrolling, and make the whole card tappable, not only a small "learn more" link.

Layouts 6 and 7: video hero and quote-first

6. Video hero

A short, silent looping video behind or beside the headline. Done well, it shows craftsmanship in a way photos cannot: a kitchen coming together, a venue filling up during Stampede week.

The cost is real. Google's guidance says Largest Contentful Paint should be 2.5 seconds or less, and for video elements the poster image or first frame is what gets measured. A large, uncompressed hero video can push that number well past the threshold on mobile data.

Rules if you use it:

1. Keep it under 10 to 15 seconds, muted, and compressed hard.
2. Always set a light poster image.
3. Put a solid or gradient overlay behind the text so the headline stays readable on every frame.
4. Give users a pause control, and respect reduced-motion settings.

7. Quote-first

The hero leads with a real customer review instead of a marketing headline, followed by your name, service and button. It flips the usual order: proof first, pitch second.

Use it when: your reputation is your strongest asset and you have plenty of recent, specific reviews. BrightLocal's 2026 survey found 97% of consumers read reviews for local businesses, so leading with one can be powerful.

Avoid it when: you have only a handful of reviews, or they are vague. Never write or edit quotes to make them stronger. Use the customer's own words and name.

What about carousels?

We get asked this a lot. A rotating hero looks like a way to say several things at once, but NN/g's research on auto-forwarding carousels (2013) found people miss content that rotates away, struggle to read moving text and often treat it as advertising. If you have three messages, make them three sections.

Layout 8: map-led local

The hero pairs a short headline with a service area map or a clear list of communities: "Serving NW Calgary, Cochrane and Airdrie." Below it, each area links to its own location page.

Use it when: distance decides the sale. Mobile services, snow removal, landscaping, dog walking and emergency trades all fit. In a city the size of Calgary, a homeowner in Evanston often wants to know whether you will actually drive to them before they read anything else.

Avoid it when: location is irrelevant, such as an online-only service.

Do it right:

• Use a static map image or a lightweight illustration rather than a heavy embedded map at the top of the page.
• List communities and towns as text, which search engines and screen readers can read.
• Link each area to a genuinely useful location page, not a copy-paste duplicate.

Choosing the right layout for your business

Most homepages mix patterns: a split hero at the top, a service grid in the middle and a story-style section lower down. The question is which pattern leads.

Match the layout to urgency and complexity

Design for both screens

According to StatCounter, in August 2026 desktop accounted for 54.68% of Canadian web traffic and mobile 42.48%, with tablets at 2.84%. That is close to an even split, and on the local service sites we build we often see phones take the larger share. Every layout in this list has to work at both sizes. We go deeper on this in mobile-first web design for small business.

Test with real behaviour

Pick one layout, launch it, then watch what happens. Track calls, form submissions and bookings from the homepage. If people bounce from the first screen, change the hero. If they scroll but do not act, add proof or make the call to action easier to find. Small changes based on real data beat a full redesign based on taste.

Frequently asked questions

01What is the best homepage layout for a small business?

There is no single best layout. For most local service businesses, a split hero or a service grid is the safest starting point because both put the offer, the call to action and the list of services on the first screen. Pick based on your buyer: urgent jobs need a call button up top, considered purchases need more proof and explanation.

02Do homepage carousels still work?

Rarely. Nielsen Norman Group's research on auto-forwarding carousels found people miss content that rotates away and often read moving panels as ads. If you need several messages, stack them as sections people can scroll at their own pace.

03Is a video background good for conversions?

Only if it is short, silent, compressed and backed by a strong headline and button. A heavy video can slow down Largest Contentful Paint, which Google wants at 2.5 seconds or less, and many visitors on phones will never see it play. Always set a lightweight poster image.

04How do I know if my homepage layout is working?

Track calls, form submissions and bookings from the homepage, not just traffic. Look at scroll depth and where clicks happen. If people leave from the first screen, the hero is the problem. If they scroll but do not act, the layout is missing proof or a clear next step.

05Should my homepage layout be different on mobile?

The content order should stay the same, but the layout must collapse into one column with the call to action and phone number easy to reach with a thumb. StatCounter shows that in August 2026, about 42% of Canadian web traffic came from phones, so both versions matter.

Not sure which layout fits your business?

We design every homepage around how your customers actually decide, then build it to load fast on any phone. See homepages we have designed, our custom homepage design process and transparent pricing, or book a free 15-minute call and we will tell you which layout would serve your current homepage best.