computerwoche.de

Web

Performance, Usability, Design

So machen Sie mobile Websites flott

02.11.2011
Von 


Simon Hülsbömer betreut als Senior Research Manager Studienprojekte in der Marktforschung von CIO, CSO und COMPUTERWOCHE. Zuvor entwickelte er Executive-Weiterbildungen und war rund zehn Jahre lang als (leitender) Redakteur tätig. Hier zeichnete er u.a. für die Themen IT-Sicherheit und Datenschutz verantwortlich.
Alle Posts des Autors Email: Connect:

Baustelle Design

Expedia wartet auf seiner mobilen Website mit einem viergeteilten, übersichtlichen Einstieg auf, der jedoch verhältnismäßig langsam lädt.
Expedia wartet auf seiner mobilen Website mit einem viergeteilten, übersichtlichen Einstieg auf, der jedoch verhältnismäßig langsam lädt.

Eine gute Performance ist aber nur ein Teil einer gelungenen mobilen Website - das Design und die Benutzerführung sind mindestens ebenso wichtig. Eine schnell geladene Seite hilft nichts, wenn sich der Anwender auf ihr nicht zurechtfindet. Wichtig ist, einen sauberen Quellcode zu verwenden. Mit validem (X)HTML ist sichergestellt, dass Navigations- und Textstrukturierungselemente eindeutig benannt sind und der mobile Browser den Seiteninhalt zumindest in einer Form darstellt, dass der Anwender sich zurechtfindet. Das genaue Aussehen der Seite sollte komplett in eine CSS-Datei ausgelagert werden - analog zu dem, was bei einem professionellen stationären Web-Auftritt bereits seit vielen Jahren Usus ist.

Wichtig ist, was vorne rauskommt

Opodo kommt mit einer Menge Eingabefelder daher – anders als bei HRS sorgt der deutliche Farbkontrast jedoch für eine akzeptable Usability.
Opodo kommt mit einer Menge Eingabefelder daher – anders als bei HRS sorgt der deutliche Farbkontrast jedoch für eine akzeptable Usability.

Seien Sie darüber hinaus auf alle gängigen Bildschirmauflösungen vorbereitet. Als Maßstab kann der weitverbreitete iPhone-Formfaktor dienen. Bedenken Sie, dass die im Web gerne verwendeten Seitenränder, die den Inhalt mittig positionieren, wegen der kleinen Displays überflüssig sind. Ein klares einspaltiges Layout ohne unnützes Beiwerk ist in den meisten Fällen die beste Lösung. Zusätzlich ist der Farbkontrast zu beachten: Wählen Sie keine Farbkombinationen, die auf kleinen Displays zu schlechter Lesbarkeit führen könnten.

Schlecht navigieren heißt verlieren

Seine flotte Performance macht Hotels.com durch das unübersichtliche Design wieder wett – im negativen Sinne. In diesem Menü sind echte Fingerakrobaten gefragt.
Seine flotte Performance macht Hotels.com durch das unübersichtliche Design wieder wett – im negativen Sinne. In diesem Menü sind echte Fingerakrobaten gefragt.

Wichtig ist zudem eine einfache, vorzugsweise vertikale und eindeutig betitelte Navigation: Der Anwender will mobil meist noch schneller zum Gesuchten kommen als auf einer stationären Seite. Eine Unmenge von Auswahl- und Eingabefeldern - zumal in unserem Test oft direkt auf der Einstiegsseit anzutreffen - sorgt nicht gerade für Begeisterung. Eine Vielzahl an Einstellungsmöglichkeiten ist durchaus okay, solange sie erst auf expliziten Wunsch aufklappbar sind.

Barrierefrei und Spaß dabei

Ein Formularchaos wartet bei HRS – erschwerend kommt hinzu, dass die Seite sehr langsam lädt. Wen wundert‘s, dass HRS jetzt unseren Testsieger Hotel.de übernommen hat ...
Ein Formularchaos wartet bei HRS – erschwerend kommt hinzu, dass die Seite sehr langsam lädt. Wen wundert‘s, dass HRS jetzt unseren Testsieger Hotel.de übernommen hat ...

Die bereits unter Performance-Aspekten angesprochenen Bilder sollten optimiert, sparsam eingesetzt und (wie auf jeder ordentlichen stationären Seite ebenfalls) mit einem Alternativtext versehen werden. Dann wissen auch die Anwender, die die Darstellung der Bilder deaktiviert haben, was zu sehen sein soll. Angenehmer Neben-effekt: Ihre mobile Seite wird barrierefrei und bietet auch sehbehinderten Menschen, sofern sie denn ein Smartphone besitzen, die bestmögliche Darstellung der Inhalte. Alternativtexte sind auch für Formularfelder anzuraten - auf mobilen Geräten rutschen die einzelnen Eingabefelder bei unsauberem Coding gerne einmal durcheinander.