Ausgangslage
Der Besucher (Kunde) der Webseite benutzt für die Anzeige verschiedene Endgeräte mit unterschiedlichen Auflösungen. Um eine optimale Darstellung für den Besucher zu ermöglichen, gibt es mehrere Website-Breakpoints. Diese passen die Darstellung der Inhalte an die Auflösung des Bildschirms an.
Der Redakteur musste für jeden Breakpoint ein Abformat eines Bildes hochladen, was bei einer manuellen Erstellung einen erheblichen Arbeitsaufwand mit sich bringt. Zudem gibt es Komponenten, die je nach Darstellung pro Breakpoint unterschiedliche Formate nutzen, wodurch nicht jedes Bild für jede Komponente geeignet war: Die Folge ist eine niedrige Flexibilität und eine hohe Fehlerquote im Redaktionsprozess.
Die Content-Redakteure mussten sich für die Erstellung der Abformate schriftlich an die Grafikabteilung wenden, um die entsprechenden Assets (zum Beispiel für Mobile, Tablet und Desktop) zu erhalten. Durch Missverständnisse gab es häufig Fälle, dass falsche Größen und Seitenverhältnisse von Bildern dem Content-Redakteur übermittelt wurden, was den Aufwand durch zusätzliche Schleifen und Fehlerbereinigung weiter erhöht hatte.
Lösung: Responsive Imaging
Der Content-Redakteur lädt nur ein einziges unkomprimiertes großformatiges Bild-Asset in das Magnolia DAM und setzt bei der Einbettung in den Content einen Fokuspunkt. Von diesem Punkt ausgehend werden dynamisch die benötigten Abformate für die jeweiligen Breakpoints erstellt.
Somit kann ein Bild für alle Komponenten genutzt werden. Der Aufwand der Bildpflege reduziert sich enorm, ebenso die Kosten für die Bildproduktion. Die Fehlerquelle beim Erstellen der Abformate entfällt.
Die Arbeit des Entwicklers ist übersichtlich: Die Steuerung der Abformate muss durch den Entwickler lediglich einmalig durchgeführt werden. Die Frontendentwickler wissen dann wie groß die Bilder sein müssen und kümmern sich in den Vorwegen darum, alles perfekt zu definieren.
Die Position top, bottom, left & right wird errechnet, wenn der Fokuspunkt weit außen liegt. Frontendentwickler können auch mit Bildern arbeiten, die einen Overflow verwenden sollen. Die Klassen können verwendet werden, um das Bild entsprechend zu ankern.
