Key takeaways
- Above the fold, show what you do, where you do it, and how to contact you, in that order.
- Design the first screen for a phone, where most local searchers see it first.
- Use one clear call to action: a tap-to-call button, with a quote form as the second option.
- Add one trust signal, such as your review rating, license or years in business.
- Keep the first screen fast: a heavy slider or video can slow the page and push the call button out of view.
Above the fold on a contractor website, put five things: a headline that says what service you provide and where, a tap-to-call phone number, one clear button to request a quote, a quick trust signal such as reviews or years in business, and a real photo of your work. Visitors who land on your site from Google usually decide within a few seconds whether you do what they need in their area. If the first screen answers that and makes calling easy, more of them call.
"Above the fold" means the part of a page visible before anyone scrolls. On a phone, that space is small, so every element has to earn its place. This guide covers what belongs there, what to leave out, and how to check your own site. It is the same checklist we use on every contractor website we design and build.
Why does the first screen matter so much?
People searching for a contractor usually have a problem to solve: a leaking roof, a broken furnace, a driveway that needs replacing. They open several results and compare them quickly. A first screen that is vague, slow or cluttered sends them to the next result. One that confirms you handle their problem in their area and gives them an easy way to reach you keeps them on your page.
The first screen also matters for search. Google has used mobile-first indexing, which means it looks at the mobile version of your pages. Its Core Web Vitals guidance measures how quickly the largest element on the first screen loads (Largest Contentful Paint, with a target of 2.5 seconds or less) and how much the layout jumps around while loading (Cumulative Layout Shift, with a target of 0.1 or less). Your hero section is usually where both are won or lost.
The five things to put above the fold
1. A headline that names the service and the area
Your headline should read like the search the customer typed. "Roof Repair and Replacement in Blaine and the North Metro" tells a visitor in two seconds that they are in the right place. "Quality You Can Trust" tells them nothing. Put your main service and your main city or region in the headline, and use a short line underneath for the second most important detail, such as "Free estimates, licensed and insured."
2. A phone number that dials with one tap
Most local customers would rather call than fill out a form, especially for urgent work. Put your phone number in the header on every page and make it a tap-to-call link on phones. Use the number you actually answer during business hours. If you track calls, use a tracking number that forwards to that line so you can see which calls came from the site.
3. One clear call to action
Pick one primary action and make it a large button: "Call for a free estimate" or "Get a quote." Offer a second option for people who are not ready to call, such as a short quote form. Avoid stacking four or five buttons that compete with each other. If you use a form, keep it short: name, phone, service needed and ZIP code are enough to start a conversation.
4. One trust signal
Give the visitor a reason to believe you, without making them scroll. Good options:
- Your Google review rating and number of reviews, if they are strong.
- Years in business or the year you were founded.
- License, bonding and insurance status where your trade requires it.
- A manufacturer certification or trade association membership that buyers recognize.
One or two signals are enough above the fold. The full list of reviews, certifications and guarantees can sit further down the page.
5. A real photo of your work or crew
A photo of your truck, your crew or a finished job tells visitors you are a real local company. Stock photos of smiling models in hard hats do the opposite. Compress the image and size it for the screen so it does not slow the page. On phones, a smaller image or a cropped version keeps the headline and call button visible.
What should you leave out of the first screen?
| Common element | Why it hurts | Better option |
|---|---|---|
| Rotating image sliders | They load slowly, push content around and most visitors never see slide two | One strong photo |
| Autoplay video backgrounds | Heavy on mobile data, can slow loading and distract from the call button | A photo, with an optional video lower on the page |
| Pop-ups on arrival | They cover the content before the visitor knows who you are | A visible offer in the page itself |
| Long welcome paragraphs | Nobody reads them on the first screen | A one-line subheadline |
| Many competing buttons | Visitors hesitate when there is no obvious next step | One main button and one secondary option |
How should the first screen look on a phone?
Design the phone version first, then expand it for desktop. On a typical phone, the first screen has room for your logo and phone number in the header, a two-line headline, a one-line subheadline, a call button and maybe a trust badge. That is it. Test it on a real phone, not just a resized browser window, and check:
- Can you read the headline without zooming?
- Is the call button visible without scrolling, and does tapping it start a call?
- Does the page jump when images or fonts finish loading?
- Does the main content appear quickly on a mobile connection?
If any answer is no, fix it before working on anything else. Free tools such as Google's PageSpeed Insights report your Core Web Vitals for mobile and desktop.
Does every page need the same first screen?
Every page needs the same essentials (phone number, call to action, trust signal), but the headline should change to match the page. A visitor who lands on your gutter installation page in Coon Rapids should see "Gutter Installation in Coon Rapids" at the top, not your generic home page headline. Matching the headline to the page is also how service and city pages rank for the searches you want, which is a core part of local SEO.
How to check whether your first screen works
Opinions about design are easy to argue about. Calls and form submissions are not. Track them so you can compare before and after a change. Set up call and form tracking in Google Analytics, then watch the share of visitors who call or submit a form from each page. If you change the headline or move the call button and calls go up, keep the change. Our guide to what a small business website costs explains why tracking belongs in every build.
Get a first screen that brings in calls
We build contractor websites around the first screen: service and city in the headline, a tap-to-call number, one clear button and proof that you are the real deal. If your current site needs a new first screen or a full rebuild, our website design and development team can handle it as a project, or as part of a monthly website subscription starting at $300 per month for up to 10 pages.
Send us your current site and we will tell you what we would change above the fold.
Frequently asked questions
What does above the fold mean on a website?
It is the part of a page visible before the visitor scrolls. On a phone it is small, so it should hold only the most important information and actions.
Should I put my phone number above the fold?
Yes. Put it in the header on every page and make it a tap-to-call link on phones, because many local customers prefer to call.
Are image sliders bad for a contractor website?
They usually are. Sliders load slowly, can shift the layout and push the call button down. One strong photo of your work does the job better.
Should the first screen be different on each page?
Keep the phone number, call to action and trust signal on every page, but change the headline to match the service and area of that page.