Responsive Webdesign, mobile Webseite, Native App und Web App

Ein Großteil medialer Informations- und Unterhaltungsangebote, verlagert sich auf mobile Plattformen. Unternehmen ohne eine eigene App oder mobile Webseite, lassen sich Kunden entgehen und verlieren dadurch mehr Umsatz als sie ahnen.

Die Verkaufszahlen von Smartphones und Tablets steigen stetig, während die von einfachen Handys rückläufig sind [1, 2]. Im Jahr 2013 wurden 17.4% des gesamten Internet-Datenverkehrs durch mobile Geräte verursacht. Das entspricht einem Zuwachs von mehr als 6% zum Jahr 2012 [3]. Laut den Prognosen von Cisco wird der mobile Datenverkehr bis zum Jahr 2015 im Vergleich zum Jahr 2012 auf das zwölffache anwachsen [4]. Die Anzahl der Online-Nutzer in Deutschland ist bereits hoch und wächst daher nur noch moderat. Der Konkurrenzdruck im Business-Sektor und Online-Handel ist dementsprechend stark. Durch die stetig wachsenden Verkaufszahlen von Smartphones und Tablets verändert sich das Nutzerverhalten und der Internetkonsum nimmt zu: Deutsche sind durchschnittlich 169 Minuten online – eine Steigerung um 36 Minuten gegenüber dem Vorjahr [5].

SmartphoneOb Webshop, Informationsportal oder Dienstleister – Unternehmen müssen sich auf geänderte Nutzungsgewohnheiten einstellen. Es gibt verschiedene Wege, um mobile Informationen und Dienste anzubieten. Abhängig davon, welche Ziele verfolgt werden und welche Kunden das Unternehmen hat, variieren diese. Gängige Strategien sind: responsive Webdesign, mobile Website, Native App und Web App.

Responsive Webdesign

Die Größe und Auflösung von internetfähigen Bildschirmen (Smartphones, Tablets, Laptops, PCs, …) ist sehr unterschiedlich. Starre Web Layouts können hierbei keine ideale Informationsaufbereitung bieten. Es zeigt sich, dass Unternehmen die in eine responsive Webseite investieren, höhere Umsätze und Nutzerzufriedenheit generieren. Eine gute Bedienbarkeit (Usability) auf allen gängigen Geräten, führt zu einer positiven Nutzererfahrung und damit zu mehr Abschlüssen. Mit einem gestalterischen Ansatz und modernen Web Technologien ermöglicht das Responsive Webdesign die automatische Anpassung einer Webseite für verschiedene Endgeräte. Eine moderne Umsetzung könnte so aussehen, dass die Darstellung der Webseite für Smart Phones, Tablets und Desktops sich dynamisch der Größe des Browsers anpasst.

In der technischen Umsetzung kommt JavaScript, HTML5 und CSS3 (Media Queries) zum Einsatz. Es werden sogenannte Breakpoints (Umbrüche) definiert, mit einem Mindestmaß, bis zu dem das Layout seine Form nicht verändert. Der Inhalt passt sich solange an den verfügbaren Platz an, bis ein Breakpoint erreicht wird. Dann erfolgt ein Umbruch und das Layout ändert sich im Browser des Nutzers. Inhalte werden z.B. untereinander in der vollen Breite anzeigt, Elemente können neu angeordnet werden, Bilder werden skaliert und manche Bereiche Ein- oder Ausgeblendet. Der verfügbare Platz wird dadurch optimal für die wesentlichen Inhalte genutzt.

Der Mehraufwand für das Design von flexiblen Darstellungen, darf nicht unterschätzt werden. Die Darstellung für ein Smartphone im Vergleich zum Tablet oder Desktop muss entsprechend designed, programmiert und getestet werden. Insbesondere wenn die Webseite von einem CMS (Content Management System) angetrieben wird, müssen umfangreiche Änderungen vorgenommen werden.

Mobile Website

Im Unterschied zum responsiven Webdesign wird bei einer mobilen Webseite eine gesonderte Vorlage erstellt, die bei dem Zugriff mit einem mobilen Endgerät geladen wird. Diese wird extra für die Maße von Browsern auf mobilen Geräten konzipiert. Sie ist demnach mehr von der eigentlichen Seite entkoppelt und kann nahezu unabhängig entworfen und programmiert werden. Unnötige Inhalte müssen so nicht geladen werden, die schnelle Ladezeit bietet besonders den Nutzern von mobilen Geräten einen Mehrwert.

Zeit oder Budgetvorgaben sind wichtige Parameter, wenn ein Unternehmen sich für oder gegen eine mobile Webseite entscheidet. Die Entwicklung einer mobilen Webseite wird oft als kostengünstig betrachtet, wenn die bestehende Webseite z.B. fest mit einem CMS verdrahtet ist. Der Umbau einer vorhanden Webseite ist in der Regel komplexer, umfangreicher und erfordert mehr Manpower als deren Neuentwicklung.

Es ist nicht möglich Nutzer sinnvoll auf eine mobile Webseite weiterzuleiten. Dafür müssen Browserweichen (Browser Sniffing, Geräte Erkennung) genutzt werden, welche unterschiedliche Browser erkennen. Hierbei verlassen sich Entwickler auf den User-Agent-Header und die darin enthaltene Browser Information, die oft falsch ist.

Native App

Native Apps decken eine große Bandbreite ab und reichen von Unterhaltungssoftware bis hin zu umfangreichen Anwendungen im Unternehmenskontext. Sie werden auf einem Smartphone / Tablet über den im Betriebsystem integrierten Online Shop (App Store) bezogen. Nach der Installation der App oder eines Widgets, kann der Nutzer die App jederzeit, auf seinem mobilen Gerät abrufen. Mit der Zustimmung des Nutzers, lassen sich umfangreiche Zugriffsrechte auf die Ressourcen des Endgeräts verschaffen. Durch den Zugriff auf Netzwerk, Kamera, Sensoren, GPS, Dateien etc. können innovative Apps mit einer hohen User Experience entwickelt werden. Themen wie Sicherheit und Datenschutz müssen dabei berücksichtig und gewährleistet werden.

Web Apps versuchen die hohe Usability nachzuahmen, während eine native App den exakten Zuschnitt für Smartphones / Tablets darstellt. Die Möglichkeiten in der Navigation und Präsentation der Inhalte sind nahezu unbegrenzt. Apps können kostenlos oder kostenpflichtig über den App Store vertrieben werden. Dies lassen sich die Betreiber der App-Stores (Apple, Google, Microsoft) gut bezahlen: sie verlangen 30 Prozent des Kaufpreises einer App als Provision. Anbieter haben die Möglichkeit ihren Nutzern In-App Einkäufe anzubieten, mit denen sie Funktionalitäten oder Inhalte freischalten können.

Aufgrund verschiedener Betriebssysteme für mobile Endgeräte und den damit verbundenen Technologien: iOS (Apple), Android und Windows Mobile ist die Entwicklung nativer Apps für alle drei Plattformen aufwendig. Für jede Plattform muss die Implementierung neu in Angriff genommen werden. Dadurch entstehen längere Entwicklungszeiten und hohe Kosten in der Entwicklung und Wartung der App (Versionsmanagement). Eine Freischaltung erfolgt nur dann, wenn die Richtlinien der Shop Betreiber eingehalten werden.

Web App

Oft werden Web Apps als Single Page Applications bezeichnet. Sie werden über den Webbrowser aufgerufen und benötigen keine Installation (Facebook, SoundCloud, EnBW Smart Home). Eine Web App benötigt für die Ausführung im Gegensatz zu einer nativen App, kein spezielles Betriebssystem und kann so mit einem beliebigen Endgerät bedient werden. Web Apps setzen lediglich einen Web Browser voraus, welcher auf den meisten Systemen bereits vorhanden ist. Wenn bei der Entwicklung auf die Unterstützung der gängigen Browser geachtet wird, haben solche Anwendungen ein hohes Maß an Plattformunabhängigkeit.

Web Apps kommen ohne Page Reloads (Seitenwechsel) aus und ihre Anzeige wird mittels JavaScript und DOM-Eingriffen verändert. Sie setzen sich oft zusammen aus einem Front-End (JavaScript, HTML5, CSS3, …) und einem hardwarenäheren Back-End (ASP, PHP, Java, …). Das Front-End wird im Browser des Nutzers ausgeführt, dies ermöglicht die Interaktion mit dem Anwender und präsentiert ihm Inhalte. Das Back-End beschäftigt sich mit serverseitigen Prozessen wie z.B. der Informationsbeschaffung und -speicherung. Die gängigen Möglichkeiten zur Interaktion mit dem Back-End können über Ajax, WebSockets, Java Applets oder Flash erfolgen.

Trotz bestehender Standards (W3C) interpretieren Webbrowser JavaScript und CSS unterschiedlich. Da Web Apps oft eine Verbindung zum Webserver benötigen, sind sie ungeeignet für die mobile Offline-Nutzung. Eine stark JavaScript abhängige Anwendung kann nicht ohne weiteres suchmaschienenfreundlich gemacht werden, da sie ihre Inhalte asynchron vom Server lädt und sich ihre Struktur dynamisch verändert.

Fazit

Mit der Vielzahl von Geräten und Plattformen steigt für Entwickler und Anwender die Zahl der Entscheidungsmöglichkeiten. Webtechnologien werden zunehmend wichtiger. Neue Betriebssysteme (z.B. FirefoxOS, Chrome OS oder Tizen) setzen auf Webtechnologien, Web-standards (HTML5, CSS3) lösen zunehmend Technologien wie Adobe Flash oder Microsoft Silverlight ab. Es ist jedoch fraglich ob die Unterstützung von HTML5 soweit ausgebaut wird, dass komplexe Webanwendungen entwickelt und von Nutzern ausgeführt werden können. Zudem wird in rechen- oder grafikintensiven Bereichen auch in Zukunft ein nativer Zugriff auf die Hardware-Ressourcen und hardwarenahen Funktionen benötigt.

Quellen

[1] Flurry, “India, China, and the Map to Two Billion Connected Devices,” , 2012.
[Bibtex]
@webpage{Flurry:2012,
Author = {Flurry},
Date-Added = {2014-03-25 20:29:09 +0000},
Date-Modified = {2014-03-25 20:29:09 +0000},
Title = {India, China, and the Map to Two Billion Connected Devices},
Url = {http://blog.flurry.com/bid/97962/India-China-and-the-Map-to-Two-Billion-Connected-Devices},
Year = {2012},
Bdsk-Url-1 = {http://blog.flurry.com/bid/97962/India-China-and-the-Map-to-Two-Billion-Connected-Devices}}
[2] TechNavio, “Global Mobile Application Market 2012-2016,” , 2013.
[Bibtex]
@webpage{TechNavio:2013,
Author = {TechNavio},
Date-Added = {2014-03-25 20:31:03 +0000},
Date-Modified = {2014-03-25 20:37:02 +0000},
Title = {Global Mobile Application Market 2012-2016},
Url = {http://www.reportbuyer.com/computing_electronics/networking/wireless/global_mobile_application_market_2012_2016.html#utm_source=prnewswire&utm_medium=pr&utm_campaign=Wireless_Technology},
Year = {2013}}
[3] Statista, “Mobile Phones Account for 17% of Global Web Usage,” , 2013.
[Bibtex]
@webpage{Statista:mobile:2013,
Author = {Statista},
Date-Added = {2014-03-25 20:11:09 +0000},
Date-Modified = {2014-03-25 20:29:47 +0000},
Title = {Mobile Phones Account for 17% of Global Web Usage},
Url = {http://www.statista.com/topics/779/mobile-internet/chart/1380/mobile-web-usage/},
Year = {2013},
Bdsk-Url-1 = {http://blog.flurry.com/bid/97962/India-China-and-the-Map-to-Two-Billion-Connected-Devices}}
[4] Statista, “Prognose zum monatlichen mobilen Datenverkehr weltweit von 2010 bis 2017 (in Exabyte),” , 2014.
[Bibtex]
@webpage{Statista:prognose:2014,
Author = {Statista},
Date-Added = {2014-03-25 20:33:43 +0000},
Date-Modified = {2014-03-25 20:34:56 +0000},
Title = {Prognose zum monatlichen mobilen Datenverkehr weltweit von 2010 bis 2017 (in Exabyte)},
Url = {http://de.statista.com/statistik/daten/studie/172511/umfrage/prognose---entwicklung-mobiler-datenverkehr/},
Year = {2014}}
[5] B. v. Eimeren and B. Frees, “ARD/ZDF-Onlinestudie 2013.”
[Bibtex]
@webpage{ArdZdf:onlinestudie:2013,
Author = {B. v. Eimeren and B. Frees},
Date-Added = {2014-03-25 20:41:01 +0000},
Date-Modified = {2014-03-25 20:51:59 +0000},
Title = {ARD/ZDF-Onlinestudie 2013},
Url = {http://www.ard-zdf-onlinestudie.de/index.php?id=439}}
Bildquellen

Abbildung 1: Highways Agency | Lizenz: Creative Commons Attribution-ShareAlike 2.0 Generic