Gableworth Roofing Co.
A residential roofing site built around the homeowner decision.
Concept project · Fictional business demonstration Gableworth is a fictional company. AI-generated photographs illustrate the concept, not customer projects. No reviews, accreditation or trading history are invented. Demo forms send and store nothing.
A 26-route residential roofing concept with an eighteen-band homepage, ten service pages, a local roof-style explorer and matching WordPress output verified in an isolated runtime.
Fictional concept, with visible disclosure and noindex in HTML, HTTP headers and robots.txt.
- Type
- 26-route residential roofing concept
- Stack
- Eleventy 3, self-hosted fonts, classic WordPress parity
- Hosting
- Cloudflare Pages; WordPress validated locally
- Status
- Live concept demo, noindex
- Live demo
- gableworth-roofing.pages.dev
Brief
An inspection before a sales pitch
A roof problem can mean a small repair, wider damage or a replacement decision. The site gives those choices separate explanations before asking for a request.
The design keeps three homeowner needs visible:
- Understand what changed and what an inspection can establish.
- Compare materials and the limits of a repair.
- Request a conversation through an obvious, short form.
All business details are fictional. The case study evaluates the website, not an operating roofing company.
Design decisions
Five strong sections, five different jobs
Weathered slate and Texas clay unify the page without turning every section into the same grid.
A headline tied to the decision
The inspection form shares the opening composition with the promise to explain what the roof needs. Phone and request actions remain visible at small widths.
Materials at photographic scale
Alternating tracks show shingles, standing-seam metal and tile, each with a practical trade-off. The photographs support education rather than invented project testimonials.
An interactive local illustration
Material, roof profile and color controls update the preview. Keyboard selection works; no pricing, upload, external API or homeowner data storage is involved.
Implementation
Shared delivery, verified in the browser
- Routes
- Ten service routes, three homeowner articles and supporting pages, for 26 routes including the custom 404.
- Photography
- 13 native masters and 126 responsive AVIF, WebP and JPEG files. No source upscaling. The 1920px hero uses browser interpolation from a 1536px source; its rendered use was inspected.
- Forms
- Demonstration only. Browser instrumentation observed zero requests or storage writes. Server POST is rejected.
- WordPress
- 23 native content records, service/resource post types and 20 homepage field groups. The 26 rendered routes match Static. This runtime was verified locally, not deployed as WordPress.
Measured results
Measured on the live concept
Lighthouse 13.4.1; one mobile and one desktop lab run on 16 Sep 2026. Not field data or a multi-run median.
| Page / device | Performance | Accessibility | LCP | CLS | Transfer |
|---|---|---|---|---|---|
| Home, mobile | 99 | 100 | 1.70 s | 0 | 407 KB |
| Home, desktop | 100 | 100 | 0.60 s | 0 | 797 KB |
Verified
- 182 live route/viewport checks, zero failures.
- 52 live axe checks, zero reported violations.
- 160 live file hashes match the release build.
- Custom missing-route HTTP 404 and noindex headers.
Not claimed
- Customer leads, bookings or conversion improvement.
- Field Core Web Vitals or real-user INP.
- A production WordPress hosting deployment.
- Native 1920px resolution for the 1536px hero source.