Mobile Responsiveness für AI-erstellte UIs: ein Layout‑Audit

Was auf Mobilgeräten normalerweise kaputtgeht (einfach erklärt)

Wenn jemand sagt, eine Seite sei „nicht mobilfreundlich“, meint das meist etwas Einfaches: sie lädt, aber die Nutzung auf einem echten Handy ist nervig oder unmöglich.

Die Symptome erkennst du so:

• Du kannst seitlich wischen, weil etwas breiter ist als der Bildschirm
• Text wird abgeschnitten oder überlappt sich
• Buttons und Links sind zu klein, zu dicht beieinander oder teilweise außerhalb des Bildschirms
• Das Layout springt, wenn Bilder laden oder die Tastatur aufgeht
• Menüs, Modals oder Dropdowns erscheinen an der falschen Stelle und blockieren die Bedienung

Das passiert oft bei AI-erstellten Prototypen, weil viele Tools eine UI erzeugen, die in einer Desktop-Vorschau zwar gut aussieht, aber von fragiler CSS zusammengehalten wird: feste Breiten, absolute Positionierung und pixelgenaue Abstände. Außerdem wird oft von einer einzigen Schriftgröße, Inhaltslänge und Viewport-Größe ausgegangen. Handys brechen diese Annahmen schnell.

Ein realistisches Beispiel: Ein Onboarding-Screen nutzt ein Zwei-Spalten-Layout in einem festen 900px-Container. Auf dem Desktop sieht das sauber aus. Auf dem Handy schiebt die rechte Spalte über den Rand und erzeugt horizontales Scrollen. Der „Weiter“-Button landet unterhalb der sichtbaren Fläche, und rechtlicher Text überlappt ein Eingabefeld, weil die Tastatur den Viewport verkleinert.

Wenn du Responsiveness willst: nicht zuerst neu designen, zuerst auditieren. Dann in Reihenfolge beheben: finde, was die Seite breiter als den Bildschirm macht, entferne das CSS, das Elemente einengt, und optimiere erst danach Abstände und Touch-Ziele.

Richte einen schnellen, realistischen Test ein

Teste auf echten Geräten, wenn möglich. Ein verstellbares Desktop-Fenster hilft, kann aber die Ärgernisse echter Handys verbergen: Browser-UI beansprucht Platz, Schriftarten rendern anders, Safe Areas wirken, und dein Daumen erreicht Buttons anders.

Wähle 3–5 Screens, die die App gut repräsentieren (nicht jede Seite). Eine gute erste Auswahl: Home/Dashboard, Anmeldung, Einstellungen/Profil und ein „Money Screen“ wie Checkout, Upgrade oder Buchung. Wenn diese funktionieren, wird der Rest meist einfacher.

Wähle einige gängige Größen und bleib dabei, damit du Vergleiche vor/nach machen kannst. Du musst nicht jedes Gerät abdecken, nur die, die schwache Layout-Entscheidungen aufdecken:

• Kleines Handy: 360 x 800
• Großes Handy: 390 x 844
• Plus‑Size Handy: 414 x 896
• Tablet: 768 x 1024
• Eine Zwischenweite aus deiner Analytics (falls vorhanden)

Definiere, was „gut“ heißt, bevor du CSS änderst: kein seitliches Scrollen, Text lesbar ohne Zoomen, Buttons gut zu treffen, und zentrale Flows mit einer Hand ausführbar.

Eine praxisnahe Regel: wenn du dich nicht in unter einer Minute auf einem echten Handy einloggen und die Hauptaktion ausführen kannst, ist das Layout nicht fertig.

Finde die Ursachen für Overflow und horizontales Scrollen

Seitliches Scrollen bedeutet fast immer: ein Element ist breiter als der Bildschirm.

Reproduziere das Problem in einer engen Viewport-Größe. Wenn du die Seite etwas nach links und rechts ziehen kannst, überläuft etwas.

Eine schnelle Methode, den Schuldigen zu finden, ist vorübergehend alles zu umrahmen und dann seitlich zu scrollen, um zu sehen, was hervorsteht. Wenn du die „mysteriöse" Karte oder den Button siehst, der über den Rand lugt, untersuche Breite, Padding und Kinderinhalte, die das Element breiter machen könnten.

Immer wiederkehrende Ursachen sind: feste Breiten (z. B. ein Container mit 420px), große Bilder oder SVGs, die nicht schrumpfen, lange ungebrochene Strings (E‑Mails, IDs, Keys), breite Tabellen und absolut positionierte Elemente, die über den Viewport hinausgehen.

Overflow versteckt sich oft in Komponenten, die über der Seite schweben. Modals, Dropdowns und Toasts können eigene Container mit festen Breiten, zusätzlichem Padding oder Animationen haben, die sie aus dem Bildschirm schieben. Ein Modal kann auf dem Desktop zentriert aussehen, aber auf Mobil trotzdem horizontales Scroll erzeugen, weil sein innerer Inhalt sich nicht verkleinern lässt.

Eine Regel, die Zeit spart: bevor du mehr Breakpoints einbaust, bevorzuge flexible Größen. Entferne die harte Einschränkung, die das Layout breit macht.

Beispiel: Ein Onboarding-Screen hat ein „Code verifizieren“-Modal. Das Modal ist 480px breit, und das Code-Eingabefeld zeigt einen langen Placeholder. Auf einem 375px‑Handy überläuft das Modal. Das Ändern auf max-width: 90vw und das Zulassen, dass der Placeholder umbricht, beseitigt das Scrollen, ohne dass das Design neu gemacht werden muss.

Entferne fragile CSS-Regeln, die das Layout brechen

Die meisten Mobil‑Fehler in AI-generierten Frontends stammen von CSS, das von einer einzigen Bildschirmgröße ausgeht. Die schnellsten Erfolge erzielst du meist, indem du diese Annahmen entfernst.

Suche nach festen Breiten und Höhen, die auf dem Desktop „gut aussehen“, aber nicht schrumpfen können. Häufige Übeltäter sind width: 1200px, min-width: 900px, height: 100vh auf Containern, die wachsen sollten, und Inputs/Buttons mit hart codierten Größen. Wenn eine Karte eine bestimmte Breite erzwingen muss, schiebt sie alles andere ins horizontale Scrollen.

Ein weiteres Problem sind Wrapper-auf-Wrapper-Layouts. AI-Tools stapeln oft Container, die jeweils Padding, max-width und Zentrierung hinzufügen. Drei Wrapper mit je 24px Padding können auf einem kleinen Handy überraschend viel nutzbaren Platz wegnehmen.

Wenn du Muster wie absolute Positionierung zur Ausrichtung, „Magic Numbers“ wie left: 37px, negative Margins zum Verschieben von Elementen oder globale Regeln wie white-space: nowrap siehst, sind das Verdachtsfälle. Ersetze sie durch flexible Regeln, die Atmen lassen: max-width: 100% statt fester Breiten, height: auto wo möglich, und gap statt manueller Margin‑Stapels.

Beispiel: Im Onboarding sitzt der „Weiter“-Button absolut am unteren Rand einer Karte. Auf einem kleinen Gerät öffnet die Tastatur und der Button überlappt das Formular. Wenn du die Karte als Flex‑Column machst und den Button mit margin-top: auto nach unten schiebst, bleibt er ohne Überlappung an richtiger Stelle.

Lasse Layouts mit Flexbox und Grid anpassen

AI-generierter UI-Code „funktioniert“ oft nur, weil der Beispielinhalt genau die richtige Länge hat. Auf einem echten Handy wird Text länger, Buttons umbrechen und das Layout kollabiert in Überlappungen oder horizontales Scrollen.

Eine einfache Regel hilft: Verwende Flexbox für eindimensionale Layouts (eine Reihe oder Spalte) und Grid für zweidimensionale Layouts (Zeilen und Spalten, die ausgerichtet sein müssen). Alles mit einem Tool zu erzwingen macht den Code fragil.

Verwende Flexbox für Navbars, Toolbars, Button‑Reihen und „Icon + Text + Aktion“-Zeilen. Grid eignet sich für Karten‑Galerien, Einstellungsseiten mit Label/Wert‑Zeilen und Dashboards, in denen Spalten über Zeilen hinweg ausgerichtet sein müssen.

Zwei CSS-Entscheidungen erledigen den Großteil der Arbeit für echten Inhalt: Zulassen von Wrap und Text schrumpfen zu lassen, ohne die Zeile zu zerbrechen.

/* Card rows that wrap without odd gaps */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.card { flex: 1 1 260px; }

/* Grid that adapts to screen size */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Mixed content row: icon + long title + button */
.row { display: flex; align-items: center; gap: 8px; }
.title { min-width: 0; flex: 1; }
.action { flex: 0 0 auto; }

Konkretes Beispiel: Ein Onboarding‑Screen hat einen langen Plannamen und einen „Weiter“-Button. Wenn der Titel nicht schrumpfen kann, schiebt er den Button aus dem Bildschirm. min-width: 0 auf dem Titel und flex: 0 0 auto auf dem Button verhindern Overflow, ohne umzudesignen.

Lesbarkeit und Tap‑Ziele verbessern, ohne alles neu zu gestalten

Der Großteil des mobilen Schmerzes ist kein komplexes Layout‑Problem. Es sind zu kleine Texte, zusammenfallende Abstände und Bedienelemente, die schwer mit dem Daumen zu treffen sind.

Beginne mit ein paar langweiligen Defaults, die jeden Screen ruhiger machen: 16px Fließtext mit 1.4–1.6 Zeilenhöhe, herunterskalierte Überschriften, damit sie nicht alles dominieren, und konsistentes Padding für Seitencontainer (oft 16px), damit Inhalte nicht an den Rändern kleben.

Tap‑Ziele sind der nächste schnelle Gewinn. Viele AI‑UIs liefern hübsche Buttons, die auf dem Handy physisch winzig sind. Ziel mindestens 44×44px für interaktive Ziele, 8–12px Abstand zwischen Aktionen, und Padding an Textlinks, damit sie tappbar sind. Achte außerdem darauf, dass Fokus‑Styles sichtbar bleiben und nicht abgeschnitten werden.

Formulare brechen häufiger als Landing Pages. Halte Labels nahe an Inputs, vermeide Zwei‑Spalten‑Formulare auf kleinen Bildschirmen, es sei denn sie passen wirklich, und mache Inputs mobil vollbreit. Reserviere Platz für Fehlermeldungen, damit die Seite nicht springt, wenn Validierung erscheint.

Layout‑Shifts kommen oft von Toasts, Bannern und Inline‑Validierung. Wenn Nachrichten erscheinen und verschwinden, versuche die Höhe konsistent zu halten oder nutze einen Overlay‑Bereich, damit sich der Inhalt nicht verschiebt.

Beispiel: Zwei Felder „Vorname“ und „Nachname“ nebeneinander quetschen oft beide Inputs zu schmalen Feldern. Wechsle zu einer Spalte, setze Labels über Felder und gib dem „Weiter“-Button echte Tap‑Größe — das fühlt sich fertig an, ohne das Design zu ändern.

Schwierige Komponenten bändigen: Bilder, Tabellen und Modals

Viel Mobil‑Zerfall kommt von einigen wiederkehrenden Übeltätern: Bilder mit festen Größen, Tabellen, die Desktop‑Weiten voraussetzen, und Modals, die vergessen, dass Handys scrollen müssen.

Bilder, die Container sprengen

Hat ein Bild eine feste Breite (z. B. 800px), kann es die Seite breiter als das Handy machen.

Lass Bilder schrumpfen, aber nicht aufblähen. In den meisten Fällen max-width: 100% setzen und die Höhe proportional nachziehen. Wenn ein Design eine fixe Höhe für einen Hero braucht, sicher mit object-fit zuschneiden, damit das Bild nicht verzerrt.

Lange, ungebrochene Texte können denselben seitlichen Scroll verursachen. Benutzer‑IDs, E‑Mails, Einladungslinks, Bestellnummern und Codeblöcke wollen oft nicht umbrechen. Wende Umbruchregeln an, damit lange Strings Zeilen brechen statt das Layout zu verschieben.

Tabellen ohne Schmerz

Tabellen sind auf kleinen Bildschirmen schwer. Wähle pro Tabelle eine Strategie, je nachdem, was Nutzer auf Mobil wirklich tun müssen: horizontal in einem eigenen Container scrollen, jede Zeile im Kartenstil stapeln oder eine kurze Zusammenfassung mit Detailansicht zeigen.

Schreib auf, welche Wahl du getroffen hast und warum. Sonst kann ein späterer Edit still Overflow wieder einführen.

Modals und Drawers, die nutzbar bleiben

Modals brechen oft, weil ihre Höhe fix ist und der Hintergrund weiterhin scrollt. Ein sichereres Muster: Modalhöhe an die Viewport‑Größe begrenzen, den Modal‑Body scrollen lassen und Header (Titel und Schließen) sichtbar halten.

Schnellchecks, die die meisten Bugs finden:

• Der Close‑Button ist sichtbar und leicht zu treffen auf kleinen Bildschirmen
• Der Modal‑Inhalt scrollt, der Hintergrund nicht
• Die Tastatur verdeckt nicht die primäre Aktions‑Schaltfläche

Beispiel: Ein Signup‑Modal mit langem Terms‑Text sollte im Modal selbst scrollen, nicht außerhalb expandieren.

Ein wiederholbares Schritt‑für‑Schritt Audit für jede Seite

Schnelligkeit zählt. Der schnellste Weg ist, einen Screen nach dem anderen zu auditieren und die eine Sache zu beheben, die das Layout aus der Bahn wirft.

Wähle einen Screen, der auf dem Handy deutlich kaputt ist. Schreibe die Symptome wie einen Bug‑Report: „Ich muss seitlich scrollen“, „der primäre Button ist abgeschnitten“, „das Modal geht aus dem Bildschirm“, „Text überlappt das Input“. Das hält dich davon ab, willkürlichen CSS‑Änderungen nachzujagen.

Als Nächstes isolierst du das kleinste Element, das den Bruch auslöst. In DevTools Elemente ein‑/ausschalten, bis das Problem verschwindet. Oft ist es ein Kind mit fester Breite, ein langer ungebrochener String oder eine Komponente, die ihren Container ignoriert.

Ein wiederholbarer Ablauf:

• Finde das erste Element, das die Viewport‑Breite überschreitet
• Entferne feste Größen (harte px‑Breiten, feste left/right Werte) und lass den Eltern‑Container die Breite steuern
• Bevorzuge fluide Regeln wie max-width: 100% und width: 100% wo passend
• Füge Umbruchregeln für lange Inhalte hinzu (Namen, E‑Mails, Fehlermeldungen)
• Teste erneut auf einem echten Handy, dann auf einer Tablet‑Breite

Konkretes Beispiel: Ein Onboarding‑Screen sieht auf dem Desktop gut aus, aber auf dem iPhone rutscht der „Weiter“-Button aus dem Bildschirm. Du untersuchst das Footer‑Element und findest width: 480px. Diese Regel löschen und dem Footer width: 100% geben behebt das horizontale Scrollen und bringt den Button zurück.

Häufige Fallen, die spätere Fixes zunichtemachen

Die schnellsten mobilen Fixes sehen oft an einer Bildschirmgröße gut aus und fallen auseinander, wenn echter Inhalt kommt. Eine gute Regel: wenn du einen Pixelwert raten musstest, bricht es wahrscheinlich später.

Ein häufiger Fehler ist, mehr Breakpoints hinzuzufügen, statt das Kernlayout zu reparieren. Breakpoints sind nützlich, aber wenn das Baselayout von festen Breiten oder einem Desktop‑first Wrapper abhängt, jagt du bei jedem Gerät neuen Problemen hinterher. Beginne mit flexiblen Containern, dann füge ein oder zwei Breakpoints für große Umbrüche hinzu.

Eine andere Falle ist overflow: hidden zu verwenden, um horizontales Scrollen verschwinden zu lassen. Das kann das Symptom verbergen und gleichzeitig Buttons, Fehlermeldungen oder Fokus‑Outlines abschneiden. Bei Formularen kann es sogar Validierungs‑Text verbergen, sodass Nutzer den Flow nicht abschließen können.

Hard‑coded Heights sind ebenfalls fragil. Eine Karte, die bei height: 420px perfekt aussieht, clippt, wenn ein Name länger ist, eine Fehlermeldung erscheint oder der Nutzer größere Schrift eingeschaltet hat. Bevorzuge natürlichen Inhaltsfluss und lass die Seite scrollen.

Konfligierende Abstandsregeln können deine Arbeit stillschweigend rückgängig machen. AI‑Komponenten bringen oft eigene Margins, Paddings und Line‑Heights mit, über die globale CSS dann nochmal drübergeht. Wenn eine Komponente andere Abstandsannahmen hat, verschiebt sich die Ausrichtung und Overflow kehrt zurück.

Überspringe nicht Tests für Dark Mode und hohe Zoomstufen. Schnelle Checks, die Fehler früh finden: Textgröße auf 200% erhöhen und Formulare/Modals prüfen, Dark Mode an- und ausschalten und auf unsichtbare Ränder/Hilfetexte achten, und jeweils eine kleine und eine große Handybreite testen.

Kurze Checkliste für mobile Nutzbarkeit

Nutze diese Liste, nachdem du Overflow und fragile CSS entfernt hast. Sie fängt die Dinge ab, die eine Seite auf einem echten Handy kaputt wirken lassen, selbst wenn sie auf dem Desktop gut aussieht.

Stelle sicher, dass die Seite nie seitliche Bewegung erzwingt. Öffne deine Schlüssel‑Screens (Landing, Sign‑In, Dashboard, Einstellungen) und versuche, nach links und rechts zu wischen. Wenn sich etwas bewegt, ist noch etwas breiter als der Viewport.

Dann überprüfe Lesbarkeit und Interaktion: Absätze sollten natürlich umbrechen, Überschriften dürfen nicht abgeschnitten werden, du solltest Labels oder Fehler nicht hereinzoomen müssen, und Buttons sollten nicht gequetscht wirken.

Eine einfache Prüfliste:

• Kein horizontales Scrollen auf Schlüssel‑Screens (auch nicht innerhalb von Modals)
• Text umbricht natürlich (keine abgeschnittenen Überschriften oder fixe Textblöcke)
• Tap‑Ziele sind sicher (Buttons und Links nicht gequetscht)
• Formulare bleiben nutzbar (Inputs, Dropdowns und Fehlerzustände bleiben sichtbar)
• One‑Thumb‑Flows funktionieren (Menüs und Modals verlangen keine präzisen Taps)

Nach jeder UI‑Änderung prüfe nur ein paar Dinge: funktioniert 320px noch, mit geöffneter Tastatur erreichst du das nächste Feld und den Absenden‑Button, Fehler bleiben sichtbar, Ladezustände strecken Container nicht und Dark Mode bleibt lesbar.

Beispiel: Wenn eine AI‑erstellte Einstellungsseite ein neues „Upgrade to Pro“-Pill hinzufügt, kann das still Overflow auslösen. Fange es früh mit dem Wischtest und dem 320px‑Check ab.

Beispiel: ein kaputtes Onboarding‑Screen retten

Ein typischer Fall: Das Onboarding sieht auf dem Desktop gut aus, aber auf dem iPhone ist die Karte abgeschnitten, die Seite scrollt seitlich und der „Weiter“-Button liegt unter der Tastatur.

In einem Rescue‑Fall erzeugten drei Ursachen die meisten Probleme. Die Hauptkarte hatte eine feste Breite (z. B. 520px) und einen harten linken Margin, daher konnte sie nicht schrumpfen. Das E‑Mail‑Feld ließ lange Adressen über die Karte hinausdrücken, weil die Eingabereihe sich nicht sauber verkleinern durfte. Und ein „Terms“-Modal hatte eine feste Höhe ohne internes Scrollen, sodass es den Viewport überfüllte.

Das Audit beginnt damit, das Problem an realen Gerätegrößen zu reproduzieren und dann das erste Element zu finden, das hervorsteht. Von dort gehst du die Elternkette hoch, bis du den Container findest, der sich nicht verkleinern lässt.

Die Fixes waren klein und zielgerichtet: Die Karte wechselte von fester Breite zu max‑width mit fluiden Größen, Margins wurden responsiv (zentriert mit automatischen Seiteneinzügen), die Eingabereihe bekam Regeln, die Shrinking erlauben, ohne Geschwister zu schieben, und das Modal wechselte von fester Höhe zu viewport‑basierter max‑height mit internem Scroll.

Akzeptanz‑Checks auf Telefon und Tablet waren einfach:

• Kein horizontales Scrollen irgendwo, auch beim Fokussieren von Eingaben
• Der primäre Button bleibt oberhalb der Tastatur sichtbar
• Das Modal passt auf den Bildschirm und scrollt innerhalb seines Inhalts
• Text bleibt ohne Zoom lesbar und Tap‑Ziele sind gut erreichbar

Nächste Schritte, wenn deine AI‑UI immer wieder bricht

Wenn mobile Probleme immer wieder auftreten, fehlt dem Projekt meist ein gemeinsamer Satz an Layout‑Regeln. Ein paar Entscheidungen jetzt verhindern, dass die nächste Runde von Fixes die letzten wieder aufhebt.

Schreibe eine kurze „mobile rules“-Notiz und halte sie nahe am Code. Sei konkret:

• Keine festen Breiten auf Seiten‑Containern (bevorzuge max‑width und fluide Größen)
• Jede Komponente, die overflowen kann, muss das absichtlich behandeln (wrap, clamp oder scroll)
• Ein spacing‑System (eine kleine Menge an Gaps und Schriftgrößen)
• Buttons und Inputs müssen Daumen‑freundlich bleiben (komfortable Höhe und klare Labels)

Führe Fixes in einer Reihenfolge aus, die Stabilität schafft: horizontales Scrollen zuerst killen, dann Formulare reparieren (Inputs, Fehler, Tastaturverhalten) und erst danach sekundäre Screens polieren.

Wenn du ein AI‑generiertes Frontend geerbt hast und immer wieder dieselben Layout‑Fehler siehst, kann es schneller sein, eine saubere Diagnose dessen zu bekommen, was wirklich Overflow und fragile Positionierung erzwingt. FixMyMess (fixmymess.ai) konzentriert sich auf die Reparatur AI‑gebauter Apps aus Tools wie Lovable, Bolt, v0, Cursor und Replit, und ein kurzes Codebase‑Audit kann dir genau sagen, was auf echten Geräten schief läuft, bevor du Zeit in Symptom‑Patching steckst.