Codecandies

Das Weblog von Nico Brünjes.

Webseiten für das iPad

Nico Brünjes am
in: ,

Man möge mir mangelnde Begeisterungsfähigkeit anlasten, aber ich bin vom iPad zwar technisch begeistert und freue mich auf ein neues slickes Spielzeug, das Apple da produziert. Ansonsten, aus beruflicher Sicht, sehe ich »just another device, to test and support«. Es stellen sich allerdings zwangsläufig ein paar Fragen, vor allem wenn man davon ausgeht, dass das iPad ein Erfolg wird, es also eine signifikante Nutzerzahl geben wird.

Wie muss eine Webseite für das iPad aussehen? Es ist eigentlich alles wie immer. Mit dem iPad kommt ein mobile Safari, also ein potenter, moderner Webbrowser, der sich auf allerlei finessen im Bereich HTML5 und CSS3 versteht. Natürlich fungiert dieser Browser innerhalb der Constraints, die ihm das Tablet vorgeben.

768 x 1024, wtf???

Da wäre zunächst die Größe (Kleine?) von 1024 x 768px in Landscape-Ansicht, vor allem aber 768 x 1024px im möglicherweise häufiger genutzten Portraitmodus. Das ist schon mal eine gewisse Einschränkung, die es zu umschiffen gilt. Denn wie man es auch dreht und wendet, der User hat zwei unterschiedliche Perspektiven, aus denen er auf die Website schaut, [t]he iPad has no RIGHT way of viewing websites.

Hier dürfte es drei sehr unterschiedliche Lösungsansätze geben. Zunächst zwei Strategien, die von der (schon vorhandene) Standardwebsite ausgehen und diese anpassen oder erweitern:

  1. Fluide Layouts: die Evangelisten des fluid designs können in die Hände klatschen und angeben, dass sie ja gleich Recht hatten. Ein ordentliches auf Prozent der Fensterbreite basierendes Konzept wird sicherlich auch im iPad tadellos funktionieren und zwar im Hoch- wie auch im Querformat.

  2. Flexible Adaptive Layouts: das wäre eine Taktik, wie wir sie bei ZEIT ONLINE verfolgt haben bisher, nämlich für verschiedene Bildschirmbreiten unterschiedliche Layouts anzubieten, wobei das umschalten automatisch passiert. Dies könnte beispielsweise mit Javascript gelöst werden.

Die dritte Lösung wäre, für das iPad ganz eigene Seiten zu erstellen, so wie es heute oft auch für mobile Endgeräte gemacht wird. Das gehört aber nur insoweit hierher, diese Möglichkeit festzustellen. Geht die Welt dazu über, den iPad-Usern spezielle Mobilwebseiten zu präsentieren, dann hätte dass ja gar keinen Einfluss auf die normalen Websites.

Ich tendiere mehr zu Lösung zwei. Fluide Designs sind auf jeden Fall rock solid, aber auch stinklangweilig. Hochkant, Querformat, die Seite ist immer gleich. Apple selbst verbindet aber mit seinen Produkten (bspw. Mail) einen ganz bestimmten Effekt auf das Aussehen, der sich beim Wechsel zwischen Hochkant- und Querformat einstellt. Beim Mailprogramm beispielsweise bietet der Landscapemodus die Übersicht, links die Inbox, rechts die Mails, während im Portraitmodus die Inbox verschwindet (und nur noch als Menüpunkt bestehen bleibt) und man sich auf eine Mail konzentrieren kann. Den gleichen Effekt sehen wir auch in der Sports Illustrated Demo [via Arne], die viel Müll enthält – beispielweise das Sounddesign der 60er Jahre Batman-Serie (swoosh!), aber eben auch hervorragende Ideen, wie man Landscape- und Potraitmodus nutzen kann. Mit einer normalen Webseite kann man derartige Effekte nur per flexible Layout erreichen.

Eine Sache werden allerdings alle begreifen müssen: es gibt ein Leben unter 600px.

Und dann die Wurstfinger

Einen weiteren Einfluss, den das iPad auf das Webdesign nehmen könnte, hat mit seiner Bedienung zu tun. Finger sind irgendwie nicht so klein und filigran wie eine Maus bzw. deren Cursor. Im Gegenteil: Finger sind dick und fett und verdecken zudem noch das, was man gerade anklicken will. Logischerweise wird man also alles Anklickbare größer machen müssen. Und dann noch etwas größer. Und dann noch Platz bach aussen schaffen. Und Whitespace drumherum. Zusammengefasst: am besten nur noch dicke, große, fette Buttons.

Ach ja und natürlich keinerlei Hovereffekte und Mouseoverspielereien. Was berüht wird, das wird geklickt oder verschoben oder sonstwas, aber einen Hoverevent gibt es nicht.

Kein Flash

Wenn man sich auch uneinig ist, welche Zukunftsaussichten das Adobe beschert: es gibt kein Flash auf dem iPad. That’s a fact. Also: einfache Sache. Stoppt die Nutzung von Flash. Was man nicht will, sind die kleinen blauen Legosteine, die das fehlende Plugin anzeigen. Wenn man seinen iPad-Kunden seinen Content anbieten will, darf er nicht in Flash sein. Was man zum Ausweichen nutzen will, wird man noch sehen.

17 Kommentare

  1. Tolles Artikeldesign und schöne Ausführung :) Beleuchtet den grundsätzlichen Denkfehler aber sehr anschaulich: Alle wollen präsent auf dem Ding sein, aber wer die Arbeit machen soll, hat sich keiner überlegt.

  2. Also im schlimmsten Fall erledigt die Arbeit ein Meta-Tag des Browsers und die passende reset.css. Diese Umsetzung hier finde ich deshalb verdammt authentisch :)

  3. Auch wenn ich mir sehr wahrscheinlich ein iPad kaufen werde -- mit dem Webdesign werde ich erst mal abwarten. Wie oft wird sich das Teil denn verkaufen? Wahrscheinlich nicht so oft, wie z.B. das iPhone.

    Es ist okay, sich mal ein wenig Gedanken zu machen, aber übertreiben braucht man es auch nicht.

    Grüße
    Wolfgang

  4. Naja, ob das schon zuviele Gedanken sind. Ich habe in den letzten Wochen Leute “iPad” sagen hören, die Computer und das Internet für das Ende des Abendlandes halten, also, da kann noch einiges auf uns zukommen… (zumindest für mich, der ich in einem Verlag arbeite).

  5. Der Unterschied zwischen Fluid und Flexibel war mir von der Nomenklatur her nicht geläufig. Ist das offizielles Wissen oder Nico-spezifische Ausdrucksweise?

  6. Hmmm… hab ich irgendwo her, dachte Smashing Magazine, dort wird aber wie ich eben nochmal nachgelesen habe von adaptive CSS-Layout gesprochen.

  7. @Gerrit: Das ging mir auch so. Aber Nico hat es ja schon selbst beantwortet. Richtig heißt es „Adaptives Layout“. Ich finde, im Rahmen von Web-Interfaces eine der Königsdiszplinen der kommenden Monate, da die Varianz der Lesegeräte immer größer wird und flexible Layouts so 2005 sind.

  8. Ich hab mal den Text angepasst.

  9. Also ich finde, das Problem ist ja nu nicht sooooo neu. Und zwar nicht nur, wenn man nach unten (ein Leben unterhalb von 600px gab es ja auch schon vor dem iPad), sondern auch, wenn man nach oben schaut -- sonst hättet ihr euch bei zeit.de ja nicht mit adaptivem Layout befasst.

    Höchst interessant hingegen finde ich den Wurstfinger-Hinweis! Darüber habe ich noch gar nicht nachgedacht…

  10. PS: Donnerwetter. Deine neue Start/Übersichtsseite gefällt mir aber gut!

  11. Mir scheint es, als ob alle die Zoom-Fähigkeiten des iPad und iPhones vergessen. In der Keynote ist zu sehen, wie Jobs die Webseite der New York Times im Hochformat aufruft. Die Webseite füllt im Video die gesamte Breite des Bildschirms aus, obwohl die Webseite mit fixen Pixelwerten arbeitet. Das bedeutet, dass der Browser beim Seitenaufruf die Seite wie ein Desktop-Browser mit ca. 1000px Fensterbreite rendert und dann die Seite so auszoomt, dass sie auf den Bildschirm des iPads passt. Genauso macht es der Browser auf dem iPhone. Beim iPhone gibt es die Möglichkeit, mit dem Meta-Tag “viewport” die Breite zu bestimmen, mit der die Seite gerendert wird. Ich nehme an, dass auch das iPad dieses Attribut unterstützen wird. Um eine Webseite so zu gestalten, dass sie auch auf dem iPad im Portraitmodus ohne horizontales Scrollen angezeigt wird, wäre dann bloß das Setzen dieses Meta-Tags nötig.

  12. Was Meta-Tag und Zoomfähigkeit angeht, hast Du natürlich Recht. Aaaaber… anders als beim iPhone ist man natürlich näher an der Originalgrösse, d.h. je besser man die Seite darauf vorbereitet, umso weniger leidet der Nutzwert der Seite (z.B. durch zu kleine Schrift) und umso weniger zwingt man den Nutzer zum Zoomen. Was aber natürlich, wei richtig angemerkt super funktioniert.
    Dafür gelten die Anmerkungen zu Linkflächen und Buttons dabei umso mehr, da diese kleingezoomt natürlich noch schwieriger zu treffen sind.

  13. BTW: dieser Artikel funktioniert übrigens weder im iPad(-Simulator), noch im iPhone richtig: es gibt keine Scrollen innerhalb der Seite, deswegen kann man nur den halben, sichtbaren Teil der Artikels sehen. :( forget that, s.u.

  14. Wenn ich mit meinem iPod surfe, bin ich immer wieder überascht, bei welchen Zoomstufen Texte sich noch lesen lassen. Während Monitore oft aus einiger Entfernung abgelesen werden, wird das $iDings in den Hand gehalten. Andererseits ist die Auflösung auf dem iPad mit 132ppi größer als auf handelsüblichen Monitoren, d.h. die Schrift ist absolut gesehen kleiner. Die Praxis wird zeigen müssen, welche Schriftgröße gut lesbar ist.

    Das Meta-Tag “viewport” muss auch dann beachtet werden, wenn das Layout fluide oder adaptiv ist. Ansonsten wird die Seite nur gezoomt, wenn man das iPad dreht. Ein <meta name="viewport" content="width=device-width"> sollte Abhilfe schaffen.

    BTW: Scrollen innerhalb einer Seite geht auf dem $iDings mit zwei Fingern.

  15. Indeed, was sich zumindest im iPad-Simulator schwierig nachstellen ließ. Hab mein iPhone seit fast zwei Jahren und hab das noch nie gebraucht… seltsam.

  16. Hi,
    nette Darstellung

    1) Das Klicken von Links ist wirklich etwas nervig, das fällt mir immer beim iPhone auf. Man kann kaum hoch-runtersrollen, schwups, hat man schon wieder ein Link geklickt…aaarrg, stop! zurück!!
    weiss jetzt nicht, ob die Oberfläche drucksensitiv ist, evtl. würde es dann besser gehen. Vielleicht könnt man sich was überlegen, das man einen kurzen swiiip von links unten nach recht oben macht, um Links aufzurufen??

    2) Bzgl. Adaptives Layout: …austesten.

    …liegt noch ganz schön Schnee in Hamburg nech :)

  17. Danke der Nachfrage: zum Ende der Woche soll’s tauen. ;)

    Adapt. Layout macht im Simulator schon einen guten Eindruck, aber man wird sehen, ob das ausreicht, wenn das fingerbedienbare Gerät da ist…

3 Pings

  1. [...] Der ganzen Artikel findet ihr hier. [...]

  2. [...] Webseiten für das iPad [...]

  3. [...] Webseiten für das iPad Müssen sich Webdesigner wegen dem iPad “umgewöhnen”? [...]