Codecandies

Das Weblog von Nico Brünjes.

Die iPad Webseite

Screenshot ZEIT ONLINE, Wissen Centerpage, iPad Version, Design: Information Architects

Liest man die gängigen Webdesign-Sites findet man eine Fülle von Tipps, wie man seine Website anpassen kann, damit sie auch auf dem iPad funktioniert. Der Tenor: mit css media queries ein paar zusätzliche Stylesheets für das iPad liefern, im Scriptteil ein wenig die Touch- und Gestureevents einsetzen, Flashvideos raus, Buttons größer: fertig! Das war nicht ganz das, was uns vorschwebte…

Das mit den media queries ist so eine Sache

Kurz gesagt: CSS media queries sind im Moment eine schicke und elegante Lösung, wenn man seine bestehende Website mit ein paar Handgriffen an die Gegebenheiten verschiedener, zumeist kleinerer, Displays anpassen will. Ebenso taugen sie sicherlich dazu, eine Web-App zu bauen, die nur auf Tablets funktioniert und im Desktopbrowser leer oder ungestyled bleibt (aber wer will das schon?). Für eine große Contentwebsite, die zweigleisig unter der gleichen Adresse unterschiedliche Styles an Desktopbrowser und Tablets ausliefert, sind sie jedoch (zumindest im Moment) nicht zu gebrauchen.

Das liegt zunächst einmal daran, dass mit Mediaqueries eingeschränkte Stylesheets zunächst mal allesamt heruntergeladen werden und dann entschieden wird, was angezeigt wird. Für den mobilen Einsatz und auch für den Tableteinsatz kommen sie damit kaum in Frage. Beim ersteren schon allein wegen der Downloadmengen, beim letzteren kommen wie die Erfahrung zeigt noch weitere Datenmengen an Javascript und z.B. größeren Bildern hinzu. Ein Fass ohne Boden.

Die von mir zunächst favorisierte Lösung führte aber dazu, dass nicht nur IEs kleiner Version 9 via conditional comments eigene Stylesheets zugeteilt bekommen mussten, auch Firefox 3.0 und kleiner können mit den mediumabhängigen Styles so gar nichts anfangen.

Das offizielle Video zum Launch

Ohne Javascript geht’s (derzeit) nicht

Und auf tut sich die böse Tür des user agent switching. Zwar gibt es eine Javascript-Lib, die css media queries gewissermassen emuliert, das ist aber ein weiterer gut 20kB großer Download ist, ein Monster mithin, das zudem nur mit Queries innerhalb von CSS-Dateien, aber nicht innerhalb von <link /> zulässt.

Stehen zusätzlich Anforderungen im Raum, dass auch ein Schalter zur Rückkehr zur klassischen Website eingebaut werden soll, oder wenn man feststellt, dass eben Tablet nicht geleich Tablet ist, man also für verschiedene Tablets noch kleinere Anpassungen vornehmen muss, dann ist man schnell dabei auf den user agent zu schauen. <interlude>Das vereinfacht übrigens auch gewaltig die Entwicklung der Seite, da man sie während des Bauens parallel zum iPad/iPad-Simulator auch im Firefox previewen kann. Das geht natürlich nur mit User Agent Switcher. Dann aber kann man den geliebten Firebug nutzen um wenigestens die Elemente auf der Seite und ihre Styles zu indentifizieren und auch das Scriptdebugging ein wenig zu unterstützen. Dinge die es auf dem iPad nicht oder nur sehr rudimentär gibt.</interlude>

Diese Lösung ist allerdings noch nicht das Endstadium, allein weil wir nach und nach die Site für weitere Tablets fit machen wollen. Im Laufe dieser Zeit werden wir auch das UA-switching wieder entfernen und durch bessere Methoden ersetzen.

Screenshot ZEIT ONLINE, Navigation, iPad Version, Design: Information Architects

Der Spass an der Entwicklung

Eins muss man gleich sagen: Entwicklung für Tablet (speziell das iPad) macht einen Heidenspaß. Zum einen ist die Touchbedienung faszinierend. Ich bin so einer, der ein mouse-over-Menü entwickelt und sich dann stundenlang daran erfreuen kann, wie beim Hovern über den Menüpunkt das Menü animiert ausfährt. Auf dem Tablet kann man solche Lösung praktisch zum Anfassen programmieren (natürlich ohne :hover). Ich habe das Menü bestimmt mehrere tausend Mal ausprobiert. Oder die Bildergalerien (obwohl ich da noch nicht zufrieden bin). Die Möglichkeiten des Webkit sind wirklich hervorragend und das geniesst man natürlich. Obwohl es auch ein wenig zu verführerisch ist, wenn man in die Hölle der Desktopbrowser zurückkehrt und feststellt, dass es da draussen immer noch Internet Explorer gibt… ;)

Kleinere Schlaglöcher

Ein paar Dinge waren allerdings echte Kopfnüsse. Da ist zum Beispiel der Viewport-Tag. Schon bei diesem Blog hier habe ich Probleme damit gehabt. über diesen einen Tag den Viewport und vor allem die Vergrößerung so zu setzen, dass es für iPad und iPhone gleichermaßen funktioniert. Das Design der iPad-Seite erforderte ganz klar ein:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

Das passt allerdings nicht zu unserer Art, das iPhone zu bedienen. iPhone-Nutzer werden beim Besuch gefragt, ob sie die mobile Website besuchen möchten, oder die klassische Seite. Mit dem obigen Meta-Tag kann man diese dann aber auf dem iPhone nicht mehr skalieren. Für das iPhone empfiehlt sich eher:

<meta name="viewport" content="width=device-width">

Will man allerdings (für das iPad) zwei Ansichten für Portrait- und Landscapemodus präsentieren (vs. vergrößerte Portraitansicht im Landscapemodus), dann ist man auf das minimum-scale=1.0, maximum-scale=1.0 festgelegt.

Überraschenderweise kann man aber auch diesen Metatag per Javascript setzen! Es hat allerdings ein wenig gedauert, bis ich das einfach mal ausprobiert habe (hüstel). Außerdem musste dafür ganz schön an unserer Seitenstruktur geschraubt werden.

Wie geht’s weiter?

Zunächst mal kommen jetzt schnell weitere Tablets dazu, mit denen man die Seite betrachten kann. Es war leider schnell klar, dass man mit einem Schlag nicht alle Tablets bedienen kann. Mindestens an den Einstellungen des Viewports müssen Anpassungen gemacht werden, wahrscheinlich auch etwas CSS und Script. Wobei, wir wollen jetzt auch nicht jedes Tablet das neu auf den Markt kommt kaufen (der Gadgetjäger in mir fragt natürlich: »warum eigentlich nicht«). Man wird sehen, was sich am Tabletmarkt noch tut und was sich durchsetzt. Wir räumen zunächst mal dem Galaxy Tab von Samsung gute Chancen ein, und wenn RIM mit einem Tablet kommt, wird’s ja vielleicht auch nochmal interessant.

Abschließend sei gesagt, dass die Sache natürlich ein gutes Stück weit vom Design der Information Architects lebt, Oliver Reichenstein hat dazu einen schönen Artikel geschrieben, der auch die – ich nenne es mal so – medienpolitischen Hintergründe gut erfasst und viel von dem Geist beschreibt, der hinter dieser Webapp steckt.

Noch ein paar Artikel und Stimmen zum Thema: iPadMag, Editors Weblog, iPad Planet NL

11 Kommentare

  1. Super, vielen Dank für den Einblick in die Praxis der Meadia-Queries und die vielen Gedankenspiele, die Du dir gemacht hast. Die Theorie ist eigentlich immer einfach. Die Praxis richtet sich nur leider sehr selten nach ihr :-)

  2. Danke für die Einblicke in die Entwicklung der iPad Website. Ich erkenne ganz klar die Notwendigkeit des User Agents Sniffings in Verbindung mit Media Queries, um dann dem jeweiligen Endgerät das notwendige Stylesheet zukommen zu lassen. Aber wird dadurch die Wartbarkeit der Seite nicht drastisch verschlechtert? Man muß ja theoretisch bei jeder Anpassung auf unzähligen Endgeräten testen.

    Wenn ich bedenke, was es schon alleine für ein Aufwand ist, die unterschiedlichen Browser zu bedienen… Und jetzt auch noch für jedes Tablet extra die Seite zu optimieren führt doch irgendwann zum coding chaos…? Vor allem bei der Flut an Tablets, welche uns in nächster Zeit überrollen wird.

    Ich denke da eher an eine wirklich klug durchdachte Informations-Architektur in Verbindung mit einem wirklich flexiblen Layout, dass sich dynamisch an den Viewport anpasst und evtl. über Media Queries rudimentär beeinflussen lässt. Aber dazu müsste man natürlich einen Komplett Relaunch hinlegen und ich weiß aus Erfahrung, wie schwierig (unmöglich) das bei großen Seiten ist.

    Happy Coding :-)

  3. »dass mit Mediaqueries eingeschränkte Stylesheets zunächst mal allesamt heruntergeladen werden«

    Ist das auch so, wenn man die Queries direkt im media-Attribut des link-Elements angibt?

  4. @molily Ja, denn das ist genau die Methode, mit der wir gearbeitet haben.

  5. @Ole Das mit der Wartbarkeit ist natürlich ein Problem, deswegen sehe ich hier auch erst Mal eine Zwischenlösung. Schöner ist es natürlich immer zu prüfen, ob ein Browser eine Fähigkeit hat, bevor man sie nutzt.

    Im Moment ist es aber auch glaube ich genau das Richtige, sehr granular einzuschränken, welche Geräte man bedient. Im Gegensatz zu den Problemem mit IE beim Desktopentwickeln bspw., sind die Unterschiede bei den Tablets noch sehr groß und die Seiten werden schnell: komplett unbedienbar.

  6. Schöner Artikel, wir kämpfen auch gerade an verschiedenen Fronten mit Media Queries und es ist schön, Einblicke in die Probleme/Lösungen anderer zu bekommen. Danke dafür.

  7. dot tilde dot
    19.11.2010, 12:10 Uhr

    vielen dank für den bericht -- der macht mut und lust!

    .~.

  8. Ich mag es wirklich, wenn du mit den Kollegen bei ZEIT einfach mal Sachen neu angehst und Dinge machst, die andere nicht machen. Das ist auch der Ansatz, den wir beim kommenden Relaunch von chronico.de „leben“.
    Dir gebührt natürlich ein Dankeschön, dass du deine Erfahrungen hier teilst. Halte uns also bitte mal hier auf dem Laufenden, wie es auch bei der Tabletumsetzung weiter geht.

  9. Vielen Dank für die Einsichten und den aufschlussreichen Artikel. Ihr habt damit gezeigt, dass man Wünsche nach verschiedenen Versionen genau abwägen sollte, solange die Umsetzung und die Interpretation der Inhalte den Theorien noch hinterherlaufen.

  10. Rakesh Pai führt aus, dass gegen die media-queries nur die Verbreitung in mobilen Endgeräten spricht. Diese sehe ich optimistischer als er.
    Opera Mini versteht diese selbstverständlich. Selbst auf meinem alten Smartphone mit Windows Mobile Professionell 6.1 läuft dieser seit 2,5 Jahren problemlos.
    Richtig Spass macht das Web ohnehin nur mit moderen, größeren Geräten mit Touchscreen.
    Wenn man auf aktuelle Statistiken schaut, empfehlen sich media-queries schon jetzt, Neben Android und iphone braucht man auch vor Blackberries diesbezüglich keine Angst zu haben.

  11. Hi @all, danke für die lieben Mails, Tweets und Kommentare. Ich trete dann mal offiziell in die Bugfixingphase ein, danach poste ich nochmal ein paar Updates. Stay tuned.

Ein Ping

  1. [...] Blog genauer die Gedankenspiele und technischen Details hinter der Tablet-Version beschrieben. Sein Fazit lautet, daß media-queries in der Theorie toll sind, die Praxis aber leider anders aussieht. [...]