01 · Überblick
Fürsorge, die sich wie Ruhe anfühlt
Die meisten Praxis-Websites sind nervös. Rote Alarmleisten, Telefonnummern in drei Größen, ein Portal-Login, das aus der Ecke schreit. Norras Versprechen ist das Gegenteil — vierzigminütige Termine, bei jedem Besuch dieselbe Ärztin oder derselbe Arzt, ein Wartezimmer, das man kaum zu sehen bekommt — und eine Seite, die diesem Versprechen widerspricht, macht es zunichte, bevor irgendjemand einen Termin bucht.
Der gesamte Build ist deshalb eine Übung im Senken der Temperatur: Eukalyptus und Kiefer statt Medizinblau, zwanzig Pixel Radius auf allem, ein Versatz von achtzig Millisekunden zwischen Geschwistern, damit Inhalte ankommen statt einzurasten, und eine erklärte Untergrenze von vierhundert Millisekunden — nichts auf dieser Seite darf schneller sein als das.
02 · Die Idee
Drei Schritte, keine Warteschleifen
Das Unterscheidungsmerkmal der Praxis ist prozedural, nicht klinisch: Die Buchung besteht aus drei Schritten, und Sie behalten Ihre Ärztin oder Ihren Arzt. Die Seite musste das auf einem Bildschirm lesbar machen — die Struktur musste es tragen, nicht ein Absatz, der es behauptet.
Wählen Sie Ihren Weg
Allgemeinmedizin, Pädiatrie, Zahnmedizin, kardiologische Check-ups, Impfungen, Telemedizin — sechs Leistungen, sechs schlichte Karten, kein Jargon.
Lernen Sie Ihre Ärzte kennen
Namentlich genannte Ärztinnen und Ärzte mit echten Fachgebieten, damit das Versprechen der Kontinuität Gesichter bekommt.
Gehen Sie mit einem Plan
Das Buchungsformular ist das Letzte auf der Seite, und es stellt sechs Fragen statt zwanzig.
03 · Ziele
Was die Seite leisten musste
Auf einen Blick und in der Tiefe lesbar
Sechs Sektionen — Leistungen, Ablauf, Team, Geschichten, FAQ, Termin — jede für sich nutzbar, falls jemand nur diese eine liest.
Die Fragen vom Empfang beantworten
Das FAQ ist nach der Empfangsmitarbeiterin benannt, die ich mir beim Beantworten vorgestellt habe, und verhält sich wie ein Gespräch: immer nur eine Antwort offen.
Die Zahlen belegen
Das Konzept denkt sich eine Praxis, deren Zahlen das Versprechen decken: 24,000 Patienten, 98% davon einer namentlich genannten Ärztin oder einem Arzt zugeordnet, sechs Minuten durchschnittliche Wartezeit — einmal hochgezählt, beim Eintritt, nie in Schleife.
Kontrast bestehen, ohne Plugin
Eine blasse Palette auf fast weißem Grund ist der Ort, an dem Barrierefreiheit leise scheitert — deshalb trägt jeder Grenzwert sein gemessenes Verhältnis in einem Kommentar.
04 · Bauablauf
Wie es gebaut wurde
Die Palette, Kontrast zuerst
Zweiundzwanzig Custom Properties. Eukalyptus für Flächen, Kiefer für alles, was gelesen werden muss, Sand für die ruhigen Blöcke — und ein eigener Feldrand-Token, geprüft gegen die 3:1-Anforderung für Nicht-Text.
Sechsundzwanzig Inline-SVGs
Jedes Icon, der handgezeichnete Kritzel unter der Headline und die Wortbildmarke sind Markup. Keine Icon-Schrift, kein Sprite-Sheet, kein zusätzlicher Request.
Der Versatz
Eine Verzögerung von 80 Millisekunden zwischen Geschwistern, in CSS über einen Index vergeben statt in JavaScript geplant — der Reveal kostet pro Frame nichts.
Das Akkordeon
Die Höhe sauber animiert, mit
transitionendzurück aufauto, damit eine lange Antwort bei schmaler Breite nie abgeschnitten wird.Formulare mit Stimme
Inline-Validierung, eine höfliche Live-Region für die Bestätigung, und der Fokus wandert dorthin — das Ergebnis wird angekündigt, nicht nur angezeigt.
05 · Architektur
Drei Dateien
├── index.html 37.1 KB — 6 Sektionen, 8 Fotografien, 26 Inline-SVG
├── styles.css 30.1 KB — 22 Custom Properties, 5 Media Queries, Verhältnisse in Kommentaren
└── script.js 9.8 KB — 284 Zeilen: Header · Nav · Reveals · Zähler · Akkordeon · Formulare
Der Stack
- Semantisches HTML
- CSS Grid
- Inline SVG
- IntersectionObserver
- transitionend
- Epilogue
- Karla
Barrierefreiheit
- aria-expanded
- aria-controls
- aria-live
- WCAG 1.4.11
- Fokus-Management
- Reduzierte Bewegung
06 · Was sich gewehrt hat
Was die Leute fragen
Diese Seite leiht sich die Struktur ihres eigenen Projekts: Die Probleme sind als Fragen und Antworten gesetzt, denn genau so beantwortet die Praxis Fragen.
Wie animiert man Höhe, ohne dass etwas abgeschnitten wird? height: auto lässt sich nicht animieren, und eine feste Pixelhöhe schneidet ab, sobald die Antwort bei schmaler Breite in eine weitere Zeile umbricht.
Auf die gemessene scrollHeight animieren, dann auf transitionend hören und height: auto setzen. Der Übergang bleibt weich, und der Ruhezustand fließt frei um.
Warum gibt es einen eigenen Token nur für Feldränder? Formularränder sind Nicht-Text-Inhalt und brauchen trotzdem 3:1. Auf fast weißem Grund landet das ruhige Grau, zu dem alle greifen, bei etwa 1.8:1 — für viele Menschen unsichtbar und ein glatter WCAG-Verstoß.
Ein eigenes --field-border bei 3.13:1, bewusst gewählt und im Stylesheet mit dem Kriterium annotiert, das es erfüllt — damit es später niemand aus Versehen aufweicht.
Macht ein Versatz von 80ms die Seite nicht langsam? Gestaffelte Reveals sind meist ein Eitelkeitseffekt, und auf einer Praxisseite riskieren sie, genau das zu verzögern, weswegen jemand gekommen ist.
Der Versatz gilt nur innerhalb einer Reihe von Geschwistern, nie zwischen Sektionen, und die Summe für eine Reihe aus sechs Karten liegt unter einer halben Sekunde. Nichts bleibt je versteckt, während es auf seinen Auftritt wartet.
Was passiert mit den Zählern im Screenreader? Eine Zahl, die von 0 auf 24,000 animiert, wird von mancher assistiver Technologie fortlaufend angesagt — nutzlos und feindselig zugleich.
Jeder Zähler läuft genau einmal, aus einem Observer, der sich selbst abmeldet, steht in keiner Live-Region und schreibt seinen Endwert unter prefers-reduced-motion sofort.
07 · Was bleibt
Die Teile, die bleiben dürfen
Die handgezeichnete Unterstreichung
Ein Inline-SVG-Kritzel unter „wie Ruhe“ — die eine unperfekte Linie auf einer sonst sehr aufgeräumten Seite, und der Grund, warum sie menschlich wirkt.
Drei Schritte, keine Warteschleifen
Die Buchungserklärung als drei nummerierte Karten mit echtem Text, nicht als Icons mit Ein-Wort-Beschriftung.
Freyas FAQ
Benannt nach der Empfangsmitarbeiterin, die ich mir beim Beantworten dieser Fragen vorgestellt habe — das verändert das Register jeder Antwort darunter.
Verhältnisse im Quelltext
Kontrastmessungen stehen neben den Werten, die sie rechtfertigen. Wer die Palette als Nächstes anfasst, erbt die Begründung, nicht nur den Hexwert.
08 · Live starten
Hier ausprobieren
Der echte Build, eingebettet und lauffähig. Er lädt erst auf Abruf — nichts wird geholt, bevor Sie es anfordern.
Live-Vorschau überspringen
Der echte Build, direkt in der Seite. Die Live-Vorschau ist eine eingebettete Seite; mit Escape verlassen Sie sie.
Im Vollbild öffnen ↗
