Responsive Design für inVENTer

TYPO3 /

Das Ziel dieses Projekts war es, eine mobile Version der inVENTer Website zu erstellen, so dass sie bequem von verschiedenen Geräten aufgerufen werden kann, ohne dem User endlose Ladezeiten oder "Zoom-Orgien" zuzumuten. Obwohl die Vorgehensweise oftmals umgekehrt ist (Mobile First Ansatz), haben wir diese Funktion für inVENTer erst nachträglich integriert, was eine besondere Konzeptionsarbeit und einige strukturelle Umstellungen erforderte. So wurden von uns verschiedene Funktionen bereitgestellt, damit die Seiten in unterschiedlichen Auflösungen optimal dargestellt werden können. Ob vom Smartphone, Tablet oder einem Desktop-Gerät aufgerufen, in jedem Fall möchte der User eine für ihn optimale Darstellung erhalten, die ihm die Bedienung auch auf kleineren Oberflächen so einfach wie möglich gestaltet.

Um dies zu ermöglichen, setzen wir auf spezielle Abfragen in den Stylesheet Anweisungen (Media Queries). Auf der Grundlage ein und desselben Systems/ HTML-Quelltextes, passen sich die Elemente der Website automatisch an die jeweilige Auflösung an, weshalb es nicht notwendig ist, für jede einzelne Version eigene HTML-Vorlage zu erstellen. So wird beispielsweise die Anzahl der Spalten variiert, deren Inhalt in der kleinsten Darstellung auf eine einzige reduziert wird, während er sich in der entsprechenden Desktopansicht auf ganze drei Spalten erstreckt.

Zur besseren Übersicht entfallen insbesondere in der Smartphoneansicht ausgewählte Inhalte und die Elemente werden anders angeordnet. Auch die Navigation der Website wird je nach Größe verschieden umgesetzt und erscheint in einem komplett anderen Layout.

Das größte Problem, das sich aus dieser Vorgehensweise ergibt, ist der Umgang mit Bildern. Hierfür griffen wir die Lösung von adaptive-images.com auf, so dass Bilder je nach Auflösung nicht nur unterschiedlich groß angezeigt werden, sondern ihre Dateigröße tatsächlich angepasst wird. Die für diesen Zweck erstellte TYPO3 Extension erlaubt nicht nur die Konfiguration der einzelnen Bildgrößen in Abhängigkeit von der Auflösung, sondern auch die Auslieferung eines Cookies, das die Auflösung des Anzeigegerätes speichert. Durch diese Vorgehensweise kann die Ladezeit auf mobilen Endgeräten erheblich verbessert werden.