Roofer website design: what turns a leak into a phone call

A roofer’s website has three jobs: explain the work clearly, prove the business can be trusted, and make it easy to get in touch. Everything else comes second. Most roofing enquiries start on a phone, often in a hurry after a leak or a storm, so the site has to work properly on a small screen before anything else.

I’ll use Durham Coast Roofing as the worked example. It’s one of my studio projects, a roofing website I designed and built to show what a coastal roofer’s site can be, so every screenshot below is from a site that’s live and working.

What pages does a roofer’s website need?

A home page, a page for each main service, a projects page, an about page and a contact page. The home page should say what you do, where you work and how to reach you in the first screen. Someone looking up at a damp patch doesn’t want to scroll past your history to find a phone number.

Separate service pages matter because people search for the job, not the trade. “Flat roof repair Sunderland” and “chimney repointing Durham” are different searches from different customers, and each deserves a page that describes that work in plain words. A typical set:

Roof repairs and leaks
New roofs and re-roofing
Flat roofing
Slate and tile work
Chimneys and leadwork
Storm damage
Guttering, fascias and soffits

Durham Coast Roofing has seven service pages, a projects page with one job written up in full, an about page and an areas page, fourteen pages in all.

The services section of the Durham Coast Roofing website, with a card for each roofing service — One card per service on the homepage, each leading to its own page. Durham Coast Roofing, an SR7 studio project.

Why does it have to work on a phone first?

Because that’s where the customer is: on the drive, in the loft, or ringing round after a storm. A site that’s awkward on a small screen loses the enquiry before you ever hear about it.

Tap-to-call on every page. The number should be at the top of every screen and start a call with one tap. On Durham Coast Roofing a call and quote bar stays at the bottom of the phone screen as you scroll.
Text you can read outside. Big enough to read in daylight with one hand.
A form that takes under a minute. One column, large boxes, no fiddly menus.
Fast. A heavy photo that takes five seconds to load on a weak signal costs you the job.

Test it on a real phone, not a shrunken desktop browser. What looks fine on a monitor can be unusable in someone’s hand.

The Durham Coast Roofing website on a phone, with Call us and Free quote buttons fixed at the bottom of the screen — On a phone, Call us and Free quote stay at the bottom of the screen the whole way down the page.

How do you show you can be trusted before anyone rings?

Letting a stranger onto your roof is a big decision, so the site has to answer the doubts before they’re asked:

Real photos of your own jobs. A gallery of work you’ve done beats any stock photo, and customers can tell the difference.
Before and after, honestly. Show the same roof from the same angle. Two unrelated photos labelled before and after do more harm than good.
Insurance and trade schemes stated plainly, with names and membership numbers where the scheme allows it.
Reviews in your customers’ own words. Don’t polish them. Genuine wording reads differently and people notice.
A named business and a base town, and a phone number that gets answered.

A before and after slider on the Durham Coast Roofing website comparing an aged roof with the finished slate roof from the same angle — A before-and-after slider: same house, same angle, same light.

What should the buttons say?

One clear action per page: call now, or get a quote. A page asking people to call, email, follow you and fill in a form all at once ends up with none of them.

Keep the quote form short: name, phone or email, postcode, the type of work, and a photo upload if you can. A photo of the problem saves you a wasted visit, and every extra box makes the form less likely to be finished. Swap vague buttons like “Learn more” for what the button actually does, such as “Get a free quote”.

How should the site handle the areas you cover?

Name the towns and villages you work in, in plain text, not inside a picture. A customer in Peterlee wants to see Peterlee on the page, and so does Google. Write it the way you’d say it: “roof repairs in Seaham and across County Durham”, not a paragraph of place names strung together.

Make sure the areas on your website match the service area in your Google Business Profile, so customers and search engines see the same story in both places. If you cover a lot of towns, one honest areas page usually does more good than twenty near-identical town pages.

How does a roofing website bring in enquiries from Google?

The basics, done properly and kept up: a page for each service, titles and headings that name the job and the area in plain English, a fast site that works on a phone, and a Google Business Profile that’s complete, with photos and reviews. For local searches the profile often appears before the website, so keep the two consistent. There’s more on this in my guide to local SEO.

Nobody can promise you rankings, and you should be wary of anyone who does. Search visibility is kept up over time, not achieved once.

What does a roofer’s website cost?

My prices are fixed and agreed in writing before any work starts:

Starter Website, £295: up to 5 pages. Enough for a sole trader: home, services, projects, about and contact.
Growth Website, £595: up to 10 pages, the one most businesses choose. Room for a page per main service, an areas page and local search set-up.
Bespoke, from £995: larger multi-service sites, booking systems or anything that needs building specially. Quoted after a conversation about what the business needs.

Whichever you choose, the website and the domain belong to you. Website Care is optional: £25 a month on your own hosting for updates, backup checks and small changes, or £50 a month with hosting included. See all packages and prices.

What should you do after launch?

Add new job photos regularly. A gallery of recent work shows you’re busy and active.
Ask happy customers for a Google review, and add the best ones to the site word for word.
Keep the phone number, services and areas up to date, especially when you take on new towns or new types of work.
Check the quote form every month. A form that quietly stops sending is the easiest way to lose work without noticing.

The short version

A page for each main service: repairs, new roofs, flat roofing, chimneys, storm damage, guttering.
Built for the phone first, with tap-to-call on every screen and a short quote form.
Your own job photos, stated insurance and genuine reviews build more trust than any amount of sales talk.
The towns you cover, named in plain words, matching your Google Business Profile.
One clear action on every page.

For more on trade websites in general, see web design for tradesmen, or how Treemasters, a Seaham tree surgery firm, puts a page behind every service.

Want a website that brings in roofing jobs?

I design and build websites for roofers and trades across Seaham, Sunderland, Durham and the North East, with fixed prices from £295. Ask for a free website review of your current site, or get in touch and call 0191 722 1678.