Brackwell Plumbing
An emergency-first website for a residential plumber.
Concept project · Fictional business demonstration Brackwell Plumbing is a fictional company. The site was designed and built to demonstrate residential plumbing web design and development; its reviews, arrival targets, warranty and founding year are demonstration content.
A 12-page, call-first website for a residential plumber. The phone number is the loudest element on every screen, arrival targets carry a plain qualifier, and the price comes before the work.
The demo is a fictional business. It is set to noindex and shows a concept banner on every page.
- Type
- 12-page local-service website
- Stack
- Eleventy 3 · Nunjucks · hand-written CSS · Sharp image pipeline
- Hosting
- Cloudflare Pages
- Built
- September 2026
- Status
- Live demo, noindex
- Live demo
- brackwell-plumbing.pages.dev
Brief
The problem
Plumbing is an emergency trade. The visitor who matters most has just found water where it shouldn't be. They are on a phone, often at night, and they are scanning, not reading.
Before they call, they need to believe four things:
- Someone will answer: not a menu, not a callback queue.
- They'll know roughly when a plumber arrives.
- The price won't balloon once the truck is in the driveway.
- This company works on houses like theirs, in their area.
They leave when the number is hard to find, a form stands between them and a person, or "fast service" comes with no number attached.
Conversion
Decisions that drive the call
One primary action on every screen: call. Everything else routes visitors who aren't in an emergency to a short callback form.
The number is the loudest thing on every screen
Phone numerals set in the display face at up to 80px in the hero, repeated in the top bar, the header, the closing band and a mobile call bar that appears only after 40% of the page, so it never covers the hero.
What happens after you call, before the call
A four-step response timeline answers the question every caller has: who picks up, when someone is dispatched, when they arrive, and what "done" means.
Useful in the moment
"Stop the water first" gives four steps and a safety warning, then ends in the call. It shows competence and helps before any money changes hands.
Arrival targets per zone, always with the qualifier
60 minutes in the city, 90 in the suburbs, and every figure is followed by "a target, not a promise". The area table also lists the typical work in each area.
The form never traps an emergency caller
Five required fields. Answer "Yes" to "Is water running right now?" and the form puts a red call prompt directly under the question.
Screenshots from the live demo. Phone number, reviews and targets belong to the fictional business.
Design
Design system: "Dispatch Board"
The site reads like the whiteboard in a plumbing company's dispatch office: dense, labelled, ruled, high-contrast, nothing decorative. With the logo removed, it still reads as a plumber.
- Ink
#0D1418 - Deep teal
#0E4A52 - Concrete
#ECEFF0 - Alert
#C8340F
- Type
- Barlow Condensed for headings and phone numerals; IBM Plex Sans for body text
- Signature
- Rule-and-label headings: a 2px rule with a small uppercase tag, like a tag wired to a valve
- Shape
- 0px panels, 2px controls; structure drawn with borders, not shadows
- Colour
- Ink, deep teal and concrete grey, with one alert red-orange used only where the visitor can call
- Photography
- Hands on valves and fittings, a camera inspection, an organised van: work, not staged smiles
- Motion
- 140ms transform and opacity only; reduced motion honoured
Build
Engineering
- Single source of truth
- Name, phone, email, hours, areas, services, claims and copy live in config files. A changed-value test renames them and checks the build: 0 old values in any shipped file.
- Claim gating
- Every trust claim has a state (verified, client-supplied, demo, unknown). Sentence-level gates render a claim only when allowed. With every claim switched off: 0 broken sentences. Licence and insurance are unknown, so "licensed" and "insured" never render.
- Local SEO
- Plumber (LocalBusiness), Service, FAQPage and BreadcrumbList schema; per-page canonical and Open Graph tags; sitemap; title and description lengths enforced by an output check.
- Images
- AVIF, WebP and JPG at two widths per slot, with size budgets (hero ≤ 250 KB, content ≤ 150 KB) and measured focal points.
- Security
- Strict Content Security Policy with no inline styles or scripts, HSTS, nosniff, frame-ancestors none, Permissions-Policy.
- Weight
- One 42 KB stylesheet (8 KB gzipped) and 6 KB of progressive-enhancement JavaScript (2 KB gzipped).
Measured
Measured results
Lighthouse 13 on the live demo (brackwell-plumbing.pages.dev), median of 3 runs, 11 September 2026.
| Page | Performance | LCP | CLS | Transfer |
|---|---|---|---|---|
| Home, mobile | 100 | 1.23 s | 0 | 142 KB |
| Home, desktop | 100 | 0.39 s | 0 | not recorded |
| Services, mobile | 100 | 1.52 s | 0 | 112 KB |
| About, mobile | 100 | 0.94 s | 0 | 170 KB |
Also measured
- Lighthouse Accessibility and Best Practices: 100 and 100 on every run.
- axe (WCAG 2.0–2.2 A and AA rules): 0 violations on 12 pages and the 404 page, at 390px and 1440px.
- Keyboard path, reduced motion, 200% zoom and 320px reflow checked.
- Security headers verified on 21 live responses; 0 console errors; 0 CSP violations.
- Lighthouse SEO 69 is intentional: the demo of a fictional business is noindex.
Not claimed
- WCAG conformance certification.
- Screen-reader or real-device testing (not yet done).
- Business results of any kind: the business is fictional.
Platform
WordPress edition
The same site is also packaged as a classic WordPress theme with no required plugins: business details in the Customizer, services and service areas as editable content, a demo importer and a live contact form.
- Same visible text, section count and headings as the static build on 11 pages.
- axe: 0 violations on 10 pages at 390px and 1440px.
- Replacing the name, phone, email, logo, hero photo, a service and an area left 0 old values on 19 pages.
Scope Tested on a local WordPress 7.1 instance. Not deployed; not yet tested on real hosting or with real email delivery.
Credits
Credits and disclosure
- Concept project. The business, reviews and claims are fictional.
- Photography: AI-generated for this project, art-directed and checked; provenance recorded.
- Fonts: Barlow Condensed and IBM Plex Sans (SIL Open Font License 1.1). Icons: Lucide geometry (ISC).