So machst du eine Website mobil-responsive

Um eine Website mobil-responsiv zu machen, füge ein Viewport-Meta-Tag hinzu, baue das Layout Mobile-First mit flexiblen Breiten und nutze CSS-Haltepunkte, um es auf größeren Bildschirmen neu anzuordnen: Spalten stapeln, das Menü einklappen und Bilder passend skalieren. Prüf dann jede Seite in Handybreite auf seitliches Scrollen, winzige Schrift und zu kleine Buttons. Bei einer KI-gebauten Website behebt meist ein klarer Prompt plus ein Durchgang in einer Vorschau in Handygröße den größten Teil.

Was responsives Design eigentlich ist

Eine responsive Website nutzt einen Satz Seiten und URLs, die sich dem Bildschirm anpassen. Statt einer separaten „m.“-Seite ändert das CSS das Layout ab bestimmten Breiten, den sogenannten Haltepunkten (Breakpoints). Die Bausteine:

• Das Viewport-Meta-Tag sagt mobilen Browsern, dass sie die echte Breite des Geräts verwenden sollen.
• Flüssige Layouts nutzen Prozente, Flexbox und Grid statt fester Pixelbreiten.
• Media Queries (oder Framework-Klassen wie Tailwinds md:) ändern das Layout ab einer bestimmten Breite.
• Flexible Medien: Bilder und Videos, die sich an ihren Container anpassen.

Das ist wichtig, weil ein großer Teil deines Traffics wahrscheinlich vom Handy kommt und Google die mobile Version deiner Seiten indexiert. Gibt es Inhalte oder Links nur am Desktop, sieht Google sie womöglich ebenfalls nicht.

Optionen und Abwägungen

Mobile-First ist meist einfacher: Eine einzelne Spalte ist das einfachste Layout, und Spalten hinzuzufügen, wenn mehr Platz da ist, ist weniger Arbeit, als sie wieder zu entfernen.

Die Teile, die meist kaputtgehen

Das Viewport-Tag

Sieht eine Seite auf dem Handy aus wie eine winzige Desktop-Seite, fehlt das Viewport-Tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Füge nicht maximum-scale=1 oder user-scalable=no hinzu. Das Blockieren des Zooms erschwert die Nutzung für Menschen mit Sehbehinderung.

Feste Breiten und horizontales Scrollen

Der häufigste Fehler in responsiven Layouts ist etwas, das breiter als der Bildschirm ist: ein Container mit fester width: 1200px, eine breite Tabelle, eine lange URL oder ein Codeblock, ein Bild ohne max-width: 100%. Die ganze Seite lässt sich dann seitlich verschieben. Verwende max-width statt width, lass Text umbrechen, und gib breiten Elementen einen eigenen Scrollbereich.

Navigation

Fünf Links aus dem Desktop-Menü passen selten aufs Handy. Die übliche Lösung ist ein Menü-Button, der ein Panel öffnet. Halte die zwei oder drei wichtigsten Aktionen sichtbar, etwa „Buchen“, „Warenkorb“, „Anmelden“, und stell sicher, dass das Menü mit der Tastatur funktioniert und sich leicht schließen lässt.

Text und Tap-Ziele

• Fließtext um 16 px ist auf dem Handy ein sinnvolles Minimum. Eingabefelder mit kleinerer Schrift führen dazu, dass iPhones beim Antippen hineinzoomen.
• Mach Buttons und Links leicht treffbar. WCAG 2.2 AA verlangt mindestens 24 × 24 CSS-Pixel (oder ausreichend Abstand); rund 44 Pixel sind für den Daumen angenehmer.
• Lass zwischen nebeneinanderliegenden Links Abstand, damit niemand den falschen trifft.

Tabellen und Daten

Breite Tabellen sind der schwierigste Teil einer responsiven App. Die Optionen, in der Reihenfolge der Empfehlung: auf dem Handy weniger Spalten zeigen, jede Zeile zu einer Karte machen oder die Tabelle in einen horizontal scrollbaren Container mit fixierter erster Spalte setzen. Wähle nach dem, was Menschen vergleichen müssen.

Bilder und Medien

Verwende max-width: 100% und height: auto, liefere mit srcset kleinere Dateien an kleine Bildschirme aus und setze Breite und Höhe, um Layoutsprünge zu vermeiden. Eingebettete Videos und Karten brauchen einen responsiven Container, damit ihr Seitenverhältnis erhalten bleibt. Kleinere Bilder machen Seiten außerdem schneller. Siehe So machst du deine Website schneller.

Formulare

Stell Beschriftungen über die Felder, mach Felder volle Breite und nutze passende Eingabetypen (type="email", type="tel", inputmode="numeric"), damit das Handy die passende Tastatur zeigt. Platziere den Absende-Button dort, wo der Daumen hinkommt, und halte ihn sichtbar, wenn sich die Tastatur öffnet.

Nur-Hover-Interaktionen

Handys kennen kein Hover. Tooltips, Dropdowns und Vorschauen, die nur beim Überfahren mit der Maus erscheinen, sind für Touch-Nutzer unsichtbar. Mach sie auch per Tippen nutzbar.

Prompts, die funktionieren

Bei einem Neubau sag es gleich am Anfang:

Baue das Mobile-First. Auf Handys eine Spalte, ab Tablet-Breite zwei Spalten, am Desktop das volle Layout. Keine horizontale Scrollleiste bei 320 px Breite, Fließtext mindestens 16 px, Tap-Ziele mindestens 44 px, auf kleinen Bildschirmen ein Menü-Button und Tabellen, die sich auf Handys in Karten verwandeln.

Bei einer bestehenden Seite beschreib, was du siehst:

Auf Handys lässt sich die Seite /pricing seitlich verschieben, und die drei Tarifkarten sind nebeneinander zusammengequetscht. Stapel die Karten unter 768 px vertikal, mach die Vergleichstabelle in ihrem eigenen Container horizontal scrollbar mit fixierter Merkmal-Spalte, und lass das Desktop-Layout unverändert.

Prüf jede Seite bei 375 px Breite. Liste alles auf, was überläuft, sich überlappt, Text unter 16 px oder Tap-Ziele unter 44 px hat oder nur per Hover funktioniert, und behebe jeden Punkt.

Schritt für Schritt

1. Prüf das Viewport-Tag im Kopfbereich der Seite.
2. Teste bei 320–375 px Breite im Geräte-Modus des Browsers oder in einer Vorschau in Handygröße. Scrolle jede Seite von oben bis unten.
3. Behebe zuerst das seitliche Scrollen. Finde das Element, das zu breit ist; alles andere lässt sich erst sinnvoll beurteilen, wenn es weg ist.
4. Kümmere dich um die Navigation: Menü-Button, wichtigste Aktionen sichtbar.
5. Prüf Text, Tap-Ziele und Formulare in jedem wichtigen Ablauf – Anmeldung, Suche, Kasse, Kontakt.
6. Behandle Tabellen und Medien: Karten oder Scrollcontainer, responsive Bilder und Einbettungen.
7. Prüf die Zwischengrößen. Zieh die Breite langsam vom Handy zum Desktop; Layouts brechen oft um die Tablet-Breite.
8. Teste auf einem echten Handy. Emulatoren übersehen Dinge wie eine Bildschirmtastatur, die einen Button verdeckt, Notches und wie schnell sich die Seite mit mobilen Daten anfühlt.

Häufige Fehler

• Nur eine Handygröße testen. Prüfe ein kleines Handy, ein großes Handy und ein Tablet.
• Inhalte auf dem Handy ausblenden, damit sie passen. Google indexiert die mobile Version, und Handynutzer wollen dieselben Informationen.
• Zoom im Viewport-Tag deaktivieren.
• Desktop-große Bilder auf dem Handy, die Ladezeit und Datenvolumen kosten.
• Fixierte Elemente, die sich stapeln: Ein fixierter Header, ein Cookie-Banner und eine Chat-Blase können die halbe Handy-Fläche verdecken.
• Pop-ups, die sich auf kleinen Bildschirmen nicht schließen lassen, weil der Schließen-Button außerhalb des Bildschirms liegt.

Mobil-Checkliste

• Viewport-Meta-Tag vorhanden; Zoom nicht deaktiviert
• Kein horizontales Scrollen bei 320 px auf keiner Seite
• Fließtext etwa 16 px; Eingabefelder lösen kein Zoomen aus
• Tap-Ziele komfortabel groß und mit Abstand
• Menü funktioniert auf Handys und mit der Tastatur
• Tabellen auf Handys lesbar (Karten, weniger Spalten oder Scrollcontainer)
• Bilder und Einbettungen skalieren; passend große Dateien werden ausgeliefert
• Formulare nutzen die richtigen Eingabetypen; Absende-Button erreichbar
• Nichts Wichtiges hängt von Hover ab
• Auf mindestens einem echten Handy getestet

Responsives Layout gehört auch zur Barrierefreiheit: WCAG verlangt, dass Inhalte bei 320 px Breite und 200 % Zoom funktionieren. Wenn du eine App baust, die Menschen täglich auf dem Handy nutzen, geht So baust du eine mobilfreundliche Web-App weiter, inklusive installierbarer PWAs.

Responsives Design in Mythex

Mythex baut responsive Web-Apps, und im Pro-Tarif lassen sie sich als Android- und iPhone-Apps verpacken. Im Workspace klickst du auf das Handy-Symbol über der Vorschau (Auf Mobil umschalten), um deine App in einem Rahmen in Handygröße zu sehen. Mit dem Rand des Rahmens kannst du andere Breiten ausprobieren (Vorschau und Code). Die Dokumentation enthält einen kurzen Startprompt für Layouts auf kleinen Bildschirmen unter Prompts für mobile Responsivität. Prüf zusätzlich auf einem echten Handy: Öffne die veröffentlichte URL oder teile einen Vorschau-Link und öffne ihn auf deinem Handy.

Fragen