5
17

Responsive Web Design, mobile Webapp, hybride App oder eine native App?

18.1.2013

Seit vor 5 Jahren das erste iPhone auf den Markt kam, nimmt die Nutzung des Internets mit mobilen Geräten rasant zu. Heute erfolgen in der Schweiz über ein Viertel aller Zugriffe aufs Internet mit mobilen Geräten und jeder zweite Handybesitzer surft mit seinem Smartphone auch im Internet. Bei Onlineshops wie LeShop oder coop@home macht unterdessen der Umsatzanteil, der über mobile Geräte erfolgt, zwischen 10 und 20% aus.

Es ist also keine Überraschung, dass heute praktisch jedes Pflichtenheft für ein neues Webprojekt oder einen Onlineshop einen Abschnitt über eine zu erstellende „optimierte Version für Mobiles“ enthält. Das ist sicher nicht falsch, denn das mobile Web ist kein Hype der vorbeigehen wird. Neue Geräte werden wahrscheinlich noch dünner und leichter und damit natürlich noch mobiler sein. Bald wird es vielleicht schon serienmässig zusammenrollbare oder faltbare Touch-Bildschirme geben. Es ist also heute der richtige Zeitpunkt sich Gedanken darüber zu machen, wie man das mobile Internet als Unternehmen optimal nutzen kann.

Eine „optimierte Version für Mobiles“ sollte nicht einfach eine verkleinerte Version der Weblösung für den Desktop-Browser sein. Vielmehr sollte das ganze Design und auch die angebotenen Funktionen von Grund auf für den viel kleineren Bildschirm eines Smartphones und die Bedienung via Touch konzipiert werden. Aus technischer Sicht gibt es verschiedene Varianten um eine mobile Weblösung zu erstellen.

Responsive Web Design

Da wäre zuerst einmal das „Responsive Web Design“. Gemeint ist damit, dass man nicht eine komplett neue Lösung für mobile Geräte baut, sondern je nachdem mit welchem Gerät man zugreift und wie gross die zur Verfügung stehende Bildschirmfläche ist, das Design der Weblösung sich dynamisch anpasst. Ein Absatz mit Text links und Bild rechtsbündig wird dann auf einem kleinen Smartphone-Bildschirm zum Beispiel so dargestellt, dass zuerst das Bild gezeigt wird und darunter statt daneben der Text. Responsive Web Design, richtig angewandt, ist ein mächtiges Werkzeug um eine bestehende Website sehr rasch für den mobilen Zugriff zu optimieren. Es ist auch die kostengünstigste Variante, da keine serverseitigen Änderungen nötig sind. Allerdings hat Responsive Web Design auch seine Grenzen. Die Inhalte und Funktionen einer Seite im Desktop-Browser können beispielsweise nicht auf verschiedene Screens des Smartphones aufgeteilt werden. Es können also keine Funktionen oder Prozesse abgeändert oder optimiert werden. Ein Checkout-Prozess bei einem Onlineshop kann zwar anders dargestellt, aber der eigentliche Prozess, die einzelnen Schritte können nicht angepasst werden. Diese Variante eignet sich daher vor allem für Websites mit vielen Inhalten und sehr wenigen Funktionen wie dies bei den meisten Corporate Websites der Fall ist.

Webapp

Eine aufwändigere Variante ist die Entwicklung einer eigenständigen Webapp, auf die ein Benutzer automatisch umgeleitet wird, wenn er mit einem Smartphone auf die Website zugreift. Eine Webapp benötigt keine neue Technologie und wird wie die Weblösung für den Desktop-Browser auch mit HTML, CSS und JavaScript erstellt. Im Zusammenhang mit Webapps wird oft von HTML5 gesprochen. HTML5 ist ein Überbegriff der neuen sich etablierenden Standards für HTML, CSS und JavaScript und wird von allen gängigen Browsern auf den mobilen Geräten unterstützt. Der Vorteil einer Webapp gegenüber einer Lösung mit Responsive Web Design besteht darin, dass nicht nur die Darstellung geändert und den kleinen Bildschirmen angepasst werden kann, sondern auch die Prozesse selbst.

Nur wenn das Design und die Prozesse für Mobiles unabhängig von der bestehenden Weblösung erstellt werden, hat man die Gewähr, dass die Usability auch wirklich auf die kleinen Bildschirme und die Touchbedienung optimiert werden kann. Natürlich ist ein solcher Prozess aufwändiger und damit auch kostenintensiver als die reine Anpassung der Darstellung wie sie beim Responsive Web Design vorgenommen wird. Sobald aber eine Weblösung viele Funktionalitäten aufweist, ist ein solches Vorgehen erfolgsversprechender.

Schaut man sich die Apps oder Weblösungen für Smartphones an, die sehr erfolgreich sind, so sind dies in den allermeisten Fällen Apps mit ganz wenigen Funktionen und sehr klaren Benutzerinterfaces. Dies kommt nicht von ungefähr. Wer liebt denn schon komplexe und kaum bedienbare Software. Will man eine komplexe Weblösung vom Desktop-Browser auf das Smartphone bringen, gilt es also nicht nur das Design anzupassen und die Prozesse anders anzuordnen, vielmehr sollte man sich Gedanken darüber machen, welche Funktionen denn für die mobile Lösung überhaupt sinnvoll und nötig sind. Nicht selten stellt man fest, dass viele der Funktionen weggelassen werden können.

Onlineshop Baur au Lac Vins als mobile Webapp

Onlineshop Baur au Lac Vins als mobile Webapp

Mobile First

Es lohnt sich übrigens die Überlegung, welche Funktionen in der mobilen Lösung überhaupt implementiert werden sollen, noch weiter zu spinnen. Man sollte sich die Frage stellen, ob die Funktionen, die man in der mobilen Lösung weglässt, nicht auch in der Desktop-Browser-Variante weggelassen werden können – oder zumindest einige davon. Nicht selten wird man feststellen, dass solche Funktionen überflüssig sind. Ein Blick in die Zugriffsstatistiken kann hier ebenfalls weiterhelfen. Oft stellt man fest, dass solche Funktionen auch kaum benutzt werden. Je weniger Funktionen auf einem Screen platziert werden, desto einfacher wird es für den Benutzer die Lösung zu bedienen. Dieses Vorgehen, das auch „Mobile First“ genannt wird, ist wärmstens zu empfehlen, sogar dann, wenn nur eine Desktop-Browser-Lösung erstellt wird.

Hybride App im AppStore

Zurück zu den technischen Möglichkeiten für eine mobile Weblösung. Eine Webapp wie oben beschrieben, kann zusätzlich auch in den jeweiligen App-Stores zum Herunterladen auf das eigene Smartphone platziert werden. Aus technischer Sicht wird die in HTML, CSS und JavaScript geschriebene Webapp in eine Hülle eingepackt, damit die App dann für die unterschiedlichen Plattformen zur Verfügung gestellt werden kann. Üblicherweise macht man heute eine App zumindest für iPhones (iOS) und Android-Geräte verfügbar. In Zukunft wird man diese wohl zusätzlich auch für Windows Phone 8 aufbereiten. Interessant an den hybriden Apps ist, dass die Kosten für die Entwicklung der App nur einmal anfallen und die App dann mit wenig Aufwand auf den verschiedenen Plattformen zur Verfügung gestellt werden kann.

Dadurch wird die Webapp nicht nur durch das Ansurfen der Website gefunden, sondern liegt auch im jeweiligen AppStore. Das kann aus Sicht des Marketings ein Vorteil sein. Die App wird damit auch mit einem Icon fest auf den Bildschirmen der Smartphone-Benutzer platziert werden und rückt so immer wieder ins Blickfeld des Benutzers.

Oft wird angenommen, dass nur Apps aus dem AppStore auch offline funktionieren. Dies ist allerdings falsch. Auch Webapps können heute so programmiert werden, dass diese teilweise oder auch komplett offline funktionieren. Auch die Platzierung eines Icons auf dem Bildschirm des Smartphones ist möglich, ohne dass die App im AppStore zur Verfügung steht. Trotzdem lohnt es sich meistens eine Webapp zusätzlich noch in den jeweiligen AppStores zur Verfügung zu stellen, da der Aufwand dafür relativ gering ist.

Eine hybride App kann aber mehr sein, als nur eine eingepackte Webapp. Es können zusätzliche Möglichkeiten des Smartphones genutzt werden, auf die man mit reinem HTML5 keinen Zugriff hat. Beispielsweise kann man einen Barcode-Scanner in einen Onlineshop einbauen, der nach dem Scannen des Barcodes direkt zum Produkt führt.

Hybride Apps eignen sich also, wenn man die Webapp auf der Website und gerne auch im AppStore anbieten möchte und dies auf verschiedenen Plattformen (iPhone/iOS, Android, Windows Phone 8). Die Kosten der Entwicklung fallen dabei nur einmal und nicht pro Plattform an. In diese Überlegung sollte man auch die Kosten für die Weiterentwicklung der App miteinbeziehen, auch diese fallen dann nur einmal an.

Native Apps

Die von den jeweiligen Plattformbetreibern forcierten technischen Varianten sind die speziell für die jeweilige Plattform entwickelten Apps, sogenannten native Apps. Obwohl auch hybride Apps prinzipiell die gesamte Funktionalität der Geräte nutzen können, gibt es trotzdem einige Beschränkungen. Die grösste Beschränkung ist dabei die Performance. Hybride Apps laufen nicht direkt im Betriebssystem des Smartphones sondern im Browser des jeweiligen Handys. Das ist der Grund, dass diese grundsätzlich etwas träger reagieren als eine native App. Da aber die Prozessoren der Smartphones immer leistungsfähiger werden und die Browser eine immer bessere Performance aufweisen, wird sich dieser Nachteil der hybriden Apps mehr und mehr auflösen.

Native Apps sind also die richtige Wahl, wenn es darum geht sehr grafiklastige Apps, wie zum Beispiel Spiele zu entwickeln, oder Apps bei denen Performance das oberste Gebot ist. Da für jede Plattform andere Technologien eingesetzt werden müssen, werden die verschiedenen Apps für iOS, Android oder Windows Phone komplett getrennt entwickelt, oft sogar bei verschiedenen spezialisierten Firmen in Auftrag gegeben. Damit entstehen für jede unterstützte Plattform weitere Kosten.

Fazit

Die breite Nutzung des Internets über Smartphones oder kleine Tablets ist heute Realität und wird weiter zunehmen. Damit kommen nicht nur einfach neue kleine Geräte für die Internet-Nutzung dazu, es bedeutet auch, dass dadurch das Internet jederzeit zur Verfügung steht und damit auch der Zeitpunkt der Nutzung ändert. Das Internet wird heute mehr und mehr über verschiedene Geräte hinweg genutzt. Neben dem Desktop-PC oder dem Laptop nutzt man unterwegs auch das Smartphone und zu Hause auch Mal das Tablet. Auf jedem Gerät erwartet der Benutzer eine einfache und auf das Gerät angepasste Bedienung.

Mit einer mobilen Webapp kann man sich im Moment einen Wettbewerbsvorteil verschaffen. Bald schon wird wohl kein Weg mehr daran vorbeiführen. Ob die Lösung mit Responsive Web Design, einer Webapp, als hybride App oder als native App realisiert werden soll, will gut überlegt sein und hängt entscheidend von den Anforderungen und den Nutzungskriterien der mobilen Lösung ab.

Auch erschienen im m&k Dezember 2012

 

Mobile First - MySign

Google+ 12 Facebook 0 Twitter 0 Pinterest 0

Kategorisiert in: , ,

5
17