Seit 2015 gibt es mehr Internet-Zugriffe über Smartphones und Tablets als über klassische Desktop-Rechner. Der Zugriff erfolgt mit den unterschiedlichsten webfähigen Geräten von fast jedem Ort.
Betreiber von Websites stehen vor folgenden 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 Herausforderungen meistern?
Bereits vor 10 Jahren präsentierte der Bostoner Designer und Entwickler Ethan Marcotte in einem viel beachteten Artikel mit dem Titel "Responsive Web Design" 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). 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“:
- 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
