Small Screen Browser Design

Erst wollte ich den Artikel PDA-Design nennen, aber nachdem ich mich näher mit der Materie befasst habe wurde mir klar, dass das Thema umfangreicher ist. Trotzdem es nur spärliche Informationen über dieses Thema im Netz gibt, möchte ich es versuchen meine Erkenntnisse euch kund zu tun.

Das schön am mobilem Web ist, dass es schon seit 1997 WAP als Übertragungsprotokol und WML als Sprache gibt. Aber leider hat sich dieses nicht wirklich durchgesetzt. Seit Oktober 2001 gibt es jetzt XHTML-MP als neue Sprache für das sogenannt WAP 2.0. Damit lassen sich theoretisch ganz gut Websites für mobile Endgeräte bauten. Und um das ganze auch noch nett aussehen zu lassen, gibt WCSS.

Mobile Web Best Practices 1.0

Das deutsche W3C hat dieses Jahr ein kleinen Guide herausgebracht, welches die wichtigsten Praktiken im Umgang mit dem mobilem Web herausstellt. Ich habe hier diese Punkte aufgegriffen und die dahinter stehenden Aussagen mal mit meinen eigenen Worten versucht zu erklären:

Gestalten für das Eine Web
Durch die kleineren Displays gerade für bei den Mobiltelefonen muss nicht nur das Design dementsprechend angepasst werden, sondern auch der eigentliche Inhalt. Durch diese Übergreifende Optimierung der Inhalte schafft man es die Kosten für die Erstellung zu minimieren und gleichzeitig mit Ausgabemedien zu unterstützen, was wiederum mehr Besucher auf die Seite bringt.
Einhalten der Webstandards
Ich habe keine Ahnung wie viele unterschiedliche Mobiltelefone es weltweit gibt. Aber ich glaube fast jedes hat seine eigene Spezifikation. Ich glaube es ist noch schlimmer als bei den verschiedenen Browser, es gibt einfach noch keine Normierung. Gerade deshalb sollte man sich als Designer unbedingt an die aktuellen Standards halten und valide Dokumente erzeugen. Denn nur so kann man eine technische Zugänglichkeit gewährleisten.
Vermeiden von Problemen
Durch die unterschiedlichen Displaysgrößen von Mobiltelefonen ist es fast ausgeschlossen mit festen Designs zu arbeiten. In den meisten Fällen kommt man mit flexiblen Designs die sich an der Breite des Displays orientieren besser klar. Das einspaltige Layout ist z.B. heutzutage ein sehr beliebtes Design. Man sollte aber auch Popups, Frames (auch IFrames) und Image Maps vermeiden da diese in den seltensten Fällen vernünftig funktionieren.
Beachten der Gerätelimits
Gerade die Unterstützung von zusätzlicher Web-Technologie kann bei vielen Geräten nicht vorausgesetzt werden. Viele unterstützen z.B. kein JavaScript. Was zur Folge hat, dass auch keine Cookies unterstützt werden. Selbst der Einsatz von speziellen Schriftarten kann schon zu Problemen führen, wenn diese im Gerät nicht installiert sind.
Optimieren der Navigation
Alle z.Z. auf dem Markt befindlichen Geräte besitzen keine Maus. Die Navigation erfolgt in den meisten Fällen über die Tastatur oder einen Touchscreen. Man sollte deshalb auf eine möglichst einfach zu bedienende Navigation achten. Durch die Vergabe von Tastatur-Nummer für wichtige Sprungziele und Funktionen kann die Benutzbarkeit deutlich erhöht werden. Auch sollten Einstiegseiten eine möglichst einfach einzugebende URI haben und Verlinkungen zu anderen Ressourcen eine Angabe über das Format enthalten.
Prüfen von Grafik & Farben
Nicht jedes Grafikformat was im Internet funktioniert kann auch auf mobilen Ausgabegeräten angezeigt werden. Hinzukommt, dass bei einigen Geräten zu große Grafiken einfach nicht angezeigt werden. Deshalb sollte man immer einen aussagekräftigen Alternativtext mit angeben. Auch ist zu beachten, dass Handys und PDAs sehr häufig im Freien benutzt werden und dadurch feine Nuancen im Bild verloren gehen.
Minimieren der Größe
Klar sollte sein, dass jeder Gewinn bei der Reduzierung von Dateigrößen zählt. Also sollte man nicht nur die Grafiken und zusätzlichen Ressourcen möglichst klein halten sondern auch die eigentliche Inhaltsseite und das dazugehörige CSS. Alles was nicht unbedingt gebraucht für die Formatierung gebraucht wird, sollte auch am besten gar nicht erst mit zum Endgerät übertragen werden.
Sparen am Datentransfer
Zusätzliche vermeidbare Übertragungen sollte man auf jeden Fall unterbinden. Zum Beispiel sind clientseitige, automatische Weiterleitungen auch über den Server regelbar. Auch können Verbindungen zu externen Ressourcen, z.B. Wetterbericht, sehr langsam sein und sollten deshalb vermieden werden.
Helfen bei Nutzereingaben
Freie Nutzereingaben können gerade bei Handys sehr umständlich sein. Besser ist es in diesem Zusammenhang wenn man hier mit Vorgaben arbeitet. Dadurch hält man die Tastendrücke relativ klein. Bei Formularfeldern hilft es den Benutzer ungemein, wenn es eine eindeutige, aussagekräftige Beschriftung existiert.
Planen für mobile Nutzer
Anders als beim Surfen über den normalen PC, wo man sich manchmal von einer Seite zur nächsten treiben lässt, wollen die Benutzer des mobilen Webs schnell und gezielt zu ihren Informationen. In den meisten Fällen wissen sie schon wo sie die Information finden, z.B. Bahnauskunft. Deshalb sollte der Inhalt bei mobilen Angeboten immer eine klare, nutzungsorientierte Sprache haben, der Seitentitle kurz und aussagekräftig sein, wichtige Inhalte von den weniger Wichtigen stehen und die Ablenkung von eigentlichen Inhalt möglichst gering ausfallen.

Ein Gedanke zu “Small Screen Browser Design

  1. Pingback: Arbeitsbuch von RE-Design » Archiv » Alle Türchen von 2007 sind offen

Kommentar verfassen