Ergotherapie Sonnendrache
Kompletter Neubau für eine Praxis in Traiskirchen, die mit Menschen im Autismus-Spektrum arbeitet. Barrierefreiheit und Datenschutz waren hier keine Zusatzleistung, sondern Kernanforderung.
Die Startseite – vorher und nachher
Vorher
Nachher
Regler ziehen – links die alte Seite, rechts die neue.
- Auftraggeberin
- Gabi Jeitschko, BSc – Ergotherapeutin
- Standort
- Traiskirchen, Niederösterreich
- Leistung
- Kompletter Website-Neubau
- Technik
- HTML, CSS, PHP – kein WordPress, keine Datenbank
- Hosting
- Hetzner (EU-Serverstandort)
Messbares Ergebnis
Vorher und nachher mit Google Lighthouse gemessen – alle vier Kategorien liegen jetzt bei der Höchstwertung:
Ausgangslage
Die bestehende Website lief auf einer veralteten WordPress-Installation: nicht für Handys ausgelegt, ohne gültiges HTTPS-Zertifikat und mit unstrukturierten Inhalten. Gefordert war ein vollständiger Neubau – inhaltlich identisch, technisch und gestalterisch komplett neu.
Besondere Anforderung: Die Praxis arbeitet mit Menschen im Autismus-Spektrum. Alle Texte mussten deshalb präzise, vollständig und wortgetreu von der Auftraggeberin stammen – keine freien Umformulierungen.
Umfang
16 Seiten, aufgeteilt in fünf Bereiche:
| Bereich | Seiten |
|---|---|
| Hauptseiten | Willkommen, Über mich, Anfahrt, Kontakt |
| Ergotherapie | Übersicht, Therapieangebot, Checkliste Überweisung, Organisatorisches & Kosten |
| Angebote | Termine (dynamisch), Seminare mit 9 Einzelangeboten |
| Druckversionen | Infoblatt zum Ausdrucken, Fußweg zur Praxis |
| Rechtliches | Impressum, Datenschutzerklärung |
Insgesamt rund 1.700 Zeilen eigener Code – 884 Zeilen CSS und 832 Zeilen PHP.
Gestaltung
Farben direkt aus dem Logo
Die Markenfarben wurden nicht geschätzt, sondern pixelgenau aus dem gemalten Drachen-Logo ausgelesen: das Ultramarinblau der Spirale (#1C3AA8), das Drachengelb (#EAB920) und Weiß.
Schriften – zwei Durchgänge
Zunächst waren Haettenschweiler, Impact und Georgia gewünscht. Da das reine Windows-Systemschriften sind und auf Mac, iPhone und Android durch Ersatzschriften ersetzt würden, folgte der Wechsel auf zwei freie, selbst gehostete Alternativen:
- Anton für Überschriften, Menü und Schaltflächen – ersetzt Haettenschweiler und Impact
- Gelasio für alle Fließtexte – metrisch identisch zu Georgia, also gleiche Buchstabenbreiten und identische Zeilenumbrüche
Beide stehen unter der SIL Open Font License und werden als woff2 selbst gehostet: 93 KB für drei Schnitte inklusive Kursiv.
Weitere Elemente
- Himmelsfoto aus dem Bildbestand als durchgehender Seitenhintergrund mit durchscheinenden Inhaltsflächen
- Bildlaufleiste in den Markenfarben
- Monatsweise farbcodierte Terminliste – nach dem Vorbild des gedruckten Flyers
Die anspruchsvollste Komponente: der Terminkalender
Die Auftraggeberin wollte Termine selbst pflegen können. Ein eingebetteter Google-Kalender hätte allerdings Besucher-IP-Adressen an Google übertragen und damit die datenschutzfreundliche Auslegung zunichtegemacht.
Der Server liest die iCal-Datei des Kalenders im Hintergrund aus und gibt reines HTML aus. Besucher nehmen dadurch keinerlei Kontakt zu Google auf – die Termine sind trotzdem tagesaktuell.
Der selbst geschriebene iCal-Parser (417 Zeilen) beherrscht:
- Einzel- und Serientermine (RRULE mit DAILY/WEEKLY/MONTHLY/YEARLY, INTERVAL, COUNT, UNTIL, BYDAY)
- Ausnahmetermine (EXDATE), Zeitzonen und ganztägige Termine
- Zwischenspeicherung im 30-Minuten-Takt
- Ausfallsicherheit in zwei Stufen: bei einer Google-Störung greift der letzte Stand, fehlt auch der Zwischenspeicher, erscheint eine feste Ersatzliste
Platzverwaltung ohne Buchungssystem
Schreibt die Auftraggeberin „(noch 3 Plätze frei)" in den Termintitel, erscheint auf der Website nur der saubere Titel plus ein grünes Hinweisfeld. Bei „ausgebucht", „kein Platz frei" oder „0 Plätze frei" wird der Anmelde-Button automatisch ausgeblendet. Erkannt werden Ein- und Mehrzahl sowie Füllwörter wie „nur noch" oder „es sind noch".
Weitere Funktionen
Kontaktformular mit Themenvorauswahl
Serverseitiger Versand per PHP. Jeder „Anmelden"-Button auf der Seminarseite und im Terminkalender übergibt das jeweilige Thema – im Formular ist es dann bereits ausgewählt. Mit Honeypot-Spamschutz, serverseitiger Prüfung, Schutz gegen Header-Injection und DSGVO-Einwilligung.
Druckansichten
Zwei Seiten mit eigenen Druckregeln: Beim Ausdrucken verschwinden Navigation, Fußzeile und Hintergründe automatisch – übrig bleibt ein sauberes Schwarz-Weiß-Blatt. Das ersetzt den bisherigen Papier-Handzettel.
Audio-Elemente
Sechs Tonaufnahmen der Auftraggeberin mit ihren typischen Sprüchen, abspielbar über Schaltflächen neben dem jeweiligen Text – jeweils nur eine gleichzeitig.
Barrierefreiheit und Datenschutz
Bei einer Praxis mit dieser Zielgruppe kein Beiwerk, sondern Kernanforderung:
- Keine externen Aufrufe. Kein Google Fonts, kein Analytics, keine Cookies, keine Tracker – nachweislich geprüft.
- Kontrastwerte durchgehend angehoben. Das ursprüngliche helle Gelb war für kleine Schrift unlesbar – deshalb die Trennung in eine Schriftfarbe (dunkles Bernstein) und eine Flächenfarbe (helles Gold).
- Keine Versalien. Auf Wunsch der Auftraggeberin durchgehend entfernt, weil durchgängige Großschreibung als Anschreien gelesen wird.
- Semantische Struktur: eigener Hauptbereich, korrekte Überschriften-Hierarchie ohne Sprünge, beschriftete Schaltflächen, sichtbare Fokusmarkierungen.
- Rechtstexte nach österreichischem Recht: MTD-Gesetz, verlinkte GBR-Registrierung, therapeutische Verschwiegenheit, zehnjährige Aufbewahrungsfrist ohne Löschanspruch.
Geschwindigkeit
| Maßnahme | Ergebnis |
|---|---|
| Bildoptimierung (WebP, passende Auflösungen) | 16 MB → 2,9 MB (−82 %) |
| CSS minifiziert und direkt eingebettet | 39 KB → 24 KB, eine Anfrage weniger |
Schriften vorgeladen, font-display: swap | Text sofort lesbar |
| Bildmaße im HTML hinterlegt | kein Springen beim Laden |
| .htaccess mit Kompression und Browser-Cache | schnelle Wiederbesuche |
Wichtig dabei: Die Darstellungsgröße aller Bilder blieb unverändert – angepasst wurden nur Dateiformat und Auflösung.
Qualitätssicherung
Statt reiner Sichtprüfung wurde automatisiert getestet:
- Verweisprüfung: alle 594 internen Verweise und Bildpfade aufgelöst – keine toten Links
- Responsive-Test: 14 Seiten × 12 Bildschirmbreiten von 280 bis 1024 Pixel auf waagrechtes Scrollen geprüft
- Kopfbereich: über 16 Breiten auf Überlappungen vermessen – dabei wurde ein Fehler gefunden, bei dem das Porträt in die Symbolknöpfe ragte
- Kalender-Logik: alle Schreibweisen der Platzangabe systematisch durchgetestet
Ergebnis: kein waagrechtes Scrollen, keine Überlappungen, keine toten Verweise.
Auslieferung
Ein Skript erzeugt automatisch einen fertigen Upload-Ordner: 82 Dateien, 4,9 MB. Es sammelt nur tatsächlich verwendete Dateien ein, minifiziert HTML und CSS, bettet das Stylesheet ein, legt .htaccess und robots.txt an und schottet den Zwischenspeicher-Ordner ab.
Besonderheiten des Projekts
Textrecherche unter erschwerten Bedingungen
Die alte Website war wegen eines defekten Zertifikats zeitweise nicht abrufbar. Automatische Abrufe lieferten teils übersetzte Zusammenfassungen statt des Originalwortlauts. Statt zu improvisieren wurde der Zustand offengelegt und dokumentiert, welche Seiten noch Originaltexte brauchten – bis der WordPress-Export vorlag. Erst dann wurden die Texte wortgetreu eingesetzt, inklusive der eigenen Schreibweisen der Auftraggeberin.
Enge Abstimmung
Mehrere Feedback-Runden direkt mit der Auftraggeberin – unter anderem zu Lesbarkeit, Wortmarke, Bildauswahl, Aufbau des Terminkalenders und der Platzverwaltung.
Weitere Seiten im Vergleich
Drei Bereiche, die sich am deutlichsten verändert haben. Jeder Regler lässt sich ziehen.
Vorher
Nachher
Vorher
Nachher
Vorher
Nachher
Neu dazugekommen
Vier Bereiche, die es auf der alten Seite gar nicht gab – zum Vergrößern anklicken.
Auch Ihre Website neu aufsetzen?
Ob Praxis, Handwerk oder Handel – erzählen Sie mir von Ihrem Vorhaben. Antwort innerhalb von 24 Stunden.
Kostenloses Angebot anfordern