Smartphone, Tablet, Desktop - einmal für alle

Responsive Webdesign - das anpassungsfähige Layout



Durch den ständigen Zuwachs mobiler Endgeräte entstehen neue Anforderungen für Webseiten-Betreiber. Denn in der Regel sind Internetseiten, die für den Desktop optimiert wurden auf den kleinen Displays nicht wirklich benutzerfreundlich. Google hat bereits 2012 eine interessante Studie veröffentlicht, nach der der Anteil der Webseitenaufrufe durch Smartphones und Tablets auch in der Zukunft noch weiter zunehmen wird. Desweiteren konnte nachgewiesen werden, dass mobile Nutzer, die nach lokalen Informationen suchen, bezüglich ihrer Suchergebnisse auch in höherem Maße aktiv werden. Es kann also sehr lohnenswert sein, eine optimale Darstellung ihrer Inhalte auf den verschiedenen Ausgabegeräten zu verwirklichen.
Responsive Webdesign - das anpassungsfähige Layout
Mit Responsive Webdesign können sie über ein einziges Template eine optimale Darstellung ihrer Inhalte auf verschiedenen Ausgabegeräten bewirken.

Hier sehen Sie meine aktuelle Startseite auf 3 unterschiedlichen Geräten


(c) 2014 - Axel Seemann-Kahne 
Hierzu bieten sich derzeit verschiedene Möglichkeiten an, diese Anforderungen umzusetzen. Grundlegend ist hier die zunächst die Frage, ob Sie in erster Linie wiederkehrende Stamm-Besucher haben, oder ob sie darauf bauen, von mobilen Nutzern in Suchergebnissen gefunden zu werden. Folgende Möglichkeiten bieten sich an:

  • das Bereitstellen von nativen Apps / HTML5-Apps, die über die Appstores der verschiedenen Plattformen (Windows Phone, Android, IOS, ...) installiert werden können. Nachteile sind hier jedoch der hohe Kostenaufwand für die Entwicklung auf den unterschiedlichen Systemen und die Hürde für Ihre Besucher, eine solche App zuerst einmal installieren zu müssen. Haben sie aber bereits einen wiederkehrenden Kundenstamm, dient eine mobile App natürlich sehr gut zur Kundenbindung.

  • das Bereitstellen einer mobilen Webseiten-Version: Per Browserweiche können bestimmte Geräte erkannt und zu einer mobilen Version umgeleitet werden. Dies bedeutet jedoch, dass Sie hier mehrere System pflegen müssen: Einmal hinsichtlich redaktionellen Inhalts und Bildmaterials. Und sollten Sie ihr Angebot und ihre Template einmal erweitern, müssen Sie in der Regel auf 2 Plattformen parallel weiterentwickeln. Weiterer Nachteil: Auflösungen und Formate von mobilen Geräten sind derart heterogen, dass eine weitere Version ihres Internet-Angebots auch nur ein Kompromiss darstellt. Wenn Ihre Kunden jedoch über den mobilen Zugang nur bestimmte ausgewählte Inhalte sehen sollen, ist eine mobile Webseiten-Version möglicherweise die richtige Wahl.

  • Responsives Webdesign: Anstatt eines festen Layouts besteht Ihre Webseite hier aus einem flüssigen Raster, welches sich entsprechend der Browserfenstergrößen anpasst. Das bedeutet, dass sich ein Template sowohl an ein Full-HD-Display am Desktop, an eine geringere Auflösung am Tablet sowie an ein kleines Smartphone-Display anpassen kann. Zwar ist die Entwicklung eines Responsiven Templates ebenfalls etwas aufwändiger, jedoch können sie dabei an ein System für alle Plattformen und Endgeräte aufbauen und weiterentwickeln.

Aus technischer Sicht bedeutet Responsive Webdesign ein Umdenken von festen Größen zu prozentualen Größenangaben von Layoutelementen und Schriften. Es orientiert sich auch nicht an den verschiedenen Geräten, sondern an den darzustellenden Inhalten. Erst wenn Inhalte nicht mehr optimal dargestellt werden können, kommen hier noch - neben den fließenden Rasterlayouts die Möglichkeiten des Adaptive Webdesigns hinzu. 

Media Queries und Breakpoints

Dies bedeutet, dass hier durch den Einsatz sogenannter Media Queries bei dem Erreichen bestimmter Größen - sogenannter Breakpoints - auf eine andere Darstellung umgeschaltet werden kann: Wird ein Bild zu klein, kann es ausgeblendet oder durch ein alternatives Format ersetzt werden - oder es kann beispielsweise die Navigation für die Bedienung auf einem kleinen Smartphone-Touchscreen durch größere Finger-taugliche Buttons optimiert werden.

Adaptive vs. Responsive

Es ist natürlich auch möglich, rein auf Adaptive Webdesign zu setzen und auf flüssige Layouts zu verzichten. Hier würde man dann feste Pixelwerte als Breakpoints setzen, die zum Beispiel auf folgenden Größen-Annahmen beruhen:
  • Smartphones: 320px bis 480px
  • Tablets: 768px bis 1024px
  • Desktop: 1024px und höher 
Zwar verspricht diese Vorgehensweise eine bessere Kontrolle über die jeweiligen Layouts und Bildergrößen. Allerdings wird sich in der Praxis zeigen, dass es viele Geräte gibt, die von diesen Normen abweichen und deren Display-Größen somit nicht optimal genutzt werden können.

Fazit

Responsive Webdesign ist eine Abkehr von absoluten Layouts und sollte auch nicht auf die Optimierung von 2 oder 3 Geräten begrenzt werden, womit man lediglich von einem starren Gerät ins andere blickt. Vielmehr sollte man sich mit der Vielfalt an Betrachtungsmöglichkeiten auseinandersetzen und anerkennen, dass man sich hier für alle auf dem Markt befindlichen - und auch zukünftigen - Geräte wappnen kann.

Mobile Webseiten-Versionen sind eventuell sinnvoll, wenn nur bestimmte Bereiche des Internetauftritts für den mobilen Zugang bereitgestellt werden sollen.

Für größere Projekte mit einer großen Anzahl von Nutzern ist der größere Aufwand für die Erstellung von Apps für verschiedene Plattformen zu rechtfertigen.


Zurück zur Übersicht