Web App erstellen – Das ist zu beachten!

Web-App Definition – Was ist eine Web-App?

Die Web-App (web application = Webanwendung) ist der Definition nach eine Applikation, welche vollständig im Browser ausgeführt wird. Dadurch werden Web-Apps plattformübergreifend bereitgestellt und können von jedem Smartphone, Tablet oder Computer mit Zugang zum Internet erreicht werden. Ähnlich wie Websites basieren Web-Apps auf den üblichen Technologien des Internets und werden in den Programmiersprachen HTML5, JavaScript und CSS erstellt. Dazu müssen Web-Apps nur einmal programmiert werden und können auf sämtlichen Endgeräten dargestellt werden.

Web App Trend 2023

Applikationen werden immer einfacher, intuitiver und kosteneffizienter - daher ist es eine sinnvolle Variante für Unternehmen, Startups und öffentliche Institutionen, eine Web-App statt einer nativen App zu erstellen .

Grundlegend sind Web-Apps, also Websites mit besonderem Anwendungsfokus, werden aber auf dem Smartphone und Tablet so angezeigt und bedient wie Native Apps. Denn durch Ausblenden der Adressleiste, der Vor- und Zurück-Buttons und des Browser-Menüs, wirkt eine Web-App optisch wie eine Native App. Aufgrund der browserbasierten Programmierung ist es nicht notwendig eine Web-App auf dem Endgerät herunterzuladen und dort zu installieren. Eine schnelle Erreichbarkeit kann durch das Erstellen eines Lesezeichens auf dem Desktop oder Smartphone erreicht werden, um beispielsweise ein Video direkt im Webbrowser zu starten.

Die Web-Anwendung wird online über den Server und Cloud des Anbieters bereitgestellt bzw. gehostet. Im Klartext bedeutet dies, dass der Nutzer der Web-App eine beständige Internetverbindung benötigt, um die App mit all ihren Funktionen nutzen zu können. Ein weiteres Merkmal einer Web-App ist die generelle Auffindbarkeit in Suchmaschinen wie Websites, dafür können diese aber nicht auf den App-Plattformen wie dem Google Play Store oder dem Apple App Store gefunden werden. Häufig genutzte Applikationen wie die WhatsApp Web-App ist auch mobil als Smartphone-App entwickelt und über den App Store angeboten. Zudem gibt es für WhatsApp auch eine Desktop-App für Microsoft und iMac, deren größter Unterschied zur Web-App ist, dass weniger Arbeitsspeicher benötigt wird.

Neben der Erstellung einer App als Web-App gibt es noch andere Entwicklungsarten. Erfahren Sie mehr zur "Nativen" und "Hybriden Entwicklung" in unserem Ratgeber.

Das bietet Ihnen eine Web-App – Vor- und Nachteile

Vorteile einer Web-App

Plattformunabhängigkeit

Web-Apps können plattformunabhängig erstellt und auf jeder Art von Endgerät genutzt werden, solange die Nutzer über einen Browser verfügen. Dies hat den großen Vorteil, dass Webapplikationen nur einmal programmiert werden müssen und dann auf sämtlichen Geräten funktionieren. Stichwort hier ist die Kompatibilität, sprich alle Nutzer greifen auf die gleiche Anwendungsfunktion zu, wodurch es bei einer Web-App zu keinen Kompatibilitätsproblemen der unterschiedlichen Versionen (Android, iOS) kommen kann. Web-Apps eignen sich gut für einfache Tools im Internet.

Geringe Entwicklungskosten

Was kostet eine Web-App? Web-Apps kosten rund 20 - 80 % weniger im Vergleich zu nativen App Entwicklungen für beide Betriebssysteme. Dieser Kostenunterschied entsteht auch dadurch, dass weniger Ressourcen beim Design benötigt werden. So kann eine beispielhafte Web-App, die rund 20.000 € in der Entwicklung kostet, in der nativen Programmierung für zwei Betriebssysteme mindestens 35.000 € kosten. Dieser Kostenvorteil entsteht, da neben der initialen Entwicklung auch Updates in der Cloud für nur eine Anwendungsversion programmiert werden müssen - anders als bei einer separaten Entwicklung für iOS und Android. Dies ermöglicht auch die schnelle Reaktion auf eventuelle Sicherheitslücken in Echtzeit und spart Geld.

Reduzierter Entwicklungsaufwand

Durch die Plattformunabhängigkeit und Nutzung im Webbrowser wird enorm an Entwicklungsaufwand gespart. Jedoch können Web-Apps, anders als Native Apps, nicht für bestimmte Endgeräte optimiert werden. Die User-Experience ist bei Web-Apps deswegen häufig geringer. Mit einem responsiven Webdesign und dem Einsatz von Progressive Web-Apps kann diesem Nachteil aber mittlerweile gut entgegengewirkt werden. Web-App Entwickler und Web-App Agenturen entwickeln mit den gewohnten Programmen für die Webentwicklung wie HTML5, Javascript und CSS. Des Weiteren wird für die Programmierung einer Web-App kein Apple iMac oder MacBook benötigt, wie es bei der nativen Entwicklung für iOS der Fall ist.

Simple Verbreitung

Die simple Verbreitung einer Web-App geschieht beispielsweise durch einen Nutzer, der die URL an andere teilt. Diese können dann direkt und ohne Installation auf die Web-Anwendung zugreifen. Anders als native Lösungen können sie über Suchmaschinen wie Google oder Microsoft Bing gefunden werden, wodurch auch organisch generierte Nutzer die Anwendung verwenden. Häufig entscheidet die Marketing-Abteilung mit, ob eine Web-App, Mobile Applikation oder Progressive Web-App (PWA) entwickelt werden soll, denn das Geld für die Entwicklung und den langfristigen Support ist genauso relevant für den Marketing ROI wie die Kosten für das Marketing an sich.

Keine Installation

Die Barrieren der Downloads und der Installationen entfallen. Um sie nutzen zu können, müssen sie nicht auf dem Smartphone oder Tablet installiert werden. Obwohl die Anwendung nicht auf dem mobilen Endgerät installiert wird, ist es trotzdem möglich ein App-Icon auf dem Startbildschirm hinzuzufügen.

Einfache Wartung

Es ist sehr einfach, Updates für Web-Apps zu veröffentlichen. Diese können quasi sofort online gebracht werden und müssen nicht erst von App Stores genehmigt und veröffentlicht werden. Ein weiterer Vorteil ist, dass die Updates für nur eine Anwendungsversion gemacht werden muss und nicht wie bei der nativen Entwicklung für iOS und Android. Dies ermöglicht auch die schnelle Reaktion auf eventuelle Sicherheitslücken in Echtzeit und spart Geld.

Nachteile einer Web-App

Kleinerer Funktionsumfang

Die Wartung von Web-Apps ist einfach, neue Updates werden auf dem Server des Anbieters veröffentlicht. Diese können quasi sofort online gebracht werden und müssen nicht erst von App Stores genehmigt und veröffentlicht werden. Grund dafür ist aber auch der geringere Funktionsaufwand im Vergleich zu einer nativen App. So ist es zwar möglich, Push-Benachrichtigungen, GPS und Kamera und Mikrofon des mobilen Endgerätes zu verwenden, vergleichsweise sind das aber relativ wenig Funktionen. Außerdem können Web-Apps nicht auf Daten des Endgeräts zugreifen und somit keine Kontakt- und Kalenderdaten oder Bilder abrufen. Zudem kann die Web-App nicht im Vollbildmodus gestartet werden, da dieser Modus vom Browser nicht unterstützt wird.

Performance geringer

Dadurch, dass Web Anwendungen im Browser laufen, sind diese Performance-technisch eingeschränkt. Sehr aufwendige Funktionen, für die viel Arbeitsspeicher benötigt wird, können in einer Web-App nicht integriert werden. Sie sind vor allem für Spiele Apps nicht geeignet, aufgrund der hohen Ansprüche.

Online-Zugriff notwendig

Für den Online-Zugriff auf eine Web-App benötigt der User eine stabile und stetige Internetverbindung. Vor allem in Deutschland gibt es in den ländlichen Regionen häufig noch große Lücken im Mobilfunknetz, weswegen häufig eine Offline-Nutzung von den Usern gewünscht ist. Ein gutes Beispiel dafür ist die Netflix App, in der Serienfolgen und Filme heruntergeladen werden können und somit auch offline verfügbar sind. Zu beachten gilt, dass bei neuen Netztechnologien wie 5G auch die Erreichbarkeit von Web-Apps steigt und sie somit noch mehr Anwendungsfälle finden werden. Eine Progressive Web-App kann heute bereits Offline-Funktionen anbieten.

Indirekte Monetarisierung

Web-Apps sind meist gratis nutzbar, da es sich um eine reguläre Website handelt. Es ist möglich, Zugänge und Logins erst nach Abschließen eines Vertrages oder Abos mit Ihrem Unternehmen nutzbar zu machen. Indirekt kann eine Web-App durch Werbebanner und Werbevideos monetarisiert werden.

Keine App Store Veröffentlichung

In der Regel können Web-Apps nicht über die App Stores von Google und Apple angeboten werden. Im Gegenzug dazu kann die Web-App per Link geteilt und ohne Download genutzt werden. Das umgeht die bekannte Download-Hürde und vereinfacht die Verbreitung der Web-App. Da die Nutzung größtenteils eher als Web to App Lösung gedacht ist, ist die App Store Veröffentlichung für viele Projekte irrelevant, so ist dieser Nachteil größtenteils zu vernachlässigen.

Beispiele Web-Apps:

FIFA Companion Web-App
Die von EA Sports bereitgestellt und für FiFA Ultimate entwickelte Lösung ist sehr umfangreich. Spieler können auf dem Transfermarkt zum Verkauf angeboten werden und Funktionen des Team Managements sind möglich. Sie sticht besonders nach dem Release und early access Zugängen von FIFA im September als meistgesuchte Web-App Deutschlands heraus.

Google Drive Web-App
Anders als Microsoft hat Google früh auf Lösungen gesetzt, die rein im Internet nutzbar sind. Google Drive mit Google Docs, Google Format und anderen G Suite Lösungen, die Microsoft Office mit Word und Excel sehr ähneln, sind bei Unternehmen heutzutage sehr beliebt ist. Auch Google Mail wird zum Versenden von einer E-Mail im Webbrowser angeboten.

Unterschiede zu einer nativen App auf einen Blick

Die native App Entwicklung ist die klassischste unter den Entwicklungsarten. Die native App ist jeweils in der Muttersprache eines Betriebsystems wie iOS (mit Swift & Objective-C) oder Android (Java & Kotlin) programmiert, was Segen und Fluch zugleich sein kann. So besticht die native App durch den größten Funktionsumfang, Offline-Funktionalität und die beste Performance. Wenn die mobile App jedoch auf mehrere Betriebssysteme gleichzeitig zur Verfügung gestellt werden soll, entstehen hohe Entwicklungskosten, da die App mehrfach programmiert werden muss.

Native Apps sind speziell für eine bestimmte Plattform entwickelte Anwendungen, die ausschließlich auf dieser Plattform funktionieren. Beispielsweise kann eine Android-App nicht auf einem iPhone oder iPad mit dem Apple-Betriebssystem iOS ausgeführt werden. Die Plattformabhängigkeit hat Vor- und Nachteile. Wenn Entwickler mehrere Betriebssysteme unterstützen möchten, müssen sie für jedes Betriebssystem eine separate Native App programmieren, was im Vergleich zur Entwicklung einer Web-App einen erheblichen Mehraufwand bedeutet. Andererseits können Native Apps optimal auf die jeweilige Plattform abgestimmt werden und den Speicherplatz des verwendeten Geräts nutzen. Deshalb eignen sich Native Apps im Vergleich zu Web-Apps besser für komplexe Anwendungen.

Anders als die Web-App kann dieser App Typ installiert, heruntergeladen und durch In-App-Käufe über den Shop monetarisiert werden. Als Symbiose zwischen Website, Web-App und nativer App wird eine Progressive Web-App (PWA) gesehen, auf die wir weiter unten eingehen. Aus technischer Sicht bezeichnet die Programmierung für iOS (Swift) oder Android (Kotlin). Hier ist dann auch das "Look & Feel" der jeweiligen Systeme mit drin, wie die User es gewohnt sind. Ihre Nutzer können auf alle nativen Funktionen, wie GPS, Sensoren, Kamera, Telefon und Kontakte, zugreifen.

Web App oder nativ entwickeln?

Für spezielle App Projekte kann eine native Entwicklung trotz höherer Kosten die richtige Wahl sein. Wir beraten Sie individuell zu Ihren Bedürfnissen und verbinden Sie mit den besten Native App Entwicklern & Agenturen.

Web-App erstellen: Unterschied zu einer klassischen Website

Häufig ist nicht ganz klar, wo genau der Unterschied zwischen einer „normalen“ Website und einer Web-App liegt. Diese Verwirrung ist auch berechtigt, da zwischen Web-Apps und konventionellen Websites keine genaue Grenze gezogen werden kann. Denn sowohl Websites als auch Web-Apps werden im Browser betrachtet und bedient. Zudem wird für beide Anwendungen eine bestehende Internetverbindung benötigt. Web Anwendungen haben lediglich die Besonderheit, bestimmte Bedienelemente des Browsers auszublenden, wodurch sie wie Native Apps wirken können.

Das ist auch der große Unterschied: Web-Apps haben eine bessere User Experience durch einen erhöhten Funktionsumfang. Eine Homepage wird eher zur Informationsbereitstellung genutzt und verweist via Links auf andere Teile der Website. Das "Look-and-Feel" von Web Applikationen ist ein anderes – könnte man diese gar offline nutzen, wären sie kaum noch von mobile Apps zu unterscheiden.

Web-Apps bieten einen bestimmten Service bzw. bestimmte Funktionen für den Nutzer und weisen dadurch einen höheren Programmierungsaufwand auf. Die Interaktion zwischen User und Web-App ist entscheidend. So spricht man eher von einer Webanwendung, wenn die Nutzer sich einen Account anlegen können, Daten eintragen, verarbeitet oder visualisiert werden. Nicht selten werden also auf Websites Logins mit den persönlichen Daten ermöglicht, die dann auf eine verbundene Webanwendung weiterleiten und welche auf einer separaten (Sub-)Domain zu finden ist.

Tipp:

In 2023 zeichnet sich deutlich der Trend ab, dass Firmenwebseiten immer dynamischer werden und einem spezifischen Zweck dienen.

Bekannte Webanwendungen sind Google (Kalender, Drive, etc.), Facebook und verschiedene Onlineshops wie Amazon oder eBay. Diese großen Unternehmen verfügen auch über native Anwendungen, haben die gleichen Anwendungen jedoch oft auch als Web-App programmieren lassen. Eine Homepage und Firmenwebsite hingegen bietet hingegen meistens nur Informationen, Bilder und enthält viel Text. Nicht selten werden Web-Apps aber auch in bestehende Webseiten integriert, zum Beispiel in Form eines externen Terminbuchungssystems.

Web-App: Technologien für die Entwicklung

Web-Apps werden in den Programmiersprachen HTML5, CSS3 und JavaScript erstellt. Genauer gesagt wird HTML5 für die Struktur und den Inhalt verwendet, CSS3 für das Design und JavaScript für die Interaktion mit der Hardware des mobilen Endgerätes, wie GPS, Kamera oder Mikrofon. Meist kommt die Datenbank-Bibliothek jQuery zum Einsatz. Um die Interaktion zwischen einem Nutzer und dem Server zu ermöglichen wird eine Skriptsprache benötigt, in den meisten Fällen wird hierfür PHP verwendet. Auch für weitere Serverzugriffe wird PHP benötigt. Bei dynamischen Websites wird notwendigerweise ein Data Storage benötigt. Zusätzlich werden zum Programmieren von Web-Apps als Cross-Plattform-Entwicklung bestimmte Frameworks eingesetzt. Die bekanntesten Frameworks dafür sind Node.js, React, Flutter, Django oder Electron.

Frameworks wie Apache Cordova ermöglicht die hybride App Entwicklung, wobei die webbasierte Anwendung in einen nativen Container gepackt und darüber ausgespielt wird.

HTML ist die Abkürzung von Hypertext Markup Language, die fünf steht für die Version. HTML5 ist die neuste Version und wurde offiziell im Oktober 2014 von dem World Wide Web Consortium (W3C) veröffentlicht. Seitdem gilt der Nachfolger von HTML4 als neue Kernsprache des Webs und der Browser. Mittlerweile basieren die meisten Websites im Internet auf HTML5, mit der Zeit werden veraltete Websites auf die neue Computersprache umgestellt. HTML5 wird zum Verknüpfen von Inhalten digitaler Dokumente verwendet, weswegen es so bedeutend für die Struktur einer Web-App ist.

CSS3 (Cascading Style Sheets) ist die dritte wichtige Komponente für die Entwicklung einer Web-App und ist neben HTML5 und JavaScript eine Kernsprache des World Wide Webs. CSS3 wurde ebenfalls von W3C veröffentlicht und gilt als „living standard“, also eine Software, welche ständig weiterentwickelt wird. Die Programmiersprache ist eine sogenannte Stylesheet-Sprache, welche für die Trennung von Daten und deren Darstellung zuständig ist. In CSS3 wird ein sogenanntes Stylesheet erstellt, welches dem auslesenden Programm, bei einer Web-App der Browser, sagt, wie Daten formatiert und angezeigt werden sollen. Mit CSS3 werden sozusagen Regeln für das Design der Web-App erstellt.

Tipp:

Für viele Entwickler ist die Programmierung einer Web App mit HTML5 ein Vorteil, da HTML5 eine relativ einfache und weit verbreitete Programmiersprache ist und somit Entwickler mit HTML5 meist viel Erfahrung haben. Sollten Sie also bereits selbst Erfahrung im Programmieren mit HTML5 haben und eine eigene Website oder ähnliches erstellt haben, finden Sie sich auch sicher schnell in die Entwicklung einer Web App rein.

Web-App Upgrade: Die Progressive Web-App

In jüngster Zeit setzt sich ein neueres Format der Web-App immer mehr durch. Dabei handelt es sich um die Progressive Web-App (PWA), welche die plattformübergreifende Entwicklung der Web-App mit Funktionsumfang und Performance nativer Apps verbindet. Geheimnis ist der sogenannte Service Worker, welcher die Offline-Verwendung der PWA ermöglicht sowie Zugriff auf native Features wie Push-Benachrichtigungen gibt. Außerdem hat die PWA stärkeren Zugriff auf persönliche Daten und kann somit auch für Kalender Applikationen genutzt werden. Das Programmieren einer Progressive Web-App stellt immer häufiger den Standard dar. Google gilt als PWA Vorreiter und fördert das Programmieren von Progressive Web-Apps.

‍

Web-App Kosten

Die Kosten einer Web-App orientieren sich nach Entwicklungszeit und -aufwand und unterscheiden sich deshalb in der Praxis sehr. Mögliche Kostenfaktoren sind:

• Menge und Komplexität der Features (vollwertiges Produkt vs. Minimal Viable Product)
• Integration von Fremdsystemen (z.B. CRM & ERP für E-Commerce App)
• Individualität des Designs

Bei der Erstellung einer Web-App sollten Sie mit einem Budget zwischen 6.000 € und 100.000 € rechnen. Für eine persönliche Schätzung Ihres Web-App-Projektes bieten wir Ihnen gerne eine kostenlose Beratung an. Weitere, allgemeinere Informationen zu App Kosten finden Sie hier: "App entwickeln lassen – So viel kostet es"

Web-App Beispiele

Web-Apps gibt es mittlerweile in nahezu allen Bereichen, in denen digitale Anwendungen genutzt werden. Ein bekanntes Beispiel sind E-Mail-Dienste wie Gmail oder Outlook.com, die komplett über den Browser genutzt werden können. Auch Online-Office-Lösungen wie Google Docs oder Microsoft Office Online, bei denen Word-Dokumente, Excel-Tabellen und Präsentationen direkt im Browser erstellt und bearbeitet werden können, gehören zu den Web-Apps. Im Bereich Social Media sind beispielsweise Facebook, Twitter oder LinkedIn als Web-Apps zu nennen, die ebenfalls komplett im Browser genutzt werden können.

Die Abgrenzung zwischen einer herkömmlichen Website und einer Webapplikation ist oft unscharf. Ein besseres Verständnis für den Unterschied zwischen einer herkömmlichen Website und einer Webapplikation lässt sich am Beispiel von Microsoft Office Online (ehemals "Office Web-Apps") veranschaulichen. Diese Webanwendung bietet Programme wie Word, Excel und Outlook für den Browser an, sodass Sie Dokumente erstellen, bearbeiten und speichern können, ähnlich wie bei der installierten Version des Office-Pakets. Weitere Beispiele für Web-Apps sind Onlineshops wie Amazon oder Zalando, Video-Plattformen wie YouTube oder Netflix sowie Online-Banking-Anwendungen von Banken und Sparkassen.

Insgesamt sind die Möglichkeiten von Web-Apps nahezu unbegrenzt und es ist zu erwarten, dass sie in Zukunft immer stärker in unserem Alltag und Berufsleben integriert sein werden. Web-Apps bieten den Vorteil, dass sie plattformunabhängig sind und somit auf verschiedenen Geräten genutzt werden können. Darüber hinaus können sie auch offline genutzt werden, wenn sie mithilfe von HTML5-Technologie so programmiert werden, dass sie Daten auf dem Gerät zwischenspeichern können. Ob E-Mail, Office-Anwendungen oder Social Media - Web-Apps sind aus unserem täglichen Leben kaum noch wegzudenken und werden sicherlich auch in Zukunft immer wichtiger werden.

Fazit – Ist eine Web-App die richtige Wahl?

Web-Apps bieten besonders durch den geringen Entwicklungsaufwand Kostenvorteile, verzeichnen aber Einbußen in Sachen Performance und Funktionsumfang. So ist es sicherlich vorteilhaft eine Web-App zu erstellen, wenn Sie die Nutzer über den Browser erreichen wollen und Ihr Budget begrenzt ist. Dafür spricht ebenfalls, dass die Wartung der App verhältnismäßig einfach ist. Im Falle der Monetarisierung wird häufig durch Werbung in der Web-App oder durch die angebotene Dienstleistung Geld verdient. Der Trend 2022 zeigt klar, dass Web-Apps sich noch größerer Beliebtheit erfreuen, aber die Qualität und Sicherheit der Lösungen sehr stark variiert.

Web-Apps werden in den Web-Kernsprachen HTML5, CSS3 und PHP erstellt. Dies ist für viele Web-Entwickler von Vorteil, da diese bereits viel Erfahrung mit diesen Programmiersprachen haben. Das zeigt auch, dass der Unterschied zwischen einer herkömmlichen Website und einer Web-App gar nicht so groß ist.

Wenn Sie eine Web-App mit hoher User Experience und Offline-Funktionen entwickeln möchten, stellt eine Progressive Web-App eine geeignete Möglichkeit für Sie dar. Möchten Sie ein digitales Produkt auch zum Download anbieten und mehr Funktionen der Hardware ansprechen, lohnt sich eine Entwicklung als Cross-Plattform App mit Frameworks wie Flutter und React.

Die richtige Entwicklungsart und Entscheidung für die Programmierung einer Web-Applikation hängt von vielen Faktoren ab, wie Funktionen, Budget oder Performance. Beschreiben Sie uns Ihr Web App-Projekt – wir analysieren es und beraten Sie mit der Expertise aus über 935 Projekten unabhängig und kostenfrei zu Ihrer richtigen Entwicklungsart. Sie möchten eine unabhängige Preisschätzung erhalten und Top-Anbieter vergleichen? Unser Ziel ist es, dass Sie den richtigen Partner und Lösung finden, die zu Ihrem Budget und Projekt passt.