Dachdeckerei Schwarzberg

Design · Development2026

A master roofer’s business near Stuttgart. We designed and built a German site that explains eight services plainly and asks for a quote request in four fields, from the first screen.

schwarzberg-dach.de — its headline, the quote card, the four steps of a job and the eight services. The customer and request are illustrative.
Client
Dachdeckerei Schwarzberg · Waiblingen-Beinstein
Role
Design & full build
Design
Troiana
Stack
PHP · vanilla JS
01Overview

Dachdeckerei Schwarzberg is a Meisterbetrieb in Waiblingen-Beinstein: new roofs, renovation, insulation, flat roofs, sealing, metalwork and storm repairs. People who need a roofer usually have a problem now, and want to know who comes, what it costs and when.

The site answers that in the order the work happens: what the company does, how a job runs in four steps, and a quote card that asks only for the service, a name, a phone number and a postcode. The photos are stand-ins until the team’s own project photos are ready.

Designed and built by Troiana. The structure and visual design are ours; the words and photos are Dachdeckerei Schwarzberg’s own.

8
Service pages
4
Fields to request a quote
100
On all four Lighthouse audits
02What we built
  1. 01

    Quote card up front

    The first screen asks for four things: which service, name, phone and postcode. The company replies within two working days.

  2. 02

    Eight service pages

    Steildach, Flachdach, Dachsanierung, Dämmung, Dachfenster, Reparatur, Abdichtung and Spenglerei, each with its materials, options and questions.

  3. 03

    Four steps

    Anfrage, Besichtigung, Angebot, Ausführung: how a job runs, from the first call to the joint inspection at the end.

  4. 04

    Enquiries that arrive

    Both forms email the office with the customer as the reply address and keep a backup copy, with a honeypot and per-address throttling.

  5. 05

    Only real reviews

    The review section stays hidden until the company has real customer reviews. Invented testimonials are misleading advertising in Germany.

  6. 06

    A real mobile site

    Its own phone layout with a call button in the header and a site menu that lists every service. Not a shrunken desktop page.

Across the site

Live pages, as they are today.

Dachdeckerei Schwarzberg — Services page.
Services — /leistungen/
Dachdeckerei Schwarzberg — Pitched roofs page.
Pitched roofs — /leistungen/steildach/
Dachdeckerei Schwarzberg homepage on a phone.
Phone — the homepage at 390px.
03Measured

The live homepage, under Google Lighthouse.

Desktop · median of three runs · 7 November 2026

100
Performance
100
Accessibility
100
Best practices
100
SEO
Largest Contentful Paint0.45s
0Google’s bar · 2.5s
Cumulative Layout Shift0
0Limit · 0.1
04Outcome

Homeowners around Waiblingen can see what Schwarzberg does, how a job runs and ask for a written quote in four fields. The site scores 100 on performance, accessibility, best practices and SEO, with no layout shift.

Built with
  • PHP
  • Vanilla JS
  • Self-hosted fonts
  • Consent-gated map
  • GitHub Actions deploy
  • Structured data
Next case · 01 / 20 SHSRK One calm form, one protected review system, and automatic author emails at every decision.