Responsive heißt nicht, dass die Seite auf dem Handy irgendwie aufgeht. Es heißt, dass sie dort genauso gut zu bedienen ist wie am Schreibtisch — bei zwei Dritteln der Besucher ist das der einzige Kontakt, den sie mit Ihrer Website haben.
Die folgenden zehn Punkte sind die, an denen es in der Praxis tatsächlich scheitert. Nicht die theoretisch interessanten, sondern die, die ich bei fast jeder Website nachbessere.
1. Auf dem Handy anfangen, nicht aufhören
Der klassische Ablauf ist: Entwurf am großen Bildschirm, am Schluss „noch mobil anpassen“. Dabei entstehen die Seiten, auf denen mobil vier Inhaltsblöcke untereinander stehen, die zusammen keine Reihenfolge ergeben.
Umgekehrt funktioniert es: Was auf 390 Pixel Breite überzeugt, überzeugt auch auf 1.600. Wer mit der schmalen Ansicht beginnt, muss sich früh entscheiden, was wirklich wichtig ist.
2. Bedienelemente groß genug machen
Ein Finger braucht mindestens 44 mal 44 Pixel Fläche. Kleinere Schaltflächen, zu eng gesetzte Menüpunkte und Textlinks, die direkt nebeneinander stehen, führen zu Fehlklicks — und Fehlklicks führen zu Abbrüchen.
Besonders betroffen: Schließen-Kreuze bei Pop-ups, Filter-Chips und Fußzeilenlinks.
3. Die Navigation ehrlich lösen
Das Hamburger-Menü ist kein Problem, wenn dahinter eine überschaubare Struktur liegt. Es wird eines, wenn vierzig Punkte in drei Ebenen darin verschwinden.
Was hilft: die zwei wichtigsten Ziele direkt sichtbar lassen — etwa „Anrufen“ und „Anfragen“ — und den Rest ins Menü packen. Bei lokalen Betrieben ist eine feste Leiste am unteren Rand mit Telefon und Route oft der wirksamste einzelne Eingriff.
4. Schrift nicht kleiner als 16 Pixel
Alles darunter zwingt zum Zoomen, und in Formularfeldern löst iOS bei kleinerer Schrift automatisch einen Zoom aus — der Nutzer landet in einer verschobenen Ansicht und findet nicht zurück.
Dazu ausreichender Zeilenabstand und eine Zeilenlänge, die nicht über die ganze Breite läuft. Auf dem Handy passt das von selbst, auf großen Bildschirmen nicht.
5. Bilder in der richtigen Größe ausliefern
Der häufigste Grund für langsame Seiten auf dem Handy: Ein 4.000 Pixel breites Foto wird geladen und auf 390 Pixel heruntergerechnet. Der Besucher bezahlt die vollen Daten für ein Bild, das er nie in dieser Auflösung sieht.
WordPress legt zwar automatisch mehrere Größen an, aber nur, wenn die Ausgangsdatei vernünftig ist. Ich bereite Bilder deshalb vorher auf — dafür habe ich PicPrepper gebaut. Wichtig außerdem: feste Breite und Höhe im Markup, sonst springt das Layout beim Nachladen.
6. Layout mit modernen Mitteln bauen
Feste Pixelbreiten und ein Dutzend Umbruchpunkte sind der schwere Weg. Mit Flexbox, CSS-Grid und Funktionen wie clamp() passen sich Abstände und Schriftgrößen stufenlos an, statt an drei willkürlichen Schwellen umzuspringen.
Container Queries sind der nächste Schritt: Ein Element reagiert dann auf den Platz, den es selbst hat, und nicht auf die Fensterbreite. Für Komponenten, die in Seitenspalte und Hauptbereich gleichermaßen vorkommen, ist das der Unterschied zwischen einer und drei Varianten.
7. Tabellen und Code gesondert behandeln
Der häufigste Auslöser für horizontales Scrollen — die Seite lässt sich seitlich verschieben, obwohl sie es nicht soll. Breite Tabellen, Code-Blöcke und eingebettete Karten brauchen einen eigenen Behälter mit eigenem Scrollbereich.
Prüfen können Sie das in einer Zeile in der Browserkonsole: Ist die Breite des Dokuments größer als die des Fensters, haben Sie einen Übeltäter.
8. Formulare entschlacken
Jedes Feld kostet auf dem Handy mehr als am Schreibtisch. Dazu gehört: passende Tastatur je Feldtyp (Zahlenblock für Telefon, At-Zeichen für E-Mail), automatisches Ausfüllen zulassen, Fehlermeldungen direkt am Feld statt gesammelt oben.
Und keine Pflichtfelder, die Sie nicht brauchen. Das ist derselbe Punkt wie bei einer Landingpage — nur auf dem Handy mit doppelter Wirkung.
9. Bewegung abschaltbar machen
Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, sollte keine einfliegenden Elemente sehen. Das ist über prefers-reduced-motion in wenigen Zeilen gelöst und gehört zur Barrierefreiheit, die seit dem European Accessibility Act für viele Anbieter verpflichtend ist — Einzelheiten dazu in den Webdesign-Trends 2027.
10. Auf echten Geräten testen
Die Geräteansicht im Browser ist ein guter erster Schritt, aber sie simuliert nur die Größe. Was sie nicht zeigt: wie träge Animationen auf einem drei Jahre alten Android-Gerät laufen, wie die Seite bei Sonnenlicht aussieht, ob der Daumen die Schaltfläche unten rechts überhaupt erreicht.
Mein Minimum vor dem Livegang: ein iPhone, ein Android-Gerät, ein Tablet quer. Dazu einmal die Seite nur mit der Tabulatortaste bedienen.
Häufige Fragen
Ist mein Theme automatisch responsive?
Fast jedes aktuelle Theme ist es grundsätzlich. Kaputt geht es meist an dem, was hinzugefügt wurde: fest eingestellte Pixelbreiten in einem Seitenbaukasten, mehrspaltige Raster ohne mobile Regel, eingebettete Inhalte ohne eigenen Scrollbereich.
Wie viele Umbruchpunkte brauche ich?
So wenige wie möglich. Drei reichen in der Regel: Handy, Tablet, Schreibtisch. Wer bei jedem Gerät nachbessert, baut ein System, das beim nächsten Bildschirmformat wieder bricht.
Brauche ich eine eigene App statt einer responsiven Website?
Für die allermeisten Unternehmen nicht. Eine App muss installiert, gepflegt und in zwei Stores aktuell gehalten werden. Eine gut gebaute Website erreicht dieselben Menschen ohne diese Hürde.
Woran merke ich, dass es nicht stimmt?
An der Absprungrate der mobilen Besucher im Vergleich zu den übrigen. Liegt sie deutlich höher, liegt es fast nie am Inhalt, sondern an Bedienbarkeit oder Ladezeit.
Fazit
Responsive Design ist zu neunzig Prozent Disziplin: klein anfangen, wenig Umbruchpunkte, Bilder in der richtigen Größe, große Bedienelemente, auf echten Geräten prüfen. Die restlichen zehn Prozent sind Technik.
Wenn Sie wissen möchten, wo Ihre Seite steht: So arbeite ich im Webdesign — und hier erreichen Sie mich.
Gunther Schoepf