Von HTML 5, dem iPad und dem steinigen Weg der Anderen
Kommentare

Irgendwer ist immer der Erste. Das gilt für Erstbesteigungen großer Berge, die Entdeckung ganzer Kontinente oder die bittersüßen Erfahrungen im Umgang mit neuen Gadgets, die sich aufmachen, die Welt

Irgendwer ist immer der Erste. Das gilt für Erstbesteigungen großer Berge, die Entdeckung ganzer Kontinente oder die bittersüßen Erfahrungen im Umgang mit neuen Gadgets, die sich aufmachen, die Welt zu verändern. In diesem Fall geht es um Thomas Fuchs, der in einem Artikel erklärt, zu welchen HTML-5-Tricks ihn das iPad zwingt.

Doch beginnen wir am Anfang: es geht um das Projekt EveryTimZone, einer für das iPad optimierte und auf HTML 5 basierenden, ziemlich schicken Website. Mit Hilfe eines Sliders kann man die gewünschte Uhrzeit einstellen und sich anzeigen lassen, wie spät es in anderen Zeitzonen ist. Der Clou an der Sache ist der, dass die Seite mit Ausnahme für die Werbung keine Bilder, keine JavaScript-Frameworks und keine externen CSS-Dateien verwendet. Zwar ist das Handling auf dem iPad etwas gewöhnungsbedürftig, aber es funktioniert.

So viel zur grauen Theorie, nun aber zu den harten Fakten. Wie bereits erwähnt wurde diese Webseite eigens für das iPad mit HTML 5 erstellt. Und man möchte gar nicht glauben, welche Steine einem das schicke Spielzeug so in den Weg legt. Sieben Klippen musste Fuchs umsegeln, um seine Seite möglichst performant zu bekommen – doch diese Pionierarbeit könnte sich auszahlen. Zumindest für andere; nämlich all jene, die ihre Seiten ebenfalls für das Patsche-Pad optimieren möchten. Immerhin will angeblich jeder diesen Flachmann aus dem Hause Apple haben, also müssen sich Seitenbetreiber entsprechend rüsten. Wer also mitmischen möchte, sollte die folgenden Punkte beachten:

  1. Bilder sind böse! Bilder und CSS-Gradients seien Gift für das iPad – Gradients in canvas zu zeichnen sei dagegen in Ordnung.
  2. CSS-Schatten sind böse! Auch hier gelte: canvas wäre okay. Welch ein Glück; kann man doch sicher sagen, dass CSS-Schatten die neuen runden Ecken seien.
  3. CSS für Animationen ist gut! … so lange sie möglichst simpel gehalten werden.
  4. Nutzt JavaScript-Touch-Events! Der Grund dafür ist so einfach wie einleuchtend: onclick-Events reagieren auf dem iPad mit leichter Verzögerung – ontouchmove-Events hingegen nicht.
  5. CSS-Opacity ist böse! Fuchs kann zwar nicht genau sagen, warum, aber using the opacity CSS property sometimes interferes with hardware-accelerated rendering, so if you experience slowdowns and think you’re doing everything right, see if you have opacity set somewhere.
  6. Vermeidet JavaScript-Frameworks! … denn die sind für Desktop-Browser optimiert.
  7. Nutzt immer 3D-CSS-Animationen! Das gilt auch, wenn man eigentlich nur 2D-Animationen benötigt, da der Mobile Safari die Hardware-Beschleunigung nur für 3D-Animationen anwirft.

Im Moment sieht es schwer danach aus, als wäre die Webseitenentwicklung für das iPad noch ein einziger, großer Trial-&-Error-Vorgang. Aber dank solcher Informationen muss man das Rad nicht jedes Mal aufs Neue erfinden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -