Diese Website

Fotos kommen direkt aus der Kamera und sind oft mehrere Megabyte groß. Ein Plugin (eleventy-img) ersetzt beim Build jedes Bild durch ein <picture>-Element: fünf Breiten, jeweils als AVIF und WebP, dazu die echten Maße, damit beim Laden nichts springt. Der Browser lädt nur die Größe, die er wirklich braucht.

Wirkung auf der Startseite: Die Bilder wiegen dort jetzt je nach Bildschirm zusammen 65 bis 125 KB, vorher musste ich alle Bilder über einen .webp Konverter erstmal umwandeln.

Die Seite soll sich anfühlen wie meine Projekte, ein bisschen verspielt, aber nicht laut. Jede Bewegung hat eine Aufgabe, sie zeigt woher etwas kommt, was ausgewählt ist oder was sich anklicken lässt. Kein Inhalt hängt von einer Animation ab.

• Fächer: Auf der Startseite liegen die aktuellen Projekte wie Spielkarten in der Hand. Beim Überfahren hebt sich eine Karte mit leichtem Nachfedern heraus und neigt sich zum Zeiger.
• Variable Schrift: Bricolage Grotesque ist eine variable Schrift. In den großen Überschriften wird jeder Buchstabe kräftiger, je näher der Zeiger ist.
• 3D-Modelle: Modelle aus Blender lassen sich im Browser drehen (three.js). Die Ansicht „Wireframe“ zeigt die Kanten so, wie ich sie modelliert habe.
• Bilder und Galerien: Angeklickte Bilder öffnen sich von ihrer Position mit einem Übergang zur Großansicht, lange Galerien bekommen links einen Index der der Scrollposition folgt sobald die Galerie mehr als 4 Bilder hat.

Auffällige Effekte sind zwar eindrucksvoll, können aber schnell überfordern und sind oft nur Beiwerk der vom Inhalt ablenkt. Deshalb folgt die Gestaltung etablierten Prinzipien statt Trends:

• Interaktionsprinzipien (DIN EN ISO 9241-110): Die Seite erklärt sich selbst (Beschriftungen statt reiner Symbole, die aktuelle Seite ist in der Navigation markiert), verhält sich erwartungskonform (Links sehen überall gleich aus und reagieren gleich) und bleibt steuerbar (Animationen lassen sich abschalten, Videos und Spiele laden erst auf Wunsch).
• Sichtbarer Zustand: Was gerade aktiv ist, ist zu sehen, die unterstrichene Seite in der Navigation, die gehobene Karte mit „01 / 04“, das markierte Bild im Galerie Index und der Zustand des Animationsschalters.
• Lesbarkeit: rund 65 Zeichen pro Zeile, im Browser gemessen, eine Schriftskala mit sieben Größen und klaren Abständen die Zusammengehöriges gruppieren.
• Gut zu treffen: Klickflächen von mindestens 44 px, ganze Listenzeilen sind anklickbar statt nur der Titel.

Barrierefreiheit gehört dazu und ist kein Zusatz. Ziel ist WCAG 2.2, Stufe AA:

• Bewegung ist freiwillig: Der Schalter „Animationen“ stellt alle Bewegungen ab, und ohne eigene Wahl folgt die Seite der Einstellung des Betriebssystems (prefers-reduced-motion).
• Screenreader: Animierte Überschriften enthalten ihren Text ein zweites Mal unsichtbar, damit das Wort vorgelesen wird und nicht einzelne Buchstaben; das Menü auf dem Handy meldet, ob es offen ist; jedes inhaltliche Bild hat eine Beschreibung in beiden Sprachen, rein dekorative werden für Screenreader ausgeblendet.
• Tastatur und Kontrast: Alles ist mit der Tastatur und sichtbarem Fokus bedienbar, ein Sprunglink führt direkt zum Inhalt, und alle Texte erfüllen die AA-Kontrastwerte.
• Formular: Fehler erscheinen direkt unter dem Feld, in der Sprache der Seite.