10 by yoppy, flickr.com
Update: SmashingMagazine.com – Mobile Web Design Trends for 2009
Derzeit dominieren Apps die Gesprächslandschaft im Bereich Mobile. Dabei sollte man mobile Websites nicht vergessen, die im Vergleich zu Apps ebenfalls ihre Daseinsberechtigung haben: mobile Websites können mittlerweile auf geräte-interne Funktionen, wie z.B. das GPS-Modul, zugreifen und den aktuellen Standort auf einer Karte darstellen. Mobile Websites sind mit vergleichsweise geringem Aufwand für eine Vielzahl von Endgeräten und Plattformen abrufbar und müssen nicht wie Apps, für jede Plattform von Grund auf neu konzipiert und programmiert werden.
Ist man nach einer ausführlichen Analyse beider Möglichkeiten zum Entschluss gekommen, eine mobile Website anzubieten, sollten einige Aspekte bei der Konzeption und Optimierung dieser beachtet werden. Im Folgenden Beitrag werden einige technische, aber auch nicht-technische Tipps gegeben, um die beste Reichweite sowie Performance für ihre mobile Website herauszuholen:
1. Bewerbung der mobilen Website
Bevor eine mobile Website aufgerufen werden kann, muss der Nutzer wissen, dass es sie gibt! Ein entsprechender Verweis zur mobilen Version sollte auf der Desktop-Website auffällig platziert werden. Weitere Medien wie Zeitungen oder Social Media-Plattformen wie Facebook sollten genutzt werden, um die Aufmerksamkeit der anvisierten Zielgruppe zu erwecken.
2. Eine mobile URL verwenden
Speziell für mobile Websites wurde die Domain .mobi ins Leben gerufen. Sie dient dem Zweck eine mobile Website klar von ihrem Desktop-Pendant zu trennen und einen einheitlichen Standard zur Darstellung der Inhalte auf mobilen Websites festzulegen. Würde dieses Domainkonzept durch Unternehmen, Marken und Dienstleister einheitlich umgesetzt werden, würde sich die Nutzersuche nach der passenden mobilen Website enorm vereinfachen.
Beispiel:
Desktop-Variante: www.ilikemymobile.de
Mobile Variante: www.ilikemyobile.mobi
Varianten, die ebenfalls im Einsatz sind: m.website.com, mobile.website.com, website.com/mobile
Meiner Meinung nach sind diese Varianten jedoch nicht nutzerfreundlich. Der Nutzer muss raten, bei welcher Variante die mobile Website aufgerufen wird.
3. Optimierung der Website für mobile Endgeräte
Das Betrachten einer Desktop-Website an einem mobilen Endgerät ist heutzutage prinzipiell möglich, aber immer noch sehr nutzer-unfreundlich. Funktionalitäten wie Zoom-in gestalten das Betrachten einer Desktop-Website zwar angenehmer, bei komplexeren Funktionen (z.B. ein Buchungsprozess) stößt der mobile Browser aber auch der Nutzer schnell an seine Grenzen. Bei einer nicht-optimierten Website wird der Nutzer schnell und genervt abbrechen.
Für eine nutzerfreundliche Gestaltung der Website sollten folgende Hinweise beachtet werden:
- Tastatureingaben sollten auf ein Minimum beschränkt sein
- Grafisch ansprechende Objekte (Bilder, Buttons) sollten angeboten werden und zum Klicken animieren
- Eine kurze und einfache URL erspart eine umständliche Tastatureingabe
- Miteinander verknüpfte Oberflächen-Widgets vereinfachen die Bedienung und erhöhen den Bedienkomfort
- Nutzer suchen Informationen: die Website sollte daher klar strukturiert sein; Inhaltlich unterschiedliche Bereiche sollten farblich voneinander getrennt werden
- Usability-Tests: Ziel ist eine möglichst intuitive Bedienung
Beispiel:
Desktop-optimierte Website auf einem Smartphone
Mobile-optimierte Website auf einem Smartphone
Mobile Website mit guter Usability - mercedes-benz.mobi
4. Darstellungskonformität für eine Vielzahl an Browsern
Ebenso wie im Desktop-Internet gibt es im mobilen Internet eine Vielzahl unterschiedlicher Browser. Man unterscheidet diesbezüglich zwischen:
- Full-featured (Mobile Safari, Android-basiert, Palm etc.)
- Half-featured (BlackBerry) und
- Small-featured (Klapphandys) Browsern.
Eine Optimierung für alle ist sehr aufwändig und sollte daher auf wenige zukunftsorientierte Browser beschränkt werden. Des Weiteren muss man testen, ob die mobile Website in den unterschiedlichen Auflösungen korrekt dargestellt wird. Die Abmessungen reichen von 150×128 bis 640×480 Pixel. Da heutzutage viele Endgeräte das Betrachen im Querformat ermöglichen, sollte dies bei der Programmierung ebenfalls berücksichtigt werden.
5. Menge der Anfragen und zu übertragenden Daten minimieren
Um die Wartezeit beim Laden der Website oder mobilen Applikation zu verringern, sollte man die Anzahl der Anfragen zwischen Website und Server so gering wie möglich halten. Als Grundsatz gilt: einzelne große Objekte werden schneller übertragen als viele kleine. Daher verringert es die Wartezeit, mehrere Anfragen zu einer zu bündeln und diese abzusetzen, anstatt vieler kleiner nacheinander.
Um ebenfalls die Anzahl der Datei-Übertragungen zu verringern, sollten CSS-Befehle in einer einzigen Datei gebündelt und nicht auf mehrere verteilt werden. Selbiges gilt für JavaScript.
Bilder beispielsweise können auch mit Hilfe von CSS-Befehlen in Form gebracht werden und müssen nicht extra neu geladen werden. Bei der Übertragung von Grafiken sollte auf das URI-Schema (Wikipedia) zurückgegriffen werden. Vorsicht ist hierbei geboten, da diese Vorgehensweise nur von neueren Browsern (iPhone, BlackBerry, Android) unterstützt wird.
Beispiel:
Auf dieser Website wurde eine Grafik mittels URI-Schema eingebunden.
6. Minimieren des Code
Quellcode sollte so minimal wie möglich gehalten werden. Denn je weniger Code geladen werden muss, desto schneller ist der Seitenaufbau vollzogen.
7. Inhalte nur im Bedarfsfall laden
Daten nur dann laden, wenn sie auch angefragt werden. Informationen oder Bilder nur dann vorladen, wenn es unbedingt notwendig ist, z.B. das nächste Bild in einer Galerie.
8. Vorteile von HTML5 nutzen
HTML5-Browser, wie z.B. Mobile Safari oder Android, können den internen Anwendungs-Cache nutzen, um Inhalte zwischenzuspeichern und somit nicht neu abrufen zu müssen. Dies verringert die Zeit beim Neu-Aufruf der Website und zwischengespeicherte Inhalte, wie z.B. Kartenmaterial, können Offline genutzt werden.
HTML-Browser, die CSS3 unterstützen (Mobile Safari, Android), können zur Darstellung runder Ecken, Farbverläufen, Schattenwurf, Text-Transformationen etc. CSS3-Attribute verwenden. Greift man auf die Möglichkeiten von CSS3 zurück, kann auf das Nachladen neuer Grafiken verzichtet werden.
Des Weiteren ist es seit HTML5 möglich, per Browser auf neue Schnittstellen (APIs) zuzugreifen. Ein bereits erwähntes Beispiel dafür ist die Möglichkeit, per Browser auf das geräte-interne GPS-Modul zuzugreifen, den Standort auszulesen und auf einer Karte darzustellen.
Beispiel:
GPS-Koordinaten per Website auslesen und auf einer Karte darstellen
9. Konzipiere für den kleinsten gemeinsamen Nenner
Soll die mobile Website für eine Vielzahl von Anwendern nutzbar sein, ist auf eine geräte-übergreifende Kompatibilität zu achten. Das heißt, dass der Code so un-komplex wie möglich sein muss, damit er auf einer Vielzahl von Endgeräten ausgeführt werden kann. Diesbezüglich noch einige Hinweise:
- Flash kann derzeit auf keinem mobilen Endgerät dargestellt werden
- BlackBerrys haben standardmäßg die CSS- und JavaScript-Funktionalität deaktiviert
- Das Ausführen von JavaScript auf Endgeräten mit einem schwachen Prozessor ist oft mit langer Wartezeit verbunden
10. Testen, Testen, Testen!
Browser-übegreifende Tests sind im mobilen Web ebenso unumgänglich wie im Desktop-Web. Nachdem die technischen Hürden genommen wurden und alles korrekt dargestellt wird, sollte auf akzeptable Usability geprüft werden. Folgende Test-Umgebungen können zudem beim Testing helfen:
- Android-Emulator
- BlackBerry-Emulator nach Endgerät
- iPhone Developer Center
- Opera Mini Emulator
- Palm Pre Developer Center
- Windows Mobile Developer Center
- Firefox User Agent-Switcher
- Firefox Page Speed
- Open Source UI Javascript Tools von Google
Ausblick
Meiner Meinung nach werden mobile Websites parallel zu Apps existieren und ihre Vorzüge in naher Zukunft ausspielen können. Denn dadurch, dass sie für eine breitere Masse an Endgeräten und Plattformen nutzbar sind, wird es in zukunft Mobile Services geben, bei denen das Angebot einer mobilen Website mehr Sinn macht als eine App allein.
Weitere Hinweise verbergen sich hinter folgenden Links:
Quelle: Google Code Mobile
Keine Ähnlichen Beiträge vorhanden.
