Mobile Apps sind allgegenwärtig: in der Werbung und mittlerweile auch in Gesprächen am Mittagstisch. Bis heute sind sie aber nur bedingt effizient herstell- und betreibbar. Der HTML5-Standard könnte helfen.

Matthias Sala ist Mitgründer von Gbanga, einem Schweizer Spielstudio, das in seinen mobilen Spielen Realität und Virtualität vermischt und so physische Laufkundschaft generiert. Mehr über den Autor am Ende des Artikels.

Mobile Apps sind ein fester Bestandteil der IT-Industrie geworden. Alle Marken, Hersteller und viele Startups stellen nebst Websites auch mobile Apps für portable Apple- und Android-Geräte zur Verfügung.

Weil sich die Handy-Hersteller einen Plattform-Krieg liefern, sind die nativen Apps untereinander inkompatibel und müssen deshalb leider von den Entwicklern für jede Zielplattform jeweils neu programmiert werden. Dies erinnert leicht an die Situation in den 80er und 90er Jahren, wo Programme jeweils nur auf einem Betriebssystem (Windows, Linux oder Mac) funktionierten. Mit der Einführung des Internetbrowsers Mitte der 90er Jahre fokussierte sich die Industrie weniger auf das Programmieren nativer Anwendungen, sondern auf webbasierte Lösungen, die Geld brachten.

Nun sind sich alle Anbieter von Mobile Apps einig, dass dies auf dem Handy auch nicht so sein müsste. Eine Plattform-übergreifende technische Lösung würde nicht nur viel Arbeit einsparen, sondern auch die Qualität der Apps generell verbessern, weil man nur einen Sourcecode-Produkt pflegen muss. Mit dem Web-Standard HTML5 scheint es endlich Licht am Ende des dunklen Entwicklertunnels zu geben.

Apple fördert HTML5 seit der ersten Stunde

HTML5 ist denn auch bereits überraschend weit gediehen. Schon bei der Lancierung des iPhones im Jahre 2007 hatte Apple HTML-basierte Apps gefördert, aber leider nicht viel Anklang gefunden. Die Entwickler waren begeistert über die neuen Möglichkeiten im wilden Westen der mobilen Welt und programmierten fleissig native Apps. Dabei ermöglicht die von Apple mitgelieferte Entwicklungsumgebung Dashcode bis heute die einfache und speditive Erstellung von Websites im App-Stil. Die meisten kostenlosen Medien-, Informations- und Werbe-Apps könnten auch heute damit entwickelt werden, wären günstiger in der Erstellung, der Wartung und im Betrieb und zudem über verschiedenste Plattformen verfügbar.

Die ursprüngliche Motivation von Apple ist simpel: Websites und mit Dashcode entwickelte Web-Apps verstopfen nicht unnötig die Review-Pipeline und verursachen deshalb auch weniger administrativen Aufwand und keinen Download-Traffic im App Store. Apple ist deshalb weiter an der Entwicklung des Web-App-Segmentes interessiert und kommuniziert dies den Entwicklern auch so.

Aber was ist HTML5 genau und was kann es alles?

HTML5 ist verglichen mit den vorherigen HTML-Versionen eher eine Absichtserklärung, eine Ära und ein Manifest und kein totalitärer technischer Standard. HTML5 ist flexibel und sieht Erweiterungen (Extensions) vor, die eine Vielzahl an Spezialfunktionen anbieten, wie Ortung (über GPS oder ähnlichem), Video-Wiedergabe, Offline-Fähigkeit und lokale Datenverwaltung über Minidatenbanken. Entwickler können dann auf ihren Websites diese Funktionalität nutzen, um das Surf-Erlebnis ähnlich dem Gefühl einer nativen App anzupassen.

Obwohl der Standard erst 2014 ratifiziert werden soll, werden bereits viele Extensions von HTML5 breit unterstützt. Websites wie quirksmode.org/mobile, CanIUse.com und die Wikipedia-Artikel HTML5 in mobile devices und Comparison of layout engines (HTML5) geben Auskunft, welche Features in welchen Versionen der verschiedenen Browser funktionieren. Noch scheint es aber etwas unübersichtlich zu sein. Tools wie Modernizr helfen hier.

Wie verhält sich HTML5 zu Flash und Silverlight?

Die antizipierte Funktionalität von HTML5 ist sehr ähnlich der von bestehenden Softwarekomponenten wie Flash und Silverlight. Flash erweitert seit mehr als 12 Jahren HTML um Multimedia-Funktionalität und ist so zum Industriestandard geworden. Wie Fred Cavazza in seinem Artikel auf Forbes schreibt, ist ein Vergleich zwischen HTML5 und Flash nicht sehr einfach. Für den Enduser sind die Resultate praktisch identisch, HTML5 wird nicht als Fortschritt wahrgenommen, sondern nur als eine neue Technologie, die das Installieren eines Plugins erspart.

“Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.” – Steve Jobs, April 2010

Weil HTML5 aber noch nicht ganz fertig ist, ist Flash auf dem Desktop immer noch mächtiger mit grösserem Funktionsumfang. Wegen Steve Jobs’ legendärem Boykott funktioniert Flash auf dem Handy nicht und ist deshalb keine Alternative zu mobilen Apps. Das selbe gilt für Silverlight, das wenig verbreitete Pendant von Microsoft. Silverlight funktioniert ausschliesslich auf Windows Phone-Geräten.

Cross-Plattform Alternativen: Air, Unity, PhoneGap, Appcelerator

Spannend ist, dass Adobe mit AIR seit Kurzem eine Möglichkeit bietet, Flash-Projekte in native Apps umzuwandeln. Eine äusserst praktische Funktionalität für Werbeagenturen, die sich bisher auf Desktop-Flash-Seiten spezialisiert hatten und nun auch auf iPads entwickeln möchten.

Ähnlich verhält es sich mit Unity, einer bei Game-Entwicklern populären Entwicklungsumgebung. Auf einfache Weise kann man Unity-Projekte auf iPhones, Android-Phones und jegliche Desktop-Browser kompilieren. Leider ist die Library etwas gross geraten, so dass sich Projekte um zehn Megabytes aufblasen.

Der Hybrid gewinnt

Um von allen Vorteilen beider Ansätze (native und web) zu profitieren, hat sich ein neuer Weg herauskristallisiert: Man entwickelt eine web-basierte App und erstellt eine native App, die als Container funktioniert. So werden die Vorzüge der nativen App wie In-App-Käufe und Verfügbarkeit im App Store und die Flexibilität der Web-App in einer App vereint.

Für diese Methode gibt es auch bereits einige Werkzeuge wie PhoneGap und Appcelerator Titanium, welche es ermöglicht, für iPhone und Android parallel zu entwickeln und dabei ausschliesslich JavaScript, CSS3 und HTML5 zu verwenden. Kenntnisse über iOS’s Objective C und Android Java sind nicht mehr nötig.

Es handelt sich dabei um native App-Container, in welche die vom Entwickler programmierten HTML5-Programme geladen werden. Entwickler können dadurch schnell und flexibel entwickeln und über verschiedene Plattformen distribuieren. Pikanterweise hat Adobe die Firma Nitobi, Hersteller von PhoneGap, Anfang Oktober 2011 gekauft.

Für den Endbenutzer wirkt die App wie eine vollwertige native App.

Wie bequem ist die Entwicklung mit HTML5-Werkzeugen?

Das herkömmliche Web besteht bereits seit mehr als 15 Jahren. So sind auch die Werkzeuge professionell und effizient geworden. Von Editoren bis hin zu Lösungen zum Hosten gibt es eine enorm reichhaltige Auswahl an Tools. Viele sind kompatibel mit dem HTML5-Standard und somit auch für Web-Apps auf dem Smartphone.

Vorteile bringen webbasierte Anwendungen vor allem im Unterhalt und bei der Aktualisierung. Einerseits wird der Freischaltungsprozess vom Geräteanbieter wie bei Apple ausgelassen, wodurch man schneller und flexibler neue Versionen und Inhalte veröffentlichen kann. Andererseits kann man die gleiche Infrastruktur verwenden, die auch für die meist bereits bestehende Website betrieben wird.

Schön ist auch, dass Web Apps prinzipiell auf verschiedenen Plattformen (iPhone, Android, BlackBerry) funktionieren und so nicht immer für jede Plattform neu übersetzt werden müssen. Dadurch verringert sich der Entwicklungs- und Unterhaltsaufwand um ein Vielfaches und der Stil und die Struktur der eigenen App bleibt über Geräte hinweg konsistent.

Ist die Web App super-generisch angelegt, kann man sogar nur eine Website betreiben, welche ebenfalls von den Desktop-Benutzern verwendet wird.

Bereits gibt es auch Open-Source-Softwarebibliotheken, die sich auf die mobile Webentwicklung spezalisiert haben: genannt seien hier jQuery mobile und Sencha touch. Mit beiden lassen sich schnell und bequem Web Apps für verschiede Handies erstellen, ohne an den kleinen, aber feinen Plattformunterschieden zu tüfteln. Diese beiden Werkzeuge sind auch mit dem Hybrid-Container PhoneGap (siehe oben) kombinierbar.

Die Macht des Geldes: auch beim Trend der mobile Apps

Der vermutlich stärkste Grund für den Erfolg des nativen App-Ökosystems von Apple ist nicht so sehr das Design oder die Usability, sondern vielmehr der Umstand, dass Benutzer eine weitaus höhere Akzeptanz zu Zahlungen haben. Mit wenigen Klicks und ohne Formular kann man Kleinstbeträge bequem überweisen und damit Apps und Virtual Goods kaufen. Die Monetarisierung wiederum ist für die App-Hersteller das Wichtigste, um den Entwicklungsaufwand überhaupt erst rückfinanzieren zu können.

Webbasierte Apps haben diesen Vorteil nicht. Benutzer müssen sich bei einem Dienst wie PayPal einloggen und im schlechtesten Fall alle Kreditkarten-Details über die Handytastatur eingeben. Die Konvertierungsrate ist erwartungsgemäss sehr niedrig. Nun bietet Google seit Kurzem ein In-App-Payment-System für Websites an. Dort muss aber zuerst noch die notwendige Marktdurchdringung erfolgen. Andernfalls müssen sich die Benutzer einfach auf der Google-Seite aufwendig anmelden.

HTML5 könnte sehr gestärkt werden, wenn eine smarte Payment-Extension Bestandteil des Standards würde.

Wie steht es mit der Benutzerfreundlichkeit und Performance?

Wie bereits erwähnt, verändert sich die Benutzung von Websites mit der Technologie HTML5 nicht wesentlich. Der einzige Unterschied ist, dass Websites etwas langsamer interpretiert werden und nativ programmierte Apps mit voller Hardware-Beschleunigung ausgeführt werden. Native Apps laufen, wenn richtig programmiert, glatt und geschmeidig und fühlen sich in der Bedienung besser an, weil sie unter den 200 Millisekunden reagieren.

HTML5 und die Extensions ermöglichen den Hardware-beschleunigten Zugriff auf Grafik-Funktionen zum effizienten 2-dimensionalen Zeichnen. Trotzdem ist die gefühlte Geschwindigkeit noch nicht perfekt und es ruckelt oft, sofern man die Seite nicht optimiert hat. Mit lokalem Caching und weniger Server-Roundtrips kann es gelingen, ein perfektes Benutzererlebnis herzustellen. Siehe dazu auch die praktische Zusammenfassung, wie man Web Apps schneller macht.

Für ultra-realistische Spiele und andere Echtzeit-Anwendungen wie zum Beispiel Augmented Reality eignet sich eine mobile Web App noch nicht, weil 3D-Beschleunigung und der volle Kamerazugriff noch fehlen. Es wird aber an Hardware-beschleunigten Browser gearbeitet.

Beispiele aus der Praxis

Der einfachste Weg, sich von HTML5 zu überzeugen, ist die Reihe von erfolgreichen Beispielen von HTML5 Web Apps auszuprobieren. Twitter und Facebook touch sind die prominentesten Vertreter von Websites, die auch mobile Touchscreens unterstützen. Für Verlage ist bestimmt auch interessant, dass die Financial Times eine Web App für iPad und iPhone in HTML5 entwickelt hat, die sogar Offline-Zugriff auf Artikel erlaubt – die gleiche Fähigkeit besitzt auch Amazons Kindle Cloud Reader. Offenbar war Financial Times Entscheid auf Apples 30-prozentige Umsatzbeteiligung zurückzuführen. PopCap’s Spiel Bekeweled funktioniert komplett im Handy-Browser und Zynga bietet mit Mafia Wars eine Hybrid-App für das iPhone an.

Fazit

Es ist Zeit, dass sich jeder professionelle Mobile App-Entwickler mit HTML5 auseinandersetzt und eigene Erfahrungen im Benchmarking macht. Die Entwicklungszeit ist erheblich kürzer als bei der nativen Entwicklung, die Benutzungsgeschwindigkeit für die meisten Einsatzgebiete akzeptabel. Für eine erfolgreiche Entwicklung einer HTML5-App gilt es vorab abzuklären, ob die notwendigen Features auf den Zielplattformen unterstützt werden. Zudem muss man schlaue Entscheidungen bei der Monetarisierungstrategie machen.

Über den Autor
Matthias Sala ist Startup-Unternehmer bei Gbanga in Zürich. Gbanga hat sich auf mobile Games spezialisiert, die Realität und Fiktion vermischen. Für Kunden entwickeln sie auch Spiele für Mobilgeräte, u.a. auch in HTML5. Vor der Gründung von Gbanga arbeitete er im Silicon Valley bei Xerox PARC an aktivitäts-bezogener Informationszustellung. Matthias ist nebenamtlich im Vorstand des Schweizer Computerspiel-Entwickler-Verbands IGDA.ch, des Mobile Monday Switzerland und des StartupCamp.ch.

(Foto: Flickr/adactio, CC-Lizenz)