Mobile Web Best Practices

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.

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

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

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

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

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

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 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

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.