Was bedeutet das iPad für das Webdesign?

Drei Details zur Layoutoptimierung

Ich kann zu Beginn schon vorwegnehmen: Es geht hier nur um Detailfragen. Als Designer kann man Apple wirklich dankbar sein, denn mit Mobile Safari wurde ein Browser schon im iPhone und nun auch im iPad integriert, der das Internet »so wie es ist« darstellen kann. In mancher Hinsicht ist er sogar moderner als andere Browser, die sich noch in offener Wildbahn befinden. Jede Webseite, die heute schon breite Optimierung erfahren hat, die heute schon gut gestaltet ist, wird nicht groß angepasst werden müssen. Es gibt aber eben diese paar kleinen Details, die dann eventuell doch nachgebessert werden könnten. Und selbst, wenn es nicht die große Masse sein wird, die mit dem iPad im Web unterwegs sein wird – der Anpassungsaufwand wird meistens nicht so groß sein, als dass man diese Leute komplett vernachlässigen sollte.

1. Das Hochformat

Bisher wurden alle Webseiten für Querformate konzipiert. Wie könnte es auch anders sein, jedes Endgerät auf dem Internetseiten betrachtet wurden, war bisher auch genau darauf ausgerichtet. Selbst das iPhone hat da nicht viel angerichtet, wenn Webseiten dafür optimiert wurden, dann wurde direkt eine eigene iPhone-Variante erstellt. Die Zahl der iPhone-Besucher ist auf das Internet verteilt schließlich noch immer äußerst niedrig und hinzu kommt, dass die Größe des Geräts kaum zuließ, bestehende Layouts nur leicht anzupassen. Das ist beim iPad anders. Die Auflösung des Displays entspricht locker der vieler mobilen Rechner. Der Unterschied zu den bestehenden Rechnern besteht darin, dass das Display meist wohl im Hochformat gehalten wird, aber auch gedreht werden kann. Ein Weblayout muss nun also in beiden Varianten bestehen.

Konkret bedeutet das, dass der Hauptcontent der Seite z.B. in einer breiten Kolumne und untereinander angeordnet wird. So muss der Benutzer nur einmal Doppel-Tappen um auf die Kolumne zu zoomen und kann sich Stück für Stück nach unten nach unten die Seiten entlanghangeln. Ordnet man aber Content verteilt über die Seite an, mit sehr vielen Kolumnen, muss der User entweder viel suchen oder viel zoomen. Auf ZEIT-Online ist das bis zur Mitte schön gelöst, weiter unten müsste man das Gerät drehen, damit alles noch schön nebeneinander steht.

Auf der besagten Seite fällt in der Artikelansicht direkt auf, dass viele Artikel auf mehrere Seiten verteilt sind, obwohl auf einer Seite nicht unbedingt viel Inhalt steht. Das ist auf normalen Rechnern vielleicht sinnvoll, die Seite wird vertikal deutlich verkürzt. Auf dem iPad scrolle ich aber lieber etwas mehr, als die Seite zum Zweck des Umblätterns ständig neu aufrufen zu müssen. Zum einen wegen der Ladezeiten, wenn gerade kein WiFi oder ordentliches 3G-Netz da ist (ja, nicht alle wohnen in Berlin!) und zum anderen, weil es nicht nötig ist, die Seite vertikal zu verkürzen. Mit einem Tap auf die obere Leiste des Browsers bin ich schließlich wieder ganz schnell oben.

Solche Feinheiten gibt es zuhauf und von Fall zu Fall sind sie auch mehr oder weniger wichtig. Aber eben so etwas macht gute Usability aus, wenn wir uns über Feinheiten Gedanken machen.

2. Schriften

Auch hier stehen dem Designer eigentlich fast alle Möglichkeiten zur Verfügung. Mobile Safari kann Fonts über @font-face einbinden, was zumindest für Headlines viele Möglichkeiten der Schriftwahl eröffnet. Wenn man nicht auf Standard-Webschriften zugreifen möchte, bleibt das aber auch die einzige Möglichkeit, denn Schriftenersetzung mit Flash/sIFR kann man am iPad mangels genereller Flashunterstützung vergessen und Headlines als Bilder einzubinden macht wenig Sinn. Ein kleiner Schritt zurück. Allerdings wird die Einbettung über @font-face wohl die Zukunft sein, FontShop bietet auch schon viele beliebte Fonts mit einer entsprechenden Lizenz für das Web an und bald wird kein Browser mehr drumherum kommen, diese Funktion zu unterstützen.

Zu beachten sind außerdem die Größen von Schriften. Man kann am iPad wie am iPhone zwar rein und raus zoomen, eine echte Schriftgrößenanpassung gibt es aber nicht. Das macht in den meisten Fällen auch nichts, wenn etwas am Bildschirm lesbar ist, ist es das am iPad meistens auch. Die Auflösung ist ja, wie gesagt, nicht untypisch auch für andere mobile Rechner. Trotzdem kann es von Fall zu Fall vorkommen, dass Schriften im Layout insgesamt zu klein oder zu groß wirken. Auch hier ist das Nachbessern dann nicht besonders aufwändig.

3. Wurstfinger

Es ist für mich schon immer eine Eigenschaft von gutem Design gewesen, jetzt lässt es sich auch noch rational verargumentieren: Weißraum. Vor allem klickbare Elemente müssen bei Layouts, die auf dem iPad gut funktionieren sollen, Platz haben. Das bedeutet nicht, dass sie hunderte von Pixel auseinanderliegen müssen, aber auch der User mit den größten Wurstfingern und leichtem Tremor muss in der Lage sein, immer den Link zu berühren, den er antippen will. Glück für die Seiten, auf denen man eh nicht viel mit kleinen Elementen navigieren muss.

Die Tatsache, dass mit den Fingern navigiert wird, hat auch noch eine zusätzliche Konsequenz. Das Interaktionserlebnis wird auf den meisten Webseiten vor allem durch Hovereffekte auf den Seitenelementen erzeugt. Ohne Maus gibt es aber auch kein Mouseover. Diese Details fehlen also. Meistens macht das nichts, keine mir bekannte Seite wird etwas an tatsächlicher Funktion einbüßen, wenn der Hover-Effekt fehlt. Das Erlebnis kann aber ein anderes sein. Probleme bekommen nur die Seiten, die z.B. mit ausfahrenden JavaScript-Menüs navigiert werden müssen.

Insgesamt bringt das iPad also, bis auf die fehlende Flashunterstützung, kaum Schwierigkeiten, was die Funktion von Webseiten angeht. Was bei bestehenden und kommenden Layouts aber angepasst werden müsste, wären Kleinigkeiten, die zum großen Teil aber eh schon Teil eines guten Weblayouts sind. Das Geheimrezept für iPad-optimierte Layouts lautet also: Einfach weiter gutes Design machen.

(No Ratings Yet)

 Loading ...