Persönliche Stimmen und Meinungen von Mitarbeiterinnen und Mitarbeitern.
04 Sep

Mobile Internet Update - 10 Fehler des mobilen Web Design

Eigentlich sind mobile Internet Seiten kleiner, einfacher und schneller als Ihre Desktop-Brüder. Da liegt die Annahme nahe, dass diese Seiten auch entsprechend schnell erstellt sein müssen. Theoretisch stimmt das schon, wenn jedoch das Ziel der Seite eine möglichst grosse Nutzung ist, dann muss man sich noch einge mobil spezifische Gedanken machen. Im Folgenden ein Versuch die zahlreichen Verbrechen, die auf http://mtld.mobi/showcase zu finden sind, aufzuzeigen. Die aufgeführten Beispiele zeigen jeweils besonders schön, wie es nicht gemacht werden sollte:

1) Grosse Grafiken: Wenn das Logo zu gross ist (Besitzt Disney vielleicht die Vermarktungsrechte: http://hsm2.mobi), ist für den Benutzer beim erstmaligen Laden der Seite die Navigation nicht oder nur zum Teil sichtbar.

2) Intros: Nie ein Intro auf eine mobile Seite. Niemand braucht eine Erklärung was die mobile Seite kann, denn in den überwiegenden Fällen kennt der Benutzer die Desktop-Website bereits (Schönes Logo und wo ist der weiterführende Link: http://sigiriya.mobi).

3) Zu lange Texte: Lange Texte werden unterwegs tendenziell weniger gelesen. Also nur die absolut notwenidgen Texte anzeigen und auf ein Minimum reduzieren. Der Text muss gut struktuiert sein (Wer liest diese Einführung: http://mobilesearchoptimization.mobi).

4) Viele Farben: Bei zu vielen Farben erkennt der Benutzer nicht mehr, welcher Bereich welche Rolle spielt. Auch kann bei gewissen Mobiletelefonen nicht mehr erkannt werden, wo sich der Cursor befindet (Verwirrend viele Farben; was ist wichtig, wo ist die Navigation: http://mcricket.mobi).

5) Dunkler oder farbiger Hintergrund: Da mobile Seiten unter erhöhtem Lichteinfluss betrachtet werden und da es durch das horizontale gehaltene Display eine höhere Wahrscheinlichkiet der direkten Reflexion des einfallenden Lichtes besteht, sollte der Hintergrund der Seite einen klaren Kontrast gegenüber der Schrift und den Links haben. Als Faustregel können die Accessibility-Regeln betreffend Kontrast verwendet werden (Schrift ist sehr schwierig zu erkennen: http://sigiriya.mobi).

6) Zu viele Links: Wenn zu viele Links auf eine Seite gepackt werden, wird die Seite zu lange und unübersichtlich. Ergo findet der Benutzer den entscheidenden Link nicht so schnell. Des Weiteren braucht er länger, bis er zum letzten Link auf der Seite durchgescrollt ist (40 mal scrollen bis zur Webmaster E-Mail-Adresse: http://countywebsite.mobi).

7) Navigation / Orientierung: Da eine einfache mobile Seite in der Regel eine sequenzielle Anordnung der Elemente aufweist, kann man während des Surfens schnell die Orientierung verlieren. Dieses Problem kann mit einem einfachen Breadcrumb gelöst werden. Auf jeder Seite wird jeweils die aktuelle Position (Navigationspfad mit aktiver Seite) angezeigt (Kein Breadcrumb: http://hilton.mobi).

8) Navigations-Tiefe: Mobile Seiten müssen eine erheblich reduzierte Navigationstiefe aufweisen, verglichen mit regulären Seiten. Dies hängt an der beschränkten Zeit, die für das Finden von Information im mobilen Kontext investiert werden (7 Klicks bis zu den Immobilien-Details: http://locationlocation.mobi).

9) Fehlende funktionale Inhaltsstruktur: Inhaltlich unterschiedliche Bereiche sollten optisch klar voneinander getrennt werden. Solche Bereiche können beispielsweise Titel, Navigation, Links oder Texte sein (Keine Trennung zwischen den Inhaltsbereichen: http://greatlakesrealestate.mobi).

10) Nicht mobile Links nicht markiert: Besonders mühsam ist es wenn ein Link, hinter der sich eine nicht für mobile Geräte optimierte Seite befindet, nicht gekennzeichnet ist. Dies führt dazu, dass eine Seite geladen wird, die unter Umständen 500 Kb gross ist (hier zahlreich vorhanden: http://dir.mobi).

Natürlich gibt es noch eine weitere Aspekte, die beim mobilen Webdesign zu beachten sind.

Für die erwähnten Sünden, finde ich aber besonders schön, dass sich die Dotmobi-Initiative mit diesen eher mageren Beispielen schmückt. Eigentlich sollte es uns nicht verwundern, denn die Investoren der Intiative (http://mtld.mobi/company/about/investors) hatten bis anhin nnicht gerade viel mit dem Thema Internet zu tun. Höchste Zeit, dass sie es lernen: Just call us!

5 Kommentare

Die Liste ist nicht schlecht, aber bitte lesen Sie sich doch einmal die Regeln zur Apostrophsetzung durch. Es heißt z.B. "Intros" und nicht "Intro's", genauso wie "Während des Surfens" und nicht "Während des Surfen's". Danke!

die Seite http://mtld.mobi/showcase selbst ist schon ein Verbrechen. Wenn ich die Seite mit dem Handy (SE P990i)aufrufe, muss ich horizontal scrollen. Offensichtlich werden dort immer noch Tabellenlayouts verwendet.

Danke für die Tipps lg

Hallo! Danke für die informativen Tipps. Für User von WordPress bin ich auf ein Mobile Plugin gestoßen, das ich gerade auf http://www.pressemeldungen.at verwende. Dabei ist offenbar keine eigene Internetsite für Handyuser nötig, da erfolgt einfach die Erkennung des verwendeten Browsers durch die Software. Hat jemand Erfahrung damit? Offenbar scheint "WordPress Mobile" ja zu funktionieren ...

Hallo! Danke für die informativen Tipps. Für User von WordPress bin ich auf ein Mobile Plugin gestoßen, das ich gerade auf http://www.pressemeldungen.at verwende. Dabei ist offenbar keine eigene Internetsite für Handyuser nötig, da erfolgt einfach die Erkennung des verwendeten Browsers durch die Software. Hat jemand Erfahrung damit? Offenbar scheint "WordPress Mobile" ja zu funktionieren ...

Jetzt kommentieren

Unsere Blogs