25% aller Internetnutzer benutzen das Web ausschließlich über ein mobiles Endgerät. Diese Zahl ist zwar ein weltweiter Durchschnitt, verrät aber, wo die Entwicklung hinführt.
Responsive Webdesign unterscheidet nicht nur zwischen Desktop und mobiler Website, sondern allem dazwischen: vom übergroßen Smartphone (phablet) über die mittlerweile zahllosen Größen von Tablet-PC und Netbooks, hin zu den Notebooks und 27-zölligen Desktop Monitoren. Und alles, was in Zukunft noch dazukommen wird. Und das alles, mit der selben Code-Basis.
Webseiten die responsive sind, sind auf allen Geräten leichter zu lesen und zu navigieren - und reduziert Vergrößern / Verkleinern, horizontales scrolling und Änderung der Ausrichtung des Geräts auf ein Minimum. Die Website funktioniert in allen Dimensionen und es gibt keine Abstriche bei der Ästhetik.
Zusätzlich wird Rücksicht auf die Eingabe-Möglickeiten des benutzen Geräts genommen, zum Beispiel Touch-Bedienung.
Vorteile:
- nur ein URL (keine "m.meine-domain.de“, oder „wechseln sie zur Desktop-Ansicht mehr)
- Keine doppelte Pflege von Inhalten (schnellere Updates)
- Eine einzige Code-Basis (gut für Maintenance, SEO)
Wie funktioniert das?
Sogenannte „media-queries“ im CSS lesen die verfügbare Breite des Bildschirms aus (in speziellen Fällen auch die Höhe) und stellen die Inhalte entsprechend der Größe dar. „Break-points“ erlauben dies Stufenlos oder in Intervallen: Zum Beispiel kann die Spaltenbreite „fluide“ (also so breit wie der Bildschirm) sein, die Navigation wird aber erst ab 768px in Gänze angezeigt - darunter ist sie hinter dem sog. „Hamburger“-Icon, dem Symbol für Navigation, versteckt. Breakpoints können für verschiedene Geräteklassen gesetzt werden, oder immer dann, wenn der Inhalt durch die Größe eine andere Darstellung erforderlich macht.
Zwei der wichtigsten Eigenschaften, über die responsive Websites gegenüber reinen mobilen Webseiten verfügen müssen, sind die sogenannten „flexiblen Grids“ – eine Art virtuelles Spaltensystem, über das Inhalte angeordnet werden können, und flexible Bilder.
Ist das für mich interessant? Warum sollte ich auf responsive umrüsten?
Hierzu ein paar interessante Zahlen*: Es wird geschätzt, das die mobile Nutzung des Internets die Desktop-Nutzung noch in diesem Jahre (2014) übersteigen wird. Hergeleitet wird diese Schätzung anhand der Steigerung der Desktop-Nutzer vom Jahre 2009 von 1,4 Milliarden Nutzern auf 1,9 Milliarden im Jahre 2015 – wobei die mobile Nutzung von 800 Millionen auf 1,9 Milliarden im selben Zeitraum ansteigen wird.
Das Feedback der mobilen Nutzer ist entsprechend:
46% der befragten Nutzer nannten Probleme beim Besuch von konventionellen Seiten (und wer das selbst mal probiert hat, den wird die Aussage kaum verwundern – sind wir doch durch Amazon, Facebook und vergleichbare Anbeiter in Sachen mobile bereits durchaus verwöhnt). 44% erwähnten die Handhabung der Navigation als eine der Haupt-Schwierigkeiten auf kleinern Displays – auch nicht weiter verwunderlich!
Googles Friend:
Hohe Benutzerfreundlichkeit, geringerer Wartungsaufwand und generell bessere Performance auch auf dem Desktop sind gute Gründe für „responsive“, aber auch Google honoriert dieses Vorgehen:
„Google empfiehlt Webmastern responsive Webdesign als best-Practise zu nutzen; namentlich das selbe HTML-Konstrukt für alle Endgeräte auszuliefern und über CSS-media-queries dessen Rendering zu steuern.“
*Quelle: T3n – Analyse von Morgan Stanley