Responsive Websites
richtig prüfen

Was auf einem kleinen Bildschirm funktionieren muss

Die Responsive-Prüfung beantwortet eine konkrete Frage: Können Besucher das Angebot bei ihrer Fensterbreite, Zoomstufe und Eingabemethode lesen und die gewünschte Handlung ausführen? Im Shop geht es um Produktsuche und Bestellung, auf einer B2B-Website um technische Angaben und eine Anfrage, bei einem Artikel um Lesen und das Öffnen eines Links. Eine hübsche Verkleinerung des ersten Bildschirms beweist noch nicht, dass diese Aufgaben möglich sind.

Beginnen Sie mit drei Ergebnissen: einer Liste der geprüften Seiten und Bedingungen, reproduzierbaren Fehlern und der Bestätigung von Korrekturen unter denselben Bedingungen. So erhält der Entwickler eine überprüfbare Aufgabe und der Auftraggeber weiß, was abgenommen wurde. Ein Screenshot ohne URL, Breite und Formularzustand genügt dafür nicht.

Klären Sie, was sich auf dem Telefon ändert

„Mobile Version“ ist ein Sammelbegriff. Dahinter können ein responsives Template, eine eigene URL oder andere vom Server ausgelieferte Inhalte stehen. Davon hängt ab, was Sie vergleichen müssen. Notieren Sie die Adresse vor und nach dem Öffnen auf dem Telefon und prüfen Sie auch den Direktlink auf eine Unterseite.

Google beschreibt diese Varianten in seinen Empfehlungen für mobile Websites. Responsive Design vereinfacht die Pflege, doch eine bestehende m-Subdomain darf nicht einfach gelöscht werden: Zunächst brauchen Sie eine Seitenzuordnung und einen Migrationsplan. Eine Produktseite, die zur mobilen Startseite führt, ist ein eigener Fehler, den eine geänderte Schriftgröße nicht behebt.

Erstellen Sie eine Matrix aus Seiten, Bildschirmen und Zuständen

Wählen Sie je ein Beispiel pro Template: Startseite, Leistung, Kategorie, Produkt, Artikel, Kontakt, Suche und Fehlerseite. Ergänzen Sie schwierige Fälle: längste Überschrift, viele technische Angaben, leeres Ergebnis, mehrere Formularfehler und eine Galerie mit Hochformatfoto. Bei kleinen Websites lohnt sich die Prüfung aller Seiten.

Die folgenden Breiten sind ein Ausgangspunkt und kein Nachweis für die Unterstützung aller Geräte. Ergänzen Sie Größen aus Zielgruppendaten und Anforderungen. Prüfen Sie die Breite des Seitenbereichs in CSS-Pixeln: Die physische Displayauflösung eines Telefons kann deutlich höher sein.

Erfassen Sie die Zustände gesondert: Menü geschlossen und geöffnet, Cookie-Hinweis sichtbar, Chat ausgeklappt, Feld aktiv, Formular mit Fehler und erfolgreicher Abschluss. Ein Fehler zeigt sich oft erst beim Zusammenspiel zweier Elemente, etwa Chat und fixierter Schaltfläche.

Wählen Sie das Werkzeug passend zur Frage

Suchen Sie nicht nach dem früheren Google Mobile-Friendly Test: Google kündigte dessen Einstellung zusammen mit dem Bericht „Nutzerfreundlichkeit auf Mobilgeräten“ ab Dezember 2023 an. Die offizielle Mitteilung erläutert die Änderung. Die mobile Nutzbarkeit muss weiterhin geprüft werden; die alte Tool-Adresse ist jedoch kein gültiger Abnahmeschritt mehr.

So prüfen Sie eine Seite im Browser

1. Öffnen Sie die gewünschte URL in Chrome und die Entwicklertools. Aktivieren Sie die Schaltfläche Toggle device toolbar.
2. Wählen Sie den Modus Responsive und geben Sie die erste Breite aus der Matrix ein. Ändern Sie tatsächlich die Seitenbreite, nicht nur die optische Skalierung der Vorschau.
3. Laden Sie die Seite neu und prüfen Sie sie bis zum Footer, einschließlich Tabellen und Bildern.
4. Öffnen Sie Menü, Formular, Auswahllisten und weitere Zustände. Notieren Sie, welche Handlung das Problem ausgelöst hat.
5. Verändern Sie die Breite stufenlos zwischen den Prüfpunkten. Ermitteln Sie den Wechsel der Rasterstruktur und prüfen Sie knapp darunter und darüber.
6. Sichern Sie Screenshot und Parameter. Wiederholen Sie die Prüfung im vereinbarten Browser auf einem Telefon.

Ein Fehler bei 801 px bleibt unentdeckt, wenn Sie nur 390 und 1440 px prüfen. Vergleichen Sie außerdem zwei Fälle: Öffnen in einem bereits schmalen Fenster und Verkleinern nach dem Laden. Ein Unterschied deutet auf eine Abhängigkeit vom Anfangszustand hin.

In der Device-Mode-Dokumentation finden Sie Einstellungen für Breite, Pixeldichte und Netzwerkbegrenzung. Die Auswahl eines Modellnamens startet kein echtes iOS oder Android; die abschließende Bestätigung erfordert das entsprechende Gerät.

Überlauf und verlorene Elemente finden

Versuchen Sie, die gesamte Seite seitlich zu verschieben. Liegen normaler Text oder Teile eines Formulars außerhalb des rechten Rands, suchen Sie das Element, das das Dokument verbreitert. Häufige Ursachen sind Karten mit fester Breite, lange Links, Mindestbreiten von Rasterspalten, eingebettete Widgets oder Tabellen. Die Ursache zu beheben ist wichtiger, als das Scrollen der gesamten Seite zu verbieten.

Beheben Sie den Fehler nicht allein mit overflow-x:hidden auf body: Die Scrollleiste verschwindet, möglicherweise aber auch ein Preis oder eine Schaltfläche. Eine komplexe Tabelle darf innerhalb eines eigenen Containers scrollen. Besucher müssen erkennen können, dass die Tabelle weitergeht; erste und letzte Spalte müssen erreichbar bleiben.

Prüfen Sie lange Namen, verschachtelte Listen, Bilder ohne Beschriftung und Überschriften mit manuellen Umbrüchen. Feste Höhen dürfen Text nicht abschneiden. Fotos dürfen bewusst beschnitten sein. Wichtige Diagramme oder Oberflächen müssen jedoch vollständig bleiben; vermeiden Sie dort ein ungewolltes object-fit:cover.

Zoom, Schaltflächen und Menüs prüfen

Erhöhen Sie Browserzoom und Textgröße in den verfügbaren Einstellungen. Das Menü muss sich öffnen lassen, Überschriften dürfen nicht hinter dem Kopfbereich verschwinden und Text darf Nachbarblöcke nicht überlagern. Ein Zoomverbot im Viewport löst das Problem kleiner Schrift nicht. Die Parameter erläutert die MDN-Referenz.

Für Entwickler sieht eine grundlegende Angabe meist so aus; ihr Vorhandensein bestätigt noch nicht die Qualität des gesamten Layouts:

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

Das Kriterium WCAG Reflow behandelt den Erhalt von Inhalten bei einer Breite von umgerechnet 320 CSS px. Normaler vertikal gelesener Text darf kein Scrollen in zwei Richtungen erfordern. Für Inhalte mit notwendiger zweidimensionaler Struktur, etwa komplexe Tabellen oder Karten, gelten Ausnahmen.

Prüfen Sie die anklickbare Fläche, nicht nur das gezeichnete Symbol. WCAG 2.2, Kriterium 2.5.8 nennt mindestens 24×24 CSS px mit festgelegten Ausnahmen, darunter Abstände zwischen Zielen und Links im Fließtext. Für wichtige Schaltflächen können Sie einen großzügigeren Projektwert vereinbaren, etwa 44–48 px. Das bedeutet nicht, dass jeder Textlink diese Höhe haben muss.

Prüfen Sie lange Bereichslisten, Unterebenen, das Schließen des Menüs und die Rückkehr zur Seite. Gehen Sie mit Tab durch die Elemente: Der Fokus muss sichtbar bleiben, und ein offener Dialog darf die Orientierung über die Bedienung nicht erschweren. Wiederholen Sie die wichtigsten Schritte anschließend per Berührung, ohne Hinweise beim Überfahren mit der Maus.

Formular bei geöffneter Tastatur prüfen

Beginnen Sie auf dem Telefon mit dem Ausgangszustand der Seite. Öffnen Sie das Formular, wählen Sie ein Feld, geben Sie Daten ein, korrigieren Sie einen Fehler und kehren Sie zum vorherigen Feld zurück. Prüfen Sie, ob die Tastatur aktives Feld, Fehlermeldung oder Absenden verdeckt. Testen Sie Einfügen und Autofill: Die Telefonnummernmaske darf einen gültigen Wert nicht beschädigen.

Drehen Sie das Gerät und wiederholen Sie den Ablauf. Eine gewöhnliche Website darf keine ausschließliche Hochformatnutzung verlangen, damit ein Formular erreichbar ist. Das entspricht dem Zweck des WCAG-Kriteriums zur Ausrichtung; spezielle Oberflächen, bei denen die Ausrichtung für den Zweck erforderlich ist, werden gesondert betrachtet.

Prüfen Sie nicht nur erfolgreiches Ausfüllen, sondern auch fehlende Pflichtangaben, Fehlerkorrektur und langsame Antworten. Während des Sendens muss der Zustand erkennbar sein; die Bestätigung muss dort auffallen, wo die Handlung beendet wurde. Erfolg in der Oberfläche und Eingang der Anfrage beim Team werden getrennt geprüft.

Seite mit allen Widgets prüfen

Prüfen Sie den Zustand für neue Besucher: Cookie-Hinweis, fixierter Kopfbereich, Chat, Anrufschaltfläche und Abo-Angebot können gleichzeitig erscheinen. Auf einem niedrigen Bildschirm bleibt weniger Platz; mit geöffneter Tastatur ändert sich die Situation erneut.

Öffnen Sie jedes Fenster, finden Sie die Schließfunktion und kehren Sie zur Hauptaufgabe zurück. Nach dem Schließen muss das Scrollen wieder funktionieren. Prüfen Sie das Element am unteren Rand bei sichtbarer und ausgeblendeter Browserleiste. Benennen Sie das Konfliktpaar, etwa „Chat verdeckt Absenden“, statt „zu viel Werbung“.

Wählen Sie die Lösung nach dem Zweck der Elemente: Position, Größe, Einblendbedingungen oder Reihenfolge ändern. Blenden Sie erforderliche Informationen nicht pauschal aus und schalten Sie hilfreiche Kontaktkanäle nicht automatisch ab. Klären Sie zuerst, welche Handlung in welchem Zustand blockiert wird.

Die Oberfläche darf sich nicht unter dem Finger verschieben

Öffnen Sie die Seite bei begrenzter Verbindung und beobachten Sie den ersten Bildschirm. Springt eine Schaltfläche nach dem Laden von Titelbild oder Schrift, ist das ein eigener Stabilitätsfehler. Maße von Medien und Platz für eingefügte Blöcke müssen vor dem Laden vorgesehen sein. Prüfen Sie nach der Korrektur dieselbe Seite mit leerem Cache und beim erneuten Aufruf.

In PageSpeed Insights prüfen Sie die konkrete URL und beide Reiter. Kontrollieren Sie bei Bildern die tatsächlich ausgewählte Datei: Ein riesiges Original in einem kleinen Block verbraucht unnötig Daten. Der MDN-Leitfaden zu responsiven Bildern erklärt den Zweck von srcset und sizes. Die angegebene Breite muss dem tatsächlichen Platz des Bildes entsprechen.

Die „guten“ Core-Web-Vitals-Grenzwerte liegen bei LCP bis 2,5 Sekunden, INP bis 200 ms und CLS bis 0,1 am 75. Perzentil realer Besuche, getrennt nach Gerätetyp. Das erläutert die Web-Vitals-Dokumentation. Ein Labordurchlauf hilft bei der Ursachensuche, entspricht aber keinem Verlauf realer Besuche. Ohne Felddaten lässt sich das tatsächliche Nutzererlebnis nicht als bestätigt ausweisen.

Auch 100 Punkte prüfen nicht alle geöffneten Menüs, Tastaturzustände und Formularfehler. Sichern Sie den Bericht mit Datum, URL und Gerät und schließen Sie dann den manuellen Ablauf ab. Neue Messungen sind nach Änderungen oder zur Bewertung der Streuung sinnvoll; nur das beste Ergebnis auszuwählen und andere zu verbergen ist keine gute Abnahmegrundlage.

Inhalte auf mobilen und breiten Bildschirmen vergleichen

Prüfen Sie Haupttexte, Überschriften, technische Angaben, Preise, Links und Illustrationen. In einem kompakten Layout können Informationen in Reiter oder aufklappbare Blöcke wandern; sie müssen erreichbar sein und die nötige Antwort enthalten. Löschen Sie nicht die halbe Beschreibung, nur um die Bildschirmansicht zu verkürzen.

Google nutzt mobile Inhalte für Indexierung und Ranking. Die offiziellen Empfehlungen betonen gleichwertige Inhalte, Ressourcenzugriff und konsistente Metadaten. Ein Akkordeon bedeutet an sich keinen Inhaltsverlust für die Suche. Anders ist es bei Haupttext, der erst nach einer Nutzeraktion lädt: Der Crawler erhält ihn möglicherweise nicht.

Dokumentieren Sie bei einer Abweichung den genauen Inhalt und seine Ladeweise. Prüfen Sie bei separaten mobilen URLs, ob der Wechsel zur passenden Seite statt zur Startseite führt. Die Erläuterung zu Weiterleitungen und die Anleitung zur Prüfung der Indexierung helfen, Darstellungsfehler von Zugriffsproblemen der Suchmaschinen zu unterscheiden.

Versprechen Sie nach einer einzelnen Responsive-Korrektur keinen bestimmten prozentualen Rankingzuwachs. Bestätigen Sie zuerst die Behebung und beobachten Sie danach erneutes Crawling, Inhaltszugänglichkeit und Geschäftskennzahlen. Die Darstellung ist nur ein Teil der Arbeit.

Fehler reproduzierbar beschreiben

Jede Aufgabe braucht URL, Gerät und Browser, Breite, Anfangszustand, Handlungsschritte sowie tatsächliches und erwartetes Ergebnis. Fügen Sie einen Screenshot oder eine kurze Bildschirmaufnahme hinzu. Tritt das Problem unregelmäßig auf, nennen Sie Häufigkeit und Bedingungen statt eines unbestimmten „manchmal“.

Beheben Sie zuerst unzugängliche Inhalte und blockierte Handlungen. Danach folgen erhebliche Lese-, Lade- und Stabilitätsprobleme, anschließend optische Abweichungen ohne Einfluss auf den Ablauf. Stimmen Sie die Reihenfolge mit der Produktverantwortung nach tatsächlicher Auswirkung ab, nicht nach Bequemlichkeit der Korrektur.

Prüfen Sie nach Änderungen an gemeinsamen Komponenten alle Templates, die sie verwenden. Eine geänderte Breite der Kopfbereich-Schaltfläche kann Menü, Nutzerkonto und Tabletansicht beeinflussen. Sichern Sie vor größeren Änderungen die alte Version und legen Sie einen Rückweg fest.

Checkliste zum Abschluss der Prüfung

Häkchen helfen beim Durchgehen der Liste, ersetzen aber keinen Bericht mit Nachweisen. Diese Markierungen werden uns nicht übermittelt und können beim Neuladen verschwinden. Halten Sie das Ergebnis in Ihrem Dokument fest: Was ist abgenommen, was bleibt offen, wer ist verantwortlich und wann wird erneut geprüft?

Vergleichen Sie bei der Analyse nach dem Start dieselben Trafficquellen, Zielseiten und Zeiträume. Eine niedrige mobile Conversion ist Anlass zur Untersuchung, keine fertige Diagnose. Für Verbesserungen der Oberfläche nutzen Sie UX/UI-Design; für Umsetzung und erneute Prüfung nutzen Sie technische Weiterentwicklung der Website; Suchthemen gehören zur Suchmaschinenoptimierung.

Häufige Fragen zur Responsive-Prüfung