In Vorbereitung auf das iPad hat Apple eine Information zur Gestaltung von iPad-gerechten Webseiten veröffentlicht. Primär zielt dies auf folgende Umfänge:
- Plug-ins: die Botschaft ist ganz klar: vermeide Plug-ins. iPad-Safari versteht HTML5 und erlaubt somit auf diesem Wege das Einbinden von Medien.
- Definition der Ansichtsgröße (viewports). Fest definierte Breiten führen zu unbequemen Zoomen und Multitouch-gesten nach dem ersten Öffnen.
- CSS-Elemente mit fester (fixed) Position. Diese können aufgrund des nicht skalierbaren Browserfensters im iPad ausserhalb der Ansicht landen und auch durch schieben und scrollen nicht erreicht werden.
- Mouseover-Effekte funktionieren bei Multitouch-Benutzerschnittstellen natürlich nicht. Daher währe eine Anpassung der Seite notwendig, wenn sie auf mouseover oder hover Effekte zurückgreift um bestimmte Inhalten anzuzeigen. Beispiel: ich fahre mit der Maus über ein kleines Kästchen, dies wird dann gross und präsentiert eine wunderschöne Eingabemaske für den Login. Klappt beim iPad nicht.
- Das iPad versteht keine editierbaren Inhalte (contenteditable). Klassische <form>-Eingabemasken sind zu bevorzugen. Wenn sie funktionsrelevant sind (z.B. Login) kann man sie auch als bindend bezeichnen.
Apple zeigt weiterhin, wie das iPad im Safari-Browser emuliert werden kann um eine erste Überprüfung der eigenen Site vorzunehmen.
- Schalte Plug-ins aus
- Aktiviere Entwicklermenü
- Erstelle einen eigenen Benutzer-Agenten (Entwickler-Menü) mit dem Inhalt
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
Nach erstem Test muss der DocBlogMac nur im Umfeld der Videos umgebaut werden. Daher habe ich die bisherige Einbindung der Videos mit Flash durch eine HTML5-Variante mit <video>-tag ausgetauscht.
<p class="video_stil"> <video width="XXX" height="YYY" autobuffer autoplay controls> <source src="URL/videoname.m4v" type="video/mp4" /></source> <!-- Safari --> <source src="URL/videoname.ogv" type="video/ogg" /></source> <!-- Firefox --> Kein HTML5 unterstützt </video> </p>
Dieses lässt sich über CSS-Stile einfach formatieren. Leider können sich die Browser-Hersteller mal wieder nicht auf ein Format einigen, so dass der ambitionierte Blogger Videos in zwei Formaten bereitstellen muss: mp4 für Safari und ogg für Firefox. Lediglich Google Chrome versteht beides.
Ein WordPress-Plugin, welches einen Videotag mit Degradation zu Flash bietet ist Degradable HTML5 audio and video. Damit kann man sich das Coden sparen und für andere als die genannten Browser bleibt immer noch ein wenig Flash übrig.
Na dann, ich bin gespannt.
Interessante Links zum Thema Tablets:
- www.tablet-user.de
- Apples Tech Note zur Darstellung von Internetseiten auf dem iPad
- Der Apfelblog zeigt ein Beispiel wie weit man iPad Websites auch ohne Plugins treiben kann
