Responsive Webdesign

Seit 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:  
Responsive Webdesign Mobile Websites RESS/Dynamic Serving

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.

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.

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.

Mobile Websites

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

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.

„Eine reduzierte Mobilversion, die wenig mehr als die Anschrift des Unternehmens zeigt, entspricht nicht mehr den Interessen der Nutzer. Sie erwarten, die Inhalte, die sie von der Desktopversion kennen, auch auf dem Mobilgerät zu finden und umgekehrt."

Aus "Responive Webdesign" von Andrea Ertel & Kai Laborenz, Galileo Computing (2015, S. 125)

Responsive Webdesign begegnet diese Nachteilen 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.

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.

Darstellung zweier Elipsen. RESS als Schnittmenge zwischen TYPO3 und RWD

Nachteile von RESS

Die Anzahl der mobilen Geräte ist heute nahezu unüberschaubar. Daher ist eine serverseitige Erkennung der jeweiligen Geräte über den User-Agent des anfragenden Browsers nicht immer gegeben.

Responsive Webdisign hat sich mit dem "mobile first" Ansatz weiterentwickelt. Hierbei wird das HTML und CSS so organisiert, dass zunächst immer die Ressourcen für die kleinsten Geräte ausgeliefert werden. Große, für das Desktoplayout benötige, Hintergrundgrafiken werden beispielsweise nur bei Geräten mit entsprechender Bildschimbreite ausgeliefert. Eine konsequente Umsetzung von "mobile first" macht RESS in der Regel überflüssig. Nur bei sehr großen Websites, wie zum Beispiel Nachrichtenportale, kann RESS in Verbindung  mit jeweils eigenständigen Templates für die dedektierten Geräteklassen vorteilhaft sein. Der Aufwand für die Umsetzung ist entsprechend höher.

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