Responsive oder adaptive Lösung für mobile Seiten?

Grundsätzlich nimmt der mobile Traffic immer weiter zu. Teilweise sind schon Zugriffe von über 40% zu verzeichnen. Zusammen mit den Tablet Usern kann hier der Traffic schon 50-60% bedeuten. Für viele Seitenbetreiber stellt sich nun die Frage, wie kann ich diesen Usern nun ein besseres Surferlebnis bieten.

Sehr schnell wird hier der Begriff „responsive“ in den Raum geworfen. Ähnlich wie  damals mit Web 2.0 wird dies als Lösung für alles angesehen.
Aber ist es wirklich so?

Was bedeutet „Responsive“ und „Adaptive“?

Responsive Design bedeutet, dass der gesamte Content und die Templates sich je nach der Bildschirmauflösung automatisch anpassen.

Adaptives Design bedeutet, dass hier extra für z. B. „mobile“ eigene Templates vergeben werden und die Seite meist über eine Subdomain erreicht wird. (m.domain.de).

Beide Technologien haben Vor- und Nachteile und es lässt sich keine wirklich 100% Lösung vorhersagen.

Jeder Seitenbetreiber sollte sich einmal gut mit dem Thema beschäftigen und im Vorfeld bestimmte Dinge klären, bevor er mit der Umsetzung beginnt und ggf. wichtige Ressourcen blockiert. Grundsätzlich ist es auch sehr vom Business der Seite abhängig.
Eine private Seite sollte schon auf ein responsive Design setzen. Agenturen, Selbständige usw.  sollten auch eher diesen Weg einschlagen. Unternehmenswebseiten sollten abwägen aber auch hier wäre der responsive Ansatz vermutlich der bessere.  Hier kommt es dann schon auf den gesamten Content an, der angeboten wird.  Werbebetriebene Portale sollten sehr gut abwägen. Grundsätzlich haben die meisten großen News und Content Portale eine „adaptive“ Lösung gewählt. Das hängt zum einen sehr viel mit dem Vermarkter zusammen, denn „responsive“ Ausspielungen von Anzeigen sind noch lange nicht so weit bzw. perfekt. Zum anderen natürlich auch die Masse an Content, die diese Portale täglich verbreiten. Und der Content kann beim adaptiven Design besser für die Bildschirmauflösung angepasst werden bis hin natürlich auch zur eigenen App.

Vorteile und Nachteile

Responsive
Ein großer Vorteil bei Reponsive Seiten ist, dass nicht parallel entwickelt werden muss. D. H. die Widgets, Templates und Content usw. gelten dann für alle Ansichten. Im ersten Moment könnte man nun sagen, super da sparen wir uns Budget. Aber natürlich gibt es auch einen Nachteil bei dieser Lösung was viele unterschätzen. Es bedeutet zu Beginn eine genaue Planung der Templates und des Contents und der IT Aufwand ist auch nicht zu unterschätzen, denn es muss ev. ein passendes Framework gefunden und angepasst werden, es muss viel getestet werden und vermutlich müssen doch Mediaqueries eingebunden werden. Ebenfalls muss im Content immer wieder drauf geachtet werden, ob Tabellen usw.  zum Einsatz kommen, es müssen die richtigen Bilder gezogen werden und vieles mehr.

Adaptive
Bei adaptiven Design ist es genau umgekehrt.
Hier kann der Content angepasst und alles genau optimiert werden. Dafür aber ist der Aufwand zu Beginn höher und die technische Pflege ist etwas aufwendiger. Möglich ist aber, dass der Content nur einmal angelegt wird und dann über die Template Engine komplett anders gerendert wird. Dieses funktioniert bei responsiven Lösungen leider nicht. Ebenfalls können hier andere Scripte usw. gezogen und verwendet werden, wo gegen bei Responsive erst einmal alles geladen wird, sofern man hier technisch nicht zusätzliche Abfragen integriert.

Aus SEO Sicht ist es relativ egal. Nur muss Google z. B. bei der adaptiven Methode mitgeteilt werden, dass es sich hier um den mobilen Content der Seite handelt, z B. durch die Verwendung eines Canonical Tags.

Tipps

Bei responsive Design gibt es eine Lösung um die passenden und optimierten Bildgrößen auszuspielen. Und zwar sollte über eine Browserweiche abgefangen werden, ob es sich um ein mobiles Device handelt. Die einfachste Möglichkeit ist hier den Viewport abzufragen. Dieses sollte so weit oben wie möglich im Code passieren. Wird ein „true“ zurückgeben, so werden die Bilder aus dem Ordner „mobile optimiert“ gezogen, wenn ein „false“ zurückgegeben wird, dann natürlich aus dem Standard Ordner. Ist mit PHP sehr schnell und einfach umgesetzt.

Im Zusammenhang mit responsive Design werden auch immer öfter sog. „One Pager“ Seiten erstellt. Auch hier ist es wieder abhängig vom Businessziel der Seite, es darf die Ladezeit nicht außer Acht gelassen werden und die SEO Sicht darf auch nicht vergessen werden, da bei One Pager der gesamte Content nur auf einer Seite ist und es keine weiteren internen Links usw. gibt.