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 diese neuen Herausforderungen meistern?
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 
A 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.
Nach Ethan Marcotte besteht Responsive Webdisign aus drei „Hauptzutaten“:
- einem fluiden Layout Raster
- anpassungsfähige Inhalte
- 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
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.
Responsive Webdesign ist der aktuell populärste Lösungsansatz, mit dem sich die meisten Anforderungen bewältigen lassen. 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.
Hintergrundinformationen
Projektreferenzen
