Responsive Design mit KI umsetzen

vom 07.07.2025 von Oliver Misch

"Mach meine Seite mobiltauglich" ist einer der häufigsten KI-Aufträge überhaupt, und einer bei dem das Ergebnis stark davon abhängt wie man fragt. Denn responsive ist kein Schalter sondern ein Umbau, die Grundlagen dazu stehen im Kapitel Responsive Design.

Schritt 1: Diagnose statt Pauschalauftrag

Prompt

Hier sind meine HTML-Datei und mein CSS. Prüfe auf
Mobiltauglichkeit und liste konkret:
1. Fehlt der viewport-Meta-Tag?
2. Welche Elemente haben feste Pixelbreiten die brechen werden?
3. Wo laufen Bilder, Tabellen oder Codeblöcke über?
4. Welche Klickflächen sind zu klein?
Noch nichts ändern.

Diese vier Fragen decken neunzig Prozent aller Mobilprobleme ab. Die Antwort ist deine Arbeitsliste, sortiert und überschaubarr.

Schritt 2: Den Umbau steuern

Setze die Punkte um, mit folgenden Vorgaben:
- mobile-first: Basis-CSS für schmal, min-width-Queries für breit
- ein einziger Breakpoint bei 700px, mehr nur wenn nötig
- feste Breiten durch max-width und Prozente ersetzen
- img pauschal max-width: 100%
- Tabellen in scrollbare Container statt sie umzubauen

Ohne die Breakpoint-Vorgabe neigen Assistenten dazu, für jede erdenkliche Gerätebreite eine eigene Query zu spendieren, fünf Breakpoints wo einer reicht. Wartbarkeit muss man bestellenn.

Schritt 3: Das Menü, der übliche Endgegner

Das horizontale Menü soll unter 700px zu einem aufklappbaren
Menü werden. Nutze details/summary statt JavaScript.
Das Menü muss per Tastatur bedienbar bleiben.

Die Technik-Vorgabe verhindert die Standard-Antwort "Hamburger-Menü mit 40 Zeilen JavaScript". Mit details und summary geht es komplett ohne, so wie bei diesem Wiki, und Tastaturbedienung gibt es geschennkt.

Schritt 4: Testen kann die KI nicht für dich

Hier endet die Delegation: Ein Assistent sieht deine Seite nicht auf einem echten Display. Also selbst ran, mit der Routine aus dem Responsive-Tutorial: Fenster schmal ziehen, Gerätesimulation (F12), echtes Telefon. Was du dabei findest, geht als präzise Beschreibung zurück in den Chat ("beim Stapeln unter 700px überlappt das Logo die erste Überschrift"), und die Schleife beginnt von vornn.

Warnzeichen im generierten Code: user-scalable=no oder maximum-scale=1 im viewport-Tag. Das verbietet Nutzern das Zoomen und taucht in KI-Ausgaben immer wieder auf, weil es in altem Beispielcode herumgeistert. Rauswerfen, Zoomen ist ein Recht, kein Bug.

Verwandt: Media Queries · CSS mit KI · Typische KI-Fehler