What homeowners look for on a roofing website
People land on a roofer's website in one of two moods. The first is urgent: a ceiling stain is spreading, shingles are lying on the lawn after last night's storm, or a tarp has blown loose. That visitor wants a phone number, a sign that someone will actually come, and a few words on what to do until then. The second visitor is planning. The roof is twenty years old, the insurer has sent a renewal letter asking about it, or the house is going on the market. That person reads more slowly and compares three or four roofers before booking anyone.
Both visitors share one worry: being sold a roof they do not need, or hiring a crew that disappears after the deposit. Roofing has a reputation problem, especially after big storms, when out-of-town crews knock on every door. A good roofing website answers that worry before it is spoken. It shows the license number, explains that permits are pulled, describes what happens on the roof step by step, and proves the work with real before-and-after photos. It is honest about repair versus replacement. And it never makes the visitor hunt for the phone number.
How the demo handles it
The demo is Gulfcrest Roofing, a fictional roofer serving Tampa Bay in Florida. Its design is built on full-bleed photography: the home page opens with an edge-to-edge aerial photo of a dark metal roof, and the big decisions on the site happen over photos rather than beside them. Headings are set in Oswald, a tall condensed face that reads like site signage, with Source Sans 3 for text. The palette is white, near-black and a single signal red. Section tops are cut into a shallow gable that echoes a roof pitch, and storm content sits in letterboxed, cinematic bands with a small chapter label.
The phone number lives in the header on desktop and in a call bar fixed to the bottom of the screen on phones, next to a red free inspection button. Three tall photo panels on the home page send visitors to the three services that matter: replacement, repair and storm damage. A four-step process section explains the inspection, the photo report, the written options and the permit-to-final sequence, because a clear process is what separates a professional from a door knocker.
The signature feature is the before-and-after slider. It is built on a native range input, so it works with a mouse, a finger and the arrow keys, and screen readers announce how much of each image is showing. The other key piece is the free inspection form. Visitors tap a roof type tile with a small drawn roof profile, tick the issues they see, choose how urgent it is and pick photos from their phone. In the demo only the file names appear; on a live site the photos travel with the request. The form checks every field in the browser and moves focus to the first problem.
The pages
- Home: the full-screen hero, the three service panels, the inspection process, a hurricane-season band, a before-and-after preview, roof types, the service area, sample reviews and FAQs.
- Roof Replacement: signs a repair will not be enough, the eight-step replacement sequence, a material comparison table and how pricing and payments work.
- Roof Repair: the repairs made every week, what happens on a repair visit, what to do while a roof is leaking, and an honest repair-or-replace section.
- Storm Damage: the first 48 hours after a storm, the documentation an adjuster can use, hidden storm damage and a plain list of what the roofer will and will not do with insurance.
- Projects: three before-and-after sliders, each with the scope, materials and time on site.
- Free Inspection: the four-part request form beside a what-happens-next panel.
- About: how the company works, a marked place for license and insurance details, the service area and office hours.
Local SEO set-up for a roofing contractor
Every page carries one block of structured data. The business is marked up as a RoofingContractor with its logo, opening hours and the cities and counties it serves, and each service page adds its own Service entry, a BreadcrumbList and FAQPage markup for its questions. Titles follow a service, city and brand pattern, such as roof repair in Tampa, so each page has a clear search target of its own. The demo has no street address on purpose, which matches how most roofers run their Google Business Profile: as a service-area business with the address hidden and the served cities listed.
Your Google Business Profile does a lot of the work for local roofing searches. Use roofing contractor as the main category, add the same service areas the website lists, and post project photos regularly, especially after storms, when search volume jumps. Reviews belong on that profile; the website links to it and never marks up its own reviews, which Google ignores for local businesses anyway. If you want pages for individual towns, I build them only where you have real projects and something specific to say, because thin copies of the same page swapped by city name tend to hurt more than help.
Speed matters more for roofers than most trades. People search after storms on overloaded phone networks, often with the power out. The demo's photos are compressed WebP files, the fonts are self-hosted and there are no tracking scripts or chat widgets, so the pages appear quickly even on a weak signal.
Country notes
USA
The demo is written in US English with ZIP codes in the form and a US-style phone number. Licensing varies by state: Florida requires a state roofing license, while other states license at county or city level, so the footer has a labelled place for whichever number applies to you. Insurance wording needs care in hurricane and hail states, and accessibility to WCAG 2.2 AA helps protect against ADA website claims, which are common in the United States.
Canada
For a Canadian roofer I switch to Canadian spelling, postal codes and metric measurements, while keeping squares and feet where your crews and customers still use them. Pages talk about snow load, ice dams and ice-and-water membranes instead of hurricanes, and the season moves to spring and fall. Workers' compensation clearance, such as a WSIB or WorkSafeBC letter, gets a marked place beside your insurance details. A roofer in Quebec needs the site in French first, with English alongside.
Australia
An Australian version uses Australian English and local terms such as re-roofing, roof restoration, terracotta and concrete tiles, metal roofing and gutter guards. Each state licenses roofing work differently, so the site shows your licence number and ABN in labelled places. Hail damage replaces hurricanes on the storm page, and homes in bushfire-prone areas get a short note on roofing materials that suit their BAL rating. Phone numbers, postcodes and opening hours follow Australian formats.
