Moderne Apps

Mobile Websites im Vergleich zu systemeigenen Apps und Hybrid-Apps

Rachel Appel

Rachel AppelIn einem modernen Entwicklungsszenario stellt sich in der heutigen Zeit regelmäßig die gleiche Frage: Soll eine mobile Website oder eine systemeigene App bzw. eine Hybrid-App erstellt werden? Als Entwickler müssen Sie einige Aspekte berücksichtigen, bevor Sie mit der Entwicklung von Software beginnen. Sie müssen z. B. Ihre Zielgruppe ermitteln. Diese Entscheidung wirkt sich wesentlich auf Ihre Zielplattformen aus.

Benutzer verwenden viele verschiedene Geräte, um auf Ihre Software zuzugreifen. Einige Benutzer greifen auf Apps ausschließlich über ein Unternehmensnetzwerk zu, während andere Apps für Endverbraucher gedacht sind. Nachdem Sie die Zielgruppe und die Plattformen festgelegt haben, müssen Sie herausfinden, welche Software die Anforderungen dieser Zielgruppe erfüllt – ggf. mit plattformspezifischen Funktionen.

Bei modernen Apps wird zwischen drei Haupttypen unterschieden: mobile Web-Apps, systemeigene Apps und Hybrid-Apps. In diesem Artikel wird jeder dieser Typen mit seinen Vor- und Nachteilen beschrieben, und es wird erläutert, wie er entwickelt werden kann. In diesem Artikel werden keine traditionellen (systemeigenen) Desktop-Apps behandelt, die mit Windows Forms oder Windows Presentation Foundation (WPF) erstellt werden. Diese werden nicht als modern betrachtet, weil sie nur in großen Desktopumgebungen und nicht auf einer Vielzahl von Geräten ausgeführt werden.

Mobile Websites

Mobile Websites besitzen die am weitesten gefächerte Zielgruppe der drei Hauptanwendungstypen. Jedes Smartphone kann zumindest Inhalte anzeigen und ermöglicht dem Benutzer die Interaktion mit einer mobilen Seite – wenn auch einige Smartphones darin besser als andere sind. Abgesehen von der Vielfältigkeit besteht ein weiterer Vorteil in der einfachen Bereitstellung. Updates können an einem Ort vorgenommen werden, und alle Benutzer verfügen automatisch über Zugriff auf die aktuellste Version der Website. 

Wenn Sie bereits über eine Website verfügen und eine Begleit-App verwenden oder in den App-Markt expandieren möchten, können Sie als ersten Schritt Ihre Website so gestalten, dass sie für Mobilgeräte geeignet ist. Dies bringt einige Änderungen mit sich. Der relativ kleine Aufwand rentiert sich jedoch insbesondere im Vergleich zum Erstellen einer vollständigen, systemeigenen Sammlung von Apps. Websites, die für Desktopcomputer oder große Bildschirme geeignet sind, können auf kleinen Geräten nur schwierig genutzt werden. Wenn Sie diese Websites so ändern, dass sie auf mobilen Geräten einfach verwendet werden können, wirkt sich dies direkt auf die Kundenzufriedenheit aus.

Mobilität als vorrangige Funktion Ihrer Website erhöht auch ihre Reichweite. Es ist einfacher, mobile Websites zu verwenden. Es sind weniger Popups und Ablenkungen vorhanden. Ein mobiles Design verwendet außerdem im Allgemeinen große quadratische oder rechteckige Schaltflächen, auf die einfach getippt werden kann.

Sie können Ihre vorhandenen Kenntnisse der Webentwicklung umfassend nutzen, um eine mobile Version Ihrer Website zu erstellen. Sie können also HTML, JavaScript, CSS und ggf. einige der gängigsten Frameworks verwenden. Das Fachwissen, das zum Erstellen mobiler Apps erforderlich ist, bezieht sich nicht auf eine bestimmte Plattform oder einen Hersteller.

Zwei wichtige Aspekte, die für mobile Anwendungen berücksichtigt werden müssen, sind die Integration eines reaktionsfähigen Entwurfs und die Neustrukturierung des Inhalts, damit dieser auf kleiner Hardware verwendet werden kann. CSS-Medienabfragen sorgen für den reaktionsfähigen Entwurf. Mithilfe von Medienabfragen kann CSS so codiert werden, dass Stilregeln definiert werden, die für bestimmte Geräteformfaktoren geeignet sind. Ihre Website sollte z. B. über Medienabfragen für mehrere Geräteformfaktoren verfügen, etwa Telefone, Tablets, Phablets, Laptops und große Bildschirme.

Glücklicherweise können Medienabfragen erstellt werden, die für mehrere Geräte in einer Kategorie funktionieren. Die Neustrukturierung des Inhalts bedeutet das Ändern des Layouts, damit der Inhalt auf einem sehr kleinen Bildschirm für den Benutzer gut erkennbar angezeigt werden kann. Diese Änderung wirkt sich auch auf das Datenvolumen aus. Es sind Standardmedienabfragen verfügbar, die in Twitter Bootstrap enthalten sind – einer beliebten Bibliothek, die reaktive CSS-Dateien und Formate enthält, die Sie als Grundlage verwenden können.

Abbildung 1 enthält z. B. CSS-Formate, die auf einer breiten Palette von Geräten funktionieren. Der Code in Abbildung 1 ist nicht für jedes Szenario geeignet, kann jedoch für die Mehrzahl der Szenarien verwendet werden. Möglicherweise müssen Sie einige Änderungen am Code vornehmen, damit er Ihre Anforderungen erfüllt.

Abbildung 1 – CSS-Medienabfragen für gängige Formfaktoren

Smartphones
Portrait and Landscape
@media only screen and (min-device-width : 320px) and
(max-device-width : 480px) { ... }
Landscape
@media only screen and (min-width : 321px) { ... }
Portrait
@media only screen and (max-width : 320px) { ... }
Tablets, Surfaces, iPads
Portrait and landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) { ... }
Landscape
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : landscape) { ... }
Portrait
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : portrait) { ... }}
Desktops, laptops, larger screens
@media only screen  and (min-width : 1224px) { ... }
Large screen
@media only screen  and (min-width : 1824px) {  ... }
Smartphones
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { ... }
Portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { ... }

Der CSS-Code in Abbildung 1 funktioniert nicht nur in mobilen Web-Apps, sondern auch in systemeigenen Apps. Dies bedeutet, dass er für alle drei Typen von Apps geeignet ist, die in diesem Artikel behandelt werden. Auf der Windows-Plattform können Sie ihn in WinJS-Projekten (Windows-Bibliothek für JavaScript) und Hybrid-Apps in C# verwenden. Ausführlichere Informationen zu einem reaktionsfähigen App-Entwurf finden Sie in meinem Artikel von Oktober 2013 "Aufbau einer reaktionsfähigen und modernen Benutzeroberfläche mit CSS für WinJS-Apps" (msdn.microsoft.com/magazine/dn451447).

Benutzeroberflächen und -erlebnisse mobiler Websites entsprechen wahrscheinlich nicht denen des Hostbestriebssystems, da Web- und systemeigene Plattformen unterschiedlichen Entwurfsmustern und -techniken folgen. Viele Entwickler versuchen, eine Website, die für Desktopmonitore geeignet ist, auf kleinen Bildschirmen des Smartphones oder Phablets unterzubringen. Dies funktioniert meistens nicht. Berücksichtigen Sie unbedingt, wie Benutzer Informationen auf kleinen Geräten nutzen.

Ein Nachteil von mobilen Websites besteht darin, dass viele Funktionen, die für systemeigene Apps verfügbar sind, für mobile Websites einfach nicht zur Verfügung stehen. Selbst einige der systemeigenen Features, die Hybrid-Apps nutzen, sind für mobile Websites nicht denkbar. Der hauptsächliche Grund dafür sind Sicherheitserwägungen.

Der Zugriff auf das Dateisystem und lokale Ressourcen ist auf Websites nicht verfügbar – seien sie mobil oder nicht. Diese Tatsache wird sich ändern, wenn die Datei-API von einer größeren Anzahl von Anbietern in ihre Browser integriert wird. Zurzeit unterstützen die mobile Version von Internet Explorer, Opera Mini und einige iOS Safari-Versionen diese API nicht. Code kann keine Webcams, Sensoren oder andere Hardwarekomponenten aufrufen. In Zukunft werden Browser einen größeren Umfang von Hardwarefeatures bereitstellen. Zurzeit sprengen diese Möglichkeiten jedoch den Rahmen.

Damit Offlinefunktionen ermöglicht werden, müssen mobile Websites Webtechnologien wie etwa Webspeicher, IndexedDb und AppCache verwenden. Mobile Websites können keine Dateisystemressourcen nutzen, ihr Sandkastenmodell ermöglicht jedoch in gewissem Umfang clientbasierten Speicher. Zahlreiche vorhandene Websites unterstützen keine Offlinefunktionen, da diese nutzlos sind, wenn die Verbindung getrennt wird.

Systemeigene Apps

Für die meisten Zielplattformen sollten Sie Ihre Kenntnisse nutzen können. Wenn Sie unter Windows entwickeln, können Sie Ihre App mit C#, Visual Basic oder C++ sowie XAML für die Benutzeroberfläche codieren. Sie können auch Code in JavaScript schreiben und HTML, CSS und WinJS für die Benutzeroberfläche verwenden. Für Android können Sie in Java und Objective-C für iOS programmieren.

Wenn Sie den systemeigenen Weg beschreiten möchten, können Sie die Marketingvorteile eines App Stores nutzen. Um welchen Store es sich dabei handelt, ist eigentlich egal. Alle diese Stores unterstützen Sie beim Vermarkten Ihrer App durch die kostenlose Bereitstellung oder Werbeaktionen, die Sie auf andere Weise nicht nutzen könnten. Der Nachteil eines App Stores besteht natürlich darin, dass ein potenzieller Benutzer Ihre App erst einmal finden und installieren muss. Trotz der Vermarktungsunterstützung durch den Store wird es Benutzer geben, die Ihre App nicht finden.

Ein Aspekt, der Entwickler häufig davon abhält, mehrere Zielplattformen zu berücksichtigen, besteht darin, dass es erforderlich ist, zumindest einen Teil der Benutzeroberfläche für jede Zielplattform neu zu erstellen. Dies bedeutet, dass Sie eine Benutzeroberfläche für Windows Store und Windows Phone, iOS und Android benötigen. Es kann eine ziemliche Herausforderung darstellen, eine flexible Benutzeroberfläche zu erstellen, die auf Dutzenden von Bildschirmen mit kleinen Unterschieden funktioniert. Das Ergebnis bietet Benutzern jedoch die reichhaltige, systemeigene Erfahrung, die von Qualitäts-Apps erwartet wird. Die Bewertungen im App Store verweisen letztlich auf Apps, die eine ausgezeichnete Benutzererfahrung bereitstellen.

Wenn Sie den systemeigenen Weg wählen, müssen Sie eine plattformübergreifende Strategie einsetzen. Berücksichtigen Sie die jeweiligen Zielplattformen und die Reihenfolge, in der die Veröffentlichung erfolgen soll. Hinsichtlich der Frage zu mobilem Web im Vergleich zu systemeigenen und Hybrid-Apps geht die reibungsloseste Vorgehensweise vom mobilen Web zu Hybrid- und dann zu systemeigenen Apps.

Auch wenn Sie systemeigene Apps veröffentlichen, sollten Sie die Wartung Ihrer mobilen Website nicht vernachlässigen, weil ein mobiles Angebot MOAT-Datenverkehr nach sich zieht. Wählen Sie dann eine Plattform aus, die ggf. Ihrem Entwicklerhintergrund entspricht, und beginnen Sie mit der Entwicklung. Weitere Richtlinien zu den Erwägungen beim Erstellen plattformübergreifender Apps finden Sie in meinem Artikel von Mai 2014 "Entwerfen einer plattformübergreifenden, modernen App-Architektur" (msdn.microsoft.com/magazine/dn683800).

Visual Studio enthält zahlreiche Projektvorlagen zum Erstellen systemeigener Apps für die Windows-Plattform. Unter C#, Visual Basic und C++ finden Sie Windows Store- und Windows Phone-Apps. Visual Studio enthält außerdem Vorlagen für JavaScript-Apps. Sie müssen zuerst die Sprache festlegen, die Sie verwenden möchten, da hier zahlreiche Aspekte berücksichtigt werden müssen – z. B., ob die App plattformübergreifend sein wird. Mein Artikel von September 2013 "Richtiges Auswählen von Sprachen zum Entwickeln moderner Apps" (msdn.microsoft.com/magazine/dn385713) kann Sie bei der Entscheidung unterstützen, welche Sprache verwendet werden sollte. Erwartungsgemäß steht eine große Auswahl an Tools für systemeigene Apps zur Verfügung (z. B. APIs und Steuerelemente für jede Plattform, die Sie interessiert).

Die meisten systemeigenen Apps für eine bestimmte Plattform verwenden ein ähnliches Navigationsmuster. Die Windows Store-Plattform verwendet z. B. App-Leisten und eine strategisch platzierte Schaltfläche "Zurück". Wenn Sie integrierte Navigationsschemas nutzen, sind Benutzer gleich mit Ihrer App vertraut und müssen nichts Neues lernen. Dies führt zu besseren Bewertungen und einer größeren Anzahl von Downloads. Mein Artikel von April 2014 "Navigationsgrundlagen in Windows Store-Apps" (msdn.microsoft.com/magazine/dn342878) enthält alle Fakten zur Navigation in Windows Store-Apps.

Hybrid-Apps

Zwischen mobilen Websites und systemeigenen Apps sind die Hybrid-Apps angesiedelt. Mithilfe von Hybrid-Apps können Sie Inhalte von vorhandenen Websites im App-Format bereitstellen. Mit diesen Apps können Sie Ihre Webinhalte in Paketen für die Veröffentlichung in einem App Store bereitstellen. Sie können Hybrid-Apps in jedem der größeren App Stores veröffentlichen: Microsoft Windows Store, Google Play, Apple App Store, Amazon Appstore und sogar BlackBerry World.

Hybrid-Apps zeichnen sich dadurch aus, dass es sich um veröffentlichte Apps oder um eine provisorische Lösung handeln kann, die Sie im Store anbieten können, während Sie an der Erstellung systemeigener Apps arbeiten. Sie bieten den Vorteil, dass Sie bereits im Markt veröffentlichen und den Vermarktungsvorgang einleiten können, während Sie eine Sammlung von systemeigenen Apps fertigstellen (wenn dies Ihr Ziel ist). Wenn dies nicht Ihr Ziel ist, kann eine Hybrid-App dazu dienen, ein formales Angebot für App Stores bereitzustellen.

Hybrid-Apps können abhängig von den Betriebssystemregeln des Hosts ggf. besser als mobile Websites auf lokale Ressourcen zugreifen. Dies bedeutet, dass Funktionen wie etwa Webcamverwendung oder bestimmte Sensoren nicht überall funktionieren.

Die gute Nachricht ist, dass Sie für Hybrid-Apps die Ihnen vertrauten Webentwicklungskenntnisse verwenden können. Hybrid-Apps sind im Wesentlichen Websitewrapper. Ihre Grundlage ist der gleiche altbekannte HTML-, JavaScript- und CSS-Code, mit dem Sie bereits vertraut sind.

Für das Erstellen von Hybrid-Apps für die verschiedenen App Stores steht ein großes Angebot von Drittanbietern zur Verfügung. Erwartungsgemäß sind auch Vorlagen zum Erstellen von Hybrid-Apps in Visual Studio vorhanden. Bekannte Hersteller wie etwa Xamarin, Telerik, DevExpress und Infragistics bieten Tools und Steuerelemente an, die den Entwicklungsvorgang für Hybrid-Apps beschleunigen.

Wenn Sie einen iFrame in Visual Studio JavaScript-Apps verwenden, können Sie eine Hybrid-App ausschließlich mit Websprachen erstellen. Sie können Hybrid-Apps auch mithilfe der Windows Phone HTML5-Projektvorlage mit C# oder Visual Basic .NET erstellen. Schließlich können Sie auch eine beliebige auf XAML basierende App mit einem WebView-Steuerelement versehen, um den gleichen Effekt zu erzielen. Das WebView-Steuerelement verhält sich wie ein Browser. Dies bedeutet, dass Sie es steuern, indem Sie Methoden wie etwa "Navigate", "Refresh" oder "Stop" aufrufen, die häufig einer äquivalenten Aktion zugeordnet werden, die der Benutzer ausführt. Das folgende Beispiel zeigt das WebView-Steuerelement sowie einigen grundlegenden Code, der die Navigation zu einer Startseite für die App ausführt:

In MainPage.Xaml

<WebView x:Name="webView"/>

In MainPage.Xaml.Cs

public MainPage()
{
  this.InitializeComponent();
  Uri targetUri = new Uri("http://rachelappel.com");
  webView.Navigate(targetUri);
}

Sie können WebView-Ereignisse abfangen, um die Navigation, Seitenladevorgänge und andere Aufgaben auszuführen. Sie können z. B. die Navigation abfangen, um die beliebtesten Links zu protokollieren. Das folgende Beispiel zeigt dies:

private void webView_NavigationCompleted(Windows.UI.Xaml.Controls.WebView sender,
  WebViewNavigationCompletedEventArgs args)
{
  logNavigation(args.Uri.ToString());
}

Rachel Appel ist Beraterin, Autorin, Mentorin und frühere Microsoft-Mitarbeiterin mit über zwanzigjähriger Erfahrung in der IT-Branche. Sie nimmt an wichtigen Branchenkonferenzen wie Visual Studio Live!, DevConnections und MIX als Rednerin teil. Ihr Fachbereich ist die Entwicklung von Lösungen, bei denen geschäftliche und technologische Aspekte in Einklang gebracht werden und in denen führende Microsoft- und offene Webtechnologien zum Einsatz kommen. Besuchen Sie Rachel Appel auf ihrer Website unter rachelappel.com.

Unser Dank gilt dem folgenden technischen Experten von Microsoft für die Durchsicht dieses Artikels: Frank La Vigne