01 · Aufgabe
Aufgabe
Beim Portfolio eines Regisseurs von Werbe- und Spielfilmen zählen Bild und Bewegung: bildschirmfüllende Filmbilder, Videos, die in den Kacheln laufen, und die Credits jeder Produktion. Der Entwurf in Zeplin war pixelgenau und sollte es auf jedem Bildschirm bleiben. Ein CMS mit visuellem Editor hätte schwere Bibliotheken mitgebracht, dazu Dutzende Plugins, die aktualisiert werden müssen, und ein Layout, das sich bei jeder Änderung vom Entwurf entfernt. Deshalb stand von Anfang an fest, dass die Website aus eigenem Code entsteht, der direkt aus den Dateien des Entwurfs geschrieben wird.
02 · Lösung
Lösung
Die Website habe ich in reinem HTML, CSS und JavaScript geschrieben, ohne Framework, ohne Build-Prozess und ohne CMS, direkt aus den Dateien in Zeplin. Das Layout habe ich pixelgenau umgesetzt: die Proportionen der Kacheln, die Schriftgrößen, die Breite des Menüs, das von rechts einfährt, und das Verhalten des Headers, der sich beim Scrollen nach unten ausblendet und beim Scrollen nach oben wieder einblendet. Die Videos von Vimeo laufen in den Kacheln ohne Ton und füllen den Rahmen unabhängig von ihrem Seitenverhältnis aus, und ein Klick öffnet ein Fenster mit Film, Credits und Festival-Lorbeeren.
Alle Produktionen sind in einer einzigen Datendatei erfasst: Titel, Kategorie, ID des Videos, Credits und Lorbeeren. Für eine neue Produktion genügt ein zusätzlicher Eintrag, denn das Layout der Seite entsteht aus diesen Daten.
03 · Ergebnis
Ergebnis
Die Website lädt schnell, weil es außer den Videos nichts herunterzuladen gibt: keine Bibliotheken eines Editors, kein Theme und keine Plugins. Zu aktualisieren gibt es ebenfalls nichts, denn ohne CMS entfallen Sicherheitslücken und monatliche Patches. Die Website ist fertig und wartet auf die Umstellung auf die Zieldomain.
