Fünf Tipps für bessere Mobile-Websites

Mehr und mehr Nutzer navigieren durch das Web mit ihren Smartphones oder Tablets, in Deutschland beträgt der Anteil der Mobile-Surfer am Gesamtvolumen aktuell knapp 42 Prozent (Stand 10/2017), Tendenz steigend. Umso wichtiger ist es, sich als Betreiber eines Web-Angebots auf das verändernde Umfeld einzustellen und speziell für mobile Endgeräte optimierte Websites anzubieten. Hier sind fünf Tipps, um die Herausforderungen bei der Gestaltung einer Mobile-freundlichen Plattform zu meistern und mögliche Fallstricke zu vermeiden.

1. Reduziere die Dateigrößen

Je weniger Daten vom Server zum Endgerät übertragen werden müssen, umso schneller wird die Seite bei den Nutzern angezeigt. Gerade bei den häufig langsameren Übertragungsraten unterwegs kann dies einen entscheidenden Unterschied machen: Laut einer Google-Studie brechen etwa 50% aller Mobile-Nutzer nach lediglich drei Sekunden Wartezeit das Laden einer Website ab. Aber auch im Ranking beim Suchmaschinen-Primus Google hat eine schlanke Seite Vorteile, da auch die Ladegeschwindigkeit in die Berechnung der Platzierung mit eingeht. Wie man eine Website effektiv optimiert, verrät Google mit dem Analyse-Tool Page Speed Insight.

2. Responsive Layout statt manueller Browserweiche

Dieser Fehler wird aktuell noch auf vielen Plattformen wie Bild.de oder Focus Online gemacht: Nachdem die Seite größtenteils geladen und der Content schon auf dem Bildschirm erscheint, grätscht ein Skript dazwischen und fragt, ob man das Standard-Layout beibehalten oder das Mobile-Layout sehen möchte. Solche manuellen Browserweichen verwirren die Nutzer unnötig, verzögern den Zugang zum Content und sorgen zudem für höhere Abbruchraten (hier kann man auf die in Punkt eins angesprochene Google-Studie verweisen). Besser ist ein Responsive Layout, welches sich der Bildschirmauflösung automatisch anpasst und keine Interaktion seitens der Nutzer notwendig macht.

3. Vermeide den Einsatz von Overlay-Popups

Overlay-Popups sind nicht selten durch zu kleine Buttons, lange Ladezeiten oder überflüssige Inhalte besonders im Mobile-Umfeld ein echtes Ärgernis. Dabei ist es zweitrangig, ob man die Nutzer zum liken der hauseigenen Facebook-Präsenz oder zur Newsletteranmeldung bewegen möchte: Selbst wenn sie zu diesen Zwecken funktionieren, hemmen Overlay-Popups die Interaktion mit den Inhalten der Website und wirken durch ihre aufdringliche Form wenig Vertrauensfördernd. Laut einer Studie korreliert nämlich die wahrgenommene Vertrauenswürdigkeit stark mit der Bereitschaft, bei einem Anbieter zu kaufen, seine Ratschläge zu befolgen oder persönliche Informationen preiszugeben. Daher ist es ratsam Inhalte aus Popups fest in das Layout zu integrieren, um den Nutzern eine User-Experience ohne künstliche Hürden zu schaffen.

4. Nutze die gesamte Displayfläche

Es ist nur allzu verlockend, mittels feststehender Banner am oberen oder unteren Rand der Website auf die eigene App oder Social-Sharing-Funktionen hinzuweisen. In Kombination mit einer Menüleiste am oberen Rand sowie der vom Browser und OS genutzen Fläche bleiben für den Content auf Smartphones in nicht wenigen Fällen weniger als 50% der verfügbaren Displayfläche übrig. Weniger Platz für Inhalte bedeutet, dass der Lesefluss unnötig gehemmt wird und man sich gestalterisch in ein Dilemma begibt: Ist der Fließtext lesbar, d.h. groß genug, füllen bereits wenige Zeilen die gesamte Bildschirmfläche. Der Einsatz deutlich kleinerer Schrifttypen ist allerdings keine Option, da auch hier die Lesbarkeit leidet. Vermeiden lässt sich dieses Dilemma durch den Wegfall von feststehenden Bereichen, diese können ebenfalls gut sichtbar über dem Header (App-Link) oder unter einem Artikel (Social-Media-Sharing) untergebracht werden und schaffen wieder mehr Platz auf dem Display.

5. Teste dein Layout

Ein zentraler Punkt ist und bleibt ein ausgiebiges Testen einer Mobile-Website auf unterschiedlichen Endgeräten und Browsern. Tools wie Ghostlab oder Browserstack können dabei sehr hilfreich sein, allerdings zeigen das eigenhändige Testen einer Plattform kleinere Auffälligkeiten an Layout und Funktion noch immer am besten auf. Punkte, die beim Testen einer Mobile-Website von Belang sein können, wären unter anderem:

  • Wie schnell lädt die Seite auf unterschiedlich performanten Devices? (Stichpunkt Systemressourcen)
  • Ist auch auf älteren Endgeräten ein unterbrechungsfreies Navigieren/Scrollen möglich?
  • Wie schnell lädt die Seite bei langsameren (2G, 3G) Verbindungen? (Beachte hierbei stets die 3-Sekunden-Regel)
  • Ist eine Navigation problemlos möglich? (Sind z.B. Links als Links erkennbar?)
  • Sind die ggf. verwendeten Icons selbsterklärend?
  • Sind Fließtexte problemlos lesbar?
  • Ist ein Zoomen der Seite per Geste problemlos möglich?
  • Lassen sich Vorgänge wie Registrierungen, Mitteilungen oder Käufe auf allen Devices bis zum Ende abschließen?

Schlagwörter : , , , ,

Obe