Website Optimierung für Smartphones und Tablets

Beispiel einer responsiven Website
Im Responsive Webdesign passt sich die Darstellung einer Website automatisch der Größe des Displays an

Responsive Webdesign beschreibt eine Technik, die es erlaubt, die Inhalte einer Internetseite auf der wachsenden Anzahl aller möglichen mobilen Endgeräte optimal darzustellen. Dies beruht auf dem Umstand, dass die zur Verfügung stehende Darstellungsfläche (als "Viewport" bezeichnet) immer variabel ist - und die Inhalte somit dynamisch angepasst, sortiert bzw. angeordnet werden müssen. Responsive Webdesign gewährleistet somit, dass alle notwendigen Informationen immer optimal erfasst werden können, egal, ob sie auf einem Handy bzw. Smartphone, Tablet, Smart-TV oder Desktop-PC dargestellt werden sollen.

Der Trick ist, die gesamte Website mittels des neu verabschiedeten HTML5-Standards und der sogenannte CSS3 Media Queries so flexibel zu gestalten, dass sie sich der jeweiligen Displaygröße und -auflösung automatisch anpasst. Dabei ist es zielführend, eine durchgehend optimale Bedienbarkeit zu gewährleisten, und alle Inhalte gänzlich und bequem erfassbar zu machen. Hierzu werden sogenannte Breakpoints eingesetzt: Punkte, bei denen das Design abhängig von der Größe des Viewports umspringt. Breakpoints können beispielsweise in Pixeln oder Prozent angegeben werden. Generell gilt jedoch: Je kleiner der Viewport bzw. die Auflösung eines Monitors ausfällt, desto wichtiger ist die Konzentration auf den Inhalt. Das Design muss also, je weniger Raum zur Darstellung bleibt, weiter in den Hintergrund treten. In diesem Sinne wird häufig von einem "Mobile first"-Ansatz gesprochen: Die Website wird zunächst für den kleinstmöglichen Viewport entwickelt (z.B. ein Smartphone), und bewußt auf die wesentlichen Inhalte reduziert. Mit der Erweiterung für größere Displays werden dann weitere, nicht unbedingt relevante Informationen hinzugefügt.

Die Vorteile responsiven Webdesigns

Statistiken und Trends zu der Nutzung mobiler Endgeräte zeigen, dass es zusehends bedeutsamer wird, die Darstellungsmöglichkeiten auf Smartphones und Tablets schon bei der Konzeption einer Website zu beachten.

Responsive Webdesign hört nicht bei Endgeräten wie dem iPhone, Samsung-Handy, iPad oder Google Nexus auf, sondern bezieht auch die Darstellungsmöglichkeiten auf Smart-TVs, Wearables, Smart Watches oder Beamern mit ein. Der laufende technische Fortschritt zeigt, dass die nahe Zukunft noch weitere, neuartige Anforderungen für Webdesigner mit sich bringen wird.

Im Gegensatz zu den früheren, strikt getrennten und separat zu administrierenden Versionen einer Website, ist mit der Technik des Responsive Webdesigns weniger Aufwand in der redaktionellen Pflege der Inhalte zu erwarten.

Praxisbeispiel gefällig? Testen Sie Responsive Webdesign an dieser Website!

Packen Sie dieses Browser-Fenster unten rechts an, und verändern Sie die Größe des Fensters bei gedrückter Maustaste. Sie werden feststellen, wie sich Größe, Position und sogar Anordnung der Inhalte ändern - Abhängig von den aktuellen Abmessungen des Fensters!

Weiterführende Links zum Thema "Responsive Webdesign"

Responsive Webdesign ist die Zukunft moderner Websites

Aktuelle Studien und Statistiken belegen stetig wachsende Absatzraten von Handys bzw. Smartphones und Tablets. Weltweit setzen sich Entwickler euphorisch mit den Möglichkeiten des Responsive Webdesigns auseinander, so dass Fachzeitschriften und Szene-Blogs regelmäßg über neue Möglichkeiten der technischen und grafischen Umsetzung von Webseiten für mobile Endgeräte berichten. Die geräteübergreifende Flexibilität spielt eine tragende Rolle, und entwickelt sich zusehends zu einem neuen Standard.

Die Nachhaltigkeit responsiver Internetseiten ist ein weiterer, wichtiger Aspekt. Da der gesamte redaktionelle Content einer Website nur einmal angelegt werden muss, fällt auch für zukünftige Endgeräte und differenzierende Auflösungen kein weiterer Zusatzaufwand an.

Update 21.04.2015:

Google hat heute offiziell angekündigt, dass Websites, die für die Darstellung auf mobilen Endgeräten optimiert sind, in den Suchergebnissen (SERPs) bevorzugs dargestellt werden. Ob die eigene Website die "mobile-friendly"-Kriterien erfüllt, kann hier überprüft werden:

Responsive Webdesign vs. Mobile Webdesign (a.k.a Adaptive Webdesign)

Früher war es üblich, eine zweite, "mobile" Version einer Website zu entwickeln, und diese aus Kompatibilitätsgründen parallel zu der regulären Desktop-Version anzubieten. Diese gemeinhin auch als "Adaptive Webdesign" bezeichnete Technik erweist sich heutzutage nicht mehr als praktikabel. Angesichts der stetig wachsenden Zahl der in Frage kommenden Endgeräte steht der Aufwand, diverse Templates erstellen zu müssen, in keiner Relation zum Nutzen.

Vier beispielhafte Nachteile von Adaptive Webdesign:

  • Die Website ist meist nur für wenige bestimmte Viewports optimiert. Dadurch ergeben sich fast automatisch fehlerhafte Darstellungen bei abweichenden Endgeräten.
  • Es müssen immer mindestens 2 Layouts parallel gepflegt werden.
  • Oftmals gibt es zwei oder mehr verschiedene URLs, die aber die gleichen Inhalte liefern. Aus Sicht der Suchmaschinenoptimierung nicht optimal.
  • Zur Bestimmung relevanter Viewports bzw. Endgeräte sollte im Vorfeld eine Zielgruppenanlyse durchgeführt werden. Dies ist nur möglich, wenn in der Vergangenheit entsprechende Daten erhoben worden sind, beispielweise über Google Analytics.

Da beim Responsive Webdesign nur eine einzige Version der Website erstellt werden muss, und sich diese selbstständig an die durch das Endgerät definierten Rahmenbedingungen anpasst, ist diese Herangehensweise dem Mobile bzw. Adaptive Webdesign vorzuziehen.