Responsive Webdesign

Seit 2015 gibt es mehr Internet-Zugriffe über Smartphones und Tablets als über klassische Desktop-Rechner. Der Zugriff erfolgt mit den unterschiedlichsten Geräten von fast jedem Ort. Wie kam es zu dieser rasanten Entwicklung?

Zunächts waren Mobile Websites die Antwort auf internetfähige Smartphone. Hierbei handelte es sich meist um eine eigenständige Website mit eigener URL. Es gab also für Smartphone, Tablets und Desktop-Rechner unterschiedliche Websites.

Die Rolle von Ethan Marcotte

Am 25. Mai 2010 präsentierte der Bostoner Designer und Entwickler Ethan Marcotte in einem viel beachteten Artikel mit dem Titel "Responsive Web Design" einen Lösungsansatz wie Websites auf unterschiedlichen Geräten optimal dargestellt werden können.

Ethan Marcotte zeigte, wie mit einer Kombination von bereits damals verfügbaren Webtechniken Websites flexibel auf verschiedene  Displaygrößen reagieren können (siehe Opens external link in new windowA LIST APART). Es werden nicht mehr verschiedene Websites für Desktop und mobile Geräte benötigt. Die Content-Basis ist für alle Geräte gleich.  Das Layout passt sich dem jeweils zur Verfügung stehenden Platz an. 

Nach Ethan Marcotte besteht Responsive Webdisign aus drei „Hauptzutaten“:

  1. einem fluiden Layout Raster
  2. anpassungsfähige Inhalte
  3. Layout Umbrüchen durch Media Queries

Beim Responsive Webdesign werden die Spaltenbreiten mit relativen statt fixen Größenangaben versehen. Somit kann das Layout auf den zur Verfügung stehenden Platz „reagieren“. Über sogenannte "Media Queries" wird die Displaybreite abgefragt und über CSS werden Layoutumbrüche an definierten "Breakpoints" initialisiert. Weiterhin kann über CSS in Abhängigkeit der Media Queries Einfluss auf die Gestaltung und Sichtbarkeit von Inhaltselementen genommen werden.

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.

Responsive Webdesign (Vorteile)

  • flexible Darstellung auf unterschiedlichen Displaygrößen möglich
  • kein extra URL-Konzept (wie bei eigenständigen mobilen Webseiten)
  • geringere Wartungskosten im Vergleich zu adaptiven Templates (nur ein Templatesatz, kleinere Codebasis)
  • Linearisierung des Contents bietet eine gute Basis für barrierefreie Websites

Einer der größten Vorteile vom Responsive Webdesign 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.

Zusätzlich kann mit RESS Responsive Webdesign serverseitig für mobile Devices optimiert werden. Mit adaptiven Templates kann in Verbindung mit einer serverseitigen Gerätererkennung eine spezifische Optimierung für verschiedene Geräteklassen erfolgen, was i.d.R. jedoch mit höheren Aufwänden verbunden ist.