Digital Publishing für iPad, iPhone, Android und kindle

tabletpublishing.mobi

Big-Quiz in 3D

Extrem schnelles HTML5: die 3 häufigsten Fehler vermeiden

| Kommentare

Performance is Key.

Besonders wenn es um die Qualität einer App und ihre Benutzerfreundlichkeit geht. Viele interaktive Funktionen und Animationen gibt es nicht bei Mag+, Adobe Digital Publishing Suite & Co. Insbesondere bei Applikationen und Spielen, die Sie Ihren Lesern anbieten möchten, können Sie nicht auf HTML, CSS und JavaScript verzichten. Denken Sie an das härteste Musikquiz Deutschlands im Rolling Stone oder die Coverflow-Übersicht.

Beide In-App-Apps vewenden sehr intensiv CSS3 und JavaScript, um die logischen Abläufe und die Animationen zu steuern. Optimiert man nicht während des Entwickelns bedingungslos den Code für die mobile Verwendung, ruckelt das Endergebnis auf schwächeren Android-Tablets oder sogar dem (weit verbreiteten!) iPad 1. Ihre Leser sind enttäuscht, ihr Hund rennt davon und die Welt geht unter.

Um das zu vermeiden gibt es drei elementare Regeln, die Sie (oder Ihre Entwickler) niemals brechen dürfen (Nein, auch nicht ausnahmsweise!).

  1. Nutzen Sie Touch-Events statt Click-Events
  2. Verwenden Sie für 3D-Animationen Hardware-beschleunigte CSS3-Webkit-Eigenschaften
  3. Vermeiden Sie CSS3-Schatten und -Transparenz so weit es geht (Na gut, ausnahmsweise dürfen Sie Schatten und Transparenz anwenden. Aber auf älteren Geräten und in älteren iOS-Versionen führen diese Eigenschaften zu Ruckeln und Stress)

U Can’t Click This: Touch-Events

Ihnen ist beim Surfen mit dem Tablet bestimmt aufgefallen, dass aktive Hyperlinks beim Berühren eine abgedunkelte Markierung erhalten, bevor die Seite geladen wird. Bei Webseiten ist das okay, aber wenn Sie Links (auch JavaScript-Links) im HTML Ihrer Magazin-App verwenden, stört das den Benutzer. Erstens könnte er das Gefühl bekommen, Ihre App sei nicht aus einem Guß und er befände sich plötzlich im Web. Zweitens verursacht diese Funktion auch eine Verzögerung von fast einer Sekunde. Sie tritt dann auf, wenn Click-Events von iOS in Touch-Events umgewandelt werden müssen.

Sie können die Markierung und die Verzögerung vermeiden, indem Sie keine <a>-Tags einsetzen und statt des onclick-Attributs das Touchstart-Event eines Elements abfragen. Zum Beispiel so:


document.getElementById('link').addEventListener('touchstart', function (e) {
    alert('You touched my soul :)');
});

Eine Live-Demo von dem Mini-Code gibt es hier (läuft nur auf Geräten mit Touch-Screen): http://jsbin.com/omerux/ (Update: Danke an Anselm Hannemann für den wertvollen Tipp, das Beispiel ohne JavaScript-Framework zu zeigen.)

Turbolader für 3D-Animationen: CSS3-Webkit-Eigenschaften

3D-Animationen laufen auf iOS-Geräten flüssiger als 2D-Animationen. Klingt komisch, ist aber so. Zumindest, wenn man die 3D-Animationen von Webkit einsetzt (translate3d, rotate3d und scale3d als Eigenschaften von -webkit-transform:). Das bedeutet, dass Sie auch für 2D-Animationen diese 3D-Funktionen verwenden. Statt rotateX(90deg) schreiben Sie rotate3d(1,0,0,90deg), zum Beispiel.

Die komfortablen jQuery-Funktionen für Animationen (.slideUp() etc.) können Sie leider nicht einsetzen. In den wenigsten Fällen laufen die flüssig, da sie nicht für Webkit optimiert sind. Ich hoffe, dass dies in der nahen Zukunft so sein wird, bis dahin rate ich Ihnen aber Animationen statt in JavaScript in CSS3 und von Hand zu schreiben.

Schatten meiden und Transparenz fürchten

Irgendwie gibt es immer wieder Probleme mit Schatten und ganz besonders mit Transparenzen auf älteren Smartphones und auch auf meinem iPad 1 mit iOS 5. Thomas Fuchs riet schon 2010 davon ab, diese Gestaltungsmerkmale übermäßig einzusetzen. Das Problem: es gibt viele Tablets und Smartphones aus dieser Zeit und nur manche Benutzer aktualisieren die Firmware ihrer Geräte. Es betrifft die CSS-Eigenschaften -webkit-box-shadow und text-shadow, ganz besonders aber opacity — fast immer in Verbindung mit Animationen. Auf neuen Geräten (iPad 2, Galaxy Tab, iPhone 4) treten die Ruckler nur kaum merklich auf, während die Effekte auf iPhone 3GS und iPad 1 zu echten Hängern werden. Ich rate daher — wegen der vielen betroffenen Benutzer — noch davon ab Transparenzen mit opacity und Schatten einzusetzen, wenn es vermeidbar ist.

Eine Alternative für durchsichtige Vollton-Hintergründe stellt die Farbdefinition mittels rgba() dar. Also zum Beispiel background-color: rgba(106,204,24,0.5) für ein halbdurchsichtiges Geil,Danke!-Grün.

Tausend andere Verbesserungen

Diese drei Grundregeln sind nur ein Anfang der Performance-Verbesserung ihrer HTML5-Applikation für digitale Magazine. Es gibt abertausende weitere, andere Möglichkeiten zu Optimieren. Fangen Sie damit an und Sie werden deutlich spürbare Ergebnisse erzielen. Überlegen Sie dann, ob Sie die Usability mittels Offline-Speicher (WebSQL, LocalStorage), dem Komprimieren von Mediendateien (Metadaten entfernen, Bild- oder Sound-Sprites, Bildoptimierung) und Scripts (Minify, Minimize und Compress JavaScript) oder mit Ladebalken, Sanduhren etc. weiter verbessern können. Geben Sie dem User Rückmeldung, wenn etwas passiert.
Und denken Sie daran Ihre In-Apps ausgiebig zu testen. Eine langsame Applikation, auf die der Leser ewig warten muss oder die nicht reagiert, wie sie sollte, bringt niemandem etwas!

Haben Sie Fragen zur Verbesserung Ihres Codes oder wichtige Tipps und Hinweise für andere Leser oder mich? Schreiben Sie mir eine Mail eine Twitter-Nachricht oder hinterlassen Sie einfach einen Kommentar! Ich freu mich drauf.

Vielleicht interessieren Sie diese Artikel zu ähnlichen Themen?

Oder als Inspiration weitere (englische) Artikel zum Optimieren der Performance auf Smartphones/Tablets:

Autor: Richard Brammer

Richard ist Web-Entwickler und Digital-Publisher. Er arbeitet an den digitalen Ausgaben von Rolling Stone, GQ, AutoBILD, SportBILD+, elektrospieler und CRATE. Außerdem ist er Co-Autor der Bücher "Adobe Digital Publishing Suite" und "Digitales Publizieren für Tablets". Folgen Sie ihm auf Twitter.


Notice: Undefined variable: ret in /home/netsh101728/html/tabletpublishing/wordpress/wp-content/plugins/simple-google-analytics/class/Output.class.php on line 139