Imago Design

Wir haben die Website statisch angelegt. Sie kommt also ohne herkömmliches Content-Management-System aus. Dadurch erzielt sie eine grandiose Performance und die Seiten sind im Handumdrehen geladen. Denn es gibt schlicht und einfach nichts Schnelleres als eine statische Seite.

Entwicklungsseitig haben wir aber durchaus mit einer Art CMS gearbeitet. Die Basis dazu war das Konzept von Static Site Generator. Dafür haben wir zunächst einzelne Bausteine und Templates entwickelt und aufgebaut, die beliebig wiederverwendet werden können. Am Ende wurden aus den Bausteinen komplette HTML-Seiten gerendert, die der User dann zu sehen bekommt. Um die Pflege zu vereinfachen, haben wir die Texte in Textdateien ausgelagert. Dadurch können wir den Content bequem und schnell ändern oder ergänzen.

Für die Entwicklung des Frontends haben wir TailwindCSS eingesetzt. Das dynamische Nachladen des Contents erfolgt über barba.js. Das ist eine extrem smarte Kombination. Denn trotz des recht umfangreichen und abwechslungsreichen Frontends benötigen wir nur 10 KB für CSS und ca. 16 KB für Javascript.

Für die maximale Performance haben wir uns an Best Practices, etwa für Markup, CSS und Javascript, orientiert und entsprechende Audits durchgeführt.

Für die Einbindung von Animationen haben wir Lottie benutzt. Dadurch konnte Imago Design die Animationen in Adobe After Effects erstellen und mit einem speziellen Plugin für den Einsatz auf der Website bequem exportieren. Bei Bedarf werden die Animationen auf der Seite einfach dynamisch nachgeladen.

Zahlreiche kleine Micro-Animations und Design-Effekte machen die Seiten nicht nur ausgesprochen lebendig, sondern sie unterstützen die User Experience und sorgen für ein optimales Nutzererlebnis.

Bei den Bildern haben wir mit dem innovativen Format „webp" als Standard gearbeitet. In Browsern, die dieses Format nicht unterstützen, werden png-Dateien als Fallback angezeigt.