Mobilfreundliche Web-App erstellen

Eine mobilfreundliche Web-App ist eine Website, die sich auf dem Handy wie eine App verhält: Sie passt auf den schmalen Bildschirm, hat große Touch-Ziele, lädt schnell über mobile Daten und lässt sich als Progressive Web App (PWA) auf den Startbildschirm legen. Für die meisten neuen Apps ist das die praktische erste Version – eine Codebasis, ein Link, keine Store-Prüfung. Sie hat aber echte Grenzen, besonders bei Benachrichtigungen auf dem iPhone und beim tiefen Zugriff auf Gerätefunktionen. Dieser Leitfaden sagt offen, wann du eine native App brauchst.

Drei Wege, „mobil“ zu sein

Eine PWA ist eine responsive Web-App mit ein paar Extras, du musst dich also nicht zwischen den ersten beiden entscheiden. Baue zuerst responsiv und mache sie dann installierbar. Einen tieferen Vergleich bietet native vs. Progressive Web Apps.

Was Web-Apps auf dem Handy können und was nicht

Browser können mehr, als viele annehmen:

• Kamera und Foto-Upload über Standard-Dateieingaben.
• Standort mit Erlaubnis des Nutzers.
• Installation auf dem Startbildschirm mit Symbol und Start im Vollbild.
• Offline-Nutzung durch Zwischenspeichern von Seiten und Daten mit einem Service Worker (ein Hintergrundskript, das der Browser für deine Seite ausführt).
• Push-Benachrichtigungen – mit einem Haken auf dem iPhone. Apples WebKit-Team erklärt, dass Web-Push seit iOS und iPadOS 16.4 für Web-Apps verfügbar ist, die dem Home-Bildschirm hinzugefügt wurden. Nutzer müssen die App zuerst installieren und dann Benachrichtigungen erlauben.

Wo native Apps weiterhin gewinnen:

• Tiefe Gerätefunktionen wie Hintergrundstandort, Bluetooth-Zubehör, Gesundheitsdaten und Widgets auf dem Startbildschirm – die Unterstützung im Browser ist eingeschränkt oder variiert je nach Plattform.
• Auffindbarkeit im App Store. Wenn Menschen dich im Store suchen sollen, musst du dort sein.
• Schwere Offline-Arbeit, etwa große Datenmengen, die im Hintergrund synchronisiert werden.
• Leistungskritische Grafik, etwa anspruchsvolle Spiele.

Wenn keiner dieser Punkte für deine App zentral ist, wird dir eine Web-App wahrscheinlich gut dienen.

Für Handys zuerst entwerfen

Entwirf das Handy-Layout zuerst und lass es sich für größere Bildschirme ausweiten. Der umgekehrte Weg erzeugt meist enge Handy-Bildschirme.

Layout

• Eine Spalte auf kleinen Bildschirmen. Seitenleisten werden zu einer unteren Leiste oder einem Menü.
• Kein seitliches Scrollen. Breite Tabellen werden zu Karten oder scrollen in ihrem eigenen Container.
• Lesbarer Text ohne Zoomen – Fließtext etwa 16 px.

Touch

• Große Tipp-Ziele. Rund 44 × 44 Pixel sind ein gängiges Minimum. Lass Abstand zwischen ihnen.
• Primäre Aktionen in Daumenreichweite, auf hohen Handys nahe dem unteren Bildschirmrand.
• Keine Funktionen, die nur per Hover funktionieren. Tooltips und Menüs, die beim Überfahren erscheinen, gibt es auf Touchscreens nicht.
• Die richtige Tastatur. E-Mail-Felder sollten die E-Mail-Tastatur öffnen, Telefonfelder das Zahlenfeld. Verwende die korrekten Eingabetypen.

Geschwindigkeit

• Kleine Bilder in sinnvollen Größen, die geladen werden, sobald sie sichtbar werden.
• Weniger schwere Bibliotheken. Jede fügt auf mobilen Daten Ladezeit hinzu.
• Skeleton-Screens oder klare Ladezustände, damit die App nie eingefroren wirkt.

Sicherheitsbereiche und Adressleiste

Auf modernen Handys kann Inhalt unter der Kerbe oder dem Home-Indikator landen, besonders in einer installierten Vollbild-App. Verwende Safe-Area-Abstände. Achte außerdem auf Layouts mit voller Höhe, die springen, wenn die Adressleiste des Browsers ein- und ausgeblendet wird.

Installierbar machen (PWA)

Damit eine Web-App installierbar ist, braucht sie:

1. Ein Web-App-Manifest – eine kleine Datei mit Name, Kurzname, Symbolen, Themenfarbe und Startverhalten (meist Vollbild „standalone“).
2. Symbole in den Größen, die die Plattformen erwarten, auch eins für Apple-Geräte.
3. HTTPS, das jede ordentlich gehostete App bereits hat.
4. Einen Service Worker, wenn du Offline-Unterstützung oder Push willst.

Erkläre Nutzern dann, wie sie installieren. Android-Browser bieten meist eine Installationsaufforderung oder einen Menüpunkt an; auf dem iPhone ist es die Teilen-Schaltfläche und dann „Zum Home-Bildschirm“. Ein kurzer Hinweis „Diese App installieren“ mit diesen Schritten hilft sehr.

Offline-Unterstützung ist der komplizierte Teil von PWAs. Die Seiten der App so zwischenzuspeichern, dass sie ohne Verbindung öffnet, ist unkompliziert. Daten offline ändern zu lassen und später zu synchronisieren, ist echte Arbeit – verlange das nur, wenn deine Nutzer es wirklich brauchen.

Ein erster Prompt, der funktioniert

Baue eine Web-App, mit der unser Reinigungsteam die heutigen Aufträge sieht und sie als erledigt markiert. Entwirf zuerst für Handys: eine Spalte, große Tipp-Ziele, der wichtigste Aktionsbutton fest nahe dem unteren Rand, keine Funktionen, die nur per Hover gehen, kein seitliches Scrollen, richtige Tastaturen für Telefon- und E-Mail-Felder. Jeder Auftrag zeigt die Adresse (antippen öffnet die Karte), die Telefonnummer des Kunden (antippen ruft an), eine Checkliste und einen Button „Als erledigt markieren“, der ein Foto aufnehmen kann. Manager loggen sich am Laptop ein, um Aufträge zuzuweisen; auf breiten Bildschirmen zeige eine Tabelle statt Karten. Mach daraus eine installierbare PWA mit Manifest, Symbolen und eigenständiger Anzeige, und speichere die App-Hülle zwischen, damit sie ohne Empfang öffnet. Speichere die Daten in einer Datenbank.

Bauschritte

1. Zuerst das Handy-Layout bauen mit Beispieldaten und in einer Vorschau in Handygröße prüfen.
2. Auf echten Handys testen – mindestens ein iPhone und ein Android-Gerät, wenn deine Nutzer beides haben. Emulatoren übersehen Dinge wie die Bildschirmtastatur, die Eingabefelder verdeckt.
3. Die Hauptaufgabe mit einem Daumen durchgehen. Wenn etwas zwei Hände oder Zoomen braucht, behebe es.
4. Manifest und Symbole hinzufügen, dann auf beiden Plattformen installieren und Symbol, Name und Startbildschirm prüfen.
5. Offline entscheiden. Beginne mit „öffnet ohne Empfang und zeigt eine klare Meldung“; füge Offline-Bearbeitung nur hinzu, wenn sie nötig ist.
6. Geschwindigkeit bei langsamer Verbindung prüfen. Die Entwicklerwerkzeuge deines Browsers können eine simulieren.
7. Benachrichtigungen zuletzt hinzufügen, falls überhaupt – und plane einen E-Mail-Ersatz für Nutzer, die nicht installieren.

Häufige Fehler

• Nur auf einem großen Monitor entwerfen. Prüfe jeden Bildschirm während der Arbeit in Handybreite.
• Überlaufende Tabellen. Mache Zeilen auf kleinen Bildschirmen zu Karten.
• Winzige Tipp-Ziele und eng beieinanderliegende Links.
• Formulare, die gegen die Tastatur arbeiten – falsche Eingabetypen, Felder hinter der Tastatur, kein „Weiter“-Ablauf.
• Annehmen, dass iPhone-Push im Browser-Tab funktioniert. Dafür muss die App auf dem Home-Bildschirm installiert sein.
• Eine App im App Store versprechen, die du nicht ausliefern kannst. Wenn der Store zählt, plane das separat.
• Eine Website verpacken und sie App nennen. Apples App-Review-Richtlinien verlangen Apps, die über eine verpackte Website hinausgehen; eine dünne Hülle riskiert die Ablehnung.

Wann du eine native App brauchst

Geh nativ (oder plane eine native Version nach der Web-App), wenn:

• Store-Präsenz der Weg ist, auf dem Kunden dich finden.
• Du auf Hintergrundstandort, Bluetooth, Gesundheitsdaten, Widgets oder andere Gerätefunktionen angewiesen bist, die Browser nicht zuverlässig bieten.
• Deine App über lange Zeit vollständig offline funktionieren muss.
• Deine Nutzer es erwarten – manche Zielgruppen nutzen schlicht nichts, das nicht im Store steht.

Die Veröffentlichung im Store hat eigene Kosten und Schritte. Stand September 2026 kostet das Apple-Entwicklerprogramm laut Apples Website 99 US-Dollar pro Jahr, ein Google-Play-Entwicklerkonto einmalig 25 US-Dollar, und jede Version durchläuft eine Prüfung. Viele Teams starten mit einer mobilfreundlichen Web-App, um zu beweisen, dass Menschen das Produkt wollen, und investieren dann in eine native Version, wenn sie es wissen. Wie du eine App mit KI baust behandelt diese erste Phase von Anfang bis Ende.

Mit Mythex bauen

Mythex baut Web-Apps: Du beschreibst die App im Chat und prüfst sie in der Live-Vorschau am Desktop sowie in einem Rahmen in Handygröße, den du anpassen kannst. Die Dokumentation enthält einen Prompt für mobil-responsive Layouts zum Beheben von Layouts auf kleinen Bildschirmen. Du kannst ein PWA-Manifest und Symbole wie jede andere Funktion anfordern und dann unter einem öffentlichen Link veröffentlichen, der auf jedem Handy funktioniert. Im Pro-Tarif kann Mythex die App außerdem als Android- und iPhone-App verpacken, die an den internen Test bei Google Play und an TestFlight gesendet wird. Für den Einstieg siehe den KI-Web-App-Builder oder durchstöbere die App-Vorlagen. Ein Beispiel zum Nachmachen liefert wie du eine Habit-Tracker-App baust.

Fragen