Work / Case study
Summit Roofing Co.
A concept website for a residential roofing contractor. The goal was to make the services, service area and estimate process clear within seconds, especially on a phone.
Summit Roofing Co. is fictional. I built it to show my work before taking on clients. The demo site says so on every page, and it contains no invented reviews, awards or statistics.
- Type
- Concept project (fictional business)
- Industry
- Residential roofing
- Pages
- 12, including 4 service pages
- Built with
- Astro, plain CSS, no UI framework
The problem this solves
Many small roofing companies have websites that are hard to use on a phone, hide the phone number, or list services without explaining them. Homeowners are often stressed, after a leak or a storm, and want to know quickly: do they do what I need, do they work in my area, and how do I get a price?
Structure
- Homepage answers the three questions above, then gives the detail: services, how the company works, gallery, service areas, FAQ and contact.
- One page per service (replacement, repair, storm damage, gutters), each with warning signs, what's included and its own FAQ. This helps visitors and gives search engines a clear page for each service.
- Service areas page listing the towns covered, so visitors don't have to guess.
- Contact page with the quote form, phone, email and office hours side by side.
Design decisions
- Phone number in the header on every page. On phones, the call and estimate buttons sit in the first screen.
- Restrained palette: dark slate with a copper accent, checked against accessibility contrast rules.
- Trust through process, not invented claims. Itemised estimates, photos of damage and written warranty terms instead of fake star ratings.
- Real photography, licensed and credited, chosen to show actual roofing work.
A quote form that tells the truth
The form asks only for what a roofer needs to respond: name, email, an optional phone number, the service and a short description.
- Clear error messages next to each field, announced to screen readers
- Loading, success and error states. It never shows "sent" unless the server confirms it.
- Hidden spam trap, with no annoying puzzles for real visitors
- On a client site, it connects to a form service or a small server function, with no passwords or keys exposed in the page
Quality checks
- Tested at phone (375px), tablet (768px) and desktop (1440px) widths, with no sideways scrolling on any page
- Keyboard navigation with a skip link, visible focus and an accessible mobile menu
- An automated checker for broken links, missing titles and descriptions, and images without alt text
- Unique title and description on every page, plus social sharing previews
- No JavaScript framework. Only two small scripts, for the menu and the form.
Reusable for real clients
The site runs from a single content file: business name, phone, services, areas, FAQs and colours. For a real client, I replace that content, their photos and their brand, and adjust the design so it feels like theirs. That's how I keep prices fixed and timelines short without starting from scratch.