Ratgeber Dienste mobilisieren

So bringen Sie Web-Anwendungen aufs Smartphone

11.05.2010 von Stefan  Henze
Mobile Apps bieten noch immer die Möglichkeit, den Entwickler reich und berühmt zu machen. Vor dem Erfolg müssen jedoch einige Punkte geklärt werden.

Web-Anwendungen werden längst nicht mehr nur am PC verwendet. Benutzer wollen ihr soziales Netzwerk immer dabei haben. Doch nicht nur Facebook, Twitter & Co. , auch andere Web-Anwendungen machen mobil. Einen Dienst anzubieten, der immer und überall erreichbar ist, ist heute ein wichtiges Differenzierungsmerkmal. 185.000 Apps im iPhone App Store sprechen eine klare Sprache. Kein Smartphone wird heute ohne den entsprechenden App Store auf den Markt gebracht.

Mobile Apps sind keine Spielerei mehr. Sie werden mehr und mehr unverzichtbarer Bestandteil des Business Case für eine Web-Anwendung. Ob eBay, elektronische Fernseh- oder Tageszeitungen, Nutzer eines Angebots auf dem PC erwarten, dass ihr Dienst auch auf ihrem Smartphone mit einer App repräsentiert ist. Dabei hat sich ein Kreativitätswettbewerb in Gang gesetzt, der vielen Unternehmen zusetzt: Wer bietet die nützlichste und originellste App?

Mobile Website versus native App

Viele Anbieter schwanken, ob sie ihre Dienste als Website für mobile Geräte oder als native App offerieren sollen. Der Ansatz, eine mobile Website zu entwickeln, erscheint auf den ersten Blick viel versprechend. So kann die bestehende Infrastruktur weiter verwendet werden, die Entwicklung der Software erfordert keine neuen Techniken. Im Grunde muss die bestehende Website nur anders aussehen. Der Hype um Apps auf dem iPhone bewirkte jedoch einUmdenken : Erst mit Einführung der Apps hat die Plattform Fahrt aufgenommen. Nicht nur, dass sich native Apps besser "anfühlen". Nach der Installation nehmen sie zudem einen Platz auf dem Startbildschirm des Smartphone ein und sind dem Benutzer damit stets präsent.

Die folgende Tabelle stellt einige Stärken und Schwächen der beiden Ansätze gegenüber.

Stärken und Schwächen

Mobile Web-Seite

Native App

Derivat der "großen" Web-Anwendung

Speziell für ein Gerät entwickelt

+ leicht und mit wenig Aufwand zu erstellen;

+ bestehendes Know-how wird genutzt;

+ keine Installation erforderlich;

+ eine Anwendung kann auf verschiedenen Geräten verwendet werden.

+ die Anwendung passt genau auf das Gerät des Benutzers;

+ alle Geräte-Features sind nutzbar, etwa Kamera, GPS oder Adressbuch;

+ maximale Performance;

+ im jeweiligen App Store des Geräts verfügbar;

+ Offline-fähig.

- meist schlechtere Performance im Vergleich zur App;

- eingeschränkter Zugriff auf Geräte-Features;

- andere User-Experience

- Anwendung muss über URL gefunden werden.

- eigene Entwicklung für jedes Gerät erforderlich;

- Entwicklung erfordert meist eine eigene plattformspezifische Technologie.

Smartphone-Hardware verfügt über Besonderheiten

Gerade native Apps haben die Möglichkeit, die besonderen Features eines Smartphone auszunutzen. Die Hardware des Handys stellt gleichzeitig aber auch eine starke Einschränkung dar. Daraus ergeben sich spezielle Anforderungen an die App, die, wenn sie richtig umgesetzt werden, die Benutzer an die App und damit an den Dienst binden.

Der Bildschirm eines Smartphone ist klein, im Vergleich zu einem modernen PC-Bildschirm geradezu winzig. Zudem wird ein Smartphone häufig mit dem Finger bedient. Dafür müssen die Elemente auf dem Bildschirm eine bestimmte Größe haben, damit der Benutzer sie sicher treffen kann. Dies führt zwangsläufig zu Anwendungen mit wenigen Elementen auf dem Bildschirm. Die Funktionen der Web-Anwendung auf dem Smartphone sollten sorgfältig gewählt, wenig genutzte Funktionen weggelassen werden.

Smartphone-Generation
HTC Desire
Beim Android-Topmodell Desire hat HTC den Entwurf für das Google-Handy Nexus One leicht überarbeitet. Es erhielt mehr Arbeitsspeicher sowie Navigation über eine Art optische Maus. Softwaretechnisch wurde die Oberfläche HTC Sense übergestülpt.
HTC Legend
HTC beweist bei der Weiterentwicklung des HTC Hero Stil: Das Gehäuse wurde in einem 3D-Fräsverfahren komplett aus einem massiven Aluminiumblock geschnitten.
HTC HD2 mini
Beim "HD2 Mini" hat HTC nicht nur das kapazitive Touch-Display auf 3,2 Zoll geschrumpft. Der Preis des Windows-Mobile-Geräts sinkt außerdem auf knapp 420 Euro.
HTC Smart
Mit dem BrewMP-Gerät Smart adressiert HTC das Einsteigersegment - ohne sein Geschäft mit relativ hochpreisigen Android- und Windows-Mobile-Smartphones zu gefährden
Acer betouch E110
Das betouch E110 ist Acers Einstiegsmodell. So ist es lediglich mit Google Android 1.5 ausgestattet und muss mangels Lagesensor auf den Android Market verzichten. Auf der Haben-Seite: 3,2-Megapixel-Kamera, HSDPA, GPS und ein dicker 1500 mAh-Akku.
Acer neoTouch P300
Das neoTouch P300 ist mit seiner physischen Tastatur als Business-Smartphone für Einsteiger gedacht
Acer betouch E400
Ungleiche Geschwister: Das Android-Modell beTouch E400 basiert...
Acer neotouch P400
...wie das Windows-Phone neoTouch P400 auf dem günstigen Qualcomm-Chipsatz 7227 mit 600 Mhz.
T-Mobile Pulse Huawei
Das einfache Huawei-Modell "U8110", verfügt über einen 2,8-Zoll-Touchscreen (QVGA), eine 3,2 Megapixel Kamera, Wlan und Bluetooth. T-Mobile will das Android-Gerät im zweiten Quartal unter dem Namen "Pulse mini" auf den Markt bringen.
Sony Ericsson Xperia X10 Mini Pro
Das "X10 Mini Pro" ist deutlich kleiner und zudem schwächer ausgestattet als der große Bruder X10. Dafür bietet es Sony Ericsson auch zum annähernd halben Preis (350 Euro) an. Wesentlicher Unterschied zum "X10 Mini" ist die ausziehbare Qwertz-Tastatur, das Pro bringt dadurch auch ein paar Gramm mehr auf die Waage .
Sony Ericsson Vivaz Pro
Mit dem Vivaz Pro stellt Sony Ericsson seinem Symbian-Flaggschiff eine Variante mit Volltastatur zur Seite.
Toshiba TG02
Das Toshiba TG02 ist die Weiterentwicklung der "Snapdragon-Flunder" TG01. Das superdünne Smartphone erhielt ein kapazitives AMOLED-Display, auf einen größeren Akku wurde dagegen verzichtet.
Toshiba K01
Beim K01 hat Toshiba speziell an Business-Kunden gedacht und dem Windows-Mobile-Gerät zusätzlich eine physische Tastatur spendiert. Auf ein farbenprächtiges AMOLED-Display wurde dagegen verzichtet.
Samsung S8500 Wave
Samsung bringt mit Bada ein weiteres Betriebssystem ins Spiel - dessen Fähigkeiten werden auf dem S8500 Wave mit AMOLED-Display und 1Ghz-Prozessor ideal demonstriert.

Smartphones sind nicht so leistungsfähig wie ein PC, der Prozessor bei weitem nicht so potent wie der eines modernen Computers. Und auch der Akku des Telefons sollte von einer App nicht zu stark beansprucht werden. Für komplexe Aufgaben sollte der Server der Web-Anwendung genutzt werden. Die Bedienung der App muss dem Benutzer Spaß machen. Die App muss dafür schnell reagieren und flüssig bedienbar sein.

Smartphones stehen Features wie ein GPS-Empfänger, eine Foto- oder Videokamera sowie Mikrofon und Lautsprecher zur Verfügung. Die App sollte von diesen zusätzlichen Features Gebrauch machen, wenn es zum Use Case passt. Sie kann auf die Umgebung des Benutzers reagieren und ihm beispielsweise abhängig von der Tageszeit oder seinem Aufenthaltsort sinnvolle Funktionen anbieten.

Smartphones werden anders benutzt als ein PC

Während eine Anwendung am PC oft stundenlang verwendet wird, ist das Nutzungsverhalten am Handy wesentlich kurzweiliger und punktuell. Der Benutzer möchte zu einem bestimmten Zeitpunkt ein konkretes Ziel erreichen und beispielsweise möglichst schnell eine bestimmte Nachricht finden können. Die App sollte so designed sein, dass sie jederzeit einfach benutzt werden kann.

Telefone eignen sich relativ schlecht für die Eingabe längerer Texte. Gerade unterwegs oder im Auto wird der Benutzer eher Informationen konsumieren als selbst Inhalte eingeben. In vielen Fällen wird auf dem Smartphone nur nach einem bestimmten Inhalt gesucht oder es wird beispielweise ein Foto mit einem sehr kurzen Text zusammen "hochgeladen".

Smartphones bieten besondere Funktionen

Eine mobile App fügt sich in das Ökosystem Handy ein und kann dadurch auf viele Dienste zugreifen, die andere Geräte nur selten bieten. So ist es leicht möglich, aus der eigenen App heraus SMS-Nachrichten zu erzeugen oder einen Eintrag in den Kalender des Telefons zu schreiben. Auch die Verwendung des Adressbuchs in der eigenen App ist in vielen Fällen möglich. Die erweiterten Funktionen des Smartphone sollten daher im fachlichen Kontext der App verwendet werden.

Die vielleicht wichtigste Eigenschaft des Handys ist seine Omnipräsenz. Ein Handy ist fast immer eingeschaltet. Hiermit erhält eine Web-Anwendung ganz neue Möglichkeiten, mit dem Benutzer zu kommunizieren. Mittels Push Notification kann die Anwendung den Benutzer über Ereignisse informieren.

Android Apps
Sweet Dreams
Noch in der Mache: Gegen nächtliche Anrufe hilft nur Handy aus? Die Anwendung SweetDreams regelt das Smartphone-Verhalten in den späten Stunden ein für allemal mit komplexen Regeln.
What the Doodle?
Kennen Sie Pictionary, das Spiel, in dem man etwas zeichnen muss, während andere es erraten sollen? What the Doodle? Ist im Prinzip wie Pictionary, nur online vom Android-Phone.
WaveSecure
Diese Anwendung lässt Sie Ihr verlorenes Android-Phone lokalisieren, bei Diebstahl aus der Ferne abschalten oder die Daten löschen. Es ist zudem kostenlos.
Plink Art
Ideal um beim Date mit Wissen zu punkten: Gemälde fotografieren und an die Datenbank von Plink Art schicken. Als Antwort erhalten Sie Name, Künstler und weitere Fakten.
Celeste
Diese Augmented-Reality-Anwendung blendet punktgenau die Planeten auf dem Screen Ihres Android-Phones ein, selbst wenn ein Hochhaus die Sicht versperrt.
A World of Photo
Andere Leute kennenlernen mal anders: Ihnen wird zufällig ein anderer User zugewiesen, den Sie auffordern können ein Bild von sich oder seiner Umgebung zu schicken.
SongDNA
Noch in der Mache: Eine Enzyklopädie, die Ihnen alles plus Link zum Video eines Songs erzählt.
Solo
Gitarre lernen und spielen auf dem Smartphone.
Speed Forge 3D
In Speed Forge 3D liefern Sie sich heiße Rennen auf dem Mars und schießen Kontrahenten mit Raketen ab.
Graviturn
In diesem Geschicklichkeits-Knobel-Spiel müssen Sie durch Bewegen des Handys die roten Bälle zum Rand bugsieren, ohne dass dabei die grünen verloren gehen.
Totemo
Ein Puzzle-Game, in dem man Totems errichten soll.
SpecTrek
Geister-Jagd mit dem Smartphone: Die Augmented-Reality-Anwendung fügt Geister-Bilder in Ihre Umgebung ein.

Mobile Apps bewegen sich im Spannungsfeld zwischen eingeschränkter Hardware und besonderen Funktionen. Werden die Möglichkeiten des Handys klug genutzt und passen die mobile App und die Web-Anwendung gut zusammen, so steht einem erfolgreichen Produkt nichts im Wege. Die Erfahrung mit iPhone-Anwendungen zeigt, dass ein Anbieter durch die Kombination neuer Möglichkeiten eines Smartphone mit den Daten und Funktionen seiner Web-Anwendung einen großen Mehrwert für sein Produkt schafft und sogar neue Märkte erschließen kann.

Eine hervorragende Usability und sehr gute User Experience sind der Schlüssel zu einer erfolgreichen App. Es geht nicht darum, jedes erdenkliche Feature des Smartphone auszunutzen. Viel wichtiger ist es, dass jede Funktion gut durchdacht ist und im Kontext der Web-Anwendung für den Einsatz unterwegs einen Mehrwert bietet.

Auch wenn es schwer fällt, Funktionen der Web-Anwendung auszulassen: Die App sollte den Benutzer mit wenigen Klicks zum Ziel führen. Selten benutzte Funktionen dürfen das User Interface nicht stören. Falls nötig, lassen sich Funktionen für "erfahrene Benutzer" hinter einer weiteren Menüebene verstecken.

Jede mobile Plattform hat ihre Spezifika

Smartphone ist nicht gleich Smartphone. Jede Plattform, ob Apple iPhone, Google Android oder Palm WebOS, hat ihre technischen und optischen Eigenheiten. Sie arbeiten mit unterschiedlichen Metaphern in der Bedienung, sind sich funktional allerdings sehr ähnlich. Unkonventionelle User Interfaces verwirren Benutzer. Es ist sinnvoll, sich an die Standards der Plattform zu halten.

Foto: Capgemini

So unterschiedlich die Geräte in der Bedienung sind, umso mehr ähnelt sich der funktionale Aufbau einer App zwischen den Plattformen. Die meisten Apps sind wie ein Baum strukturiert. Der Benutzer steigt an der Wurzel in die App ein und hangelt sich von Ansicht zu Ansicht immer weiter in den Baum hinein oder auch wieder heraus.

Foto: Capgemini

Soll eine App für mehrere Plattformen entwickelt werden, gibt es Ansätze, Synergien auf verschiedenen Ebenen zu nutzen. Soll sich eine App wirklich nativ anfühlen, so führt jedoch kaum ein Weg daran vorbei, zumindest einen Teil der Anwendung für jede Plattform einzeln zu entwickeln. Es gibt Möglichkeiten, Anwendungen plattformübergreifend zu entwickeln. Als Beispiele sind hier XMLVM oder auch das auf dem Mobile World Congress angekündigte Adobe AIR für Smartphones zu nennen. Mit diesen Technologien muss jedoch immer ein Kompromiss hinsichtlich Performance oder Originalität des User Interface eingegangen werden. Darüber hinaus hat Apple durch Änderung seiner App-Store-Bedingungen dem Einsatz solcher übergreifender Technologien eine Absage erteilt.

Einheitliche Architektur für alle Plattformen

Alle aktuellen Smartphone-Technologien bieten moderne und ausgereifte Entwicklungs-Frameworks. Model-View-Controller und komponentenbasierte Entwicklung gehören hier zum Standard. Durch diese Voraussetzungen wird es möglich, Apps für verschiedene Plattformen mit derselben Architektur zu entwickeln.

Eine Web-Anwendung, die nach modernen Architekturprinzipien konstruiert ist, sollte in verschiedene Schichten aufgeteilt werden. Interessant im Kontext der mobilen App sind die Präsentationsschicht (View Layer) und die Business-Logik-Schicht (Logic Layer). Die mobile App wird viele der Use Cases aus der Business Logik verwenden können. Diese Schicht muss lediglich um Use Cases erweitert werden, die für die mobile App charakteristisch sind.

Die Präsentationsschicht ist spezifisch für den Web-Kanal der Anwendung, also für die Auslieferung des HTML Client. Diese Schicht eignet sich nicht für die Verwendung in der mobilen App.

In jedem Fall sollten die Daten und Funktionen aus der Business Logik, die in den mobilen Apps verwendet werden sollen, in einer einheitlichen Schnittstelle zusammengefasst und gekapselt werden. Es empfiehlt sich, die Daten an dieser Stelle fachlich identisch, aber in verschiedenen technischen Formaten bereit zu stellen. Es ist einfacher, serverseitig Daten in verschiedene Formate wie XML oder JSON zu übersetzen, als in der mobilen App Daten einlesen zu müssen, die nicht perfekt auf die verwendete mobile Plattform passen.

Foto: Capgemini

Mit diesen Erweiterungen ist die Web-Anwendung in der Lage, Daten und Funktionen für mobile Apps bereit zu stellen. Ebenso wichtig wie eine klar strukturierte Server-Architektur ist eine einheitliche und saubere Client-Software-Architektur. Die verschiedenen Clients sollten soweit möglich sogar dieselben Schnittstellen zwischen den Schichten verwenden. Damit ist gewährleistet, dass die Software auf den verschiedenen Geräten einheitlich arbeitet und gleichartig funktioniert.

Durch eine einheitliche Architektur auf allen Plattformen können sich die Entwickler der einzelnen Apps leichter austauschen. Funktionsänderungen und Erweiterungen lassen sich wesentlich leichter kommunizieren. Bei Fehlern lässt sich leichter analysieren, wo genau sich das Problem befindet. Die Softwareentwicklung in größeren Systemen besteht zu einem guten Teil aus Kommunikation. Eine einheitliche Architektur hilft Missverständnisse zu verhindern und Vorbehalte abzubauen:

Auswahl der richtigen Plattform und Funktionen

Aufgrund der vielen Technologien und Möglichkeiten ist es wichtig, die richtige Strategie zur Einführung der App zu entwickeln. Am Anfang stehen Überlegungen, ob die Konzentration auf einer oder mehreren Plattformen liegt, für jede Plattform eine App angeboten werden sollte und welcher Funktionsumfang gewünscht ist. Es ist sinnvoll, zunächst nur eine kleine App mit eingeschränkten Funktionen anzubieten und ihre Akzeptanz durch die Benutzer zu beobachten. Nutzer von Smartphones sind es gewohnt, dass ihre Apps regelmäßig aktualisiert und erweitert werden. Sie erwarten sogar, dass gelegentlich neue Features und Verbesserungen eingeführt werden.

Zur Auswahl der richtigen Plattformen muss außerdem geklärt werden, welche Smartphones von den jeweiligen Benutzern verwendet werden und welche neuen Kundensegmente mit der App erschlossen werden sollen. Nutzungsstatistiken geben einen ersten Anhaltspunkt darüber, mit welchen mobilen Plattformen die Website besucht wird. Für eine qualifizierte Aussage ist es jedoch notwendig, die Nutzer und ihre Smartphones genau zu analysieren.

Die folgende Übersicht stellt die wichtigsten Plattformen technisch gegenüber:

iPhone OS

Google Android

Blackberry OS

WebOS

Verfügbare Anwendungen

185.000

38.000

5400

1400

Geräte

iPhone, iPod Touch

z.B. T-Mobile G1, HTC Hero, Motorola Milestone, Nexus One

z.B. Blackberry Bold, Storm, Curve

Palm Pre, Pixi

Besonderheit der Plattform

Derzeit Marktführer, einheitliche Hardware

Multitasking, Unterstützung vieler verschiedener Geräte

Im Business-Umfeld weit verbreitet

Multitasking, einheitliche Hardware

Entwicklung

Apple Mac, XCode, Simulator für Geräte

Eclipse, Open Source, Simulator für Geräte

Angepasstes Eclipse, Simulator für Geräte

Eclipse, Open Source, Simulator für Geräte

Programmiersprachen

Objective C

Java, XML

Java Micro Edition

HTML, Javascript, CSS

Neben iPhone OS, Google Android, Blackberry OS und Web OS werden Ovi von Nokia sowie Microsoft Windows Phone 7 zukünftig eine wichtige Rolle spielen, da bei beiden Plattformen mit einer hohen Verbreitung zu rechnen ist. Eine technische Sonderrolle nimmt die neue Windows-Phone-Plattform ein, die durch die Verwendung von Silverlight die Entwicklung teilweise unabhängig vom Betriebssystem macht. Dadurch ergibt sich die Möglichkeit, Teile des Programmcodes sowohl auf dem PC beziehungsweise im Web als auch auf dem Windows Phone zu verwenden.

Benutzerfreundlich und mit dem richtigen Funktionsumfang wird eine mobile App schnell zur unverzichtbaren Unterstützung für Web-Anwendungen. Strategisch eingesetzt kann sie zum Zugpferd für die Eroberung neuer Kundensegmente werden. Die Chance, mit einer App auf dem Handy zum ständigen Begleiter zu werden, sollte daher nicht ungenutzt bleiben. (mb)