Responsives Layout

Wie EverAudit Ihr responsives Layout auf vier Viewport-Breiten prüft: horizontaler Überlauf, Inhalt unter dem Fold und zu kleine Tap-Ziele.

Responsives Layout heißt: Ihre Seite funktioniert nicht nur auf dem Monitor, sondern genauso zuverlässig auf dem Smartphone in der Hand eines Besuchers. EverAudit prüft dafür drei zusammenhängende Problemfelder — horizontalen Überlauf, Inhalt unterhalb des sichtbaren Bereichs und zu kleine Tap-Ziele — auf mehreren Bildschirmbreiten zugleich.

Was ist das Problem#

Ein Layout, das auf einem 1920px-Monitor makellos aussieht, kann auf einem 375px breiten Smartphone-Bildschirm zerbrechen. Feste Breitenangaben, nicht umbrechende Tabellen oder überbreite Bilder ragen dann über den Bildschirmrand hinaus. Ein zu hoher Hero-Bereich oder Consent-Banner schiebt die eigentliche Botschaft nach unten. Und Schaltflächen, die am Desktop mit der Maus präzise treffbar sind, werden auf dem Touchscreen zur Fehlerquelle, wenn sie zu klein oder zu dicht beieinander liegen.

Diese drei Fehlerarten haben eine gemeinsame Ursache: Das Layout wurde für eine Bildschirmbreite entworfen und nicht konsequent für alle getestet.

Warum prüft EverAudit das#

EverAudit rendert jede geprüfte Seite mit Playwright bei vier festen Viewport-Breiten: 375px (Smartphone), 768px (Tablet), 1280px (kleiner Desktop) und 1920px (großer Desktop). Bei jeder Breite misst der Test, ob Elemente über den rechten Rand hinausragen (horizontaler Überlauf), ob interaktive Elemente die Mindestgröße von 24×24 CSS-Pixel unterschreiten (Tap-Ziele) und optional, ob der wesentliche Inhalt ohne Scrollen sichtbar ist (Inhalt unter dem Fold).

Dieser mehrstufige Ansatz bildet ab, wie echte Besucher Ihre Seite tatsächlich sehen — nicht nur, wie sie am Redaktionsrechner aussieht.

Welche Auswirkung hat es#

SEO: Google indexiert seit Jahren mobil zuerst — die mobile Darstellung Ihrer Seite ist die Grundlage für das Ranking, nicht die Desktop-Version. Layoutfehler, die nur auf schmalen Bildschirmen sichtbar sind, wirken sich damit direkt auf Ihre Sichtbarkeit aus.

Nutzer: Seitliches Scrollen wirkt unfertig und erschwert das Lesen. Eine verschobene Kernbotschaft kostet Aufmerksamkeit in den ersten Sekunden. Und Schaltflächen, die auf dem Handy nicht zuverlässig treffbar sind, führen dazu, dass Besucher danebentippen, die falsche Aktion auslösen oder ganz abbrechen — gerade bei Formularen, Warenkorb oder Kontaktaufnahme ein direkter Umsatzverlust.

Die wichtigsten Fehlerarten#

Horizontaler Überlauf — einzelne Elemente ragen über den Bildschirmrand hinaus und erzwingen seitliches Scrollen. Details und konkrete CSS-Fixes: Horizontales Scrollen beheben.
Tap-Ziel kleiner als 24×24 — Schaltflächen und Links sind zu klein oder zu dicht beieinander, um sie auf dem Touchscreen sicher zu treffen. Details: Tap-Ziele auf Mobil.
Wesentlicher Inhalt beginnt unterhalb des sichtbaren Bereichs — ein zu großer Hero- oder Consent-Banner-Bereich schiebt die Kernbotschaft aus dem ersten Blickfeld. Dieser Check ist optional zubuchbar und wird direkt auf diesem Pfeiler behandelt: Reduzieren Sie die Höhe von Hero, Navigation und Consent-Banner, damit die wichtigste Aussage ohne Scrollen sichtbar ist.

Wie beheben#

Für horizontalen Überlauf prüfen Sie zuerst, welches Element die Bildschirmbreite sprengt — häufige Ursachen sind Flex- oder Grid-Kinder ohne min-width: 0, Bilder ohne max-width: 100% oder feste Pixelbreiten statt fluider Einheiten. Ein einfacher Diagnosetrick in den Browser-Entwicklertools: * { outline: 1px solid red; } temporär auf alle Elemente anwenden, um den Übeltäter visuell zu identifizieren.

Für Tap-Ziele reicht meist zusätzliches Padding, um die Trefferfläche auf mindestens 24×24 CSS-Pixel zu vergrößern, ohne die sichtbare Größe des Elements zu verändern:

.icon-button {
  padding: 10px; /* vergrößert die Trefferfläche, Icon bleibt optisch klein */
}

Für Inhalt unter dem Fold reduzieren Sie die Höhe des Eingangsbereichs — etwa durch ein kompakteres Hero-Layout oder einen schmaleren Consent-Banner — und testen Sie das Ergebnis konsequent bei 375px Breite, der häufigsten mobilen Einstiegsbreite.

Diese Fixes sind CMS-unabhängig: Ob WordPress, TYPO3, Shopify oder ein selbstgebautes Frontend — die zugrunde liegenden CSS-Regeln lassen sich überall gleich anwenden.

Fazit#

Responsives Layout ist kein einmaliges Redesign-Projekt, sondern eine laufende Prüfaufgabe: Jede neue Komponente, jedes neue Bild und jeder neue Banner kann auf schmalen Bildschirmen brechen, ohne dass es am Desktop auffällt. EverAudit macht diese Prüfung auf vier Viewport-Breiten automatisch und zeigt Ihnen genau, wo Ihr Layout auf Mobilgeräten nachgibt.