Prototyping mit HTML, CSS & Javascript auf dem iPad 2

7 wichtige Schritte zur vollwertigen HTML-Web-Applikation

2011-07-22 / 10h David Querg Mobile Device, Prototyping, UX

Der Markt wird geradezu mit digitalen Magazinen überschwemmt und meistens sind dabei gängige Publishing Lösungen mit starrer Architektur und unflexibler Navigation im Einsatz. Um sich Freiheiten in der Konzeption zu bewahren kann es sinnvoll sein eine App als moderne Website mit HTML 5, CSS 3 und Javascript zu entwickeln.

Im Rahmen des letzten Seminars »Books and Magazines on Touchscreens«
unter Markus Strick und Wolfgang Gauss haben Florian Feiter und ich »DIEKONTEXT« – eine individualisierbare Newsapp – konzipiert. Hauptziel für die Semesterausstellung war es einen Prototypen zu entwickeln, der zum einen die Präsentation erleichtert und zum anderen jedem Besucher ein einfaches ausprobieren ermöglicht.

Warum kein InDesign Plugin?

Es gibt inzwischen einige Lösungen um digitale Magazine zu produzieren und Adobe's Digital Publishing Solution oder Woodwing sind nur zwei Beispiele dafür, dass alle diese Lösungen einige große Nachteile mit sich bringen:

• vorgegebene, starre Architektur
• vorgegebene Navigationselemente
• nahezu keine Individualisierung / Spezial-Inhalte / Datenbank-Anbindung

Der für uns wesentlichste Punkt nicht mit einer vorhandenen Lösung zu arbeiten lag in unserem Ziel eine App zu entwickeln, welche auf einer Datenbank basiert. Der Unterschied zu einem Magazin liegt darin, dass es sich niemals um eine abgeschlossene Ausgabe handeln kann, sondern immer um eine Art Livestream. Das muss sich natürlich auch in der Architektur, Hierarchie und Navigationsform wiederspiegeln. Und diese Architektur muss frei von existierenden Vorgaben gestaltet werden können.

Kurz gesagt: Existierende Publishing-Lösungen geben einem nicht die Freiheiten die wir in der Konzeption und Gestaltung des Gesamtsystems haben wollten.

iPad 2 und HTML 5, CSS 3 und Javascript

Das iPad 2 ist gegenüber seinem Vorgänger ein wahres Rendermonster, also um einiges leistungsfähiger. Zudem die mobile Safari Version alle modernen CSS Anweisungen interpretiert, ist mit HTML / HTML 5, CSS 3 und jQuery eine perfekte Basis gegeben um hochwertige bis sogar vollfunktionsfähige Web-Applikationen zu entwickeln. Dennoch sind einige wichtige Punkte bei der Entwicklung zu beachten:

1. App Icon Fullscreen Modus
2. 3D Animation / Transitions
3. Animationen starten
4. Scrolling, Touchswipe, Doubletap
5. Ausrichtung / Orientation
6. Tipps
7. Ressourcen

1. App Icon & Fullscreen Modus

Homebildschirm & Icon: Damit eine normale Website als eigenständiges App auftreten kann, müssen wir zunächst auf dem iPad die Website aufrufen und diese zum Homebildschirm hinzufügen. Normalerweise wird nun ein Screenshot der Seite als Icon verwendet. Um ein eigenes Icon zu verwenden benötigen wir nur einen simplen Metatag:

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>


Specifying a Webpage Icon for Web Clip 

Das Icon selbst sollte eine PNG mit 72x72 Pixel sein, zumindest wenn das ganze nur für das iPad gedacht ist. Ansonsten lassen sich auch mehrere Varianten des Icons mit dem Attribut "sizes" hinterlegen.

<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone5.png"/>

Wird das Icon erst nachträglich eingefügt oder geändert muss die Website erneut zum Homebildschirm hinzugefügt werden, weil das iPad diese Informationen nicht erneut abfragt bzw. auf lokal gespeicherte Daten zurückgreift und nicht auf die online Daten. Beim Hinzufügen zum Homebildschirm erhält die PNG vollautomatisch runde Ecken, einen Schlagschatten und die typische Reflektion.

Das Icon funktioniert nun wie eine Bookmark. Bei Tap wird man direkt zur gespeicherten Adresse geleitet. Ein grundlegendes Problem besteht nun darin die nervige Browserzeile dauerhaft verschwinden zu lassen.

Fullscreen: Der erste Schritt ist einfach. Es muss lediglich ein weiterer Metatag hinzugefügt werden um die Safari-Browser-Zeile auszublenden. Weiterhin wird an dieser Stelle der manuelle Zoom ausgeschaltet. Ob das gewünscht ist oder nicht muss jeder selbst bei der Prototypen-Entwicklung entscheiden.

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


Hiding Safari User Interface Components & Changing the Status Bar Appearance 

Für eine einzelne Seite funktioniert der Fullscreen Modus perfekt. Wenn nun aber ein Link enthalten ist, wird die neue Seite in einem neuen Browser-Fenster geöffnet. Das heißt erstens ist die Browserzeile wieder da und zweitens wird eine evtl. ungewollte Transition gestartet.

Ajax ist das Stichwort um eine mehrseitige Website im Vollbildmodus auf das iPad zu bringen. Alle Seiten und Inhalte müssen vollständig dynamisch geladen werden. Spätestens jetzt empfiehlt sich der Einsatz von jQuery sehr. Um sinnvolle Seitenübergänge entwickeln zu können empfiehlt es sich die dynamischen Inhalte jeweils in einen eigenen Wrapper zu laden. So kann jeweils der aktive und der neu-geladene Container animiert werden.

…
<div id="wrapper1" class="wrapper active">
    /* aktueller Inhalt */
</div>
<div id="wrapper2" class="wrapper">
    /* leer */
</div>
<script type="text/javascript">
    function loadContent ( /* Parameter */ ) {
        var activeWrapper = "wrapper1";
        var loadingWrapper = "wrapper2";
        /*
        1. Inhalt wird von Zieladresse geladen und in loadingWrapper eingefügt.
        2. Animation wird mit AnimationOut und AnimationIn gestartet.
        3. Der bisher noch activeWrapper wird vollständig ausgeblendet. 
        (removeClass active)
        4. Der bisher noch loadingWrapper wird vollständig eingeblendet. 
        (addClass active)
        5. Der bisher noch activeWrapper wird geleert.
        */
        var temp_activeWrapper = activeWrapper;
        activeWrapper = loadingWrapper;
        loadingWrapper = temp_activeWrapper;
    }
</script>
…


Jquery.ajax() 

Alle wichtigen Vorbereitungen für eine Fullscreen HTML App/Website auf dem iPad sind erledigt. Ein wesentlicher Faktor für die Bedienbarkeit, Orientierung sind die Animationen oder auch Transitions genannt.

2. 3D Animation / Transitions

Wenn man HTML Elemente animieren möchte kann das in komplexeren Strukturen schnell ressourcenfressend werden. Deshalb ist es wichtig zu verstehen, dass die neuen 3D Animationen wesentlich flüssiger gerendert werden und ablaufen als vergleichbare 2D Animationen, jedenfalls im Safari und somit auch auf dem iPad.

Das ist um es kurz zu sagen eine sehr gute Nachricht, weil die 3D Animationen ohnehin mehr Möglichkeiten für Seitenübergänge liefern, als klassische 2D Animationen. Wir müssen sie lediglich einmal richtig verstanden haben.

<style type="text/css">
/*
    Es ist sehr sinnvoll grundsätzliche Einstellungen 
    in separaten Klassen festzuhalten: Zeit, 3D, Easing
*/
.transition {
-webkit-animation-duration: 0.8s;
-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function: ease-in-out;
}
/* öffnen / reinzoomen */
.popIn {
    -webkit-animation-name: popIn;
}
@-webkit-keyframes popIn {
    0% {
        -webkit-transform: scale(.1, .05);
    } 
    100% {
        -webkit-transform: scale(1);
    }
}
/* schließen / rauszoomen */
.popOut {
    -webkit-animation-name: popOut;
}
@-webkit-keyframes popOut {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(.1, .05);
    }
}
</style>


Using CSS3 Transitions, Transform and Animation 

Mit den -webkit-transform Angaben perspective(…), translate3d(…) und rotateY(…) lassen sich alle denkbaren Transitions realisieren. Hier noch ein paar Beispiele für Flips, Swaps und Slides:

@-webkit-keyframes flipIn {
    0% {
    -webkit-transform: scale(1) translate3d(0px, 0px, 0px) perspective(800) rotateY(-180deg);
    }
    30% {
    -webkit-transform: scale(.8) translate3d(0px, 0px, 0px) perspective(800) rotateY(-180deg);
    }
    70% {
    -webkit-transform: scale(.8) translate3d(0px, 0px, 0px) perspective(800) rotateY(0deg);
    }
    100% {
    -webkit-transform: scale(1) translate3d(0px, 0px, 0px) perspective(800) rotateY(0deg);
    }
}
@-webkit-keyframes swaprightIn {
    0% {
    -webkit-transform: perspective(800) translate3d(0px, 0px, -800px) rotateY(70deg);
    }
    35% {
    -webkit-transform: perspective(800) translate3d(-180px, 0px, -400px) rotateY(20deg);
    }
    100% {
    -webkit-transform: perspective(800) translate3d(0px, 0px, 0px) rotateY(0deg);
    }
}
@-webkit-keyframes slideInToLeft {
    0% {
    -webkit-transform: perspective(800) translate3d(900px, 0px, 0px) rotateY(0deg);
    }
    30% {
    -webkit-transform: perspective(800) translate3d(900px, 0px, -300px) rotateY(0deg);
    }
    70% {
    -webkit-transform: perspective(800) translate3d(0px, 0px, -300px) rotateY(0deg);
   }
    100% {
    -webkit-transform: perspective(800) translate3d(0px, 0px, 0px) rotateY(0deg);
    }
}

Beim praktischen Einsatz der Animationen kann es manchmal hilfreich sein beim Beginn oder Ende eine 1%-Hürde einzubauen wie z.b.: "0% mit display:none; und 1% mit display:block;". So kann sichergestellt, dass bestimmte Animationen korrekt ablaufen. Ebenso muss evtl. via Javascript am Ende einer Animation dafür gesorgt werden, dass Out-Animations-Elemente auch vollständig verschwinden.

3. Animationen starten

Wenn alle Animationen und grundlegende Einstellung separat voneinander in Klassen abgelegt werden, müssen wir nur noch Animationen starten. Und das funktioniert schlicht und ergreifend indem wir die Klasse mit dem Animationsnamen zuweisen. Wenn viele verschiedene Transitions für die gleichen Elemente im Einsatz sind ist es natürlich nötig alte Transition-Klassen zu entfernen bevor eine neue zugewiesen wird.

<script type="text/javascript">
    function startAnimation( el, neue_transition ) {
        var cleanThis = 'string mit allen Klassen die entfernt werden sollen';
        el.removeClass( cleanThis );
        el.addClass( neue_transition );
    }
</script>

Natürlich wird hier jQuery eingesetzt um den Code schlank zu halten und die Entwicklung des gesamten Prototyps zu beschleunigen und zu erleichtern. Das Grundprinzip ist also denkbar simpel. Zunächst werden alle Animationen über CSS definiert und anschließend werden Sie über einen Javascript Event oder eben per onclick zugewiesen und gestartet.

4. Scrolling, Touchswipe, Doubletap

Beschäftigt man sich damit mehrere scrollbare Bereiche in eine Website auf dem iPad zu integrieren, merkt man schnell dass hier gängige Methoden nicht wirklich greifen. Abgesehen davon, dass Inline-Frames ohnehin eine veraltete Technik darstellen liefert Mobile Webkit auf dem iPad, iPhone oder Android keine Möglichkeit Container mit fester Höhe und Breite scrollbar zu gestalten. Somit sind Layer mit einer absoluten Positionierung schlichtweg nicht möglich, das würde sich wiederum auf sinnvolle Transitions auswirken. Glücklicherweise gibt es sehr gute Javascripts, welche sich genau mit dieser Problematik befassen:

Scrolling: iScroll 4 liefert in der aktuellen Version nicht nur scrollbare Divs, sondern auch Funktionen wie pinch / zoom, pull up/down to refresh, speed and momentum, Snap to element & customizable scrollbars. Wir haben iScroll 4 eingesetzt um erstens sämtliche scrollbaren Bereiche zu kontrollieren und zweitens um die per Swipe steuerbaren Bildergalerien zu erstellen.

In Verbindung mit Ajax kann der Einsatz von iScroll komplexer werden. Warum? iScroll definiert den scrollbaren Bereich über die gemessene Höhe des inneren DIVs. Das bedeutet wenn sich der Inhalt und somit auch die Höhe eines Containers ändert muss auch ein Refresh des iScroll Scripts erfolgen und zwar erst nachdem der Inhalt in das entsprechende HTML Element eingefügt wurde.

Gestures: Touchswipe ist ein gutes Script um Gesten zu erkennen und mit einer Aktion zu versehen. Touchswipe erkennt sogar ob nur ein einzelner Finger oder zwei Finger während der Geste verwendet werden.

Doubletap: Leider ist Touchswipe nicht in der Lage DoubleTaps zu erkennen, was aber durchaus sinnvoll sein kann. Raul Sanchez liefert ein gutes Script in Verbindung mit jQuery um DoubleTaps auf Objekten zu erkennen und mit Aktionen zu belegen.

Momentan scheinen die drei Erweiterungen die wichtigsten Komponenten zu enthalten um eine wirklich vollwertige Web-Applikation zu entwickeln. Ganzheitliche Frameworks wie SenchaTouch sind vor allem wertvoll um Animationen für Transitions oder Lösungsansätze zu übernehmen. Meiner Meinung nach empfehlen Sie sich aber nicht für die Konzeption einer neuen Architektur.

5. Ausrichtung / Orientation

Ein letzter wichtiger Schritt besteht darin die Ausrichtung des iPads unter Kontrolle zu kriegen, sprich: Portrait- & Landscape Mode.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">


iPad Orientation CSS 

Die Umsetzung ist sehr simpel, es müssen lediglich zwei unterschiedliche CSS Dateien eingesetzt werden. Genau deshalb ist es auch wichtig möglichst wenig CSS Code im Javascript Code zu implementieren, sondern die zwei Sprachen voneinander getrennt zu behandeln.

Unter Umständen müssen erstellte Galerien, verwendete Inline-Images oder ähnliches via Javascript Erkennung ausgetauscht werden und auf jeden Fall muss ein Refresh der iScroll-Container erfolgen. Der letztere wird aber laut Entwickler in der aktuellen Version automatisch bei Orientation-Wechsel durchgeführt.

6. Tipps

Javascript: In einigen Blogs wird behauptet, dass nur selbst geschriebener Javascript Code wirklich flüssig und gut auf dem iPad 2 funktioniert. Dabei wird hier nicht wirklich erwähnt ob der Einsatz eines Frameworks wie jQuery trotzdem sinnvoll ist, oder ob auch das schon zuviel des guten ist. Entgegengesetzt der Meinung der Blogautoren kann ich keinesfalls bestätigen, dass der Einsatz von jQuery zu Problemen führt.

Der Einsatz ganzheitlicher Mobile Device Frameworks wie SenchaTouch oder jQueryMobile dagegen ist kritisch zu sehen. Schlichtweg aus dem Grund, dass die Individualisierbarkeit nach eigenen Bedürfnissen nicht zwingend gegeben ist. Für unser Projekt kam aus diesem Grund auch kein Framework wie SenchaTouch, jQueryMobile oder Laker in Frage.

CSS: Obwohl vor allem das iPad 2 mit guter Hardware ausgestattet ist, muss man ein wenig auf die Ressourcen achten wenn es mit der Gestaltung der rohen HTML Elemente mittels CSS 3 los geht. Der umfangreiche Einsatz von opacity, box-shadow, text-shadow & css-gradients ist mit Vorsicht zu genießen.

Zunehmend kritisch wird der Einsatz dieser Attribute wenn sie animiert werden. Da wo es geht sollten tendenziell kleine PNGs für halbtransparente Fläche eingesetzt werden. Grundsätzlich muss aber auf einen umfangreichen Einsatz dieser neuen CSS-Methoden verzichtet werden.

Animationen & Abfolgen: Manchmal kann es sehr schwierig werden die zeitliche Abfolge bestimmter Animationen oder Aktionen mithilfe von Javascript in den Griff zu bekommen. Hier hat zumindest für unseren Prototypen die queue(…)-Methode weitergeholfen. Mit ihr konnten wir nahezu alle Transitions inkl. Laden der Inhalte sowie Ein- & Ausblenden der Container in eine zeitlich sinnvolle Abhängigkeit stellen.

An dieser Stelle soll aber auch klar gesagt werden, dass es sicherlich schönere Methoden gibt diese Problematik unter Kontrolle zu bekommen. Ich bin mir hier auch nicht sicher, ob diese Funktion überhaupt für derartige Anwendung ausgelegt ist.

7. Ressourcen

• Developing for mobile Safari
• Detection & Orientation
• Orientation
• Detection
• Tipps

• Laker Compendium
• Sencha Touch

• iScroll
• Touchswipe
• Doubletap

Fazit

Wenn man einmal die Grundprinzipien verstanden und das Grundkonstrukt aus Fullscreen App, Ajax, Transitions und evtl Datenbank Anbindung entwickelt hat ist das befüllen mit Inhalten und stylen nur noch eine Frage des Geschmacks und der Zeit. Im Team ist es dabei besonders entscheidend eine äußerst eindeutige Ordner- und Codestruktur festzulegen. Denn je komplexer das Projekt wird desto schwieriger und zeitraubender wird die spätere Fehlersuche oder Code-Optimierung, sowie das spätere Hinzufügen oder Anpassen wichtiger Funktionen.