Im Gegensatz zu den Grundsätzen in der Entwicklung browserbasierter Webseiten, unterscheiden sich die Best Practices für die Entwicklung einer mobilen Seiten vor allem in den Punkten:

  • minimale Dateigröße, um Ladezeiten zu minimieren
  • Vermeidung von Flash-Inhalten
  • Beschränkung auf wesentliche Funktionalitäten
  • Vermeidung von unnötigen Nutzereingaben per Tastatur

Folgende, noch nicht so häufig erwähnten Programmierungsempfehlungen sollten demnach eingehalten werden, um dem mobilen Surfer nicht unnötig Probleme beim Surfen über die mobile Webseite zu bereiten.

mobile Website mit iUi Webkit

mobile Website mit iUi Webkit

Verwendung von JavaScript- oder CSS-Frameworks

JavaScript-Frameworks wie Prototype oder JQuery verbessern ohne Zweifel die Usability und Coolness einer browserbasierten Webseite. Der Mini-Safari auf dem iPhone kann diese sogar ordentlich ausführen. Da aber die Frameworks über 100KB groß sind, ist deren Einsatz für eine mobile Webseite nicht zu empfehlen. Eine Möglichkeit ist natürlich das Wegkürzen von nicht verwendeten Funktionen innerhalb der JavaScript-Dateien, um Dateigröße einzusparen. Dei Updatefähigkeit ginge somit allerdings verloren.

Laden einzelner Fragmente statt der vollständigen Seite

Da normalerweise die Grundstruktur einer Seite (Styledateien und HTML-Gerüst) sich nicht pro Request ändern, sollte man in Erwägung ziehen nicht die ganze Seite neuzuladen, sondern nur relevante Inhalte auszutauschen. Die Verwendung von Ajax wird also für die Entwicklung mobiler Webseiten empfohlen, um nicht immer wieder unnötige KBs laden zu müssen. Demgegenüber steht jedoch auch die Einbindung einer relativ großen JavaScript-Datei (mit Ajax-Fuktionalitäten), welche aber dann im Optimalfall nur einmal geladen werden muss. Auf weitere Nachteile wie das Nicht-Funktionieren des Browser-Back-Buttons oder fehlende Bookmarking-Funktionalität für Deeplinks.

Berücksichtigung mehrerer mobiler Endgeräte

Da die meisten mobilen Devices das Open Webkit Project oder den mobilen Opera Mini unterstützen, wie zum Beispiel das iPhone, Android Phones und sogar Symbian-basierende Devices, werden auch dort moderne Features eigentlich problemlos funktionieren. Die Unterschiede sind wirklich nur gering und liegen meist nur im Layout. Für das Layout ist das Wichtigste, dass man eine dynamische Breite auswählt, damit die Seite sich an die unterschiedlichen Displays anpasst. So hat das iPhone ja sogar eine vertikale und horizontale Ansicht, für welche die Seite optimal rendern muss.

Caching und Bilderkompression

Da auf dem mobilen Device weniger Ressourcen (RAM, CPU, Memory) verfügbar sind sollten möglichst alle Files kleingehalten und gecached werden. Das iPhone cached jedoch nur Dateien und 25 KB. Um dieses Limit zu unterschreiten gibt es eine Reihe von Kompressionstools, die das zur Laufzeit erledigen können. Für Seiten, die unbedingt Bilder beinhalten müssen wie bspw. Facebook oder Flickr ist das derzeit eine gute Möglichkeit das mobile Experience erträglich zu halten.

Das iUi Framework

Das iUi Framework scheint einem den Großteil dieser Problem abzunehmen, so dass die Erstellung einer mobilen Webseite hiermit problemlos möglich sein sollte.