Your homepage hero section (the first screen a visitor sees) has to tell a stranger three things: what you do, where you do it, and what to do next. Most small business homepages skip at least one. When a visitor can't answer all three in a few seconds, they leave, and the phone doesn't ring. Below we take apart the first screen of our own homepage, including the options we turned down, and give you a way to test yours.
What a first screen has to do in about ten seconds
The three jobs are plain. What: the visitor can tell what you sell. Where: they can tell whether you serve their area. Next: they can see one clear thing to do, such as call, book or ask for a quote.
It gets stricter on a phone. Someone searching on their phone, ready to call a plumber or book an appointment, sees one small screen. If the headline is a mood (“Where quality meets care”) and the number sits three scrolls down, you have asked them to do detective work. Most won't. They go back to the results and tap the next business.
We are not quoting a stat for how long they give you. Rules of thumb like “three seconds” circulate without a source we could check, so we left them out.
Why we took apart our own first screen
A fair teardown only works on words we can check, so we used our own. Below are the live headline and the two we passed on, as written in our files. We looked at the words only. We did not measure layout or pixel position, and none of this is a speed or conversion test.
| Headline option | What | Where | Next step | Fair note |
|---|---|---|---|---|
| “Your business is better than your website. Let's fix that.” (live) | Implied by the headline, spelled out in the line under it | In the line under it (Toronto and GTA) | “Book a Free Consultation” button | The headline alone could suit any web designer. The subhead does the work. |
| “Websites that make you the obvious choice.” (not used) | Websites | Nothing in the headline | Nothing in the headline | Confident and short, but every studio could say it. |
| “Built custom. Built to be chosen.” (not used) | “Custom”, but custom what? | Nothing in the headline | Nothing in the headline | Has rhythm. Needs a lot of help from the line under it. |
Source: our own homepage copy, read from our files on 2 October 2026. The live headline was approved on 28 September 2026. The other two are alternates we kept on file.
The mistake all three headlines share
Read down the table. None of the three headlines says where we work. Only the line under the live one does. A headline can be clever, and the first screen can still do its jobs, but only if something on that screen picks up what the headline leaves out.
Our view: a first screen fails when it could belong to any business in any city. Fluent, polished headlines are cheap now (see what AI gets wrong when it writes a homepage), so smooth sentences don't set you apart. A specific town, a specific service and a specific action do.
What we put on our own first screen, and why
- A problem line first. “Your business is better than your website” names the thing a visitor with a weak site already suspects. It starts with them, not with us.
- A short payoff. “Let's fix that.” sits on its own line. It answers the problem in three words and points at the next step.
- What and where in one sentence. Under the headline: “Custom web design for Toronto and GTA businesses. Designed and custom-coded by the founder you actually talk to.” That is the what, the where and the reason to trust it.
- A fold budget. On 1 October 2026 Sameer said: “on my MacBook I have to scroll to see the work.” We reworked the hero so the headline, subhead, main button and our work reel all sit in the first viewport on laptop and tablet sizes. We checked it with Playwright at seven screen sizes. On two phone sizes (390 by 844 and 375 by 667) the headline, subhead and button are in view and the work starts just below.
What we do not know: we have no conversion, call-volume, speed or Lighthouse numbers for our own site that we can state, so we are not claiming this first screen “converts.” It is a set of decisions we can explain.
Which first screen does your visitor need?
It depends on how they arrive. Use this to judge your own page.
- From Google, on a phone, ready to call: your business, your area and a way to call or book should be visible without scrolling.
- From a referral who already heard of you: proof and an easy way to reach you matter more than explaining the service again.
- From an ad or a map listing: the page has to repeat the promise that earned the click, in the same words.
Then run the ten-second stranger test. Show your homepage to a friend who has never seen it, and ask:
- What does this business do?
- Where does it work?
- What would you click first?
If any answer is a pause, a guess or “I'd have to scroll,” that is the leak.
Is a new first screen enough, or is it a redesign?
Sometimes it is one screen. If the pages behind it are clear and only the top is vague, a sharper first screen may be all you need. Often the page underneath has the same problem: the same generic wording, no proof, no clear action. Then you are looking at a website redesign. If you are starting from nothing, custom web design begins with the same three questions.
What to do this week
- Open your homepage on your phone and note exactly what is visible before you scroll.
- Check whether the area you serve appears in that first screen.
- Write down the one action you want a visitor to take.
- Run the ten-second stranger test on one person who has never seen your site.
Common questions about the homepage hero section
What is a hero section on a website?
The first block a visitor sees on a page, usually a headline, a supporting line and a main button. On a homepage its job is to say what you do, where, and what to do next.
Why is my website getting visitors but no calls?
Often the first screen does not make clear what you do, where you work or how to reach you. Other causes exist: traffic that was never going to buy, a missing phone number, or a broken mobile page. Diagnose before you redesign.
Does a homepage need a phone number or booking button above the fold?
For local businesses where people call or book from a phone, the action should be visible without hunting. If your visitors come from Google on mobile, that matters most.
Should I redesign my whole website or just the top of the homepage?
It depends on whether the rest of the page and the pages behind it have the same problem. If they do, fixing only the top moves the leak a few screens down.
Failed the ten-second test?
If you would rather have someone fix it than guess, talk to Eagle Rock about a website redesign. We are a small, founder-led studio in Toronto that designs and custom-codes every site.
Book a Free Consultation