AI-Prototyp auf dem Handy: Mobile Optimierung für Einsteiger

Du hast deinen Prototyp auf dem Laptop gebaut. Das Dashboard sieht perfekt aus, die Buttons sind an der richtigen Stelle, alles funktioniert. Dann öffnest du die App auf dem Smartphone — und nichts passt. Texte laufen über den Rand, Buttons sind zu klein zum Tippen, die Navigation ist nicht erreichbar.

Das ist kein Bug. Das ist normal. AI Tools wie Lovable und Bolt optimieren primär für Desktop. Mobile kommt oft zu kurz. Und das ist ein Problem: Laut Bitkom nutzen 82% der Deutschen das Internet über ihr Smartphone. Bei B2C-Apps sind es oft 60–70% aller Zugriffe.

Warum Mobile so wichtig ist

Deine Nutzer sind mobil

Je nach Zielgruppe kommen 40–70% deiner Nutzer übers Smartphone. Wenn deine App dort nicht funktioniert, verlierst du die Mehrheit deiner potenziellen Kunden.

Google straft mobile-unfähige Seiten ab

Seit Googles Mobile-First-Indexing ranken Seiten die auf dem Smartphone schlecht funktionieren schlechter in den Suchergebnissen. Auch deine Landing Page verliert Traffic wenn sie mobil nicht funktioniert.

Der erste Eindruck zählt

Wenn jemand deinen Link auf dem Handy öffnet und die App unbenutzbar ist, kommt er nicht zurück. Egal wie gut die Desktop-Version ist. Du hast eine Chance — und die findet auf dem Gerät statt, das gerade in der Hand liegt.

Die 7 häufigsten Mobile-Probleme bei AI-Prototypen

Problem 1: Zu kleine Buttons

AI-generierte Buttons sind oft für Maus-Klicks designt. Auf dem Smartphone brauchst du Finger-freundliche Touch-Targets.

Die Regel: Buttons und klickbare Elemente sollten mindestens 44×44 Pixel groß sein. Das ist die Größe eines durchschnittlichen Fingerabdrucks.

Prompt-Fix: „Mache alle Buttons und klickbaren Elemente mindestens 44px hoch. Auf Mobile sollen Buttons die volle Breite nutzen.”

Problem 2: Navigation nicht erreichbar

Desktop-Apps haben oft eine Sidebar-Navigation links. Auf dem Smartphone ist die Sidebar entweder weg oder überdeckt den halben Bildschirm.

Die Lösung: Eine Bottom-Navigation mit 3–5 Icons — wie bei jeder modernen App (Instagram, WhatsApp, etc.).

Prompt-Fix: „Ersetze die Sidebar-Navigation auf Mobile durch eine Bottom-Navigation mit Icons für [Home, Aufträge, Profil, Einstellungen].”

Problem 3: Tabellen laufen über

Desktop-Tabellen mit 6+ Spalten passen nicht auf einen 375px-breiten Bildschirm. Sie laufen über den Rand oder werden so klein, dass man nichts lesen kann.

Die Lösung: Auf Mobile Tabellen in Karten umwandeln. Jede Zeile wird eine Karte mit den wichtigsten Informationen.

Prompt-Fix: „Zeige die Tabelle auf Mobile als Karten-Layout. Jede Karte zeigt [Titel, Status, Datum]. Bei Klick auf die Karte öffnet sich die Detailansicht.”

Problem 4: Formulare sind unbenutzbar

Lange Formulare auf dem Desktop werden auf dem Smartphone zur Qual. Zu kleine Eingabefelder, zu eng beieinander, die Tastatur verdeckt die Hälfte.

Die Lösung: Formulare auf Mobile in Schritte aufteilen. Große Eingabefelder. Genug Abstand zwischen Feldern.

Prompt-Fix: „Auf Mobile soll das Formular als mehrstufiger Wizard angezeigt werden. Schritt 1: [Felder]. Schritt 2: [Felder]. Große Eingabefelder mit genug Abstand.”

Problem 5: Text ist zu klein

Desktop-Textgrößen von 14px sind auf dem Smartphone kaum lesbar.

Die Regel: Fließtext mindestens 16px auf Mobile. Überschriften mindestens 20px. Alles darunter zwingt Nutzer zum Zoomen.

Prompt-Fix: „Stelle sicher dass Fließtext auf Mobile mindestens 16px und Überschriften mindestens 20px groß sind.”

Problem 6: Bilder laden zu langsam

Große Desktop-Bilder brauchen auf mobilen Datenverbindungen ewig zum Laden. 3 Sekunden Ladezeit und 50% der Nutzer sind weg.

Die Lösung: Komprimierte Bilder verwenden. WebP-Format statt PNG. Lazy Loading aktivieren.

Prompt-Fix: „Optimiere alle Bilder für Mobile: WebP-Format, maximale Breite 800px, Lazy Loading aktivieren.”

Problem 7: Pop-ups und Modals

Desktop-Modals die 400px breit sind sehen auf dem Desktop elegant aus. Auf dem Smartphone sind sie entweder zu klein oder decken alles ab und lassen sich nicht schließen.

Die Lösung: Modals auf Mobile als Full-Screen-Ansicht oder Bottom-Sheet (von unten einfahrend) zeigen.

Prompt-Fix: „Zeige Modals auf Mobile als Bottom-Sheet das von unten eingefahren wird und den ganzen Bildschirm nutzt.”

So testest du deinen Prototyp auf Mobile

Methode 1: Chrome DevTools (schnellste Methode)

1. Öffne deine App in Chrome
2. Rechtsklick → „Untersuchen” (oder F12)
3. Klick auf das Smartphone-Icon oben links
4. Wähle ein Gerät: iPhone 14 oder Samsung Galaxy S21

Das simuliert die Bildschirmgröße. Nicht perfekt — aber 90% der Probleme siehst du sofort.

Methode 2: Echtes Smartphone (beste Methode)

Öffne die URL auf deinem eigenen Smartphone. Teste jeden Screen. Tipp auf jeden Button. Fülle jedes Formular aus. Was auf deinem Handy nicht funktioniert, funktioniert auch auf dem Handy deines Kunden nicht.

Methode 3: Andere testen lassen

Schick den Link an 3 Freunde: „Öffne das auf dem Handy und sag mir was nicht funktioniert.” Andere Augen sehen andere Probleme.

Der Mobile-Fix-Workflow

Schritt 1: Teste jeden Screen auf Mobile (30 Minuten) Geh jeden Bildschirm deiner App durch. Notiere was nicht funktioniert.

Schritt 2: Kategorisiere die Probleme - Unbenutzbar (Button nicht klickbar, Navigation fehlt, Text nicht lesbar) → Sofort fixen - Unpraktisch (Zu viel Scrollen, Layout suboptimal) → Diese Woche fixen - Kosmetisch (Abstände, kleine Ausrichtungsfehler) → Später fixen

Schritt 3: Prompte die Fixes Ein Prompt pro Problem. Nicht alles auf einmal. Iteriere systematisch — ein Fix, ein Test, nächster Fix.

Schritt 4: Teste erneut Nach jedem Fix: auf dem Handy testen. AI-generierte Mobile-Fixes können neue Probleme erzeugen. Teste nach jedem Prompt.

Der eine Prompt der vieles löst

Dieser Prompt ist ein guter Startpunkt für grundlegende Mobile-Optimierung:

Optimiere die gesamte App für Mobile-Geräte:

1. Responsive Layout: Alle Seiten sollen auf Smartphones (375px Breite)
   gut aussehen und benutzbar sein
2. Navigation: Auf Mobile eine Bottom-Navigation mit Icons statt
   der Sidebar
3. Buttons: Mindestens 44px hoch, auf Mobile volle Breite
4. Text: Fließtext mindestens 16px, Überschriften mindestens 20px
5. Tabellen: Auf Mobile als Karten-Layout anzeigen
6. Formulare: Große Eingabefelder, genug Abstand, mehrstufig wenn nötig
7. Modals: Auf Mobile als Bottom-Sheet oder Full-Screen

Dieser Prompt löst 70–80% der typischen Mobile-Probleme. Für den Rest brauchst du spezifische Prompts pro Screen.

Was AI Tools gut können — und was nicht

Gut: - Grundlegendes responsives Layout - Schriftgrößen anpassen - Buttons vergrößern - Einfache Navigation umbauen - Abstände optimieren

Schwierig: - Komplexe Touch-Gesten (Swipe, Pinch-to-Zoom) - Performance-Optimierung für langsame Verbindungen - Offline-Funktionalität - Native App-Feeling (Push-Notifications, Kamera-Zugriff) - Konsistentes Verhalten auf allen Geräten

Für die schwierigen Teile braucht es einen erfahrenen Entwickler — der kann in der gleichen Zeit eine Progressive Web App (PWA) bauen die sich auf dem Smartphone wie eine native App anfühlt.

Mobile-First vs. Desktop-First

Die meisten Gründer bauen Desktop-First und optimieren dann für Mobile. Das funktioniert — aber es gibt einen besseren Weg:

Mobile-First bauen: Starte mit dem kleinsten Bildschirm. Was muss auf dem Smartphone sichtbar sein? Was ist das Wichtigste? Wenn die App auf 375px funktioniert, funktioniert sie überall.

Prompt für Mobile-First: „Designe diese App Mobile-First. Der primäre Bildschirm ist ein Smartphone mit 375px Breite. Die Desktop-Version kann mehr Informationen nebeneinander zeigen, aber die Mobile-Version ist die wichtigste.”

FAQ: Häufig gestellte Fragen

Muss mein Prototyp wirklich auf Mobile funktionieren?

Kommt auf deine Zielgruppe an. Ein Dashboard für Desktop-Arbeiter (Büro, CRM, Analytics) kann Desktop-First sein. Eine App für Handwerker auf der Baustelle, Gastronomen im Service oder Kunden die spontan zugreifen — muss auf Mobile funktionieren. Im Zweifelsfall: Mobile optimieren. Es schadet nie.

Soll ich eine native App bauen statt einer Web-App?

Nein. Nicht in der Prototyp-Phase. Eine Web-App die responsive ist, reicht für die Validierung. Native Apps (iOS/Android) kosten mehr, dauern länger und haben den gleichen Zweck in der Frühphase: herausfinden ob jemand dein Produkt will. Native kommt erst wenn du 1.000+ Nutzer hast und Push-Notifications oder Offline-Zugriff brauchst.

Wie teste ich auf verschiedenen Geräten wenn ich nur ein iPhone habe?

Chrome DevTools simuliert verschiedene Geräte. Für echte Tests: Frage Freunde mit Android-Phones. Oder nutze BrowserStack (kostenloser Trial) für Tests auf echten Geräten in der Cloud.

Mein Prototyp sieht auf Mobile schrecklich aus. Nochmal von vorne?

Nein. Fang mit dem einen Prompt oben an — der löst 70–80% der Probleme. Dann fixe Screen für Screen die restlichen Issues. Das ist weniger Aufwand als ein Neustart und du behältst alle Funktionen die bereits funktionieren.

Wie erkenne ich ob meine Mobile-Version gut genug ist?

Teste mit 3 echten Nutzern auf dem Smartphone. Wenn alle die Kernfunktion ohne Hilfe nutzen können: gut genug. Wenn einer fragt „Wo muss ich drücken?” oder „Warum ist der Text so klein?”: noch Arbeit nötig. Perfektion ist nicht das Ziel — Benutzbarkeit schon.

Fazit: Mobile ist kein Feature — es ist eine Anforderung

60% deiner Nutzer kommen mit dem Smartphone. Wenn deine App dort nicht funktioniert, existiert sie für die Mehrheit deiner Zielgruppe nicht. Die gute Nachricht: Die häufigsten Mobile-Probleme lassen sich mit AI Tools in einem Nachmittag fixen.

Für die Basics — responsives Layout, große Buttons, lesbare Texte — reichen ein paar gezielte Prompts. Für ein echtes Mobile-Erlebnis das sich wie eine native App anfühlt? Dafür braucht es einen Profi, der weiß wie man Progressive Web Apps baut und Performance für mobile Verbindungen optimiert.

Dein Prototyp funktioniert auf dem Desktop. Wir machen daraus ein Produkt das überall funktioniert — auf jedem Gerät, bei jeder Verbindung.

Jetzt Projekt besprechen