• Header Responsive Design

Responsive Design für mobile Webseiten

Responsive Design ist eine Technik, mit der jede Seite optimal an verschiedene Endgeräte wie den PC, das Smartphone oder das Tablet angepasst werden kann. Die entscheidende Frage, ob für die Benutzer unterschiedlicher Endgeräte auch jede einzelne Seite relevant und nutzbringend ist, wird dabei oft vernachlässigt.

Tablets und Smartphones boomen und immer mehr Mensch nutzen sie zunehmend als Informationsquelle. Der Ruf nach entsprechend optimierten Webseitenversionen wird daher immer lauter. Traditionell wird für die Darstellung auf mobilen Endgeräten extra eine neue mobile Webseite mit eigener Struktur, angepasstem Layout und entsprechend aufbereiteten Inhalten erstellt. Ein Knackpunkt: Die unterschiedlichen Versionen müssen dann auch parallel betrieben und gepflegt werden. Und genau diese doppelte Pflege von Inhalten gelingt in der Praxis nur selten. Der Beleg: Ärgerliche Fehlermeldungen wie „Dieser Artikel ist in der Mobilversion nicht abrufbar. Bitte wechseln sie zu www... und versuchen Sie es erneut!“Da daraufhin oft nur der Link zur Startseite des entsprechenden Auftritts verfügbar ist, verliert der User die Lust – und surft auf und davon.

Alles eine Frage der Technik

Auch die technische Lösung, die bestimmt, welche Webseite dem Besucher angezeigt wird, ist nicht immer optimal. Die Probleme beginnen damit, dass Tablets mit hoher Auflösung die gleichen Browser wie Smartphones verwenden. Eine ursprünglich für einen Viewport von 360 Pixeln optimierte Version einer mobilen Webseite kann so schnell auf 1.280 Pixel oder mehr gestreckt werden. In der Folge ist die Seite nicht mehr gut lesbar. Weiterhin ungünstig: Nachdem die Desktop-Version der Seite geladen ist, schaltet das Gerät nachträglich auf Javascript-Basis um - und lädt die Seite erneut. Für den Nutzerbedeutet das unnötigen Traffic und eine längere Wartezeit.

Die Lösung

Responsive Design bietet einen Ansatz, der diese Hürden komplett umgeht: Für dieselbe Webseite stehen verschiedene Layouts bereit, die für die unterschiedlichen Endgeräte optimiert sind. Mittels moderner Webtechnologien aus den Standards zu HTML5 und CSS3 kann der Browser nun selbst entscheiden, welches Layout er anzeigt – etwa über die Definition der Größe des Anzeigefensters.

Vorteile vs. Nachteile

Die Vorteile von Responsive Design liegen klar auf der Hand: Die Gefahr toter Links und Fehler aufgrund doppelter Pflege entfallen und eine weitaus feinere Abstufung in der erforderlichen Darstellung wird möglich. Für moderne Smartphones mit großen hochauflösenden Displays lassen sich detailreichere Layoutvarianten gestalten – und für Tablets nochmals genauere. Und selbst auf Desktopbrowsern kann der Nutzer die Darstellung abhängig vom verfügbaren Platz optimierten. Ein weiteres Plus: Die Technik reagiert dynamisch auf das Drehen eines Smartphones oder Tablets. Und auch die Größe des Desktopfensters lässt sich ändern, ohne dass die Seite neu geladen werden muss.

Ist damit die Zeit der eigenständigen mobilen Webseite gezählt? Betrachtet man den aktuellen Hype dieser Entwicklung, möchte man dies bejahen. Doch der Schein trügt.

Content ist König

Beim reinen Responsive Design gehen Entwickler davon aus, dass der Inhalt einer Webseite für jeden Besucher gleichermaßen interessant ist – einerlei, ob er mit einem stationären oder mit einem mobilen Gerät auf die Inhalte zugreift. Für Auftritte mit starkem Fokus auf den Inhalt trifft dies auch sicherlich zu. Auftritte aber, die eine bestimmte, an das Layout gekoppelte Nutzerführung favorisieren oder komplexe Übersichten anbieten, sind hier deutlich im Nachteil. Technisch ist es zwar möglich, ein 4x3-Raster von Teasern in der Mobilversion untereinander darzustellen. Ob dies allerdings einen Mehrwert für den Besucher darstellt, ist fraglich.

Zweigleisig fahren

Es ist deshalb durchaus sinnvoll, neben der Hauptpräsenz einen Auftritt anzubieten, der mobile Besucher schnell ans Ziel führt. Denn auch getrennte Webseitenversionen können von den Techniken des Responsive Layouts profitieren: Der Nutzer eines Smartphones kann durchaus auf die Desktopversion umschalten wollen. Und für eine reduzierte mobile Webseite ist die optimierte Layoutanpassung für Geräte unterschiedlicher Auflösung ein wichtiger Punkt.

Fazit: Responsive Design ist eine Technik, mit der jede Seite optimal an ein Endgerät angepasst werden kann. Fraglich ist aber, ob für die Benutzer unterschiedlicher Endgeräte auch jede einzelne Seite relevant und nutzbringend ist.

opus 5 berät Sie gerne bei der Analyse der Anforderungen Ihres Webauftritts und bei der Konzeption einer optimalen mobilen Version. Wir freuen uns auf Ihre Kontaktaufnahme!