Alltagseisen
WebsiteDie Aufgabe
Ich hatte die spannende Aufgabe, für Florian Steinl die Website seines Projektes Alltagseisen umsetzen.
Alltagseisen ist eine Website für Alle mit einer Leidenschaft für alte Karossen. Egal ob zwei oder vier Räder – alle altern sie mit Klasse und Würde. Alltagseisen erzählt lebhaft die Geschichten dieser Altbleche und schmückt sie mit vielen tollen Bildern aus.
Die Website sollte trotz ihres Bilderreichtums schnell und einfach zu bedienen sein, und das moderne Design mit cleveren Animationen unterstützt werden, um so ein einprägsames Gesamtbild zu schaffen.
Das Ergebnis
Die Website habe ich mit dem Content Management System Kirby umgesetzt. Das dateibasierte, leichtgewichtige CMS ist durch den Verzicht einer Datenbank bereits sehr performant und bildet damit eine gute Basis für eine schnelle Website. Das Backend habe ich für das Projekt spezifisch so angepasst, dass die Artikel-Seiten modular aufgebaut sind. Dadurch lassen sich die Inhalte für jeden Artikel individuell strukturieren und gestalten.
Dynamisches Nachladen von Bildern
Da Alltagseisen eine sehr bilderreiche Website ist, lag mein Hauptaugenmerk bei der Umsetzung auf Performance: Ziel war es, die Ladezeit der Seite unter 1 Sekunde zu bekommen, um für die Besucher ein bestmögliches Erlebnis zu garantieren.
Zu diesem Zweck werden beim Aufruf der Website alle Bilder zunächst zurückgehalten und nur das Website-Gerüst aufgebaut. Erst dann werden alle Bilder asynchron nachgeladen und ersetzen dann die grauen Platzhalter (siehe nachfolgende Abbildung). Dadurch lädt die Seite zum einen deutlich schneller, zum anderen kann Bandbreite gespart werden, da die Bilder nur dann wirklich geladen werden, wenn Sie auch im sichtbaren Bereich des Browsers sind.
Interaktivität & Animationen
Um die User Experience der Seite weiter zu verbessern, habe ich an vielen Stellen interaktive Elemente und Animationen eingesetzt.
Die Navigation wechselt z.B. beim herunterscrollen automatisch in eine kompaktere Darstellung, damit sie den Inhalt nicht störend verdeckt und die Navigation trotzdem zu jeder Zeit erreichbar ist. Mit einem Klick auf das Menü-Icon lässt sich die Navigation deshalb jederzeit manuell ein- und ausklappen, wie in der nachfolgenden Animation verdeutlicht.
Ein weiteres interaktives Element ist der “Best Of” Slider. Dieser präsentiert platzsparend ausgewählte Artikel auf der Startseite. Mittels Pfeiltasten kann hier zwischen verschiedenen Artikeln hin- und hergewechselt werden, wobei immer ein Vorschaubild sowie ein kurzer Teasertext angezeigt werden. Die nachfolgend Animation veranschaulicht das Animationsverhalten des Sliders.
Highspeed – auch mobil
Da Alltagseisen auf Performance optimiert wurde, macht die Seite auch auf mobilen Endgeräten eine gute Figur – trotz ihrer vielen Bilder. Selbst bei langsamen Datenverbindungen wird die Seite innerhalb weniger Sekunden angezeigt. Und dabei schont sie das Datenvolumen sogar: Es werden nur Bilder geladen, die sich im sichtbaren Bereich der Seite befinden.
Philipp gelingt der Spagat zwischen Designer und Programmierer. Er schafft es, mit geschultem Auge und langjähriger Erfahrung, Dinge nicht nur hübsch, sondern auch nachhaltig funktional zu machen. Dass etwas nicht geht, gibt es nicht. Lösungsorientiertes Arbeiten ist genau so selbstverständlich, wie die Liebe zum Detail.
