Zurück zum Portfolio
Die Startseite von WaterBaby: unter einer orangefarbenen Hinweisleiste und der Navigation, im Sprachumschalter EN gewählt, die Überschrift „Baby and Children’s Swimming“ und die Zeile „at Elpida Resort & Spa in Serres“ über einem abgedunkelten Foto eines Hallenbads mit aufblasbaren Regenbogenbögen, Wasserbällen und schwimmendem Spielzeug, darunter ein orangefarbener Button „Explore programmes“, ein weißer Button „Reserve a place“ und eine orange gesäumte Welle.
babyswimserres.gr in neuem Tab öffnen

WaterBaby Serres — Schwimmschule für Babys & Kinder

Überblick

WaterBaby Serres unterrichtet Babys ab vier Monaten und Kinder bis zehn Jahre in einem beheizten Hallenbad im Elpida Resort. Die Website sollte zuerst griechische Eltern ansprechen und erst danach englischsprachige Besucher, ohne zu zwei Websites zu werden. Deshalb steht jeder sichtbare Text zweimal in derselben Datei, und der Umschalter blendet nur eine der beiden aus: eine URL pro Seite, kein Neuladen, kein Fetch, kein zweiter Seitensatz zum Pflegen — und das Griechische liest sich auch ohne JavaScript vollständig. Sechs Seiten tragen das Ganze — Start, Über uns, die beiden Programme, Galerie und Kontakt — mit den vier Kinderstufen vom Anfänger bis zum Fortgeschrittenen, der Ausrüstung und den Unterlagen, die Eltern brauchen, und einem FAQ. GSAP und ScrollTrigger liegen lokal statt auf einem CDN, und jede Animation ist additiv: nichts wird per CSS vorab versteckt, ein fehlgeschlagenes Skript hinterlässt also eine vollständige Seite statt einer leeren. Die Ankunftsanimation der Startseite lässt einmal pro Sitzung eine Welle durch das Viewport ablaufen und räumt sich über CSS-Keyframes selbst ab — sie kann niemanden hinter einem Overlay zurücklassen, selbst wenn das JavaScript stirbt. Strukturierte Daten decken Kurse, FAQ, Galerie und Breadcrumbs ab; eine llms.txt nennt die geprüften Fakten für KI-Assistenten und ist durch die Tests an die Seiten gebunden, damit beide nicht auseinanderlaufen. Einundzwanzig Node-Tests halten alles zusammen — Seitenstruktur, griechische Texte, die Weiterleitungs-Stubs, die Sicherheitseigenschaften des Loaders und den WCAG-Kontrast auf jeder orangefarbenen Fläche.

Herausforderungen

Eine zweisprachige Website bedeutet normalerweise alles doppelt — zwei Seitensätze, zwei URLs, zwei Gelegenheiten, das eine zu aktualisieren und das andere zu vergessen. Hier pflegt eine einzelne Trainerin die Seite, eine zweite Kopie jeder Seite wäre also Last statt Funktion. Griechisch musste zudem der echte Standard sein, lesbar bevor irgendein Skript läuft, denn das Publikum sind Eltern vor Ort. Und genau die Extras, die sich eine Schwimmschule wünscht — Ankunftsanimation, Scroll-Reveals, ein Lightbox — hinterlassen eine leere Seite, wenn ein Skript auf einem Handy mit schwachem Signal scheitert.

Lösungen

Beide Sprachen liegen inline in jeder Datei, und der Umschalter kippt nur ein hidden-Attribut: eine Seite zum Bearbeiten, eine URL zum Teilen, nichts zu synchronisieren; die Vorliebe steht im localStorage, und der Wechsel feuert ein Custom Event, auf das die Galerie hört. Nicht-Text-Strings — aria-labels, Platzhalter, Meta-Beschreibungen, sogar der Dokumenttitel — übersetzen über gepaarte Data-Attribute in derselben Funktion, damit eine übersetzte Seite keine unübersetzten Ecken hat. Bewegung ist per Regel additiv, und ein Test erzwingt es: CSS darf ein animiertes Element nie vorab verstecken, ein nicht geladenes GSAP kostet also nur die Animation. Das Ankunfts-Overlay wird hidden ausgeliefert und nur durch eine Klasse sichtbar, die JavaScript setzt, während sein Abgang ein CSS-Keyframe mit fill-mode forwards ist — ob das Skript aus, blockiert oder abgestürzt ist, das Overlay räumt sich ab. Bibliotheken liegen lokal, damit ein CDN-Ausfall die Bewegung nicht mitnimmt, und jeder der einundzwanzig Tests wurde geprüft, indem gezielt kaputt gemacht wurde, was er schützt.

Galerie

  • Die Startseite von WaterBaby: unter einer orangefarbenen Hinweisleiste und der Navigation, im Sprachumschalter EN gewählt, die Überschrift „Baby and Children’s Swimming“ und die Zeile „at Elpida Resort & Spa in Serres“ über einem abgedunkelten Foto eines Hallenbads mit aufblasbaren Regenbogenbögen, Wasserbällen und schwimmendem Spielzeug, darunter ein orangefarbener Button „Explore programmes“, ein weißer Button „Reserve a place“ und eine orange gesäumte Welle.

    Startseite — Als Erstes sehen Eltern das Becken selbst

  • Der Abschnitt „Baby Swimming Serres“ unter dem Label „Our philosophy“: ein Absatz mit den Namen der beiden Gründer des Teams, die fett gesetzte Zeile „Every child is treated as unique.“ und ein Link „Meet the team“, neben einem Foto in abgerundeter, organischer Form, auf dem eine lächelnde erwachsene Person im schwarz-grünen Neoprenanzug ein lächelndes Baby im Becken hochhält, darunter eine Leiste mit drei Zahlen: 4+ Monate zum Einstieg, 31°C Wassertemperatur und 1:4–6 in den Gruppen.

    Philosophie — Die drei Zahlen, die Eltern beruhigen

  • Zwei Programmkarten nebeneinander auf hellblauem Grund. Links Baby Swimming, beschriftet mit 4 months – 3/4 years, über einem Unterwasserfoto eines Babys mit rosa Blumenhaarband unter bunt schwimmendem Spielzeug. Rechts Preschool & Children’s, beschriftet mit 3/4 – 10 years, über einem Unterwasserfoto eines Kindes mit orangefarbener Schwimmbrille und dunkler Badekappe. Jede Karte hat eine Zeile Beschreibung und einen Link „Learn more“.

    Zwei Programme — Von vier Monaten bis zehn Jahren

  • Die Überschrift „Continuous learning, meaningful care“ über vier nummerierten Qualifikationen: ein Sportstudium in Thessaloniki 2007, ein Rettungsschwimmerschein, eine Lehrberechtigung für Erste Hilfe von 2017 und Babyschwimm-Qualifikationen von Austswim, Birthlight und STA, neben einem abgerundeten Foto einer lächelnden erwachsenen Person mit weißer Badekappe und Neoprenanzug, die ein lachendes Baby im Wasser hält.

    Qualifikationen — Vier Nachweise, die Eltern prüfen können

  • Die Überschrift „Equipment & documents“ über zwei Feldern. Das blaue Feld, „What to bring“, nennt für Babys Badebekleidung, Badekappe und Schwimmbrille, Bademantel oder Handtuch, rutschfeste Badeschuhe und eine warme Mütze für den Heimweg, für Eltern Badebekleidung, Kappe, Handtuch, rutschfeste Badeschuhe und Hygieneartikel. Das dunkelblaue Feld, „Required documents“, verlangt ein kinderärztliches Attest für jedes Kind und eine ärztliche Freigabe für begleitende Eltern.

    Ausrüstung und Unterlagen — Die Fragen vor jeder ersten Stunde

  • Ein Raster aus Unterwasserfotos in verschiedenen Größen: eine große Kachel mit einem Baby mit gelbem Blumenhaarband, das mit ausgestreckten Armen schwimmt, zwei Kacheln mit kleinen Kindern unter Wasser, die in die Kamera blicken, und eine Reihe von drei Fotos: ein Kind mit einer orangefarbenen, flossenförmigen Schwimmhilfe auf dem Rücken, ein Kind, das unter einem blauen Schwimmbrett gleitet, und ein Kind mit orangefarbener Schwimmbrille. Jedes Foto trägt die Logos von WaterBaby und Elpida und einen Fotografenvermerk.

    Die Galerie — Fotos nach dem Moment bemessen, nicht nach dem Raster

  • Die Lightbox über der abgedunkelten Galerie: ein Foto einer erwachsenen Person mit weißer Badekappe und nassem weißem T-Shirt, die ein Baby stützt, das im Becken auf dem Rücken treibt, darunter die Bildunterschrift „Floating on the back — the first lesson in trust.“, runde Pfeil-Buttons für Zurück und Weiter an beiden Seiten und oben rechts ein Schließen-Button mit Fokusring.

    Die Lightbox — Ein natives Dialog-Element, Tastatur zuerst

  • Der Stundenplan auf der Kontaktseite: die Überschrift „Two days every week“ über einer Karte mit Samstag und Sonntag, jeweils 9:30 – 14:00, neben einer Satellitenkarte mit roter Markierung auf dem Elpida Resort & Spa und einer Infokarte mit der Adresse in Serres und 4,6 Sternen; darunter beginnt ein blaues Band.

    Kontakt — Wochenendzeiten und der Weg zum Becken

  • Die Startseite auf einem Tablet: das Foto des Hallenbads mit aufblasbaren Regenbogenbögen und Wasserbällen, darüber die Überschrift „Baby and Children’s Swimming“, die Zeile „at Elpida Resort & Spa in Serres“ und die beiden Buttons, ein runder Menü-Button anstelle der Navigation und unter der Welle das Label „Our philosophy“, die Überschrift „Baby Swimming Serres“ und der Anfang ihres Textes.

    Startseite auf dem Tablet — Zwei klare nächste Schritte unter der Überschrift

  • Die Seite Baby Swimming auf einem Tablet: eine Brotkrumennavigation, der Titel „Baby Swimming“ und die Zeile „An enjoyable experience for you and your baby — from four months to three or four years.“ über einem blau getönten Unterwasserfoto eines Babys mit Blumenhaarband, danach das Label „Together in the water“, die Überschrift „A love of water, skills for life“ und zwei Absätze.

    Baby Swimming — Ein Programm, für das die Eltern mit ins Wasser gehen

  • Die Seite Preschool & Children’s auf einem Tablet: das Label „Learning without pressure“, die Überschrift „Swimming that follows the child“ und zwei Absätze über kleine Gruppen für Drei- oder Vier- bis Zehnjährige, über einem abgerundeten Foto eines lächelnden Kindes mit weißer Badekappe, das gelbe Schwimmnudeln im Becken hält.

    Kinderschwimmen — Kleine Gruppen im Tempo jedes Kindes

  • Die Seite „About us“ auf einem Tablet: das Label „A few words about us“, die Überschrift „An idea that began in Serres in 2013“ und vier Absätze über Werdegang und Qualifikationen von Marina Tsela, über einem abgerundeten Foto einer erwachsenen Person im schwarz-grünen Neoprenanzug mit zwei kleinen Kindern an blauen Schwimmnudeln; im Vordergrund zwei weitere Personen von hinten.

    Die Geschichte — Wer das Babyschwimmen nach Serres brachte, und wann

  • Die Galerieseite auf einem Tablet: das Label „The WaterBaby experience“, die Überschrift „Water becomes a place to learn and play“ und eine Zeile, die erklärt, dass sich jedes Foto vergrößert öffnet und mit den Schaltflächen oder Pfeiltasten durchblättern lässt, über einem breiten Foto einer lächelnden erwachsenen Person im Neoprenanzug, die ein lächelndes Baby hochhält, darunter zwei Kacheln mit einem Baby auf einer Schaumstoffmatte am Beckenrand und dem Hallenbad mit aufblasbaren Bögen sowie der Anfang zweier weiterer.

    Galerie — Jedes Foto öffnet sich groß, per Tippen oder Pfeiltaste

  • Die Startseite auf einem Smartphone: die Hinweisleiste in zwei Zeilen, das Logo und ein runder Menü-Button, das Foto des Hallenbads mit der Überschrift „Baby and Children’s Swimming“ und der Zeile „at Elpida Resort & Spa in Serres“ sowie die Buttons „Explore programmes“ und „Reserve a place“ in voller Breite übereinander über der Welle.

    Auf dem Smartphone — Buttons in voller Breite, in Daumenreichweite

  • Das geöffnete Menü auf einem Smartphone: Home, About us, das Label „Swimming programmes“ mit Baby Swimming und Preschool & Children’s eingerückt neben einer orangefarbenen Linie, Gallery und Contact, darunter ein Sprachumschalter mit gewähltem EN und ein orangefarbener Button mit der Telefonnummer 698 7728220.

    Mobiles Menü — Beide Sprachen und die Telefonnummer gleich dabei

  • Die Programme auf einem Smartphone: die Überschrift „The right programme for every stage“ und eine kurze, zentrierte Einleitung über der Karte Baby Swimming, einem Unterwasserfoto eines Babys mit rosa Blumenhaarband unter bunt schwimmendem Spielzeug, mit dem Label 4 months – 3/4 years, einer Zeile Beschreibung und einem Link „Learn more“.

    Programme auf dem Smartphone — Zuerst die Altersspanne

  • Der Wochenplan auf einem Smartphone: die Überschrift „Lesson times that work for family life“ und eine Zeile mit Samstag und Sonntag, 9:30–14:00, über einem Foto eines breit grinsenden Kindes unter Wasser mit beiden Daumen hoch und einer gelben Schwimmnudel, darunter Karten für Samstag und Sonntag mit ihren Zeiten.

    Stundenplan — Wochenendstunden, die zum Familienleben passen

  • Die Fotogalerie auf einem Smartphone, ein Foto pro Reihe: ein Baby, das unter Wasser auf die Kamera zuschwimmt, ein Baby mit rosa Blumenhaarband, das mit weit ausgebreiteten Armen gleitet, und der Anfang eines dritten Fotos mit einem lächelnden Kind, das einen roten Ring und ein orangefarbenes Spielzeug hält, jeweils mit den Logos von WaterBaby und Elpida und einem Fotografenvermerk.

    Galerie auf dem Smartphone — Ein Foto nach dem anderen, in voller Breite

  • Die Lightbox auf einem Smartphone über der abgedunkelten Seite: ein Unterwasserfoto eines Babys, das durch einen orangefarbenen Ring schwimmt, mit runden Pfeilen für Zurück und Weiter über den Bildrändern, einem Schließen-Button mit Fokusring in der oberen rechten Ecke und der Bildunterschrift „Through the hoop, first time.“ in einem Feld darunter.

    Lightbox auf dem Smartphone — Jedes Foto behält seine Bildunterschrift

  • Kontaktkarten auf einem Smartphone unter dem Label „Contact us“ und der Überschrift „We’re here for your questions“: Phone mit der unterstrichenen Nummer 698 7728220, Email mit der unterstrichenen Adresse waterbabyserres@gmail.com und Address mit Elpida Resort & Spa, Agion Anargyron Valley, Serres.

    Kontakt — Drei Wege zu einer Schule ohne Empfang