Mobile Web Best Practices

Vorwort

"Mobile Web Best Practices 1.0" ist ein Webstandard von W3C, der Menschen dabei unterstützt, Inhalte so zu gestalten und auszuliefern, dass sie auch auf mobilen Geräten gut funktionieren. Dieser Kartensatz fasst die Richtlinien des Dokumentes in zehn Themengruppen zusammen. Indem sie diesen Vorgaben folgen, vergrößern Inhalteanbieter ihr Publikum, produzieren effektive Webauftritte und -applikationen und machen das Webbrowsen auf mehr Geräten zum angenehmen Erlebnis.

Für weitere Informationen: http://www.w3.org/TR/mobile-bp/

10 Wege zur mobilität

Gestalten
für das Eine Web

Für unterschiedliche Geräte gestaltete Inhalte sparen Kosten, erhöhen die Flexibilität und erreichen mehr Menschen.

Gestalten für das Eine Web

THEMATISCHE KONSISTENZ:Stellen Sie sicher, dass Inhalte unter einer URI auch bei Nutzung mit verschiedenen Geräten thematisch kohärent sind.

FUNKTIONEN:Nutzen Sie die Gerätefunktionen, um dem Anwender eine ansprechende Oberfläche anzubieten.

EINSCHRÄNKUNGEN:Ergreifen Sie sinnvolle Maßnahmen, um beschränkte Implementierung zu umgehen.

TESTS:Führen Sie Tests sowohl am eigentlichen Gerät als auch an Emulatoren durch.


Einhalten
der Web- Standards

Im hoch fragmentierten Markt der Geräte und Browser sind Standards die beste Garantie für Interoperabilität.

Einhalten der Web-Standards

VALIDER MARKUP: Erstellen Sie Dokumente, die die formalen Standards erfüllen. 

UNTERSTÜTZTE FORMATE: Liefern Sie Inhalte in Formaten, die von den Geräten unterstützt werden.

BEVORZUGTE FORMATE: Wenn möglich, liefern Sie Inhalte in einem vom Gerät bevorzugten Format.

UNTERSÜTZTE ZEICHENSATZ: Stellen Sie sicher, dass Sie einen Zeichensatz verwenden, der vom Zielgerät unterstützt wird.

ENCODING: Geben Sie in der Serverantwort an, welche Zeichenkodierung Sie nutzen.

STYLE SHEETS:Nutzen Sie zur Steuerung von  Layout und Präsentation Style Sheets, sofern nicht bekannt ist, dass das Gerät diese nicht unterstützt.

STRUKTUR: Benutzen Sie Markup-Funktionen, um das Dokument logisch zu strukturieren.

FEHLERMELDUNGEN: Nutzen Sie aussagekräftige Fehlermeldungen und bieten Sie Möglichkeiten, von Fehlern zurück zu nützlichen Informationen zu navigieren.

Vermeiden von Problemen

Durchdachtes Design kann Probleme mit der Nutzung  vermeiden, die durch kleine Bildschirme und Tastaturen oder andere Eigenheiten von mobilen Geräten verursacht werden.

Vermeiden von Problemen

POP-UPS:Lassen Sie keine Pop-Ups oder andere Fenster erscheinen, und verändern Sie das aktuelle Fenster nicht, ohne den Nutzer zu informieren.

GESCHACHTELTE TABELLEN: Nutzen Sie keine genesteten Tabellen.

TABELLENLAYOUT: Nutzen Sie für das Layout keine Tabellen.

GRAPHISCHE ABSTANDHALTER:Verzichten Sie auf Grafiken als Abstandshalter.

KEINE FRAMES:Nutzen Sie keine Frames.

IMAGE MAPS:Vermeiden Sie Image Maps, wenn Sie nicht sicher wissen, dass das Gerät sie unterstützt.

Beachten der Gerätelimits

Beachten Sie bei der Auswahl einer Web-Technologie, dass mobile Geräte sich stark in ihren Funktionen unterscheiden.

Beachten der Gerätelimits

COOKIES:Verlassen Sie sich nicht auf die Verfügbarkeit von Cookies.

OBJEKTE UND SKRIPTE: Setzen Sie nicht voraus, dass Objekte und Skripte verfügbar sind.

TABELLEN: Nutzen Sie keine Tabellen, wenn Sie nicht sicher sind, dass das Gerät sie unterstützt.

ALTERNATIVEN ZU TABELLEN:Nutzen Sie, wo möglich, alternative Darstellungsformen zu Tabellen.

UNTERSTÜTZUNG VON STYLE SHEETS:Organisieren Ihre Dokumente so, dass sie auch ohne Style Sheets lesbar sind.

FONTS: Verlassen Sie sich nicht auf die Unterstützung von font-spezifischen Styles.

FARBEN: Achten Sie darauf, dass Informationen, die durch Farben dargestellt werden, auch ohne Farbunterstützung verfügbar sind.

Optimieren der Navigation

Einfache Navigation und Eingabe sind bei der Nutzung von kleinen Bildschirmen und Tastaturen sowie geringer Bandbreite ein kritischer Faktor.

Optimieren der Navigation

NAVIGATIONSBALKEN:Bringen Sie am oberen Seitenrand nur minimale Navigationsinformationen an.

NAVIGATION: Bieten Sie konsistente Mechanismen für die Navigation an.

LINKZIEL:Das Ziel jedes Links sollte eindeutig erkennbar sein.

FORMATE ANGEBEN: Geben Sie das Format von verlinkten Ressourcen an, wenn Sie nicht sicher wissen, dass das Gerät das Format unterstützt.

TASTENKÜRZEL:Weisen Sie den Links in Navigationsmenüs und oft benutzten Funktionen Tasten zu. 

URIS: Halten Sie die URIs für Einstiegsseiten kurz.

AUSGEWOGENHEIT:Beachten Sie, dass weder zu viele Links auf einer Seite sind noch der User zu vielen Links folgen muss, um die gesuchte Seite zu erreichen.

Prüfen
von Grafik & Farben

Bilder, Farben und Stil beleben den Inhalt, erfordern aber Sorgfalt wegen ungleichmäßiger Unterstützung für manche Formate auf Bildschirmen mit wenig Kontrast.

Prüfen von Grafik & Farben

BILDVERGRÖßERUNG: Verändern Sie die Größe von Bildern auf Serverseite, wenn die Bilder eine spezifische Größe haben sollen.

GROßE GRAFIKEN:Nutzen Sie keine Bilder, die auf dem Gerät nicht dargestellt werden können. Vermeiden Sie große und hochauflösende Bilder, sofern dabei nicht wichtige Informationen verloren gehen.

BILDGRÖßE ANGEBEN: Geben Sie die Größe von Bildern, die spezifische Maße haben, im Markup an.

TEXTALTERNATIVEN BIETEN: Bieten Sie ein Textäquivalent für jede nicht textuelle Information an.

FARBKONTRAST: Stellen Sie sicher, dass Kombinationen aus Vorder- und Hintergrundfarben ausreichend Kontrast bieten.

LESBARKEIT MIT HINTERGRUNDBILD: Wenn Sie ein Hintergrundbild nutzen, stellen Sie sicher, dass die Inhalte trotzdem auf dem Gerät lesbar sind.

MAßE: Nutzen Sie keine Pixelwerte und absoluten Einheiten in Markup-Attributen und Style Sheets.

Minimieren
der Größe

Kleinere Sites machen Nutzer glücklicher, weil sie weniger Zeit und Geld kosten.

Minimieren der Größe

KOMPAKT HALTEN: Nutzen Sie kurzen, knappen Markup.

MAXIMALE SEITENGRÖßE:Stellen Sie sicher, dass die Gesamtgröße der Seite für die Speichergrenzen des Geräts geeignet ist. 

STYLE SHEET GRÖßE: Halten Sie auch Style Sheets möglichst klein.

LAUFBALKEN: Wenn irgend möglich, beschränken Sie Scrolling auf eine Richtung.

Sparen
am Datentransfer

Bestimmte Funktionen von Web-Protokollen können die Benutzbarkeit verbessern, indem sie die Auswirkungen von Flaschenhälsen und Verzögerungen minimieren.

Sparen am Datentransfer

AUTO REFRESH:Gestalten Sie Ihre Seiten ohne Auto-Refresh, es sei denn Sie informieren den Nutzer und geben ihm die Möglichkeit, es abzuschalten.

WEITERLEITUNG:Nutzen Sie keine Markup-Funktionen zur automatischen Weiterleitung. Stellen Sie ihren Webserver so ein, dass er Weiterleitungen mit HTTP 3xx Antwort-Codes realisiert.

EXTERNE RESSOURCEN: Halten Sie die Zahl der extern verlinkten Ressourcen minimal.

CACHING:Nutzen Sie Ihre Server-Antworten für die Übertragung von Caching-Informationen.

Helfen
bei Nutzer-
eingaben

Tastaturen und andere Eingabemethoden auf mobilen Geräten können umständlich zu bedienen sein. Effektives Design minimiert ihren Gebrauch.

Helfen bei Nutzereingaben

TASTENDRÜCKE MINIMIEREN: Halten Sie die Anzahl der notwendigen Tastendrücke möglichst gering.

FREITEXT VERMEIDEN: Vermeiden Sie Freitext-Eingaben wo möglich.

VORGABEN ANBIETEN: Geben Sie vorausgewählte Vorgabewerte an, wo dies möglich ist.

STANDARD-EINGABEMETHODE:Geben Sie einen Standard für die Texteingabe, Sprache und/oder das Eingabeformat vor, wenn das Gerät dies unterstützt.

TABULATORREIHEFOLGE:Legen Sie eine logische Reihenfolge der Links, Bedienelemente und Objekte an. 

BESCHRIFTUNG:Beschriften Sie alle Eingabefelder passend und verbinden Sie die Beschriftungen explizit mit den Formularfeldern.

POSITIONIERUNG:Positionieren Sie Beschriftungen so, dass sie sinnvoll in der Nähe der Eingabefelder dargstellt werden, zu denen sie gehören.

Planen für mobile Nutzer

Mobile Web-Nutzer wollen kompakte Informationen, wenn die Zeit knapp und die Ablenkungsmöglichkeiten vielfältig sind.

Planen für mobile Nutzer

SEITENTITEL: Geben Sie einen kurzen, aussagekräftigen Seitentitel an.

KLARHEIT: Nutzen Sie klare, einfache Sprache.

ZENTRALE INHALTE:Sorgen Sie dafür, dass für die Bedeutung der Seite wichtigen Inhalte weniger wichtigen Inhalten vorangestellt sind.

BEGRENZUNG:Beschränken Sie Inhalte auf das, was der Nutzer angefragt hat.

EIGNUNG: Stellen Sie sicher, dass die Inhalte in einem mobilen Umfeld nutzbar sind.

BENUTZBARE SEITENGRÖßE:Teilen Sie Seiten in benutzbare, aber begrenzt große Teile ein. 

W3C Mobile Web Initiative SPONSOR

(MWI Sponsors)

http://www.w3.org/Mobile

©2007 W3C (ERCIM, Keio University, MIT) - Hergestellt von WithYou - Grafiken ©gettyimages - ©corbis

Übersetzung von http://www.w3c.de/