Die große „Mobilmachung“ (Teil 2) – So meistern Sie den mobil-optimierten Relaunch
Trackback URL
Im Bereich Webdesign und deren Programmierung haben in den letzten Jahren eine Reihe innovativer Trends sowie neue Google-Regeln für Furore gesorgt. Nicht nur die Nutzung des Internets über mobile Endgeräte nahm stark zu, sondern damit verbunden auch die Vielfalt der Bildschirmgrößen. Damit ist eine perfekte Darstellung der Webseiten immer eng mit dem jeweiligen verwendeten Gerätetyp verbunden.
Gleichzeitig macht Google seit 2015 die Platzierung in den Suchergebnissen von der Usability der mobilen Websites abhängig. Auch aus SEO-Sicht ist Mobilfreundlichkeit von Seiten damit ein hochrelevantes Thema.
Nachdem es in Teil 1 insbesondere um die Anforderungen an mobil-optimierte Seiten ging, behandeln unsere Autoren Otto Geissler und Andreas Öttl nun die Alternativen der technischen Umsetzung. Weitergehende Informationen finden Sie auch im Factsheet "Responsive Design".
Folgende Verfahren kommen insbesondere in Betracht:
- Adaptives Layout
- Responsives Layout
- Dynamische Bereitstellung
- Alternative URL
- Webbasierte, hybride oder native Apps
Das früher meist verwendete, fixierte oder auch statische Design, welches durch feste Spalten- und Seitengrößen definiert ist, kann sich nicht an verschiedenen Größen der Browser bzw. Displays anpassen und kommt somit aus heutiger Sicht nicht mehr als Alternative in Betracht.
Adaptives Layout
Diese Variante besteht im Wesentlichen aus einem starren Gestaltungsraster. Das heißt, es werden bestimmte Ansichten (Viewports) für ausgewählte Display-Skalierungen erstellt. Dazu zählen im Grunde eine Desktop-, Tablet- und Smartphone-Ansicht. Diese Viewports sind an den herkömmlichen Geräteskalierungen ausgerichtet. Dabei entstehen in der Praxis schnell Probleme. Zum Beispiel können Tablets fehlerhafte Handy-Viewports laden, da diese über ähnliche Größen verfügen.
Responsives Layout
Ein responsives oder reaktionsfähiges Webdesign steht für eine Umsetzung, bei der sich die Website automatisch an die Größen des Displays anpasst. Im Vergleich zu den adaptiven Webseiten verwendet das Responsive Design ein flexibles Gestaltungsraster, das sich elastisch an die jeweiligen Anforderungen anpasst. Dabei wird allen Geräten der gleiche Code bereitgestellt und es kommen keine fest definierten Viewports zum Einsatz. Responsive Layouts sind daher für alle Endgeräte gleichermaßen geeignet.
Dynamische Bereitstellung
Hier werden den einzelnen Endgeräten verschiedene Quellcodevarianten (HTML und CSS) zur Verfügung gestellt. Es wird nur eine URL verwendet. Der Server entscheidet, welchen Quellcode er ausliefert. Der angeforderte Content wird dann mit einem Vary-Header an das Endgerät angepasst. Der technische Aufwand ist relativ groß und bei der Erkennung der Endgeräte können des Öfteren Fehler entstehen. Zudem sind die Kosten für eine dynamische Bereitstellung meist höher als beim Responsiven Layout.
Unterschiedliche URL
Bei dieser Lösung werden Inhalte gezielt für einzelne Endgeräte optimiert und unter gesonderten URLs bereitgestellt. Bei einer solchen Konfiguration wird das Gerät des Users erkannt und per HTTP-Weiterleitungen und Vary-HTTP-Header auf die jeweilige Website geführt. Beispiel: http://m.domain.de
Kritische Beurteilung
An responsive Design führt trotz einiger Nachteile kein Weg vorbei. Leistungsstarke Frameworks wie Bootstrap oder AngularJS könen die Effizienz deutlich erhöhen.
Im Grunde unterstützt Google die Konfigurationen Responsives Webdesign, dynamische Websites sowie Websites mit separaten URL. Auch das Bereitstellen von Inhalten in Apps ist möglich und kann von Google indiziert werden. Hierauf soll hier jedoch nicht näher eingegangen werden. Google benachteiligt keine der genannten Methoden, empfiehlt jedoch an mehreren Stellen Responsive Design. Für den Nutzer macht es – insofern die genannten Standards zur Usability umgesetzt werden – keinen Unterschied.
Responsive Design bietet – wie auch die anderen Methoden - nicht nur Vorteile. Zum Beispiel sind ältere Browser-Versionen wie der Internet Explorer 6 oder Internet Explorer 8 nicht (vollständig) mit den Anweisungen des Responsiven Webdesigns kompatibel. Dieses Argument verliert jedoch immer weiter an Gewicht. Der Anteil solch alter Browserversionen ist heute verschwindend gering. https://www.browser-statistik.de/statistiken/versionen/
Zudem kann die Konfiguration nicht auf die Betriebssysteme oder Funktionen der Handys wie zum Beispiel Kameras, GPS etc. zugreifen. Um derartige Funktionen zu nutzen, wäre die Umsetzung im Rahmen sogenannter Native Apps oder zumindest in Form einer hybriden App, nötig.
Darüber hinaus haben die Nutzer bei Responsiven Designs unter Umständen mit höheren Ladezeiten zu rechnen. Da die Webseiten für alle Gerätetypen funktionieren müssen, werden hierzu mehr Daten (z.B. umfangreichere .css-Dateien) als in anderen Konfigurationen benötigt.
Einen nicht unwesentlichen Aufwand fordert die Programmierung für die Erstellung der Navigation, Tabellen sowie die Formatierung der Fotos. Ebenso gehen mit einer langen Entwicklungsdauer auch immer umfangreiche Tests einher. Nur so kann eine gute Darstellung der Inhalte auf allen Gerätetypen gewährleistet werden.
Eine kurze Übersicht der jeweiligen Vor- und Nachteile hier noch im Überblick:
|
|
Vorteile
|
Nachteile
|
|
Gerätespezifische Websites
|
Es können leicht Inhalte speziell für bestimmte Gerätetypen entwickelt werden.
|
Gleiche oder ähnliche Inhalte sind unter verschiedenen URLs vorhanden (Duplicat Content).
Inhalte müssen mehrfach gepflegt werden. Keine Offline-Nutzung.
|
|
Responsive Design
|
Inhalte sind nur einmal vorhanden und passen sich automatisch an.
Besser für die Suchmaschinen-optimierung, da geringere Gefahr von Duplicated Content
|
Keine Offline-Nutzung.
Teilweise aufwändiges Testen, wenn Inhalte auf allen Geräten gut dargestellt werden sollen.
|
|
Webbasierte App
|
Gut für mobile Geräte einsetzbar und unabhängig vom Betriebssystem zu nutzen. Relativ geringe Kosten.
|
Nutzer muss zunächst von App überzeugt werden und diese installieren.
Auf gewisse Funktionalitäten muss im Vergleich zu Native Apps verzichtet werden.
|
|
Hybrid App
|
Vereint Vorteile von webbasierten und Native Apps, z.B. können mehr Funktionen von Smartphones genutzt werden.
|
Ist bereits relativ aufwändig und teuer zu entwickeln. Nutzer muss von Nutzung überzeugt werden.
|
|
Native App
|
Es kann auf alle Funktionen des Geräts zugegriffen werden. Ermöglicht dadurch komplexeste Anwendungen, die teilweise auch offline zu nutzen sind.
|
Muss für jedes Betriebssystem extra entwickelt werden und ist daher aufwändig und teuer. Nutzer muss erst von Nutzung überzeugt werden.
|
In Anbetracht aller Vor- und Nachteile würden wir im Falle eines Relaunches ganz klar eine Umsetzung in Responsive Design empfehlen. Um die Entwicklungszeiten zu verkürzen empfiehlt es sich dabei auf leistungsstarke Frameworks wie Bootstrap oder AngularJS zu setzen. Das Hinzuziehen geeigneter Experten ist dabei fast unerlässlich. Responsive Seiten erfodern technische Expertise und den Einsatz moderner Technologien, die nur ein erfahrener Entwickler garantieren kann.
Vor diesem Hintergrund ist offensichtlich: Unternehmen müssen in eine sinnvolle Mobile-Strategie investieren, um nicht Wettbewerbsvorteile und Kunden an die Konkurrenz zu verlieren. Nicht zuletzt, weil die Zahl der Mobile-User immer noch größer wird und noch große Potenziale im mobilen E-Commerce verborgen sind. Unerlässlicher Startpunkt für die Mobilstratgie ist die eigene Website – sie muss eine optimale Darstellung und Bedienbarkeit auf allen Geräten ermöglichen!
Hier erhalten Sie Informationen über contentXXL und Responsive Design
Lassen Sie uns wissen, was Sie denken...