Die Landingpage der Sternfahrt des ADFCs war eine angenehme Möglichkeit für mich, mich mehr mit anderen JS-Frameworks als nur React zu beschäftigen. Ich entschied mich für Svelte - da es in meinen Augen immer recht leicht zu lernen war, aber trotzdem viele Möglichkeiten bot.

Performance

Mir war von Anfang an wichtig, dass die Seite schnell lädt, da für eine Landingpage klar ist, dass sie vor allem am Handy aufgerufen wird. Performance und Responsive Design waren daher besonders wichtig für mich. Die Landingpage bietet aktuell einen Lighthouse-Score von 98 Punkten für den Punkt Performance.

Barrierefreiheit

Dem ADFC und mir war es wichtig, die Seite barrierefrei zu gestalten. Vor allem was die Keyboard-Navigation und Farbkontraste angeht, aber auch die Beschreibung von Bedienelementen für sehbehinderte waren daher besonders wichtig. Interaktive Elemente wie Bilderkarussels und Akkordions mussten mit zusätzlichen Attributen angereichert werden um Screenreadern die Möglichkeit zu geben, den jeweiligen Status korrekt zu erkennen.

Design

Das Design der Seite kam von aufsiemitgebrüll. Wichtig war uns, dass alles schlüssig wirkte. Die Seite soll einen modernen Eindruck machen und wurde mit simplen Animationen bei Fokus oder Hover aufgehübscht.

Das Highlight ist wohl der dynamische Hintergrund der Sektion "Und das muss passieren für die Radvolution". Hier sollen horizontale Streifen eine kontinuierliche Bewegung nach vorne darstellen. Die Herausforderung daran war, eine relative kleine SVG-Grafik zu generieren die groß genug ist, um den gesamten Bildschirm einzuspannen und diese dann so zu animieren, dass man den Sprung zwischen Anfang und Ende der Grafik nicht mehr sieht. Das gleiche dann auch auf mobilen Endgeräten darzustellen, war ebenfalls nicht ohne.