Referenzprojekt
Demo-Rebuild · Fiktives Beispiel

Deep Blue Tauchschule

Eine komplette Website für eine Tauchschule: Kurse, Ausfahrten, Tauchreisen, Preisliste, Team und Kontakt – dreisprachig, in eigenem Design und ohne Entwickler pflegbar.

RolleKonzept, Gestaltung, Umsetzung, Betrieb
ZeitraumOktober – November 2026
Umfang23 Seiten · 3 Sprachen
TechnikGrav CMS · Twig · Tailwind
100
LighthousePerformance, Barrierefreiheit, Best Practices, SEO
1,7 s
Ladezeit mobilgrößtes Bildelement
3
SprachenEnglisch, Deutsch, Kroatisch
0
LayoutsprüngeCLS 0,0 · TBT 0 ms

Worum es geht

Deep Blue ist erfunden – die Aufgabe ist es nicht. Tauchschulen arbeiten oft mit Seiten, die vor Jahren entstanden sind: Preise als PDF, Galerie ohne Ordnung, nur eine Sprache, und jede Änderung geht über die Agentur.

Diese Demo zeigt, wie ein Neuaufbau aussehen kann: ein System, das die Schule selbst bedient, eine Gestaltung mit eigener Handschrift statt Template, und drei Sprachen für Gäste aus Österreich, Deutschland und Kroatien.

Aufgabe

Vorgehen

  1. Ein System statt zwei

    Grav statt WordPress mit Seitenbaukasten. Die Inhalte liegen als Dateien, es gibt keine Datenbank und keinen Plugin-Zoo zu warten. Ein Backup ist ein Ordner, ein Umzug ist ein Kopiervorgang.

  2. Preise nur an einer Stelle

    Die englische Fassung ist die Quelle. Ein Skript verteilt die Preise in die deutschen und kroatischen Seiten – so laufen die drei Sprachfassungen nicht auseinander, was bei handgepflegten Preisen sonst zuverlässig passiert.

  3. Inhalte ohne Entwickler

    Jeder Inhaltstyp hat eigene Felder im Admin: Kurs mit Preis, Ausfahrt mit Rhythmus, Reise mit Zeitraum. Bilder kommen aus dem Seitenordner – kein Auswahlfeld, das man vergessen kann.

  4. Mehrsprachig ohne Umleitung

    Englisch ist die Standardsprache, Deutsch und Kroatisch liegen darunter. Ein dezenter Hinweis schlägt die passende Sprache vor, statt Besucher automatisch umzuleiten – das mag weder der Besucher noch Google.

Ergebnis

Gemessen mit Lighthouse auf dem Handy, gegen die laufende Seite:

SeitePerformanceA11ySEO
Startseite100100100
Kurse100100100
Ausfahrten100100100
Preise100100100
Kontakt100100100
Deutsch / Kroatisch100100100

Best Practices liegen auf allen Seiten ebenfalls bei 100.

Vorher / Nachher

Die erste Fassung war funktional in Ordnung, sah aber aus wie viele Baukasten-Seiten: zentrierte Überschriften, Blau und Türkis, Karten mit Schatten. Die zweite Fassung hat eine eigene Palette, eine Serifenschrift für Überschriften und ein Raster, das nach Print aussieht statt nach Vorlage.

Erste Fassung der Startseite
Erste Fassung: Blau/Türkis, zentriert, Karten mit Schatten.
Überarbeitete Startseite
Überarbeitet: Papier und Koralle, Serifen, randloser Auftakt.
Beides ist live erreichbar – die aktuelle Fassung unter center.iiwiidive.at.

Was ich anders machen würde

Patrick Stampler · Webentwicklung November 2026