CLOSE [X]

Mobile Website, Responsive Design, Web App und Native App - vier Technologien für mobile Endgeräte

Die Zahl internetfähiger Endgeräte wird stetig größer. Die dabei zur Verfügung stehenden Auflösungen werden in gleichem Maße vielfältiger. Die bedeutsamste Veränderung geht auf das Konto von Tablets und Smartphones. Während auf Tablet-PCs herkömmliche Webseiten (meistens) vernünftig dargestellt und bedient werden können, ist die Anzeige auf Smartphones nicht optimal und erfordert die häufige Benutzung der Zoomfunktion. Problematisch ist hier die geringe Anzeigefläche der Mobiltelefone. Schaltflächen und Navigationen sind zu klein, als dass man von einer komfortablen Bedienung sprechen könnte. Klar, mit der Zoomfunktion lassen sich die Bedienelemente vergrößern. Gut von der Hand geht die Bedienung aber trotzdem nicht.

Aufgabe erkannt! Aber wie können Lösungswege aussehen?

Es gibt mehrere Möglichkeiten, unsere Inhalte an die mobilen Benutzer zu bringen. Alle haben Vor- und Nachteile. Um Ihnen einen Überblick zu verschaffen, stelle ich vier Optionen kurz vor: 

Mobile Website des Karlsruher SC
Mobile Website des Karlsruher SC

Mobile Website

Eine Mobile Website wird parallel zur „normalen“ Desktop-Version betrieben. Die mobile Website wird über den Browser aufgerufen und läuft meistens unter einer eigenen URL, z.B. unter einer Subdomain wie mobil.domain.de.

Dieser Ansatz wird oft von Online-Shops oder Zeitschriften verfolgt, da das System losgelöst von der Desktop-Version aufgebaut werden kann und optimal an den benötigten „mobilen Workflow“ angepasst werden kann. Dafür entsteht ein erhöhter Pflegebedarf, da die Inhalte von Mobilversion und Desktop-Version in der Regel nicht deckungsgleich sind.

Ein weiterer Vorteil dieses Ansatzes: Eine Mobile Website kann jederzeit parallel zur Desktop-Version aufgebaut werden. Bei einer Responsive Website muss die Planung vor oder mindestens zeitgleich mit der Desktop-Version in Angriff genommen werden.

Responsive Website iib_institut
Responsive Website iib_institut

Responsive Webdesign

Responsive Websites werden mit dem Browser aufgerufen und passen sich an die jeweiligen Endgeräte an. Bilder werden entsprechend der Auflösung des Endgeräts skaliert, Bedienelemente vergrößert oder verkleinert, ein auf Desktop-Monitoren dreispaltiges Layout erscheint auf dem Smartphone z.B. zweispaltig im Querformat und einspaltig, wenn das Gerät hochkant gehalten wird – das leidige Zoomen für eine vernünftige Schriftgröße entfällt. Je nach Auflösung können Elemente entfernt oder anders angeordnet werden.

Da alle Endgeräte, ob mobil oder stationär, den gleichen HTML-Code ausgeliefert bekommen, entsteht kein erhöhter Pflegeaufwand. Inhalte sind unter einer eindeutigen URL verfügbar – Probleme mit den Suchmaschinen und Duplicate Content entstehen nicht.

Aus einer bestehenden Website ein responsives Web zu entwickeln, macht selten Sinn. Zu umfassend sind die notwendigen Änderungen an HTML-Gerüst und CSS. Auch konzeptionell ist ein anderes Vorgehen notwendig. „Mobile first“ ist die Faustregel. Ausgehend von der Darstellung auf Smartphones werden die weiteren Layouts bis hin zur Desktop-Version entwickelt.

Der finanzielle Aufwand für die Realisierung und spätere Ergänzungen ist bis zu 50% höher, als für eine herkömmliche Desktop-Website. Andererseits ist eine Responsive Website kostengünstiger als die Entwicklung von drei Native Apps für iPhone, Android und Win8-Phones.

Facebook Web App
Facebook Web App

Web Application

Eine Web Application wird über den Browser aufgerufen und ist prinzipiell eine Website, die ausschaut und sich bedienen lässt wie eine Native App. Schöne Beispiele sind die Web Apps von Facebook oder FlickR, die Ihren nativen Schwestern zum Verwechseln ähnlich sehen.

Der Ansatz von Apps im Allgemeinen wird gewählt, wenn Programmfunktionen eher im Vordergrund stehen als die einfache Bereitstellung von Informationen.

Web Apps haben gegenüber Native Apps den Vorteil, dass nur eine Anwendung entwickelt werden muss, die alle Plattformen bedient. Dafür ist der Zugriff auf Gerätefunktionen wie Lagesensor oder Kamera nur eingeschränkt möglich. Web Apps sind nicht über die App Stores zu beziehen, ihre Existenz muss auf andere Weise publik gemacht werden, zum Beispiel über eine Weiche für mobile Endgeräte, die die Besucher auf die Web-App leitet.

Änderungen an der Web App sind vergleichsweise einfach zu bewerkstelligen. Das Ausrollen eines Updates ist simultan für alle Endgeräte verfügbar.

Facebook Native App
Facebook Native App

Native Application

Native Apps sind kleine Programme, die auf den Endgeräten installiert werden. Native Apps können auf Hardware-Funktionen des Endgeräts zugreifen. Beispielsweise können Daten des GPS-Moduls oder des Lagesensors verwendet werden. Dies ermöglicht eine Reihe von Anwendungen, die mit keinem der anderen Ansätze realisiert werden können.

Die Entwicklung von Native Apps findet für jedes Betriebssystem dediziert statt. Wer iPhone, Android & Win8 bedienen möchte, muss also 3 verschiedene Apps bereitstellen. Dementsprechend aufwendig ist auch die Durchführung von Updates.

Native Apps stehen in den App-Stores zum Download bereit. Sie als Betreiber können entscheiden, ob die App kostenlos oder zum Kauf angeboten wird.




Mobile Website Responsive Website Web Application Native Application
Mobile Website des Karlsruher SC Responsive Website iib_institut Facebook Web App Facebook Native App
Pro:
  • Jederzeit parallel zur Desktop-Version realisierbar
  • Inhaltlich exakt auf die Bedürfnisse von Mobilnutzern anpassbar
  • Läuft auf allen Plattformen
Pro:
  • Basiert auf dem gleichen HTML-Code wie die Desktop-Version
  • Kein zusätzlicher Pflegeaufwand
  • Alle Inhalte sind unter exakt einer URL verfügbar, lediglich die Anzeige wird für verschiedene Endgeräte modifiziert
  • Läuft auf allen Plattformen
Pro:
  • App-Feeling
  • Läuft auf allen Plattformen
  • Jederzeit parallel zur Desktop-Version realisierbar
Pro:
  • App-Feeling
  • Über die verschiedenen App-Stores zu beziehen
  • Telefon- oder Tabletfunktionen wie Lagesensor oder Kamera können vollumfänglich angesprochen werden
  • Jederzeit parallel zur Desktop-Version realisierbar
 
Contra:
  • Erhöhter Pflegeaufwand
  • Gleicher Content unter verschiedenen URLs verfügbar
Contra:
  • Hoher Aufwand für Nachrüstung bestehender Website (i.d.R. unwirtschaftlich)
  • Änderungen/Ergänzungen müssen für alle Auflösungen umgesetzt werden
  • Erhöhter Konzeptionsaufwand (Stichwort „Mobile first“)
Contra:
  • Für den User schwieriger auffindbar, da nicht in den Appstores verfügbar
  • Telefon- oder Tabletfunktionen nicht vollumfänglich ansprechbar
Contra:
  • Apps müssen für verschiedene Systeme bereitgestellt werden (z.B. iOS, Android, Win 8)
  • Updates müssen für alle Plattformen ausgerollt werden
  • Hoher Preis
 

Fazit:

Wenn Sie über eine Mobilmachung für Ihr Unternehmen nachdenken, kommen die vier vorgestellten Technologien in Frage. Welche davon für Sie die passende ist, hängt von verschiedenen Faktoren ab. Maßgeblich dürfte neben der verfolgten Mobile-Strategie die Höhe des Budgets sein. Die kostengünstigste Lösung ist die Erstellung einer Mobile Website. Steht in naher Zukunft ein Relaunch der Unternehmens-Website an, sollten Sie das Thema „Responsive Webdesign“ in Betracht ziehen, da eine spätere Nachrüstung schwierig oder gar nicht zu bewerkstelligen ist. Die Entwicklung einer Web-App, die über den Browser abgerufen wird, ist kostengünstiger als das Bereitstellen von Native-Apps für die diversen Plattformen. Native Apps verfügen gegenüber Web-Apps über Vorteile, wie die Unterstützung sämtlicher Telefonfunktionen und die Verfügbarkeit in den App-Stores.

Wenn das Budget keine Rolle spielt, können Sie mehrere Wege gleichzeitig gehen und zum Beispiel sowohl Responsive Web, Web-App und die Native-Apps anbieten. Die Entscheider sind jedoch häufig nicht ausreichend für das Thema sensibilisiert und die Budgets für Mobile entsprechend limitiert.

Gern beraten wir Sie zum Thema Mobile Internet und entwickeln gemeinsam mit Ihnen eine geeignete Strategie für Ihre "Mobilmachung".

 

 

© analog multimedia - die TYPO3-Agentur