← SEGERT BLOG
MEDIA2FINISH – Moderner One-Pager mit CSS-Animationen und ExpressionEngine 7
Es gibt Projekte, die setzt man um, liefert sie ab – und dann gehen sie erst einmal ihren eigenen Weg. Und irgendwann stellt man fest: Darüber habe ich hier ja noch gar nicht geschrieben. So erging es mir auch mit der Website für die MEDIA2FINISH GmbH. Die Seite ist bereits vor einiger Zeit entstanden, und obwohl sie auf den ersten Blick sehr ruhig und reduziert wirkt, war sie in der Umsetzung durchaus anspruchsvoll.
Das Layout selbst habe ich geliefert bekommen. Aber wie so oft steckt der eigentliche Aufwand nicht nur im reinen Nachbauen, sondern in der Übersetzung ins Web – vor allem mit Blick auf Responsivität. Aufgrund meiner Erfahrung mit komplexeren Layouts konnte ich hier an einigen Stellen sinnvoll eingreifen und Anpassungen vorschlagen, damit das Ganze nicht nur auf dem großen Screen gut aussieht, sondern auch auf Tablet und Smartphone funktioniert. Gerade bei einem Projekt, das stark mit Flächen, Bildwirkung und Animation arbeitet, ist das keine Nebensache.
Die Startseite beginnt bewusst minimalistisch. Zunächst erscheint nur ein „Willkommen“, ganz ohne visuelle Ablenkung. Dann fährt das Hintergrundbild sanft nach vorne, das Logo blendet sich ein, und schließlich kommt die Navigation von unten ins Bild. Das wirkt leicht und selbstverständlich – war aber in der Umsetzung alles andere als trivial. Hier greifen CSS-Animationen, Timing, Layering, Opacity-Übergänge und sauberes Z-Index-Management ineinander. Die Herausforderung bestand darin, diese Effekte so zu orchestrieren, dass sie flüssig laufen, performant bleiben und sich nicht gegenseitig in die Quere kommen.
Konzeptionell ist die Seite als One-Pager aufgebaut – allerdings nicht im klassischen Sinn. Die Hauptbereiche wie „Machen wir“, „Sind wir“ und „Finden wir gut“ sind jeweils wiederum als eigene Mini-One-Pager organisiert. Innerhalb dieser Bereiche gibt es weitere Slide-Effekte, Hintergrundwechsel und animierte Übergänge. Man bewegt sich also durch eine verschachtelte Struktur, die technisch eher an eine kleine Anwendung erinnert als an eine einfache Website. Entsprechend wichtig war eine saubere Scroll-Logik, klar definierte Zustände und kontrollierte Animationstrigger.
Die eigentliche Bewährungsprobe kam jedoch auf mobilen Geräten. Animationen, die auf dem Desktop elegant wirken, können auf kleineren Viewports schnell überladen oder unruhig erscheinen. Deshalb wurde für Mobile nicht einfach alles zusammengeschoben, sondern ein eigenes Layoutkonzept entwickelt – mit angepassten Proportionen, reduzierter Animationstiefe und klarer Leseführung. Animation sollte hier nicht Selbstzweck sein, sondern Orientierung geben und die Inhalte unterstützen.
Was mir an diesem Projekt besonders gefällt, ist genau dieses Spannungsfeld: eine ruhige, aufgeräumte Oberfläche und darunter eine durchaus komplexe technische Struktur. Vieles passiert im Hintergrund, ohne sich in den Vordergrund zu drängen. Und genau das ist für mich gute Webarbeit – wenn eine Seite selbstverständlich wirkt, obwohl sie im Detail sorgfältig durchdacht und umgesetzt wurde.
Ergänzend dazu lief das Projekt natürlich nicht nur auf der reinen Frontend-Ebene. Ich habe die Seite komplett auf ExpressionEngine 7 aufgesetzt und die Struktur so aufgebaut, dass sich auch ein verschachtelter One-Pager sauber über ein Content-Management-System pflegen lässt. Gerade hier liegt oft die eigentliche Schwierigkeit: Inhalte müssen editierbar sein, ohne dass dabei der dramaturgische Flow der Seite, die Animationen oder die internen Slide-Strukturen auseinanderfallen. Das erfordert eine durchdachte Channel-Architektur, klar definierte Felder und eine präzise Template-Logik. Dank der hohen Flexibilität von ExpressionEngine ließ sich das jedoch sehr kontrolliert umsetzen – sodass die Seite nicht nur visuell und technisch funktioniert, sondern auch langfristig sauber administrierbar bleibt.
Ein Projekt also, das ich längst hätte vorstellen sollen – und das zeigt, wie viel Feinarbeit manchmal in einer scheinbar einfachen Oberfläche steckt.
Blog-Startseite /// Rubrik Grafik- & Webdesign