Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 32

UX und HTML5: So verbesserst du die User-Experience mobiler Web-Apps

    UX und HTML5: So verbesserst du die User-Experience mobiler Web-Apps

Gute User-Experience mit mobilen Web-Apps.

Kaum eine Webtechnologie hat in den letzten Jahren für so viel Furore gesorgt wie HTML5. Vor allem für mobile Web-Apps ist die Technik interessant, da diese nicht den Kontrollmechanismen der App-Stores unterworfen sind. Und mittlerweile ist auch die User-Experience dieser Apps nicht mehr weit entfernt von der Nutzererfahrung einer nativen Applikation.

Wer eine native iPhone-App vertreiben möchte, muss zwangsläufig durch den Apple App Store. Dabei wird nicht nur eine Zwangsabgabe von 30 Prozent fällig – die Entscheidung, wer reinkommt und wer nicht, hängt auch von Apples Wohlwollen ab. Das hält zwar Viren und Schadsoftware fern, verhindert aber auch alle Inhalte, die nicht ins Weltbild des Hardware-Herstellers passen.

Web-Apps mit HTML5 sind die Alternative. Sie starten wie Websites im Browser und erfordern keine Installation. Was landläufig als HTML5 bezeichnet wird, ist eine Kombination aus JavaScript, CSS-Effekten und modernen Browser-Funktionen, die sich mit HTML-Befehlen abrufen lassen. Das heißt: Jede Web-App ist nur so gut wie der Browser, der sie aufruft. Die gute Nachricht: Der aktuelle iPhone- und Android-Browser ist durch die Ausstattung mit der Rendering-Engine WebKit ziemlich gut – wenn nicht gar der Beste auf dem Markt. Auch wenn Google kürzlich ankündigte, bei Chrome in Zukunft auf einen WebKit-Fork namens Blink zu setzen, dürfte sich daran nichts ändern. Und so müssen User, die Web-Applikationen nutzen, in Sachen User-Experience im Vergleich zu nativen Apps kaum noch Kompromisse eingehen. Das soll im Folgenden eine Auswahl der spannendsten HTML5-, CSS3- und JavaScript-Technologien verdeutlichen.

Ein HTML5-Geo-Tracker

Ein Smartphone-Browser kann heute schon auf fast alle Funktionen des Telefons zugreifen, die auch native Apps abrufen können. Bewegungssensor und Kamera? Kein Problem. Mit einer einzigen Zeile JavaScript lässt sich die GPS-Position eines Smartphones ermitteln:

GPS-Position ermitteln

navigator.geolocation.getCurrentPosition();

Listing 1

Das Gerät orientiert sich nicht nur an GPS-Satelliten, sondern auch an sichtbaren Wireless-Netzwerken. So behält man auch in geschlossenen Räumen die Orientierung. Dass die Position in Längen- und Breitengrad angegeben ist, mag für Pfadfinder aufschlussreich sein – allen anderen hilft Google Maps weiter: Mit der Static-Maps-API verwandeln sich die Koordinaten in eine detaillierte Karte:

Ortskoordinaten in eine Karte verwandeln

navigator.geolocation.getCurrentPosition(function(position){
 var map = document.getElementById('map');
 var mapSrc = "http://maps.googleapis.com/maps/api/staticmap";
 mapSrc += "?markers="+position.coords.latitude+","+position.coords.longitude;
 mapSrc += "&sensor=true";
 map.src = mapSrc;
});

Listing 2

Um die aktuelle Position zu speichern und beim nächsten Start auf einer Karte anzuzeigen, kommt localStorage zum Einsatz – eine einfache Datenbank im Browser des Smartphones. Datenbankeinträge lassen sich einfach per JavaScript abspeichern und wieder auslesen:

localStorage einsetzen

localStorage.setItem(key,value);
value = localStorage.getItem(key);

Listing 3

Der Clou: Die App speichert die Daten auf dem Gerät und muss sie nicht an einen Server übertragen. Dadurch lässt sie sich auch bei schlechtem Empfang zuverlässig bedienen. Kombiniert man nun beides in einer kleinen HTML5-App, sieht das Ganze etwa so aus:

HTML5-Geo-Tracker

var coordinates;
var loadFromLocalStorage = function() {
 var marker = "";
 for(key in localStorage) {
 marker += localStorage.getItem(key)+"|";
 }
 return marker;
};
navigator.geolocation.getCurrentPosition(function(position){
 coordinates = position.coords.latitude+","+position.coords.longitude;
 var map = document.getElementById('map');
 var mapSrc = "http://maps.googleapis.com/maps/api/staticmap";
 mapSrc += "?markers="+loadFromLocalStorage();
 mapSrc += "&size=" + window.innerWidth + "x" + window.innerHeight;
 mapSrc += "&sensor=true";
 map.src = mapSrc;
 localStorage.setItem(Date.now(),coordinates);
});

Listing 4

Einfache Marker auf der Karte sind zwar schön und gut, aber richtig cool wird es erst, wenn man eigene Fotos auf der Karte verlinken kann. Aber halt – ist das nicht ein Zugriff auf eine Hardware-Funktion, die nativen Apps vorbehalten ist? Ganz und gar nicht. Denn seit iOS 6 und Android 4 beherrscht auch der WebKit-Browser das Datei-Upload-Formularfeld:

Das Datei-Upload-Formularfeld

<input type="file">

Listing 5

Auf Apple-Geräten startet diese Zeile die Kamera. Foto schießen und schon steht das Bild in der Web-App zur Verfügung. Genau wie in nativen Apps lassen sich so auch Fotos aus der Galerie auswählen, unter Android sogar solche aus einer Dropbox.

Bessere User-Experience in Formularen

Der Datei-Upload ist nicht das einzige neue Formularfeld, das seinen Weg auf das Smartphone gefunden hat (Seite 136). Ebenfalls neu sind die Typen „datetime“, „email“ und „tel“:

Neue HTML5-Input-Typen

<input type="datetime">
<input type="tel">
<input type="email" required>

Listing 6

Was auf den ersten Blick wie normale Textfelder aussieht, entpuppt sich beim Antippen als äußerst nützlich: Anstelle der Standardtastatur bieten diese Felder spezielle Eingabemöglichkeiten für E-Mail-Adressen und Telefonnummern an. Das Feld „datetime“ hat sogar eine Art Einstellrad zum Auswählen eines Datums mit Zeitangabe (das klappt übrigens auch mit „date“ oder „time“ alleine).

Das Attribut „required“ sorgt dafür, dass sich das Formular erst abschicken lässt, wenn der Nutzer eine E-Mail-Adresse eingetragen hat. Das funktioniert natürlich auch mit allen anderen Formularfeldern. Der entscheidende Vorteil dieser clientseitigen Validierung: Die Daten sind geprüft, wenn sie zum Server gehen – für langsame Internetverbindungen ein Segen. Mit einer CSS Pseudoklasse lässt sich direkt darstellen, ob ein Formularfeld die richtigen Angaben enthält:

Validierung von Formularfeld-Eingaben

input:focus:invalid {
border-color: red;
}

Listing 7

In unserem Beispiel wird das Feld rot umrandet, wenn der Nutzer eine unzulässige Eingabe getätigt hat.

Multi-Touch per JavaScript

Mit Hammer.js lassen sich Multi-Touch-Gesten in Web-Applikationen einbauen. jQuery ist für den Einsatz von Hammer.js nicht nötig.
Mit Hammer.js lassen sich Multi-Touch-Gesten in Web-Applikationen einbauen. jQuery ist für den Einsatz von Hammer.js nicht nötig.

JavaScript-Bibliotheken sind immer noch da hilfreich, wo der Browser sich etwas „zu doof“ anstellt. Ein solches Beispiel ist Multi-Touch: Mit Bordmitteln lässt sich zwar feststellen, ob gerade ein oder zwei Finger über das Display gleiten – jedoch nicht, welche Geste sie ausführen. Hier kommt Hammer.js ins Spiel. Die Open Source-Library von Eight Media erweitert die interne Event-Liste um die typischen Multi-Touch-Gesten. Neben Pinchen, Swipen, Rotieren und Transformen lassen sich so Drag-and-Drop-Funktionen in die Web-App einbauen:

Drag-And-Drop-Funktion

Hammer(el).on("drag", function() {
 console.log("Lass mich los!");
});

Listing 8

Web-Apps Offline? Kein Problem

Für langsame Internet-Verbindungen bietet HTML5 ein besonders hilfreiches Feature: Das Cache-Manifest legt fest, welche Stylesheets, Bilder und HTML-Daten auf dem Gerät zwischengespeichert werden sollen. Beim nächsten App-Start lädt die App diese dann nicht aus dem Internet, sondern direkt aus dem Browsercache – selbst wenn man gerade im Funkloch steht:

Cache-Manifest

CACHE:
#images
./img/cover.png

#style sheets
./css/app.css
./css/fonts.css
./css/themes.css

#javascript
./js/app.js

NETWORK:
*

Listing 9

Entwickler binden Cache-Manifest direkt am Anfang in das öffnende <html>-Tag mit dem Attribut „manifest“ ein. Das Manifest selbst ist eine einfache Textdatei, die man im Editor seiner Wahl bearbeiten kann. Statt die Dateien von Hand zusammenzutragen, sollte jedoch lieber das Tool „manifestR“ genutzt werden: Das Bookmarklet erzeugt mit einem Klick eine vollständige Liste. Jetzt gilt es nur noch, dafür zu sorgen, dass der Webserver auch versteht, was eine Manifestdatei ist. Das geht am einfachsten über den Eintrag einer Zeile in der .htaccess-Datei:

Registrierung der Manifest-Datei

AddType text/cache-manifest .appcache

Listing 10

Aber Vorsicht: Einmal im Cache, bleiben die Assets hartnäckig auf dem Gerät. Geänderte Dateien werden nicht erkannt, was zu einer Menge Frust beim Entwickler führen kann. Idealerweise sollte das Cache-Manifest daher der letzte Schritt bei der App-Entwicklung sein.

App-Icon auf Home-Screen

So beeindruckend die Features von HTML5 auch sein mögen, ohne Icon auf dem Home-Bildschirm wirkt eine Web-App nicht wie eine vollwertige Applikation. Auch die Symbolleisten des Browsers nerven irgendwie und nehmen unnötig viel Platz weg. Doch wenige Zeilen HTML-Code verwandeln eine Website in eine richtige Web-App:

App-spezifische Meta-Angaben

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="apple-touch-icon" href="./img/Icon@2X.png" />

Listing 11

Wenn der Nutzer die Seite zum Home-Bildschirm hinzufügt, erhält er statt der üblichen Miniaturvorschau das App-Symbol angezeigt. Das Icon muss genau 114 mal 114 Pixel groß sein – um die abgerundeten Ecken und den typischen Glanzeffekt kümmert sich iOS. Obwohl es Apple-Touch-Icon heißt, funktioniert das Symbol auch unter Android (Inspiration für gute App-Icons findet man online). Außerdem läuft die App nun im Vollbildmodus, die Browser-Elemente sind verschwunden. Damit unterscheidet sich die Web-App kaum noch von einer nativen Applikation.

Fazit

Mit Hilfe neuer HTML5-, CSS3- und JavaScript-Technologien stehen Web-Apps in Sachen Nutzererlebnis nativen Applikationen kaum noch nach. Von Geolokalisierung und Zugriffen auf Hardware-Komponenten bis hin zu Multi-Touch können Entwickler mittlerweile die Funktionalität einer nativen App in einer Web-Applikation nahezu 1:1 abbilden. Und täglich kommen neue spannende Technologien dazu, die in mobilen Browsern noch mehr möglich machen.

Buchinfo „Apps mit HTML5 und CSS3”
Apps, die auf Android, iPhone und Windows Phone funktionieren? Florian Franke und Johannes Ippen zeigen, wie das geht (http://amzn.to/15858Gg). Auf 480 Seiten lernt man alles über die Planung, Gestaltung und Entwicklung einer App, wie man die Features von HTML5 richtig einsetzt und wie Frameworks das Leben leichter machen. Abgerundet wird das Ganze durch eine Anleitung zur Veröffentlichung im App Store von Apple und Google Play. Der Titel erscheint in zweiter Auflage bei Galileo Computing, ISBN 978-3-8362-1848-1.
Johannes Ippen
Johannes Ippen

ist Designer und Autor aus Berlin (http://johannesippen.com). Als Senior Graphic Designer ist er beim Spieleentwickler Wooga für Corporate Design & Branding verantwortlich, nebenher versucht er bei Thanksalot.co mit Indie-Apps und Designstudien die Welt zu verbessern. Hier entstand unter anderem das vielbeachtete „Aside Mag“, das erste HTML5-basierte Magazin fürs iPad. Seine Erfahrungen hat er im Buch „Apps mit HTML5 und CSS3“ gesammelt.

Links und Literatur

  1. HammerJS
  2. Das Tool „manifestR“
  3. Einige Beispiele für gute App-Icons

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

6 Reaktionen
FelixT

Johannes, was du beschreibst ist lediglich die Anwendung von Funktionen und Methoden aus der Webentwicklung, die Teile nativer Software nachahmen. Die UX verbessert sich deswegen noch lange nicht. UI ≠ UX!

Antworten
Michael

Netter Artikel. @Oliver: Dadurch das man den Cache aktualisieren kann, ist ein löschen nicht von nöten, oder sehe ich das falsch?

"... Cache aktualisieren: Sobald eine Anwendung offline ist, bleibt sie im Cache gespeichert, bis eine der folgenden Bedingungen eintritt:

1. Der Nutzer löscht den Datenspeicher seines Browsers für die Website.
2. Die Manifest-Datei wird geändert. Beachten Sie, dass eine Aktualisierung der im Manifest aufgeführten Datei nicht dazu führt, dass diese Ressource erneut im Cache gespeichert wird. Die Manifest-Datei selbst muss ersetzt werden.
3. Der App-Cache wird programmatisch aktualisiert. ..."

siehe: http://www.html5rocks.com/de/tutorials/appcache/beginner/#toc-updating-cache

Antworten
Oliver
Oliver

Ja, es wäre so wundervoll, wenn sich der Cache löschen liesse. Aber da dies nicht der Fall ist, kann die Technik eigentlich nicht auf Web-Apps angewendet werden, deren Inhalte sich häufig ändern ...

Antworten
cephei
cephei

Ich höre gerade zum ersten Mal vom "Cache-Manifest". Hab ich was verpasst?? 0.o

Antworten
Simon

Sehr interessanter Artikel, Danke!
Push Nachrichten wären noch der "Hammer", aber technisch wohl nicht umsetzbar. Oder?

Antworten
Marcus Graf

Schöner Artikel, gerade das mit dem App-Icon auf Home-Screen sollte mittlerweile eigentlich bei jeder etwas größeren Website Standart sein. Wir sind gerade auch für "Die Welt" dabei viele dieser Dinge zu implementieren. Einzig unser CMS macht uns da leider meist ein Strich durch die Rechnung.

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden