Meta-Tags vermeiden Scrollen

Der erste Schritt besteht darin, horizontales Scrollen zu vermeiden. Die vom mobilen Safari angenommenen 980 Pixel Fensterbreite lassen sich mit dem Viewport Meta-Tag an die tatsächlichen Gegebenheiten anpassen. Im selben Schritt kann man das nun überflüssige Zoomen unterbinden:

<meta name="viewport" content="user-scalable=no, width=device-width">

Zum Ausblenden der beim expliziten Aufruf einer Webapplikation überflüssigen bis lästigen URL-Zeile reicht ein bisschen Javascript:

window.onload = function() {
  setTimeout(function(){window.scrollTo(0, 1);}, 100);
}

Es rollt den Bildschirminhalt um ein Pixel nach unten, wodurch Safari die URL-Zeile ausblendet und 60 Pixel mehr Platz schafft.

Bei derart optimierten Webapplikationen dürfte der Einstiegspunkt nach einem Titel und einem Logo am oberen Seitenrand ein Menü sein. Es sollte den mitgelieferten iPhone-Applikationen ähneln und eine einfache vertikale Auswahlliste von Textlinks anbieten. Schriftgröße und Zeilenhöhe müssen für das sichere Antippen mit dem Finger hinreichend groß gewählt sein: Apple empfiehlt 44 Pixel Zeilenhöhe und eine Schriftgröße von 14 Punkt, mit einem Pfeil am rechten Rand zur Verdeutlichung des Menücharakters. Damit lassen sich ungefähr fünf Einträge samt Überschrift und einer Fußzeile mit zwei bis drei Buttons (für Impressum, Registrierung et cetera) so unterbringen, dass sie ohne Scrollen sichtbar und mit einem Fingerdruck erreichbar sind.

Weitere Inhalte (Neuigkeiten, Meldungen, Abkürzungen zu Inhalten) können weiter unten folgen. Dabei ist aber darauf zu achten, dass der mobile Safari Scrollbalken nur anzeigt, wenn der Benutzer den Inhalt tatsächlich verschiebt – es gibt keinen sichtbaren Hinweis darauf, dass die Seite größer ist als der gerade sichtbare Bereich. Deshalb sollten alle wichtigen Links im sichtbaren Bereich liegen. Im Vergleich zu manchen aufwendigen Startseiten mag all dies wie eine starke Einschränkung wirken, aber einen Vorteil hat die Konzentration: Der Einstieg ist übersichtlich und schnell sichtbar.

Eine der wesentlichen Neuerungen im GUI von Nextstep und heute bei Mac OS X war die spaltenweise Navigation durch Hierarchien: Anstelle grafisch dargestellter Bäume und verzweigter Listen stellt der Finder in OS X Verzeichnishierarchien spaltenweise nebeneinander dar. Ein Klick auf eine Zeile (Verzeichnis) in einer Spalte öffnet eine neue rechts davon, die den Inhalt zeigt. Viele Menüs auf dem iPhone und iPod touch folgen dieser Konvention, und es gibt gute Gründe, dies bei Webapplikationen beizubehalten.