Responsive Webdesign responsive, RESS, adaptive oder doch noch einmal eine eigenständige mobile Website?

Ab Mitte 2015 gibt es mehr Internet-Zugriffe über Smartphones und Tablets als über klassische Desktop-Rechner. In einem rasanten Tempo ändert sich das Nutzerverhalten. Wir gehen nicht mehr ins Internet. Wir sind bereits drin. Der Zugriff erfolgt mit den unterschiedlichsten webfähigen Geräten von (fast) jedem Ort.

Die Mobile Revolution stellt die Betreiber von Websites vor neuen Herausforderungen:

  • Mobile Geräte haben verschiedenste Displaygrößen.
  • Die Navigation erfolgt nicht mehr mit Maus und Tastatur, sondern mit dem Finger.
  • Wir wissen nicht, wie und von welchem Ort der User unsere Website besuchen wird.

Gleichzeitig steigen die Ansprüche. User wechseln häufig zwischen Smartphone, Tablett und PC und erwarten eine "seamless user experience". 

Wie können wir diesen Herausforderungen begegnen?

Folgende Lösungsansätze bieten sich an:  
Mobile Websites Responsive Webdesign RESS/Dynamic Serving Adaptive Templates

Mobile Websites

Mobile Websites waren bis vor wenigen Jahren die Antwort auf internetfähige Smartphone.  Hierbei handelte es sich meist um eine eigenständige mobile Websites mit eigener URL. Inhalt und Layout können für kleine Smartphone-Viewports optimiert werden.

Nachteile eigenständiger Mobiler Websites

Nachteilig ist einerseits der zusätzliche Aufwand für Erstellung und Pflege der mobilen Version andererseits werden nur wenige Geräteklassen optimal unterstützt.

Der Mobile Kontext löst sich zunehmend auf - der Griff zum Smartphone erfolgt auch auf dem heimischen Sofa mit schnellem WLAN. Ein abgespecktes Angebot für Smartphone wird als Content Bruch störend wahrgenommen. Responsive Webdesign begegnet diesem Nachteil indem für alle Geräte der gleiche Content ausgeliefert werden kann.  Heute haben eigenständige mobile Websites nur noch bei besonderen Anwendungsfällen eine Berechtigung. 

Responsive Webdesign (RWD)

Im Mai 2010 präsentierte der Bostoner Designer und Entwickler Ethan Marcotte in einem viel beachteten Artikel einen Lösungsansatz. Ethan Marcotte zeigte, wie mit einer Kombination von bereits verfügbaren Webtechniken Websites flexibel auf verschiedene  Displaygrößen reagieren können (siehe Opens external link in new windowA LIST APART). Das Layout passt sich dem jeweils zur Verfügung stehenden Platz an. Die Content-Basis ist dabei für alle Geräte gleich.

Der größte Vorteil dieses Ansatzes ist, dass die Website auf allen Geräten mit unterschiedlichsten Displaygrößen out of the box funktioniert. Ein eigenständiges URL-Konzept, wie bei zusätzlichen mobilen Websites, ist nicht nötig.

Responsive Webdesign, illustriert in Form von einem Drahtgittermodel (Wireframe) für die Ansichten "Desktop", "Tablet im Hochformat" und "Smartphone" am Beispiel der Homepage von Human Art

Wireframes (Drahtgittermodell) der Human Art Website mit den Viewports Desktop, Tablet, Smartphone.
Das horizontale Hauptmenü hat nur bei der Desktop-Ansicht genügend Platz
zur Verfügung. Das Logo wandert bei kleineren Bildschirmen von rechts nach links.
Bei der Tablet-Ansicht im Hochformat und bei Smartphones wird das Hauptmenü eingeklappt
und ist über einen Menü-Button oben rechts einblendbar.
Beim RWD ordnen sich die Content-Elemente entsprechend des vorhandenen Platzes neu an.

Einsatzzwecke

Responsive Webdesign ist besonders gut geeignet für einfach strukturierte Websites mit flacher Inhaltsstruktur und einfachem Seitenaufbau. Zwar lassen sich auch sehr umfangreiche Websites mit RWD realisieren. Allerdings müssen die angebotenen Inhalte und Funktionen von Anfang an bewusst einheitlich und reduziert einfach gestaltet werden. Die Schlagworte "Opens external link in new windowContent First", "Mobile First" und "Progressive Enhancement" beschreiben die Vorgehensweise.  Responsive Webdesign lässt sich mit RSS optimieren und auch gut mit adaptive Templates kombinieren.

Responsive Webdesign ist weniger geeignet für Websites mit komplexen Inhalten und Funktionen oder wenn die Seiten selbst aus sehr vielen Content-Elementen aufgebaut sind. Auch wenn eine bestehende Website nachträglich für verschiedene Displaygrößen optimiert werden soll ist RWD häufig nicht geeignet. Dies ist kein technisches Problem. Das vorhandene Layout und der Content eignen sich schlichtweg häufig nicht für RWD. Im schlimmsten Fall sind Seiten auf touchbasierten Geräten nicht oder nur schlecht erreichbar (kein Mouse-over). 

RESS/Dynamic Serving

RESS: Responsive Design + Server Side Components . Mit RESS - bzw. synonym "Dynamic Serving" (Deutsch: dynamische Bereitstellung) kann Responsive Webdesign serverseitig optimiert werden. Die Steuerung der Ausgabe wird teilweise vom Client auf den Server verlagert. Weniger wichtige Contentelemente werden mit RESS nicht ausgeliefert. Im Gegensatz zum Responsive-Design-Ansatz ist der ausgelieferte HTML-Quellcode abhängig von der Kennung des anfragenden Gerätes - dem sogenannten User-Agent. Das zu übertragende Datenvolumen kann für mobile Geräte deutlich verringert werden.

Adaptive Templates

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.

adaptives Layout != adaptive Templates


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 häufig mit höheren Kosten als beim "reinen" RWD verbunden und daher für kleinere Websites eher nicht geeignet.

  • HTML 5 logo
  • CSS 3 logo
  • jQuery Mobile logo
  • PHP & MySQL logo
  • TYPO3 logo
  • Logo TYPO3 Certified Integrator