Snapshot
Problem
Handwerksbetriebe lassen ihre Webseite veralten, weil jede Textänderung über einen Entwickler läuft.
Ziel
Eine Seite, die Anfragen bringt, und die der Inhaber ohne technische Kenntnisse selbst ändern kann.
Meine Rolle
Konzept, Gestaltung und Umsetzung von Webseite und Admin-Bereich, allein.
Ergebnis
Alle Texte selbst editierbar, mit Versionsverlauf. Lighthouse 94 / 97 / 100 / 100.
Kontext
Ein Dachdecker-Meisterbetrieb in Nordrhein-Westfalen wirbt gleichzeitig um zwei sehr verschiedene Besucher: Privatleute, die mehrere Betriebe vergleichen, und gewerbliche Auftraggeber, die Qualifikationen prüfen.
Bei solchen Betriebsseiten fällt weniger die Gestaltung auf als ihr Zustand: Preise von vorletztem Jahr, Öffnungszeiten, die nicht mehr stimmen, ein Team, das so nicht mehr existiert. Nicht aus Nachlässigkeit, sondern weil jede Änderung eine E-Mail an jemanden bedeutet, der vielleicht antwortet.
Daraus wurde die eigentliche Aufgabe: nicht nur eine gute Seite bauen, sondern eine, die in zwei Jahren noch stimmt.
Hinweis zur Einordnung
NordDach ist ein Konzeptprojekt. Firma, Kontaktdaten und Referenzen sind erfunden; es gab keinen Auftraggeber und keine Nutzerforschung. Gestaltung, Umsetzung, Admin-Bereich und die gemessenen Werte sind real.
Gestaltung
Drei Entscheidungen prägen die Seite: jede davon folgt daraus, dass der Betrieb sie über Jahre selbst behalten und pflegen soll.
Belege statt Adjektive
Kennzahlen stehen im Kopfbereich, echte Projektbilder ersetzen Stockfotos, und die Anfrage bleibt an jeder Scrollposition erreichbar.
Ein Farbsystem, keine Farbwerte
Alles läuft über CSS Custom Properties. Das war die Voraussetzung dafür, dass Inhalte austauschbar wurden, ohne dass die Gestaltung auseinanderfällt.
Ohne Framework, ohne Build
Eine einzelne HTML-Datei. Für eine Seite, die Jahre halten soll, die wartungsärmste Variante: es gibt nichts, was später „nicht mehr baut“.
Highlight · Inhaltsverwaltung
Der interessantere Teil des Projekts ist nicht die Webseite, sondern der Bereich dahinter. Die Nutzerin ist hier nicht die Kundin des Betriebs, sondern der Inhaber, und dessen Problem ist nicht Bedienung, sondern die Angst, etwas kaputtzumachen.
Anfragen statt Postfach
Formularanfragen landen in Echtzeit in einer Liste mit Status, Suche und Zählern, nicht zwischen Werbe-Mails. Die Zähler oben beantworten die einzige Frage, mit der jemand morgens hier hereinschaut: ist etwas Neues da?
Texte in der Sprache des Betriebs
Die Inhalte sind nach Seitenbereichen gegliedert (Kopfbereich, Kontaktdaten, Statistiken, Firmendaten, Leistungen, FAQ) nicht nach Datenfeldern. Wer die Telefonnummer ändern will, sucht unter „Kontaktdaten“, nicht in einer Tabelle.
Gespeichert wird bewusst erst auf Klick, mit sichtbarem Hinweis. Automatisches Speichern wäre bequemer, aber für jemanden, der ohnehin unsicher ist, ist ein ausdrücklicher Moment des Bestätigens beruhigender als eine stille Änderung.
Der Rückweg
Jede Änderung legt eine Version mit Zeitstempel und Textvorschau an, die sich mit einem Klick wiederherstellen lässt. Das ist die Antwort auf die Ausgangsangst: man kann nichts endgültig falsch machen.
Dieselbe Überlegung steckt in der Technik. Inhalte werden beim Laden aus der Datenbank gelesen. Fehlt eine Angabe, bleibt der Text aus dem HTML stehen. Die Seite kann nicht leer werden, auch wenn beim Bearbeiten etwas schiefgeht.
Mobil
Anfragen an Handwerksbetriebe kommen überwiegend vom Handy, oft unterwegs. Auf schmalen Bildschirmen hat die Anfrage-Schaltfläche deshalb Vorrang: sie steht direkt unter dem Einstiegstext, während die Kennzahlen nach unten rücken.
Kontakt
Telefon, E-Mail, Adresse und Öffnungszeiten stehen neben dem Formular statt darunter: wer lieber anruft, muss nicht erst am Formular vorbeiscrollen. Das Feld „Gewünschte Leistung“ ist eine Auswahl statt eines Freitextfelds: für den Betrieb ist eine sortierbare Anfrage mehr wert als ein schön formulierter Satz.
Barrierefreiheit
- Der Vorher-Nachher-Regler ist mit Tastatur bedienbar, nicht nur mit Maus oder Touch: sonst wäre der wichtigste interaktive Teil der Seite für einen Teil der Besucher nicht erreichbar.
prefers-reduced-motionwird respektiert: wer Bewegung reduziert hat, bekommt die Inhalte ohne Scroll-Animationen.- Das Anfrageformular nutzt echte Beschriftungen und eine sichtbare Pflichtfeld-Kennzeichnung statt Platzhaltertexte allein.
- Offen: ein Kontrastwert liegt weiterhin unter dem Grenzwert: daher 97 und nicht 100. Der richtige Ort dafür ist das Token-System, nicht der Einzelfall.
Ergebnis
Gemessen mit Lighthouse gegen die veröffentlichte Seite, mobil, im privaten Fenster:
94
Performance
97
Barrierefreiheit
100
Best Practices
100
SEO
Largest Contentful Paint 2,3 s · Cumulative Layout Shift 0,024. Performance-Werte schwanken je nach Durchlauf; dies ist eine einzelne, saubere Messung, nicht der beste aus mehreren Versuchen.
Selbst pflegbar
Alle Texte, Projekte und Bewertungen ohne Entwickler änderbar.
Nichts geht verloren
Versionsverlauf für jede Änderung, Wiederherstellung mit einem Klick.
Keine leere Seite
Fehlt ein Inhalt in der Datenbank, greift der Text aus dem HTML.
Gelernt
Die eigentliche Nutzerin stand nicht in der Aufgabe
Die Aufgabe hieß „Webseite für einen Dachdecker“. Der schwierigere Teil war der Bereich dahinter, und die Person, die ihn bedient, kam darin gar nicht vor.
Ein Rückweg ersetzt viele Erklärungen
Vieles, was man sonst mit Hinweistexten absichert, erledigt eine sichtbare Wiederherstellung. Wer weiß, dass er zurück kann, probiert überhaupt erst etwas aus.
Was ich als Nächstes prüfen würde
Ob der Versionsverlauf beim Bearbeiten überhaupt gefunden wird. Er steht derzeit unterhalb des Formulars. Das ließe sich in einer kurzen Sitzung mit zwei oder drei Personen ohne technischen Hintergrund beantworten.
Kurz gefasst
Betriebsseiten veralten, weil Änderungen an einem Entwickler hängen. NordDach koppelt eine vertrauensbildende Webseite an einen Admin-Bereich, in dem alle Inhalte selbst pflegbar sind: abgesichert durch Versionsverlauf und einen HTML-Rückfall, damit die Seite nie leer laufen kann.