Mobiles Webdesign: Vom Trend zur Praxis

Internet-Surfen auf dem Smartphone? Das ist nur was für Nerds, ist viel zu klein, zu unübersichtlich.

Falsch, meinen die Nutzerzahlen der Webseiten, die ich auswerte: Die Zugriffe von mo­bi­len Geräten haben im Jahresvergleich um 250% zu­genommen. Ihr Anteil ist mit 5% noch mäßig, dennoch die Nachfrage ist damit aus­gewiesen. Das war damals mit WAP noch anders.

Megatrend Mobilität

"Mobile" wird das Internet sicht­bar verändern, darüber sind sich Ex­perten einig und Indizien dazu sind unübersehbar: Der Absatz von Smart­phones und Tablets überflügelt denjenigen von Desktop-PCs, weltweit wird öffentliche Infrastruktur mit Gratis-WLan aufgerüstet (in Süd­ko­reas Großstädten bereits flächendeckend).

Trend und Exklusivität nutzen

Wache Webdesigner antizipieren den Trend, auch wenn für die meisten Firmenwebsites heute noch kein Handlungsbedarf besteht. Mobile Web­seiten erreichen im Webprojekt-Markt gerade einen einen Anteil von 6% (gemäss unserer Erhebung), dafür ist man bereit zu inves­tie­ren: Projekte mit "mobiler" Ausrichtung haben um 2.5x höhere Budgets als der Durch­schnitt. Offenbar haben mobile Webseiten etwas Exklusives.

Taskorientierte Websites

Mobile Internetnutzung unterscheidet sich von der herkömmlichen: Die Sitzungen sind deutlich kürzer, dafür häufiger, die intensivste Nutzung findet während den Stosszeiten statt (auf dem Weg vom Arbeitsplatz nach Hause) und die Absichten sind klar taskorientiert. Google bringt die Unterschiede so auf den Punkt: "Repetitive Now", "Bored Now" und "Urgent Now" sind drei Nutzer-Klassierungsmerkmale.

Trend und Exklusivität sprechen dafür, dass sich Webdesigner auf die Suche nach "mobilem" Potenzial machen. Das Naheliegendste findet sich im Kundenportfolio. Welche Websites eignen sich für das mobile Internet? Vor zwei Monaten hat mich einer meiner Kunden um einen Redesign Vorschlag mit entsprechender mobilen Ausrichtung gebeten; es ist eine Schande, dass ich nicht von mir aus darauf gekommen bin. Seine Website ist schwergewichtig taskorientiert, sie wird hauptsächlich angewählt, um Kontaktinformationen ausfindig zu machen.

Umsetzung und Best Practice

Keine Angst vor mobilem Webdesign. Webdesigner lernen nicht eine neue Programmierung, sie bauen ihre Kenntnisse aus. Im Zen­trum steht nun definitiv die Web-Usability und der Grundsatz "weniger ist mehr". Luke Wroblewski empfiehlt mit seinem Buch "Mobile First" und gutem Grund, die mobile Website vor der Desktop Version zu ent­wi­ckeln.

Als Best Practice gelten Vorgaben, die unter dem Begriff "responsive Webdesign" zusammengefasst sind. Dabei gilt es, für Desktop und Mo­bile nicht eigenständige Websites zu entwickeln, sondern nur auf Dis­plays angepasste Stylesheets einzusetzen. Aspekte, die bei der Ent­wicklung von mobilen Webseiten mit Vorteil zu berücksichtigen sind:

• Aufgabenorientierte Struktur einsetzen
• Die meistverwendeten Elemente an den Anfang stellen
• Visuelle Konsistenz zur Desktop Version gewährleisten
• Reduktion von Fliesstext, generell reduzierter Content
• Aufteilen von langem Fliesstext auf verschiedene Seiten
• Möglichst wenig Texteingaben (Formulare) einsetzen
• Mobile-Möglichkeiten von Telefon und Geo Location nutzen
• Seitenbereiche mit unterschiedlichen Hintergrundfarben trennen
• Navigation vereinfachen (Hauptnavigation mit max. 4 Links, pro Seite maximal 10 Links)
• Platzierung und Umrandung der Links auf Fingerbefehle ausrichten
• Farbpalette soll helle und dunkle Umgebung mitberücksichtigen
• Lesbare Fonts, relative Grösse, unabhängig von der Bildschirmauflösung (Punkte nicht Pixel!) einsetzen
• Elemente wie Links, Listen und Eingabefelder sollen die ganze Breite ausnützen
• Lange Listen kategorisieren, max. 10 Einheiten je Kategorie
• Keine Hover-Events, Tabellen und Textgrafiken verwenden
• Horizontales Scrolling vermeiden
• Footer mit "Go-to-Top" Link besetzen

Mobile und Website Version im Vergleich

Gleiche Website, andere Darstellung: Navigation und Spalten rücken zusammen, Inhalt bleibt der gleiche.

Zurück