1. www.wn.de
  2. >
  3. Specials
  4. >
  5. Wn-onlinemarketing-club-newsletter
  6. >
  7. Responsive Webdesign oder separate mobile Website?

  8. >

Newsletter

Responsive Webdesign oder separate mobile Website?

Als Barack Obama und Mitt Romney bei der amerikanischen Präsidentschaftswahl im Jahr 2012 gegeneinander antraten, konkurrierten nicht nur zwei hochrangige Politiker miteinander, sondern auch zwei grundsätzliche Ansätze mobiler Webentwicklung: So setzte das Team um Romney auf eine separate mobile Website, während Barack Obama sich auf einer sog. Responsive Website präsentierte. Der Begriff Responsive Webdesign tauchte zum ersten Mal im Rahmen eines Fachartikels des amerikanischen Designers und Entwicklers Ethan Marcotte im Webdesigner-Blog „A List Apart“ auf. Im Rahmen des Artikels griff  Marcotte die bereits im Jahr 2000 vom Webpionier John Alsopp formulierte Kritik auf, dass das Web nicht denselben Einschränkungen unterworfen sei wie das bedruckte Papier, und dass man beginnen müsse, die von Webseiten gebotene Flexibilität zu nutzen.

Benjamin Wiesrecker

Eine wichtige strategische Entscheidung: Nimmt man besser eine separate mobile Website oder soll die bestehende Website responsive sein? Foto: colourbox.de

Die bis dahin weit verbreitete Strategie, für mobile Endgeräte eine separate Website zu erstellen, wurde damit plötzlich hinterfragt. Normalerweise legte man bis dato eine Website für Anfragen von stationären PCs sowie eine Variante für mobile Endgeräte an. Oftmals wurde die mobile Website als eine reduzierte Variante der stationären Website umgesetzt, d.h. sie enthielt meist weniger Grafiken und Inhalte als die stationäre Seite.

Im Zuge der wachsenden Verbreitung von internetfähigen mobilen Endgeräten wie Smartphones und Tablets wird die Optimierung von Websites für kleinere Displays und mobile Datenverbindungen zunehmend wichtiger. So stieg die Zahl der Smartphone-Verkäufe weltweit von 304,6 Mio. in 2010 auf inzwischen fast eine Milliarde im Jahr. Eine optimale Anpassung der Darstellung für mobile Endgeräte kann wesentlich zum Erfolg beitragen und sich zudem u.a. positiv auf Kundenzufriedenheit und Konversionsraten auswirken.

Aber auch die Anzahl und Vielfalt internetfähiger Mobilgeräte nimmt beständig zu. Von der Smartwatch bis zum internetfähigen TV-Gerät ist praktisch jede Displaygröße von 1-60 Zoll vertreten. Standard-Monitorgrößen gibt es nicht mehr. Und auch die Unterteilung in „mobile“ und „stationäre“ Endgeräte ist fragwürdig. Wo hören stationäre Endgeräte auf und wann beginnt man von mobilen Endgeräten zu sprechen? Wo ist hier die Grenze zu ziehen? Längst verfügen selbst kompakte Geräte, wie Samsungs Top-Model „Galaxy S5“ über FullHD-Auflösung, Mehrkernprozessoren und Arbeitsspeicher im Gigabyte Bereich. Zudem kann man an aktuelle Smartphones und Tablets durchaus Tastatur, Maus und Monitor anschließen und sie somit als vollwertigen Desktop-PC-Ersatz nutzen. Hinzu kommen immer neue Gerätehybriden, wie beispielsweise das Phablet bzw. Smartlet, bei dem es sich um eine Gerätemischung aus Tablet und Smartphone handelt. Eine große Zukunft wird auch Laptop-Tablet-Hybriden, sog. Convertiblesvorausgesagt.

Auch aus diesem Grund etabliert sich Responsive Webdesign (RWD) zunehmend als Alternative zur Erstellung mehrerer Websites für die verschiedenen Geräteformate. Wie eingangs bereits angedeutet versteht man darunter einen Ansatz, bei dem das Layout einer Webseite sich an äußere Gegebenheiten, d.h.  insbesondere die Größe, Auflösung und das Format eines Displays anpasst. Übersetzen lässt sich der Begriff am besten mit der Bezeichnung reaktionsfähige Webseitengestaltung.

Bei separaten mobilen Websites werden, abhängig vom aufrufenden Gerät, unterschiedliche HTML-Dokumente mit jeweils zugehörigen Ressourcen ausgeliefert. Wird eine solche Website mittels Smartphones aufgerufen, werden die speziell für mobile Endgeräte hinterlegten HTML-Dokumente ausgeliefert – wird dieselbe Seite hingegen mittels eines klassischen Desktop-PCs aufgerufen, werden die HTML-Dokumente angezeigt, die für eben jene Ansicht optimiert wurden. Diese Vorgehensweise erfordert, dass die besuchte Seite vor Auslieferung des Inhalts feststellt, ob der jeweilige Besucher mit einem mobilen Endgerät zugreift oder nicht. Hierzu hat sich die Auswertung des sog. User-Agentsetabliert, eine kleine Textzeile, die jedes Gerät bzw. jeder Internetbrowser beim Zugriff auf eine Seite mitsendet.

Anstatt nun für die verschiedenen Gerätekategorien separate Websites auszuliefern, setzt Responsive Webdesign auf eine geräteübergreifende Webseite. Um dennoch auf möglichst allen Geräten eine passende Darstellung zu erhalten, wird ein anpassungsfähiges und flexibles Design benötigt. Drei zentrale Elemente machen Responsive Webdesign aus:

Das wichtigste Element sind dabei die Media Queries, welche es ermöglichen, das Layout an bestimmten Umbruchstellen (engl. breakpoints) zu beeinflussen. Die Umbruchstellen richten sich nach zuvor definierten Medienmerkmalen, wie beispielsweise der Größe des Fensters, der Ausrichtung des Gerätes oder der Pixeldichte des Displays.

Allerdings stellt die Realisierung des Layouts für verschiedenste Bildschirmgrößen mit nur einer einzigen HTML-Codestruktur eine große Herausforderung im Responsive Webdesign dar. Bereits in fest definierten Layouts statischer Webseiten bereiten die Positionierung der Elemente mitunter Probleme. Sollen sich die Seitenelemente nun darüber hinaus an bestimmten Umbruchpunkten verschieben, in ihrer Ausrichtung ändern, verkleinern oder vergrößern, so kann dies – vor allem bei komplexeren Seiten – einen erheblichen Aufwand darstellen.

Die Entwicklungen rund um Responsive Webdesign haben 2010 einen regelrechten Hype ausgelöst. Viele Entwickler und Webdesigner betrachten die Technologie als die zentrale Lösung, um der zunehmenden Gerätevielfalt zu begegnen. Inzwischen werden neue Websites nicht selten kritisiert, wenn sie nicht von vornherein responsive umgesetzt wurden.

Die Entscheidung zwischen Responsive Webdesign und separaten mobilen Websites fällt jedoch nicht immer derartig eindeutig zugunsten anpassungsfähiger Websites aus, wie es vielleicht zunächst den Anschein macht. Es gibt durchaus Argumente, die für eine separate mobile Seite sprechen – insbesondere im Bereich des E-Commerce, oder wenn unterschiedliche Strategien auf der mobilen und stationären Seite gefahren werden sollen. Das zeigt auch die geringe Verbreitung von Responsive Webdesign unter den weltweit größten Websites (beispielsweise Amazon, ebay, bild.de, Facebook).

Der Autor Patrick Voelcker führt in einem Artikel mit dem provozierenden Titel „Warum Responsive Webdesign Schrott ist“ an, dass man auf einer mobilen Website unnötig scrollen müsse, da oftmals Spalten, die normalerweise nebeneinander positioniert sind, auf kleineren Displays schlichtweg untereinander gesetzt würden Dies habe entscheidende Nachteile für die Usability, was durch das Nielsen Buch „Mobile Usability“ teilweise bestätigt wird. Nielsen vertritt die These, dass mit einer reaktionsfähigen Website niemals dieselbe Benutzbarkeit erreicht werden könne, die eine separate mobile Website bieten. Voelcker  führt zudem an, dass die Geschwindigkeit und Ladezeit einer Responsive Website drastisch darunter leide, dass stets der vollständig HTML-Code geladen werden muss – also auch die Bereiche, die auf bestimmten Geräten letztlich ohnehin ausgeblendet werden.

Entscheider müssen also abwägen: Der Vorteil des Responsive Webdesigns liegt vor allem in den geringeren Kosten in der Erstellung und langfristigen Pflege – insbesondere vor dem Hintergrund der immer stärkeren Gerätediversifizierung. Dem gegenüber steht die dedizierte mobile Website, die es ermöglicht deutlich spezifischer auf mobile Endgeräte einzugehen.

Weitere Informationen:

Rund um mobile Websites und Responsive Webdesign

Starkes Wachstum im mobilen Bereich

Infografik: Responsive Webdesign (Englisch)

Startseite
ANZEIGE