Optimierungen von Webseiten für mobile Devices

Bild

Responsive Webdesign ist mittlerweile kein exotisches Fremdwort mehr, sondern schon seit längerem in den Köpfen von Webworkern aber auch von vielen Kunden fix verankert. Es gehört schon zum guten Ton, neben der normalen Desktopvariante bei Launches und Relaunches auch Benutzer von Tablets und Smartphones nicht aussen vor zu lassen. Die Optimierung für solche Devices hört jedoch oft beim Umgestalten des Layouts auf – und das ist ein großer Fehler.
Immer wieder wird auf die wichtigsten Eckpunkte vergessen, z.B. eine passende Contentstrategie (siehe Content First statt Mobile First) einzuplanen oder – und das ist noch wesentlich wichtiger – das User Interface mit all seinen Funktionen im Kontext auch auf kleinen Bildschirmen benutzbar zu machen.

In meinem letzten Blogbeitrag habe ich mich mit dem Thema Feature Detection im Browser beschäftigt, heute möchte ich das Thema aufgreifen und aufzeigen, welche Möglichkeiten die Feature Detection im Detail bietet, um das User Interface und die User Experience auf Devices mit kleinen Auflösungen deutlich zu verbessern.

Geschwindigkeit

Die Seite auf Geschwindigkeit bzw. Performance zu optimieren ist zwar auch auf dem Desktop essentiell – wird aber besonders bei mobilen Geräten ein muss. Warum? Mobile Geräte werden oft unterwegs mit schlechtem Netz benutzt, haben generell weniger Prozessorleistung als große Rechner und bezahlen daher aufwendige Berechnungen mit einem hohen Preis – der Akkulaufzeit.
In einem sehr sehenswerten Talk spricht ein Google Engineer die Auswirkungen langsamer Seitenladezeiten an: Bei einer längeren Ladezeit um nur wenige hundert Millisekunden konnte Google eine signifikante Veränderung beim Verhalten der User auf der Webseite feststellen.
Wie kann die Geschwindigkeit davon profitieren, wenn die Webseite weiß, dass der User mit einem Smartphone surft? Oft wird die Seite für Desktopcomputer konzipiert und entwickelt und erst im Nachhinein über Media Queries mobil gemacht. Dabei kann es vorkommen, das Elemente die auf dem Desktop Sinn machen (z.B. eine Bildgalerie), auf mobilen Devices einfach nur ausgespart werden, weil der Platz besser genutzt werden muss. Mit dem reinen Ausblenden ist es aber meist nicht getan – die dazugehörigen JavaScript Libraries werden im Hintergrund trotzdem geladen, verbrauchen unnötig Bandbreite, Performance und Akkukapazität (ein interessantes Paper von der World Wide Web Conference 2012 zeigt auf, wie viel Akku oft wirklich von unnötig geladenen Ressourcen verbraucht wird).
Daher macht es durchaus Sinn, Libraries nur zu laden, wenn sie auch wirklich gebraucht werden, um so auf mobilen Geräten wertvolle Ressourcen zu sparen.

Optimierung von Interface-Elementen

Oft wird nur ein einziges UI-Element im reponsive Design verändert: das Hauptmenü. Es gibt unzählige Formen, in die sich das Hauptmenü  transformieren kann. Von Dropdown-Menüs über aufklappbare Listen (siehe unsere Seite) bis hin zu Menüs, die nach einem Klick auf einen Button von der Seite auffahren.
Die Veränderung des Menüs geschieht aus einem einzigen Grund: Weil es sonst auf mobilen Geräten nicht benutzbar wäre oder zu viel Platz einnehmen würde. Der Ansatz ist zwar per se nicht falsch, viel mehr sollte aber statt der Frage „Was ist kaputt, was müssen wir richten?“ vielmehr die Frage „Welche Elemente kann ich mobil optimieren, um ein deutlich gesteigertes Nutzererlebnis zu bieten?“  gestellt werden.

Device und Fingergröße

Oft wird bei responsive Webseiten vergessen, dass der Nutzer meist eine vollkommen andere Eingabemethode als auf klassichen Computern hat. Statt einer Maus benutzt er seine Finger auf einem (meist) Multitouch-Display. Elemente, die mit der Maus leicht bedient werden können, werden nicht zuletzt wegen der geringen Größe des Bildschirms auf mobilen Devices mit Fingern oft nur sehr schwer benutzbar (eine Studie beschreibt die absolute Mindestgröße für klickbare Bereiche mit 9.2mm – je größer die Fläche desto besser).
Daher liegt die Lösung für die Interaktion mit kleinen Elementen näher als man denkt – nämlich bei den Entwicklern der mobilen Betriebssysteme. Was am Desktop ein Dropdown Menü ist, welches direkt über dem Element das geklickt wurde und dann erscheint, wird dieses am z.B. iPhone zu einem Element, das fast die Hälfte des Bildschirmes einnimmt. Dieses Verhalten zieht sich über alle großen mobilen Betriebssysteme.
Die größte Optimierung des UIs für mobile Geräte ist also, nach Möglichkeit auf die Standard-Interface-Elemente zurückzuführen. Dies garantiert die beste Kompatibilität mit allen Devices, egal welche Auflösungen und Größen sie haben und garantieren den Benutzern eine frustfreie Bedienung der Seite.

Die Zukunft

Touchbasierte Geräte werden immer beliebter – ob mobil aber auch am Desktop. Mit zunehmender Verbreitung wird in naher Zukunft auch ein weiterer, enormer Vorteil gegenüber klassichen Eingabemethoden wie der Maus genutzt werden: Multitouch. Während der Desktop auf einen Input begrenzt ist (dem Mauscursor) kann die Hand auf mobilen Geräten Kombinationen aus Bewegungen ausführen – Stichwort Gesten.
Webseiten werden also in Zukunft bedeutsam intuitiver zu bedienen sein als heute, weil sie sich immer weiter von der klassischen Mausbedienung wegentwickeln. Hier ist ein älterer Artikel zu NUI statt GUI, das Natural User Interface.