Frontend Development
Adaptive Templates
Jürgen Michael Kindler | 26.11.2017
Bei den Adaptiven Templates handelt es sich um eine weitere Lösungsvariante für die optimale Darstellung der Website auf Smartphone, Tablet und Desktop. Im Gegensatz zum Responsive Webdesign werden je nach anfragender Geräteklasse unterschiedliche HTML-Templates ausgeliefert.
Beim adaptiven Ansatz gibt es für jeden Seitentyp mehrere Templates für die jeweiligen Geräte. Über entsprechende Weichen wird serverseitig das "passende" Template ausgeliefert. Eine Optimierung und Differenzierung für bestimmte Geräteklassen ist möglich. Anders als beim responsiven Ansatz wird für Smartphones, Tablets und Desktops nur der HTML-Code und Content ausgeliefert, der für die jeweilige Darstellung der Webseite nötig ist. Die Ladezeit kann im Gegensatz zu reinem RWD, insbesondere für Smartphones, optimiert werden. Weiterhin kann der Seitenaufbau bei jeder Geräteklassen im Gegensatz zum RWD völlig verschieden sein.
Leider haben sich unscharfe Begrifflichkeiten etabliert:"Adaptive Templates" bedeutet, dass eine Website für verschiedene Displaygrößen mehrere unterschiedliche HTML-Templates bereitstellt. "Adaptives Layout" beschreibt hingegen, wie die Webseite auf verschiedene Displaybreiten unter Verwendung desselben HTML-Templates (also nur ein Template) reagiert. Hierbei erfolgt die Steuerung, wie beim "richtigen" Responsiv Webdesign, über Media Queries und CSS3 . Es wird jedoch kein fluides Raster wie von Ethan Marcotte beschrieben verwendet, und das Layout "springt", wenn man das Browserfenster in der Breite ändert. Adaptive (anpassungsfähige) Layouts verhalten sich also gegenüber responsive (reaktionsfähige) Layouts nicht so geschmeidig und haben den Nachteil, nur für bestimmte Geräte optimal zu wirken.
Auch wenn in der Realität die adaptiven Templates häufig mit einem statischem Layout verbunden sind, so ist dies nicht zwingend. Der Hauptunterschied zum RWD besteht darin, dass für die verschiendenen Geräteklassen unterschiedliches HTML-Markup ausgeliefert wird. Das Layout kann wie beim RWD auch fluide gestylt werden, um so innerhalb einer Geräteklasse eine flexiblere Unterstützung zu erhalten.
Einsatzzwecke
Adaptive Templates sind gut geeignet für komplexe Websites mit vielen Inhalts-Elementen und komplexen Layouts oder wenn hohe Ansprüche an die Performance gestellt werden. Weiterhin sind adaptive Templates besonders gut geeignet, um bestehende Websites nachträglich für mobile Geräte zu optimieren. Das Template der Website bleibt für den Desktop erhalten. Ergänzt wird dieses durch zusätzliche Templates für Smartphone und Tablet.
Adaptive Templates sind mit höheren Kosten als beim "reinen" Responsive Webdesign verbunden und daher nur für besondere Anfordungen großer Websites geeignet.