Mobile Apps bestimmen mobile Nutzererfahrung
 

Die mobile Internetnutzung steigt stetig an. Weltweit liegt Anteil der mobilen Nutzung am gesamten Internet-Traffic derzeit bei über 50%. In Deutschland sind es über 40%. Vor allem junge Zielgruppen gehen über das Smartphone online. Aber auch bei älteren Zielgruppen besteht die Internetnutzung in der Regel aus einem Mix aus mobilen Zugriffen und Desktop-Zugriffen.

Reicht Responsive Web Design allein noch aus, um mobile User zu einer intensive Interaktion mit einem Webangebot einzuladen? Wir glauben, es ist Zeit, einen Schritt weiter zu gehen. Die Smartphone-User sind mittlerweile an eine High-End-Nutzererfahrung gewöhnt, wie sie gute Mobile Apps bieten. Hier gibt das exzellente UX-Design der Major-Apps von riesigen Anbietern den Maßstab vor. Facebook, Whatsapp, Ebay, Slack, aber auch die mitgelieferten Apps der Betriebssysteme iOS und Android definieren die mobile Nutzererfahrung.

Schon kleinere Mobile Apps fallen hier oft zurück, weil sie kaum mit der rasend schnellen Verbesserung der mobilen Nutzeroberflächen im Gesamtmarkt mithalten können. Außerdem sind für sie App Stores eine große Hürde, wenn es darum geht, Nutzer zu gewinnen. Viele Smartphone-User verwenden nicht mehr als ungefähr zehn Apps wirklich intensiv. Zu den intensiv genutzten Apps gehören die einschlägigen Social-Media-Kanäle, Online-Marktplätze, Mobilitäts-Apps wie der Navigator der Bahn AG oder Google Maps und Evergreens wie eine Wetter-App. Kleinere App-Angebote mit ähnlichen oder auch spezielleren Anwendungszwecken werden von den Usern erst gar nicht aus dem Store geladen. Auch erreichen sie allein durch ihre Präsens in den App Stores keinen hohen Bekanntheitsgrad. Wenn sie extern beworben werden, muss der User doch immer noch in den Store, um die App zu laden. Ein Umweg, auf dem viele Interessenten abspringen und eben nicht zu Usern werden.

Der noch recht neue Trend der Progressive Web Apps (kurz PWA) bietet hier eine attraktive Lösung an. PWA sind nicht an eine bestimmte Technologie gebunden. Sie können sowohl mit den einschlägigen Frameworks und Software-Bibliotheken als auch auf Basis eines Content-Management-Systems umgesetzt werden. Eine besonders schnelle und kostengünstige Möglichkeit besteht darin, sie mit dem weltweit beliebtesten CMS WordPress zu realisieren. Genau genommen unterschieden wir zwei Möglichkeiten, WordPress im Rahmen von PWA-Projekten einzusetzen: eine große und eine kleine Lösung. Bevor ich dazu komme zunächst einmal ein paar Worte zum Thema Progressive Web App.

 

PWA kurz erklärt
 

Progressive Web Apps sind ein noch relativ neuer Trend in der Webentwicklung. Viel spricht dafür, dass PWA die nächste große Welle in der Webentwicklung nach dem Responsive Web Design werden.

PWA vereinen die Vorteile von herkömmlichen Websites oder Web Apps mit denen von Mobile Apps. Wie Websites werden sie über eine URL im Browser geladen. Sie sind somit über Suchmaschinen auffindbar und können SEO betreiben. Der User muss also nicht den erwähnten Umweg über einen App Store gehen wie bei MobileApps. Auf mobilen Endgeräten fühlen sich PWA ähnlich wie Mobile Apps an. Zudem bieten sie Funktionalitäten, wie man sie bisher nur von Mobile Apps kannte – beispielsweise Offline-Funktionen und Push Notifications. PWA sind also für Betreiber von Websites oder Web Apps eine attraktive Möglichkeit, besser auf den immer mehr steigenden Anteil mobiler Internetnutzung zu reagieren. Dabei sind sie deutlich schneller und damit kostengünstiger in der Entwicklung sowie einfacher in der Wartung.

Man kann PWA im Wesentlichen über die folgenden Aspekte charakterisieren:

 

Progressive

Eine PWA funktioniert grundsätzlich in jedem Browser auf jedem Betriebssystem. Dabei bietet sie bei ihrem Aufruf nur den Teil ihres Funktionsspektrums an, der im ausführenden Browser auch unterstützt wird. (Der Begriff Progressive orientiert sich am Webdesign Ansatz des Progressive Enhancement.)

 

Responsive

Eine PWA passt sich an verschiedene Bildschirmgrößen an. Unserer Meinung nach ist hier deutlich mehr Flexibilität notwendig als der aktuelle responsive Standard bietet, der sich im Web bereits flächendeckend durchgesetzt hat. Vielmehr soll sich eine PWA auf mobilen Endgeräten tatsächlich wie eine App anfühlen. Es geht um Konzepte wie Splash-Screens, Page-Transitions, Wischgesten, mobile Menü-Steuerung etc. Wichtig ist dabei, zwischen der Nutzungssituation am Desktop und der mobilen Nutzen klar zu differenzieren und sisch beim mobilen Desigen an der herausragenden Nutzererfahrung von guten Mobile Apps zu orientieren. Bei Fruyts sprechen wir daher auch von Responsive UX-Design statt von Responsive Web Design.

 

Zuverlässig

Eine PWA bietet dem User immer ein gewisses Spektrum an relevanten Inhalte und Funktionen an. Und zwar unabhängig davon, welche und ob eine Netzwerkverbindung besteht. Dazu benötigt die PWA wie eine Mobile App Offline-Funktionalität. (Sie muss außerdem leichtgewichtig sein. Dazu mehr im nächsten Punkt.)

Der Umfang der Offline-Funktionalität hängt vom Zweck der PWA ab. Für manche Apps ist es sinnvoll, ihren vollen Funktionsumfang auch offline bereitzustellen. Für andere reicht es aus, den User lediglich darauf hinzuweisen, dass er offline ist und er eine Netzwerkverbindung herstellen soll. In keinem Fall jedoch, sollte eine PWA überhaupt nicht laden oder nicht responsive auf das Endgerät reagieren.

 

Schnell

Eine PWA muss schnell laden. So ermöglicht sie sanfte Seitenübergänge und flüssiges Scrollen. Dazu braucht sie sowohl einen schnellen Webserver als auch eine kluge Architektur und leichtgewichtigen Code.

 

Installierbar

Das App-Icon einer PWA kann auf dem Home-Screen des mobilen Geräts abgelegt werden. Wird die PWA über das Icon aufgerufen, kann sie wie eine Mobile App im Full Screen oder Stand Alone Modus betrieben werden. Dann sieht man das Browser-Fenster nicht mehr.

 

Engaging

Hier wird als zentrales Feature immer die Möglichkeit genannt, dem User Push-Notifications zukommen zu lassen. Wie eine Mobile App kann die PWA also mit dem User interagieren, auch wenn sie gerade nicht ausgeführt wird. Aber der Punkt ist übergreifend gemeint: PWA sollen insgesamt eine intensive und aktivierende Nutzungserfahrung anbieten und sich damit von herkömmliche Websites abheben.

 

Sicher

PWA werden konsequent über HTTPS ausgeliefert. Je nach Funktionalität werden sie zusätzlich abgesichert.

FRONTEND UND BACKEND

Wenn hier in diesem Beitrag von Frontend die Rede ist, ist immer die für den User einer PWA sichtbare und bedienbare Oberfläche gemeint, also die Darstellung der Inhalte der PWA und die Funktionselemente wie Buttons oder Eingabefelder.

Mit Backend ist ebenfalls eine Benutzeroberfläche gemeint, nämlich die Oberfläche, die das Betreiber-Team einer PWA nutzt, um die App als Admin zu konfigurieren oder als Redakteur mit Inhalten zu versorgen. So, wie man es von WordPress kennt.

Explizit nicht mit dem Bezeichnung Backend gemeint ist alles, was auf dem Server abläuft. Dafür verwende ich einen anderen Begriff, wie im nächsten Abschnitt klar wird.

 

SERVERSEITIGE UND CLIENTSEITIGE LOGIG

Webanwendungen sind immer verteilte Anwendungen. Traditionelle Websites und Web Apps werden in der Regel in einer Client-Server-Architektur realisiert. Der Browser ist der Client, der sich mit einer Anfrage oder einem Auftrag über das Internetprotokoll HTTP beim Server meldet. Der Server führt die entsprechenden dort installierten Anwendungen aus und liefert ein Ergebnis zurück.

PWA werden ebenfalls nach dem Client-Server-Muster aufgebaut. Aber sie verschieben die Gewichte zwischen Client und Server etwas.

Nach wie vor wird eine PWA von einem Server geladen. Auch kann der Server weiterhin einen Teil der Funktionalität bereitstellen, wie beispielsweise aufwändige Berechnungen oder die dynamische Generierung von Inhaltselementen durch WordPress. Aber in einer PWA wächst tendenziell der Anteil, der vom Browser als Client ausgeführt wird. In der Regel handelt es sich hier um Programme-Elemente, die in JavaScript bereitgestellt werden. Anders wäre ja auch die erwähnte Offline-Funktionalität nicht möglich. Denn sie muss ohne Verbindung zum Server funktionieren.

Entsprechend nenne ich alle Teile einer Webanwendung, die auf dem Server ausgeführt werden, ich serverseitige Logik. Wenn hingegen von clientseitiger Logik die Rede ist, ist JavaScript-Code gemeint, der im Browser ausgeführt wird.

Zwei Möglichkeiten WordPress für PWA einzusetzen

Abgesehen von den Basis-Web-Technologien und -Protokollen (wie HTML5, CSS3, JavaScript, HTTPS etc.) sind PWA nicht von bestimmten Technologien oder Frameworks abhängig. Entwickler können hier nutzen, was sie für richtig halten, eben auch das Content-Management-System WordPress.

Grundsätzlich gibt es zwei Möglichkeiten, WordPress für eine Progressive Wep App einzusetzen. Erstens, indem WordPress sowohl für das Backend als auch das Frontend verwendet wird. Und zweitens indem WordPress nur für das Backend eingesetzt wird.

 

 

1. Die kleine PWA-Lösung: Wordpress als Frontend und Backend einer PWA

 

1a. PWA Plugins

Beim Thema PWA hat die WordPress-Community einmal mehr ihre Beweglichkeit gezeigt und den Trend früh aufgenommen. Mittlerweile gibt es eine Reihe von Entwicklern bzw. Entwicklerteams, die Pluginsanbieten, mit denen man eine WordPress-Website in eine PWA umwandeln kann.

Um das zu erreichen muss ein Plugin mindestens die zwei Basisdateien bereitstellen, die eine PWA benötigt: ein Manifest und einen Service Worker. Das Manifest ist eine JSON-Datei, die einige Meta-Informationen der PWA enthält, die das jeweilige Betriebssystem braucht, um die Anwendung zu integrieren. Der Service Worker ist eine JavaScript-Datei, durch die Offline-Funktionen und ggf. weitere Funktionalitäten möglich werden.

Wie bei eigentlich allen Plugins mit größerem Einfluss auf die Konfiguration eines WordPress-Projekts sollte man auch die PWA-Plugins erst einmal in einer geschützten Umgebung oder an einem Klon der Live-Website ausprobieren. In jedem Fall ist vorher immer ein Backup empfehlenswert, damit das Projekt nach Problemen schnell in einem früheren Zustand wiederhergestellt werden kann.

Nach unserer Erfahrung gut funktionierende PWA-Plugins sind beispielsweise SuperPWAPWA4WP und Progressive WP. Wobei Progressive WP noch einige Features mehr bietet wie beispielsweise Push Notifications über Googles Firebase Cloud Messaging und das Speichern von Analysedaten im Offline-Mode für die spätere Übermittlung an Google Analytics. Dabei stellt sich natürlich immer die Frage, ob man eine so enge Verzahnung mit Google Diensten möchte bzw. mit den geltenden Datenschutzrichtlinien vereinbaren kann. Diese Fragen kann man aber nur konkret für das jeweilige Projekt beantworten.

 

1b. PWA Theme

Bei Fruyts verfolgen wir einen noch weitreichenderen Ansatz, um WordPress als PWA auszurüsten. Wir haben Abbby konzipiert, ein Theme für Responsive UX-Design, das sich besonders für PWA eignet. Das Theme Abbby entwickeln wir sukzessive weiter und achten dabei natürlich auf das reibungslose Zusammenspiel der notwenigen Plugins und weiterer Funktionalitäten. Auch können wir die Einbindung von benötigten Ressourcen auf diese Weise leichter optimieren und somit eine wesentlich bessere Performance erreichen. Das schnelle Laden zählt ja zu den Grundvoraussetzung einer PWA.

Ein weiterer Vorteil dieser ganzheitlichen Herangehensweise besteht darin, dass wir das Design des Frontends perfekt auf die PWA-Funktionen abstimmen können. Abbby ermöglicht Responsive UX-Design. Das Theme verhält sich auf dem Desktop wie eine moderne Web App, auf mobilen Geräten zeigt es Qualitäten, die man eher bei Mobile Apps erwartet.

Bei Abbby setzen wir auf Gutenberg Blocks, also das noch recht neue Editor-System von WordPress, welches 2018 eingeführt wurde und wie ein Modulbaukasten funktioniert. Damit wird die Nutzung eines Page Builder Plugins für uns überflüssig, was wiederum Komplexität, Abhängigkeiten und potentielle Problemquellen reduziert. Die Erweiterungsmöglichkeiten über Plugins sparen wir uns für spezielle Funktionalitäten auf, die nicht jeder benötigt und zum teil auch projektspezifisch entwickelt werden müssen.

 

Für wen eignet sich die kleine Lösung?

Die hier skizzierte kleine Lösung, eine PWA über WordPress zu realisieren, eignet sich für alle, die einen einen fundierten ersten Schritt in Richtung PWA wollen. Und dabei mit Responsive UX-Design sowohl Desktopcomputer als auch mobile Endgeräte mit derselben Web App adäquat abdecken möchten. Vor allem Unternehmen, die auf Smartphones einen hohen Nutzwert anbieten können oder müssen, sollten eine WordPress-PWA in Betracht ziehen. Hierzu gehören beispielsweise:

 

Kleinere Messen

  • Besucher und Aussteller mobil besser mit Informationen wie Ausstellerdaten, Services, Hallenpläne versorgen.

 

Hotels und Gastronomie-Betriebe

  • Auch dem mobilen Gast Services wie z.B. Zimmer- bzw. Tischreservierungen komfortabel ermöglichen.

 

Online-Magazine

  • Content auf dem Smartphone mit App Feeling anbieten und unabhängiger von Social-Media-Kanälen werden.

 

WooCommerce-Shops

  • Das mobile Shopping-Erlebnis deutlich verbessern und mehr Abschlüsse generieren.

 

Human-Ressource Abteilungen

  • Junge smartphone-affine Zielgruppen besser erreichen.

 

Kultur- oder Sport-Veranstaltungen

  • Besucher auch vor Ort mit Programm-Details versorgen.

 

Prototyping-Projekte

  • Leichter und kostengünstiger von einem Design-Thiniking-Prototyp oder Click-Dummie zu einem testbaren App-Prototyp gelangen.

 

PWA eigen sich sehr gut, um App-Projekte im Prototyping zu unterstützen. Hier lösen sie vor allem ein Problem, dass in vielen Unternehmen während der Ausarbeitung von Ideen für Digitalprodukte auftritt: mangelnde IT-Kapazitäten für neue Projekte. In der agilen Unternehmenskultur ist jedes Teammitglied dazu eingeladen, neue Ideen zu entwickeln. Ideen für Webanwendungen entstehen hier in allen Abteilungen. Entweder beiläufig oder in strukturierten Prozessen wie einem Design-Thinking-Workshop. Die Ergebnisse sind oft bereits Prototypen, aber eben sehr rudimentäre wie Papier-Modelle einer App oder einfache Klick-Dummies ohne Datenbank-Anbindung. Der nächste Prototyping-Schritt müsste eigentlich darin bestehen, eine erste App-Version zu programmieren. Hierfür steht in der Regel nur wenig IT-Kapazität zur Verfügung. Oftmals sind IT-Teams bereits ziemlich genervt von der Flut an neuen Ideen, die an sie herangetragen werden. Schließlich müssen sie auch das Tagesgeschäft bedienen und wissen außerdem um die Aufwände, die eine App-Entwicklung erzeugt. PWA mit WordPress sind genau für diese zweite Prototyping-Phase eine sehr gute und schnelle Lösung. Damit entsteht ein Prototyp, der leicht einige Funktionalitäten in einem modernen Look-and-Feel bereitstellt und mit realen Usern getestet werden kann. Wenn sich während der Tests herausstellt, dass die WordPress-PWA sogar die Ziel der App-Konzeption erreicht, um so besser. Dann kann die PWA schnell zur Marktreife geführt werden.

 

 

2. Die große PWA-Lösung: Wordpress als Content-Backend einer PWA mit beliebigem Frontend

 

Wo es eine kleine Lösung gibt, muss auch eine große Variante existieren. Wobei sich die Eigenschaft „groß“ auf die Komplexität des Web-Projekts und nicht auf die Rolle von WordPress bezieht. Letztere wird nämlich kleiner.

WordPress kommt in der großen PWA-Lösung nur ins Spiel, wenn es darum geht, die PWA mit Inhalten zu füllen. Der Content kann wie bei einer normalen Website bequem über das intuitive WordPress-Backend eingepflegt werden. Um die Inhalte abzuholen und im Frontend anzuzeigen wird aber nicht mehr das WordPress-Frontend genutzt. Statt dessen wird der Content über eine API zur Verfügung gestellt.

Für die Realisierung des Frontends können in diesem Ansatz State-of-the-Art-Frameworks und -Bibliotheken wie Angular oder React eingesetzt werden. Dieser Ansatz ermöglicht deutlich leistungsfähigere PWA, die ihren App-Charakter zu 100 Prozent entfalten. Die Vorteile im Überblick:

  • Beliebige App Funktionalität, die Modulartig hinzugefügt werden kann
  • Mehr und differenzierte Offline-Funktionalität
  • Maßgeschneiderte Lösungen, die nicht durch den Rahmen eines CMS beschränkt oder definiert werden
  • Bessere Anbindung des Frontends an komplexe serverseitige Logik über REST-API und Micro-Service-Architekturen

 

Der hier große Lösung genannte Ansatz bietet also Vorteile sowohl in Hinblick auf die clientseitige als auch die serverseitige Logik. Clientseitig, also im Browser, bieten Frameworks wie Angular bereits eine große Anzahl an Funktionsbausteinen, die verwendet werden können, um den App-Charakter der PWA herzustellen.

Aber auch komplexere serverseitige Logiken können mit diesen mächtigen Frontend-Tools besser verfügbar und bedienbar gemacht werden. Bei der kleinen WordPress-PWA-Lösung besteht die serverseitige Logik in der Regel aus einer Datenbank (MySQL, MariaDB), dem PHP-Kern von WordPress und gegebenenfalls weiteren PHP-Modulen in den Plugins. Wird aber eine PWA mit größerer Komplexität geplant, ist es sinnvoll, sich vom WordPress-Frontend zu lösen. Damit wird man auch die Abhängigkeiten los, denen WordPress im Frontend in den meisten Fällen unterliegt. Insbesondere muss nicht mehr die JavaSkript-Bibliothek jQuery eingesetzt werden, die in den meisten WordPress-Projekten verwendet wird und deren Schwerpunkt traditionell nicht unbedingt in der Unterstützung von PWA liegen. Eine serverseitige Logik, die nach der Best Practice einer Micro-Service-Architektur mit REST-API realisiert wird, kann somit ihr ebenbürtiges Fontend-Gegenstück erhalten.

 

 

Für wen eignet sich die große Lösung?

 

Web-App-Betreiber, die das Potential von PWA voll ausschöpfen wollen, sollten sich mit der Möglichkeit einer maßgeschneiderten Lösung auseinandersetzen. Hierzu gehören beispielsweise:

 

Große Messen

  • Umfangreiche Informationen für Besucher und Aussteller, sowie weitere Funktionalitäten und digitale Services anbieten.

 

große Shops

  • Mehr Abschlüsse ohne App-Install. Indiens Megakaufhaus Flipkart und das chinesische AliExpress nutzen bereits PWA parallel zu ihren Mobile Apps.

 

große Online-Magazine und Nachrichten-Portale

  • PWA machen Anbieter von tagesaktuellem Content deutlich wettbewerbsfähiger gegenüber ihren Hauptkonkurrenten auf Smart Phones: den Social-Media-Kanälen.

 

Intranet

  • Leistungsfähige Intranets-Apps mit Mobile-First-Funktionalität, unabhängig vom Betriebsystem.

 

Special Interest Apps

  • App-Anbieter mit Apps, die individuelle oder breite Funktionalitäten besitzen, müssen nicht mehr den Umweg über den App Store gehen.

Stephan May
Dr. Stephan May
Gründer von Fruyts digital

Stephan May interessiert sich für die digitale Transformation, Webentwicklung und AI-Themen wie Machine Learning. Besonders treibt ihn die Frage um, wie wir alle unsere Spielräume in der Digitalisierung besser nutzen können.

Fragen und Anregungen bitte an: blog@fruyts.de