Im vorherigen Artikel “Fallbeispiel: Öbb History” habe ich die Seite auf inhaltliche und Design Aspekte analysiert. In diesem Blogpost schau ich mir an, ob und wieviel ich über die technische Umsetzung dieser Seite herausfinden kann.
Das sind jedenfalls mal die Personen, die diese Webseite kreiert haben:
Und die Seite war mal auf AWWWARDS Website of the Day:
Technische Analyse
Als erstes sehe ich beim Untersuchen, dass die Seite mit dem Framework Next gebaut wurde:
Next.js ist ein beliebtes React-Framework, das serverseitiges Rendering (SSR), statische Seitengenerierung (SSG) und API-Routen in einer Umgebung kombiniert.
Canvas
Die Hauptanimationen befinden sich in einem canvas tag mit dem parameter data-engine=”three.js”. Daher ist davon auszugehen, dass für die großen Animationen Three.js verwendet wurde.
Styled Components
Diese Library habe ich auch noch nie verwendet, damit soll angeblich CSS leichter zuzuweisen sein auf React Componenten.
Tailwind
Tailwind mag ich nicht so, ich finde es macht das ganze voll unübersichtlich wenn die tags so lange werden.
Imgix
Imgix wird verwendet, um Bilder effizient zu komprimieren, zu transformieren (z. B. Größenänderung, Zuschnitt) und über ein Content Delivery Network (CDN) schnell auszuliefern. Das reduziert Ladezeiten und verbessert die Benutzererfahrung, insbesondere bei Medien-intensiven Websites. Das weißt auch darauf hin, dass sie ein CDN verwenden.
SEO
Da gibt es bissl viele h1.
Barrierefreiheit
Die Seite ist trotz der vielen Animationen großteils mit tab bedienbar. Es wurden auch Aria live tags benutzt.
Manchmal Kontrast Probleme.
Fazit
Nach der Analyse überlege ich doch, wieder React mit Next.js zu nutzen, weil ich mich trotz meines letzten Projekts immer noch nicht super fit darin fühle. Ich werde noch ein paar vergleichbare Websites untersuchen und wenn sich das als State-of-the-Art Framework für interaktive Webseiten herauskristallisiert, dann geht fast kein Weg drum herum. Three.js stand bereits auf meiner To-Do Liste, das will ich unbedingt auch nutzen. Gegen Tailwind wehre ich mich. Imgix und Styled-Components sehe ich mir gern mal an.
