Mobile First: Webpages im Wandel der Zeit
Ganz gleich welche Webseite Sie mit Ihrem Smartphone oder Tablet aufrufen, Sie gehen davon aus, dass die Webseite ohne nach links und rechts scrollen lesbar ist und auch alle Funktionen nutzbar sind. Dies wird heute durch responsives Webdesign sichergestellt. Allerdings war es nicht immer so.
Als immer mehr Menschen mit ihren mobile Endgeräten im Internet surften, musste eine Lösung für die kleineren Bildschirme, die im Gegensatz zum Desktop System auch noch ein Hochformat besaßen, gefunden werden. Die Lösung war ein zweites Design, das ausschließlich für mobile Endgeräte erstellt und umgesetzt wurde. Das Design der mobil optimierten Webseite konnte dabei komplett von dem der "normalen" Webseite abweichen, auch weil die mobilen Browser früher noch nicht alle Webstandards unterstützten oder schlichtweg nicht leistungsfähig genug für komplexere Anwendungen waren.
Oft hatte diese Trennung der Darstellung zur Folge, dass es unterschiedliche Inhalte auf den verschiedenen Endgeräten gab. Im Laufe der Jahre kamen immer weitere Endgeräte mit unterschiedlichen Bildschirmgrößen und Auflösungen hinzu, wie z.B. Phablets, Mini-Tablets und Tablets. Die Webseite für jedes Endgerät zu optimieren, wäre durch die Vielzahl der Gerätetypen zu aufwändig, weshalb man zum responsiven Webdesign übergangen ist. Mittlerweile sind die mobilen Geräte in Sachen Webstandards gleichauf und in Sachen Leistung sogar besser als mancher Desktop PC.
Eine mobile Variante war ein Kompromiss um die Seiten auch auf mobilen Geräten lesbar darstellen zu können. Der Kunde wollte seine Webseite nicht komplett neu gestalten und man hat auf die Schnelle eine kostengünstige mobile Variante erstellt. Bei einem kompletten Relaunch denken wir schon seit Jahren responsiv.
Anbei ein sehr einfaches Beispiel, wie sich das Desktop und mobile Layout unterscheiden können:
Anbei ein Beispiel für ein responsives Design. Das Layout bleibt beim Sprung von Desktop auf Tablet unangetastet und die einzelnen Elemente werden kleiner skaliert. Lediglich das Menü wird in ein "Burger Menü" überführt. Beim Sprung zum Smartphone wird neben dem Menü auch die Anordnung der Spalten geändert. Diese ordnen sich jetzt untereinander an und haben die gleiche Breite.
Ein großer Vorteil des responsives Webdesigns besteht darin, dass die Inhalte für alle Endgeräten nur einmal gepflegt werden müssen. Die Elemente, in denen sich die Inhalte befinden, verändern sich nach vorgegebenen Sprungmarken. Die Sprungmarken stellen hierbei die Auflösungen dar, bei welcher sich die Anordnung ändert.
Sollte es in Zukunft eine neue Geräteklasse geben, kann mit geringem Aufwand und einer neuen Sprungmarke das Layout angepasst werden.
Auch im Zuge der Suchmaschinenoptimierung ist es ratsam die Webseiten responsiv anzulegen. Seiten, die nicht richtig mobil dargestellt werden können, werden von google abgestraft.