Mobiles Webdesign: Websites für Tablets und Smartphones
Diesen Leitfaden als pdf downloaden (350 KB)
Mobiles Webdesign
In Windeseile lösen Smartphones und Tablet-Computer derzeit den PC als das wichtigste Internet-Zugangsgerät ab. Braucht jetzt jedes Unternehmen eine “mobile Website”?
Plötzlich werden Websites nicht mehr nur per Tastatur und Maus, sondern auch durch die Berührung mit den Fingern gesteuert. Wo gestern noch der große Monitor als Anzeigegerät gesetzt galt, müssen heute auch handtellergroße Displays zur Anzeige ausreichen. Smartphones und Tablets - die Apple-Geräte iPhone und iPad seien hier nur stellvertretend genannt - sind aus dem Alltag nicht mehr wegzudenken.
Die Konsequenz daraus: Immer häufiger erwarten Kunden, dass Unternehmenswebsites auch auf ihren Mobilgeräten funktionieren. Unternehmen, die diesen Trend rasch aufgreifen, verschaffen sich einen Wettbewerbsvorteil und Erfahrungsvorsprung. In der Praxis bedeutet das aber viel mehr als ein paar technische Änderungen. Kleine Displays, instabile Internetverbindungen und tendenziell abgelenkte Nutzer erfordern komprimierte Informationen, minimale Ladezeiten und ein klares Webdesign. Spannenderweise sind das dieselben Kriterien, nach denen Nutzer seit über fünfzehn Jahren die Qualität von Websites beurteilen, nämlich
- “Habe ich das Gesuchte gefunden?”
- “Lädt die Website schnell?”
- “Ist die Website übersichtlich?”
Der Rückschluss lautet: Wenn Unternehmen bei der Konzeption ihrer Website für mobile Nutzer planen, dann konzentrieren sie sich automatisch auf die Aspekte, die für alle Nutzer höchste Bedeutung haben. Das zeigen auch die beiden folgenden Beispiele.
Abspecken ohne Verzicht
In Zeiten allgegenwärtiger DSL-Anschlüsse ist fast in Vergessenheit geraten, dass die Ladezeit einer Website über ihren Erfolg mitentscheidet. So rechnet der Onlinehändler Amazon für jede zusätzliche Zehntelsekunde Ladezeit mit dem Verlust von einem Prozent Umsatz. Bei Smartphones und Tablet-Computern haben nicht nur die Verbindungsgeschwindigkeit und die maximale Zahl gleichzeitiger Verbindungen Einfluss auf die Ladezeit. Viele Geräte sind hinsichtlich ihrer Rechenkraft so schwachbrüstig aufgestellt, dass sich der Aufbau komplexer Websites merklich verlangsamt.
Unternehmen, die hinreichend viel Mühe in einen auch auf Smartphones schnell ladenden Web-Auftritt investieren, freuen sich zwangsläufig über extrem kurze Ladezeiten auf dem PC. Anstrengungen, die man für mobile Nutzer mit langen Ladezeiten unternimmt, kommen also letztlich allen Nutzern und damit auch dem Unternehmen selbst zugute.
Nehmen wir als zweites Beispiel die Bildschirmgröße, die Webdesigner über Jahre mit einem Durchschnittswert von 1024 mal 768 Pixeln (Breite mal Höhe) angenommen haben. Auf Smartphones sind es in der Regel 320 mal 480 Pixel - gerade einmal 20 Prozent des alten Standards. In der Praxis führt dieser Flächenverlust dazu, dass sich die Webteams auf die Inhalte und Funktionen konzentrieren, die für den Kunden am wichtigsten sind.
Ein mustergültiges Beispiel für diese Praxis stellt die Website der Deutsche Lufthansa AG, www. lufthansa.de dar. Ruft man diese Website am PC auf, erschweren unzählige Menüs, Infokästchen und Eigenwerbung die Orientierung. Ganz anders die mobile Version der Website, die sich automatisch öffnet, wenn man die Website mit einem Smartphone besucht. Drei prominent platzierte Links namens “Flugstatus”, “Flugplan” und “Check-in” führen den Nutzer direkt zu den ent-scheidenden Funktionen des Webangebots. Solche Lösungen mit hohem Nutzwert erwachsen aus dem Druck beengter Platzverhältnisse. Sie erfordern, dass sich das Webteam intensiv mit Nutzerwünschen auseinandersetzt und die Freiheit erhält, entsprechende Erkenntnisse umzusetzen. Oft gelingt das nur durch Hinzunahme externer Berater.
Nicht unerwähnt bleiben dürfen die umfangreichen Zusatzfunktionen, die gerade Smartphones zur Verfügung stellen. So sind die Geräte dank GPS, WLAN und 3G-Empfang präzise über ihren eigenen Aufenthaltsort im Bild. Websites können den Standort des Nutzers abfragen. Stimmt er der Abfrage zu, kann die Website mit maßgeschneiderten Informationen reagieren - etwa mit Angeboten, Gutscheinen oder der Route zur nächsten Filiale. Viele andere Funktionen, wie der Zugriff auf die im Gerät integrierte Kamera erfordern hingegen die Entwicklung eigenständiger Softwares, so genannter Apps.
Responsive Webdesign
Nun ist das “Modell Lufthansa” - der Betrieb sowohl einer klassischen, als auch einer eigenständigen mobilen Website - nur für eine Minderheit der Unternehmen leistbar. Glücklicherweise ist das auch gar nicht notwendig. Das Zauberwort heißt “Responsive Webdesign” und beschreibt eine Technik, dank der sich dieselbe Website in unterschiedlicher Optik präsentieren lässt, je nachdem wie groß das Display bzw. Browserfenster ist, auf dem sie angezeigt wird.
Wie stark das Smartphone- vom Desktop-Design abweichen soll, ist projektabhängig. Fast immer empfiehlt es sich, Spalten, die auf einem großen Monitor nebeneinander erscheinen, auf einem Smartphone-Display untereinander zu positionieren. Dadurch lassen sich alle Inhalte schon beim Laden der Seite in lesbarer Schriftgröße darstellen. Dem Nutzer erspart man so das mühsame Ver-größern des gewünschten Bildausschnittes durch doppeltes Antippen. Desweiteren ist es oft sinnvoll, das gesamte Hauptmenü auf Smartphones hinter einem einzigen Knopf zu verstecken. Von der Platzersparnis profitiert der Nutzer insofern, als er nicht erst am Menü vorbeiscrollen muss, um zum eigentlichen Inhalt der Website zu gelangen. Über den Knopf bleibt das Menü dennoch vollständig erreichbar und in “Griffweite”. Häufig lässt sich im Smartphone-Design auch die Schriftgröße verringern, gehen wir doch davon aus, dass Mobilgeräte sich näher am Auge befinden als ein Monitor.
Responsive Webdesign verursacht zwar bei der Erstellung einer Website einen gewissen Mehraufwand, weil mehrere Designvarianten entwickelt und getestet werden müssen. Gerade das Testen auf Mobilgeräten gestaltet sich in einer zunehmend heterogenen Gerätelandschaft vergleichsweise aufwändig. Im Gegenzug muss das Unternehmen aber nur eine einzige Website pflegen und weiterentwickeln, die sich dank Responsive Webdesign auf stationären wie mobilen Endgeräten optimal präsentiert.
Fazit
Kunden besuchen Websites immer öfter mit Mobilgeräten - mit kleinen Displays, unzuverlässigen Internet-Verbindungen und unter verschiedensten Rahmenbedingungen. Unternehmen, die sich mit ihren Websites auf diese neuen Anforderungen einstellen, bieten einen Service, den Kunden heute noch positiv bemerken - und morgen stillschweigend voraussetzen. Nebenbei verbessern Unternehmen durch ihre Anstrengungen im Bereich “Mobile Website” das Online-Erlebnis für alle ihre Besucher. Dank Responsive Webdesign erfordert die optimale Darstellung von Web-Inhalten auf mobilen Endgeräten keinen zweiten Webauftritt.
Autor:
Tim Kaufmann
Taquiri GmbH & Co. KG
Hüttenberg
www.taquiri.de