Die Optimierung von Webseiten für mobile Geräte ist auch für unsere Kunden ein immer wichtigeres Thema. Warum das so ist, wird beim Blick auf ein paar Zahlen recht schnell deutlich. Im April 2012 gab es weltweit geschätzte 190,7 Mio aktive Websites. Im gleichen Jahr hatten aber nur ca. 25% der großen Marken eine Strategie für mobiles Internet. Demgegenüber stehen unglaubliche 5,9 Mrd. verkaufte Smartphones allein bis Ende 2011. Laut einer Studie, für die Google im Juli 2012 1.088 amerikanische Smartphone-Benutzer befragen ließ, wünschen sich 72% eine Webseite, die für mobile Geräte optimiert wurde. Aus User Experience-Sicht ist dieses deutliche Ergebnis wenig überraschend, schließlich sind „normale“ Webseiten für einen komplett anderen Nutzungszusammenhang entwickelt und lassen sich in der Regel nur mit Mühe auf dem Smartphone bedienen. Wen wundert es da ernsthaft, dass sich Smartphone-Nutzer eine für Ihre Bedürfnisse zugeschnittene Version wünschen?

Worin muss sich die mobile Webseite von der „normalen“ Version unterscheiden?

• vergrößerte Interface-Elemente, um das „Fat finger“-Problem zu beheben
• angepasste Schriftgröße für bessere Lesbarkeit auf kleinen Bildschirmen
• stärkere inhaltliche Gewichtung durch initiales Ausblenden oder Entfernen unwesentlicher (Zusatz-)Inhalte
• entfernen von Funktionen, die mit dem mobilen Nutzungsanlass nicht vereinbar sind
• Optimierung für geringe Bandbreite

Device spezifische Version

Hier wird eine ganz eigenständige Version der Webseite erstellt, die völlig unabhängig von der Desktop-Webseite entwickelt und betrieben werden kann. Damit verbunden ist jedoch zusätzlicher redaktioneller Aufwand. Soll dieser vermieden werden, müssen serverseitige Skripte die Inhalte der „normalen“ Version für die mobile Ausgabe anpassen. Der Programmieraufwand sollte jedoch nicht unterschätzt werden, vor allem dann, wenn sich mobile und Desktop-Version inhaltlich und strukturell stärker unterscheiden. So müssen beispielsweise interne Links entfernt werden, deren Ziele in der mobilen Version nicht verfügbar sind. Auch externe Verweise z.B. von Suchmaschinen können in der Device spezifischen Version nicht verfügbar sein.

Pro

• Optimierung für mobile Geräte ohne Einfluss auf die Desktop-Version, z.B. unabhängige mobile Menüstruktur

• einfache Optimierung der Ladezeiten, da z.B. Bilder leicht für die mobile Ausgabe optimiert werden können und nur für mobile Nutzung notwendigen Skripte geladen werden müssen

• Möglichkeit den Optimierungsaufwand durch Reduzierung der inhaltlichen Tiefe zu beschränken z.B. Weglassen einzelner Teile

Contra

• erhöhter redaktioneller Aufwand für Pflege einer unabhängigen mobilen Version• bei alternativer Wiederverwendung von Inhalten der Desktop-Version erheblicher Programmieraufwand z.B. Verlinkungen zwischen mobilen und Desktop-Contents

• Lösung für externe Verweise auf Desktop-Inhalte in der mobilen Version z.B. Google-Suchergebnisse

• unterschiedliche inhaltliche Tiefe benachteiligt Nutzer aufgrund des verwendeten Gerätes

• Optimierung nur für bereits existierende Geräte möglich

Responsive Design

Beim responsive Design wird der grafische Aufbau und auch die Funktionsweise an das jeweilige Gerät angepasst. Es handelt sich also um eine anpassungsfähige Webseite die auf eine zentrale Content Basis zurückgreift. Technische Grundlagen sind HTML5, CSS3 und Javascript. Die Flexibilität geht jedoch mit einem erhöhten Entwicklungsaufwand einher, schließlich müssen die spezifischen Anforderungen der unterschiedlichen Geräte zusammen durchdacht werden. Starre pixelgenaue Designs sind mit dieser Lösung nicht sinnvoll umsetzbar.

Pro

• kein zusätzlicher redaktioneller Aufwand, da Inhalte zu 100% wiederverwendet werden

‍• Nutzer einzelner Geräte werden nicht benachteiligt bzw. von bestimmten Inhalten ausgeschlossen

• kein Aufwand durch unterschiedliche Behandlung externer Verweise (z.B. Google-Suchergebnisse)

• Unterstützung für Auflösungen zukünftiger Geräte

Contra

• komplex in Konzeption, Design und Umsetzung, direkte Wechselbeziehungen zwischen verschiedenen Versionen, müssen daher gemeinsam entwickelt werden• Optimierung der Ladezeiten erfordert zusätzlichen Aufwand, da Desktop und Mobile-Assets geladen werden und Bilder in der jeweils passenden Auflösung vorliegen müssen

Fazit

Mit der wachsenden Bedeutung des mobilen Internets steigt zwangsläufig die Notwendigkeit Webseiten auch für mobile Nutzung zu optimieren. Kann die Nutzergruppe auf ein oder wenige Geräte  beschränkt werden, z.B. bei einer Web-App für das iPad, wird die Device spezifische Optimierung das Mittel der Wahl sein. Der erhöhte Entwicklungsaufwand des Responsive Design macht hier überhaupt keinen Sinn. Je unklarer ist, mit welchem Gerät die Nutzer das Online-Angebot nutzen werden, desto stärker wiegen aus meiner Sicht die Argumente für Responsive Design. Dies erhöht bei der Konzeption und im Design-Prozess den Schwierigkeitsgrad deutlich. Mittel- und langfristig ergeben sich jedoch immense Vorteile, da Inhalte nur einmal gepflegt werden müssen und Nutzern nicht abhängig vom Gerät Inhalte vorenthalten werden.