Anzeige
Anzeige
UX & Design
Artikel merken

UX und HTML5: So verbesserst du die User-Experience mobiler 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.

6 Min. Lesezeit
Anzeige
Anzeige

Gute User-Experience mit mobilen Web-Apps.

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige

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:

Anzeige
Anzeige

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:

Anzeige
Anzeige

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“:

Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.
Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
6 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

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
Simon

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

Antworten
cephei

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

Antworten
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
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
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

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige