Dieser Artikel führt den Übersichtsbeitrag zum Thema Mobile Web Best Practices weiter und beschreibt weitere vier Mobile Web Best Practices. Die ersten drei Punkte kannst du im Detail im ersten Teil nachlesen, die restlichen Best Practices im dritten Teil. Im Allgemeinen beschreiben diese Mobile Web Best Practices bewährte Vorgehensweisen für das Gestalten und Ausliefern von Inhalten für das mobile Web, damit sich Inhalte so präsentieren lassen können, dass sie auch auf mobilen Geräten gut aussehen.

4. Beachtung von Gerätelimits

Bei der Auswahl einer Web-Technologie sind beim vierten Best Practice verschiedene Gerätelimits zu beachten, da mobile Endgeräte sich zum Teil erheblich in der Möglichkeit ihrer Funktionalitäten unterscheiden.

• COOKIES: Verlasse dich nicht auf die Verfügbarkeit von Cookies.
• OBJEKTE UND SKRIPTE: Setze nicht voraus, dass Objekte und Skripte verfügbar sind.
• TABELLEN: Nutze keine Tabellen, wenn du nicht sicher bist, ob das Gerät sie unterstützt.
• ALTERNATIVEN ZU TABELLEN: Nutze so oft wie möglich alternative Darstellungsformen zu Tabellen.
• UNTERSTÜTZUNG VON STYLE SHEETS: Organisiere deine Dokumente so, dass sie auch ohne Style Sheets lesbar sind.
• FONTS: Verlasse dich nicht auf die Unterstützung von font-spezifischen Styles.
• FARBEN: Achte darauf, dass Informationen, die durch Farben dargestellt werden, auch ohne Farbunterstützung verfügbar sind.

5. Optimierung der Navigation

Bei der Navigation mit kleinen Bildschirmen und Tastaturen sowie einer geringen Bandbreite sollte man beim fünften Best Practice die Navigation optimieren, da diese Einschränkungen eine andere (einfachere) Navigation und Eingabe bei der Nutzung im mobilen Web erfordern.

• NAVIGATIONSBALKEN: Bringe am oberen Seitenrand nur minimale Navigationsinformationen an.
• NAVIGATION: Biete konsistente Mechanismen für die Navigation an.
• LINKZIEL: Das Ziel jedes Links sollte eindeutig erkennbar sein.
• FORMATE ANGEBEN: Gebe das Format von verlinkten Ressourcen an, wenn du nicht sicher weisst, ob das Gerät das Format unterstützt.
• TASTENKÜRZEL: Weise den Links in Navigationsmenüs und oft benutzten Funktionen bestimmte Tasten zu.
• URLs: Halte die URLs für Einstiegsseiten kurz.
• AUSGEWOGENHEIT: Beachte, dass weder zu viele Links auf einer Seite sind noch der User zu vielen Links folgen muss, um die gesuchte Seite zu erreichen.

6. Prüfung von Grafik & Farben

Der sechste Best Practice sieht vor, Grafiken und Farben zu prüfen, da Bilder, Farben und Stil unterschiedlich unterstützt werden und auf Displays mit einem geringen Kontrast unter Umständen schlechter lesbar sind.

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

• GROßE GRAFIKEN: Nutze keine Bilder, die auf dem Gerät nicht dargestellt werden können. Vermeide große und hochauflösende Bilder, sofern dabei nicht wichtige Informationen verloren gehen.
• BILDGRÖßE ANGEBEN: Gebe die Größe von Bildern mit spezifischen Maßen im Markup an.
• TEXTALTERNATIVEN BIETEN: Biete ein Textäquivalent für jede nicht textuelle Information an.
• FARBKONTRAST: Stelle sicher, dass Kombinationen aus Vorder- und Hintergrundfarben ausreichend Kontrast bieten.
• LESBARKEIT MIT HINTERGRUNDBILD: Wenn du ein Hintergrundbild nutzt, stelle sicher, dass die Inhalte auf dem Gerät gut lesbar sind.
• MAßE: Nutze keine Pixelwerte und absoluten Einheiten in Markup-Attributen und Style Sheets.

7. Minimierung der Größe

Beim siebten Best Practice soll darauf geachtet werden, die Größe zu minimieren, um mit klein gehaltenen Websites weniger Übetragungsvolumen zu verursachen und die Websites schneller zu laden.

• KOMPAKT HALTEN: Nutze kurzen, knappen Markup.

• MAXIMALE SEITENGRÖßE: Stelle sicher, dass die Gesamtgröße der Seite für die Speichergrenzen des Geräts geeignet ist.
• STYLE SHEET GRÖßE: Halte auch Style Sheets möglichst klein.
• LAUFBALKEN: Wenn möglich, beschränke das Scrolling auf eine Richtung.

Und der Rest?

Weitere Details zu den anderen Mobile Web Best Practices kannst du im ersten und dritten Teil nachlesen. Einen Überblick über alle Best Practices findet du im Übersichtsbeitrag Mobile Web Best Practices.