Feintuning für mobile Browser

Scrollbars und Touch-Optimierung

In etwa 15 Prozent aller Zugriffe erfolgt über mobile Geräte. Die meisten davon sind Android-Smartphones und iOS-basierte Produkte. Daher sind auch Optimierungen für diese Zielgruppe unumgänglich.

In den vergangenen Wochen haben wir einige kleine Änderungen an einigen mobilen Webseiten von ORF.at vorgenommen. Diese sind zum Großteil kaum sichtbar, wirken sich aber deutlich auf die Usability aus. Ein Beispiel dafür ist der Abstand vom Text zu den Rändern. Ist dieser zu klein, legt sich die Scrollbar über den Inhalt und erschwert die Lesbarkeit in manchen Situationen. Schon wenige CSS-Pixel mehr reichen vollkommen aus und sorgen für einen harmonischeren Textfluss.

Screenshot von iOS, bei dem der Scrollbalken den Text überlagert.ORF.atSchlecht: Der Text wird vom dunklen Scrollbar überdeckt und schwer lesbar.

Ein zweites Beispiel ist die „Network Navigation“, die sich mit einem Touch auf den „Überblick“-Link öffnen lässt und zu anderen für mobile Geräte optimierte Angebote verweist. Auch hier wurde mit ein bisschen Abstand zum rechten Rand die Usability verbessert.

Network Navigation in der MobilversionORF.atLinks die verbesserte Variante, rechts die erste Version.

Mit dem größeren Abstand (zu sehen im linken Teil des Screenshots) sind die Navigationslinks deutlich leichter zur treffen und besser sichtbar während des Berühren mit dem Daumen als in der ersten Version (rechter Teil vom Screenshot). Außerdem ist nur der Titel selbst verlinkt, damit es nicht zu unabsichtlichen ausgelösten Touch-Events kommt.

Am Ende jeder Seite befindet sich außerdem eine Sprungmarke „Zum Seitenanfang“, um schnell wieder zum Beginn der Seite zu kommen und dort auch die „Network Navigation“ zu erreichen.

Philipp Naderer-Puiu,