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 
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.
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
