Responsive Webdesign mit mobilen Seiten kombinieren

Responsive Webdesign ist in den allermeisten Fällen die bevorzugte Variante. Auch Google spricht sich ganz klar für diese Responsive Webdesign als Alternative zur klassischen mobilen Darstellung aus. Oft steht man allerdings noch vor der Frage, ob man nun zusätzlich zum Responsive Webdesign noch eine mobile Version anbieten soll, oder ob man bereits vollständig darauf verzichten soll.

Responsive Webdesign oder mobile Ansicht

Die Vorteile einer speziellen mobilen Version sind weiterhin die geringere Datenübertragung durch weniger Inhalt und die noch stärkere Anpassungsmöglichkeit an die mobile Darstellung. Die Pflege von speziellen mobiloptimierten Seiten erfordert allerdings grundsätzlich mehr Aufwand. Responsive Webdesign ist zwar für Entwickler und Designer mehr Aufwand, der Redakteur hingegen bekommt davon praktisch nichts mit und kann so ohne Mehraufwand auch mobile Endgeräte ordentlich bedienen.

Dass sich aufgrund der immer höheren Bandbreiten und der inzwischen schier unendlichen Anzahl an Auflösungsvarianten, sowie des immer fließenderen Übergangs zwischen Smartphones und Tablets Responsive Webdesign immer mehr durchsetzt, ist nur logisch. 

Die entweder-oder Frage stellt sich also zukünftig immer weniger, da klassische mobile Webseiten aufgrund der technischen Weiterentwicklung gegenüber Responsive Webdesign an Bedeutung verlieren werden.

Mobile Varianten einzelner Seiten

Um Ihnen die Entscheidung zu erleichtern, ob Sie bereits auf die klassische mobile Variante verzichten können oder ob Sie diese doch noch anbieten müssen, haben wir in der aktuellen BASE-Version die Möglichkeit geschaffen, die normale Webseite, die inzwischen standardmäßig Responsive Webdesign unterstützt, um mobile Varianten einzelner Seiten zu ergänzen.

So werden alle Seiten z.B. über Responsive Webdesign für Smartphones und Tablets optimiert ausgeliefert, während Sie spezielle Seiten manuell optimieren können. Eine Startseite kann z.B. zusätzlich in einer mobilen Variante angeboten werden, wenn diese sonst zu umfangreich wäre. 

Automatische Weiterleitung auf alternative mobile Seiten

Wenn Sie im Projekt z.B. definiert haben, dass für Geräte mit weniger als 480 Pixel eine spezielle Variante erstellt werden kann, und der Redakteur für eine Seite eine solche mobile Variante einträgt, wird beim Aufruf geprüft, ob das Endgerät die Originalseite oder die für die mobile Ansicht optimierte Seite angezeigt bekommt.

Ruft man die Startseite also z.B. mit einem iPhone auf, welches bei der Viewport Einstellung width=device-width eine Bildschirmbreite von 480 Pixel nutzt, wir der Benutzer bereits im HTML-Header auf die alternative Seite weitergeleitet. Aufgrund des Device-Pixel-Ratios von 2 ist dies auch für aktuelle iPhones mit Retina Display der Fall. 

Gleichzeitig wird automatisch ein Alternativ-Link im Header eingetragen und der Vary-HTTP-Header gesetzt, so dass auch Google erfährt, dass es sich um eine spezielle Alternative handelt, die abhängig vom Endgerät angeboten wird. In der alternativen Seite selbst kann zusätzlich über das Canonical-Tag auf die Originalseite verwiesen werden.

Fazit

Statt entweder auf die eine oder auf die andere Technik zu setzen, können Sie nun kombinieren. Sie können weiterhin eine komplette mobile Variante anbieten, Sie können ausschließlich auf eine responsive optimierte Seite setzen oder Sie können nun beide Welten kombinieren. Mit der Weblication Lösung setzen Sie auf einen suchmaschinenoptimierten und von Google empfohlenen Ansatz. Sie können einzelne Seiten bei Bedarf komplett für mobile Geräte optimieren, ohne den Entwicklungsaufwand überproportional zu steigern. Die Kombinationslösung ist gleichzeitig ein einfaches Prinzip, das von Redakteuren sehr transparent genutzt werden kann.