So prüfst du responsives Design

Eine Checkliste für responsives Design sollte zeigen, ob Menschen bei unterschiedlichen Bildschirmgrößen eine Aufgabe abschließen können. Ein aufgeräumter mobiler Screenshot ist ein nützlicher Beleg. Er zeigt aber nicht, ob das Menü schließt, ein Vergleich verständlich bleibt oder der Absenden-Button hinter der Tastatur verschwindet.

Beginne mit der Aufgabe und prüfe das Layout während ihrer Ausführung. Auf einer Marketingseite kann das heißen, das Angebot zu verstehen, Tarife zu vergleichen und den nächsten Schritt zu finden. In einer Produktoberfläche könnte es darum gehen, einen Datensatz zu finden, einen Wert zu ändern und das Ergebnis zu bestätigen. Verwende dieselbe Aufgabe bei verschiedenen Breiten. So erkennst du, welche Änderungen helfen und welche das Problem nur verlagern.

Bereite eine Seite vor, die Probleme sichtbar machen kann

Wähle eine Seite mit genug Vielfalt für eine aussagekräftige Prüfung. Eine fast leere Landingpage besteht vielleicht mühelos, während die Preisseite scheitert. Nimm eine Seite mit Navigation, einer umfangreichen Überschrift, einem Bild, wiederkehrenden Inhalten und mindestens einer wichtigen Aktion. Gibt es ein Formular oder eine Datentabelle, prüfe auch eine Seite mit diesem Muster.

Ersetze vor der Prüfung ungewöhnlich bequeme Beispieldaten. Eine Karte mit dem Titel „Team“ zeigt kaum dieselben Probleme wie „Regionaler Betrieb und Kundensupport“. Verwende realistische Beschreibungen, die längste gewöhnliche Navigationsbeschriftung und ein Bild mit einem klaren Motiv nahe einem Rand. Das sind Prüfdaten, keine absurden Inhalte, mit denen die Seite absichtlich zum Scheitern gebracht werden soll.

Halte fest, was möglich bleiben muss. Auf einer fiktiven Workshop-Buchungsseite sollten Besucher Datum und Ort verstehen, Termine vergleichen und eine Buchung beginnen können. Versteckt das schmale Layout aus Platzgründen den Ort, verliert es eine notwendige Information, auch wenn seine Komposition aufgeräumter wirkt.

Nutze Prüfpunkte und untersuche die Zwischenräume

Desktop-, Tablet- und Mobilvorschauen sind ein praktischer Einstieg. Sie bilden nicht alle Bedingungen ab, denen eine Seite begegnet. Ein veränderbares Browserfenster, ein Tablet im geteilten Bildschirm oder eine vergrößerte Seite können Breiten erzeugen, die keine Gerätevorgabe enthält.

Wähle einen schmalen, einen mittleren und einen breiten Prüfpunkt. Die genauen Zahlen sind weniger wichtig als die für deine Zielgruppe relevanten Bedingungen. Für einen ersten Durchgang könntest du etwa 360, 768 und 1440 CSS-Pixel ansehen und die Breite dazwischen langsam verändern.

Achte besonders auf Strukturwechsel. Der Header passt vielleicht am breiten Prüfpunkt bequem und klappt am schmalen korrekt ein, wird aber kurz vor dem Wechsel eng. Ein dreispaltiger Bereich braucht bei mittlerer Breite womöglich mehr Raum, als sein übergeordnetes Element gewährt. Schwierigkeiten treten oft vor einem Breakpoint auf, nicht genau an ihm.

Die Empfehlungen von web.dev zu responsivem Design raten dazu, Layoutwechsel nach den Inhaltsanforderungen statt nach benannten Geräten zu wählen. Halte deshalb die erste Breite fest, bei der eine Komponente nicht mehr angenehm funktioniert. Das liefert einen Grund für den Wechsel und eine sinnvolle Stelle für die Nachprüfung.

Eine nützliche Referenz: GOV.UK erhält die Leseaufgabe

Die GOV.UK-Empfehlungen zum Layout beginnen auf kleinen Bildschirmen einspaltig und empfehlen für viele breitere Seiten eine Lesespalte über zwei Drittel der Breite. Das offizielle Zwei-Drittel/Ein-Drittel-Beispiel zeigt, wie dieselben Inhalte bei weniger Platz zu einer vertikalen Abfolge werden.

Übernimm den Zusammenhang, nicht den Bruchteil. Die Haupterklärung bleibt zuerst, ergänzendes Material folgt. Eine vor der Zahlung notwendige rechtliche Bedingung ist auf deiner Seite nicht nachrangig, nur weil sie gut in eine Seitenleiste passt. Bestimme ihre Rolle, bevor du ein Layout kopierst, das ihr eine niedrigere Priorität gibt.

Daraus entsteht ein genauerer Test als „Die Spalten stehen untereinander“. Wähle einen Satz aus der ergänzenden Spalte und bestimme die Aktion, die er einschränkt. Kann jemand nach dem Stapeln die Aktion erreichen, ohne diesen Satz zu sehen? Dann kann die responsive Umsetzung geometrisch richtig und inhaltlich falsch sein. Verschiebe die Bedingung zusammen mit der Aktion oder mache ihre Abhängigkeit deutlich.

Ein zweiter Test ist die Tastaturnavigation. Eine visuelle Umordnung kann die Quellreihenfolge unverändert lassen. Scheint ein Bedienelement hinter einer Erklärung zu stehen, erhält aber vorher den Fokus, braucht die Prüfung Belege für Layout und Lesereihenfolge. Ein Screenshot allein löst diesen Widerspruch nicht.

Prüfe responsives Design anhand von Aufgaben

Nutze die folgenden Prüfungen als Ausgangspunkt und entferne Zeilen, die auf deiner Seite nicht vorkommen. Schreibe das erwartete Ergebnis vor der Prüfung auf. Sonst lässt sich ein gesehener Fehler leicht nachträglich rechtfertigen. Die Beispiele sind Prüfbedingungen, keine allgemeingültigen Breakpoint-Einstellungen.

Verdichte diese Beobachtungen nicht zu einer einzigen Bestehensquote. Eine abgeschnittene dekorative Bildunterschrift und eine unerreichbare Zahlungsaktion sind keine gleichwertigen Fehler. Behebe zuerst blockierte Aufgaben, dann falsche oder fehlende Informationen und anschließend Lesekomfort und visuelle Details. So kann ein kleines Team eine handhabbare Freigabeentscheidung treffen, ohne zu behaupten, eine unvollständige Prüfung belege Unterstützung für jedes Gerät.

Gehe die Seite in Benutzung durch

Navigation: öffnen, wählen, schließen, erneut öffnen

Öffne jedes Navigationselement, das sich mit dem Layout verändert. Ein Menüsymbol kann perfekt ausgerichtet sein und trotzdem eine unbenutzbare Fläche öffnen. Prüfe den offenen Zustand, wähle ein Ziel, schließe die Fläche und öffne sie erneut. Bei verschachtelter Navigation teste einen tieferen Eintrag, statt auf der ersten Ebene aufzuhören.

Im Workshopbeispiel könnte der breite Header Termine, Vortragende, Veranstaltungsort und Platz buchen zeigen. Die schmale Version verschiebt vielleicht die ersten drei Links in ein Menü. Prüfe, ob der Veranstaltungsort weiterhin vorhanden und lesbar ist und ob das Schließen zurück zur Seite führt, ohne eine transparente, blockierende Überlagerung zu hinterlassen.

Achte auf die Beziehung zwischen Menü und restlichem Bildschirm. Ein hohes Menü braucht eventuell eigenes Scrollen oder muss das Scrollen der Seite zulassen. Unabhängig vom Ansatz müssen letzter Eintrag und Schließen-Element erreichbar sein. Eine Fläche, die nur bei ausreichend hohem Viewport funktioniert, hat weiterhin ein responsives Problem.

Wiederhole die Aufgabe mit der Tastatur. Prüfe, ob der Layoutwechsel ein Bedienelement unerreichbar gemacht oder den aktuellen Fokus versteckt hat. Halte die genaue auslösende Abfolge fest, damit die Korrektur gezielt ansetzen kann.

Lesereihenfolge: Folge der mobilen Abfolge

Werden Spalten zu einem einzelnen Stapel, braucht die Lesereihenfolge eine neue Prüfung. Die Desktopversion kann auf räumliche Beziehungen bauen, die nun fehlen. Ein Preis neben einer Erklärung kann mehrere Bildschirme von ihr entfernt landen. Eine Bildunterschrift kann plötzlich zum nächsten statt zum vorherigen Bild zu gehören scheinen.

Lies die schmale Seite von oben nach unten, ohne das Desktoplayout heranzuziehen. Frage, worauf dich jeder Bereich als Nächstes vorbereitet. Bei einer Buchungsseite sollten Termindetails vor der erwarteten Auswahl kommen. Ein großes dekoratives Bild zwischen Auswahl und Erklärung kann die Aktion abgekoppelt wirken lassen.

Achte auf abwechselnde Desktopbereiche. Ein Abschnitt mit Bild links und Text rechts, gefolgt von Text links und Bild rechts, kann auf dem Smartphone uneinheitliche Reihenfolgen erzeugen, wenn die Umsetzung die Quelle einfach stapelt. Entscheide, ob ein Bild den Text einführt oder ihn anschließend illustriert. Erhalte diese Beziehung dort konsistent, wo Inhalte demselben Zweck dienen.

Überlauf: Kläre die Ursache, bevor du ihn versteckst

Scrolle durch die gesamte Seite und suche Inhalte, die ihren Container verlassen. Hinweise sind abgeschnittene Buttontexte, über den Bildschirm hinausragende Kartenränder und Footerlinks, die Nachbarinhalte verdrängen. Prüfe auch Überlagerungen und aufgeklappte Inhalte. Die ruhende Seite kann passen, während ein geöffnetes Element überläuft.

Unterscheide versehentlichen Überlauf von einem absichtlich scrollbaren Bereich. Eine breite Vergleichstabelle darf innerhalb ihres Bereichs horizontal scrollen. Eine ganze Seite, die wegen einer übergroßen Illustration seitlich wandert, ist ein anderes Problem. Ist horizontales Scrollen beabsichtigt, müssen Menschen weitere Inhalte bemerken und ihre Orientierung behalten können.

Eine globale Regel zum Verstecken von Überlauf ist noch keine fertige Reparatur. Sie kann den äußeren Rand säubern und dabei das verursachende Element abschneiden. Finde zuerst das Element und entscheide dann, ob Breite, Umbruch, Platzierung oder Container geändert werden müssen. Prüfe danach, ob nicht einfach nützliche Inhalte verschwunden sind.

Stell dir auf der Workshopseite eine Ticketkarte mit langem Veranstaltungsort vor. Die hilfreiche Korrektur kann sein, den Namen umbrechen und die Karte wachsen zu lassen. Alle Texte zu verkleinern würde ebenfalls Platz schaffen, aber die Lesbarkeit auch der Informationen verschlechtern, die das Problem nicht verursacht haben.

Prüfe bei jedem Bildausschnitt die Bedeutung

Ein Bild kann technisch in seinen Container passen und trotzdem nichts mehr vermitteln. Prüfe, was bei einer anderen Form sichtbar bleibt. Soll das Bild einen Eingang zeigen, muss dieser erkennbar bleiben. Erklärt es eine Funktion, darf der relevante Oberflächenausschnitt nicht ununterscheidbar klein werden.

Bei einem redaktionellen Foto lässt sich der Ausschnitt womöglich ändern, ohne das Motiv zu verlieren. Bei einem erklärenden Screenshot können abgeschnittene Beschriftungen die Erklärung entfernen. Beide Bilder brauchen unterschiedliche Entscheidungen. Prüfe den Zweck, bevor du zwischen engerem Ausschnitt, anderer Datei und einem größeren eigenen Bereich wählst.

Nutze den umgebenden Text als Kontrolle. Steht dort „Wähle den hervorgehobenen Termin“, die Markierung ist in der tatsächlichen Darstellungsgröße aber unsichtbar, unterstützt das Bild den Satz nicht mehr. Eine Nahaufnahme des betreffenden Elements kann hilfreicher sein als ein auf passende Breite verkleinerter Vollbild-Screenshot.

Prüfe die tatsächlich ausgelieferte Datei statt nur ihre Quelldimensionen. Eine hochauflösende Datei kann zu klein dargestellt unlesbar sein. Ein passend großes Bild kann unscharf wirken, wenn die falsche Variante geladen wird. Halte fest, welche Bedingung du gesehen hast. Das hilft bei der Entscheidung zwischen Layout- und Bildkorrektur.

Halte Entscheidungen und Bedienelemente zusammen

Ein responsives Layout muss Informationen mit der von ihnen beeinflussten Aktion verbunden halten. In einem Preisbereich bedeutet das, dass Tarifname, relevante Grenzen, Preis und Aktion als eine Wahl erkennbar bleiben. Im Buchungsformular muss der ausgewählte Termin klar sein, wenn die Person die abschließende Aktion erreicht.

Prüfe wiederholte Buttons genau. Drei identische „Weiter“-Beschriftungen sind leicht zu verwechseln, wenn ihre Karten visuell auseinanderfallen. Vielleicht brauchst du stärkere Gruppierung, klarere Tarifnamen oder eine aussagekräftigere Aktion. Beginne mit der kleinsten Änderung, die den Zusammenhang wiederherstellt, statt jedes Element schwer zu dekorieren.

Teste Bedienelemente mit umgebrochenen Beschriftungen. Ein zweizeiliger Button kann passen, wenn Innenabstand, Ausrichtung und Nachbarelemente stimmig bleiben. Entscheidend ist, ob die Aktion erkennbar und bequem bedienbar bleibt. Eine nach dem ersten Wort abgeschnittene Beschriftung ist gravierender als ein etwas höherer Button.

Beziehe fixierte Elemente ein. Eine feste Buchungsleiste kann die Hauptaktion verfügbar halten, aber Preisnotizen oder das letzte Formularfeld verdecken. Scrolle ganz nach unten, öffne einen aufklappbaren Bereich und fokussiere ein Feld. Das Element muss seinen Platz in diesen Zuständen rechtfertigen, nicht nur im ausgefeilten Einstiegsscreenshot.

Prüfe Formulare nach Zustandswechseln

Formulare verdienen einen eigenen Durchgang, weil Interaktionen die Inhaltsmenge verändern. Eine Fehlermeldung, eine gewählte Option oder eine Bestätigung kann zusätzliche Höhe erzeugen und Beziehungen zwischen Feldern verändern. Prüfe mit realistischen Eingaben und mindestens einem behebbaren Fehler statt nur mit leeren Kästen.

Öffne bei schmalen Ansichten nach Möglichkeit die Bildschirmtastatur auf einem echten Gerät. Prüfe, ob das aktive Feld sichtbar und die nächste Aktion erreichbar bleibt. Eine Desktopvorschau hilft beim Layout, belegt allein aber nicht, wie jeder mobile Browser Tastatur und Viewport behandelt.

Nutze längere Werte in Feldern, die sie regulär erlauben. Ein vollständiger Organisationsname, ein mehrteiliger Nachname oder eine lange E-Mail-Adresse kann abgeschnittene Inhalte zeigen, die ein kurzes Beispiel verbirgt. Es geht bei der visuellen Prüfung nicht darum, die Validierungsregeln zu verändern, sondern akzeptierte Eingaben verständlich darzustellen.

Prüfe nach einem Fehler, ob weiterhin klar ist, was korrigiert werden muss. Die Meldung darf nicht von ihrem Feld getrennt werden, weil ein anderer Bereich gewandert ist. Nutzt das Formular eine Übersicht, untersuche ihre Verbindung zum einzelnen Feld. Notiere, ob es um Layout, Formulierung, Fokusverhalten oder tatsächliche Validierung geht, damit die richtige Person ansetzen kann.

Trenne Platzprobleme von Inhaltsproblemen

Manche scheinbar responsiven Fehler entstehen durch unklare Inhalte statt durch Platzmangel. Ein Absatz, der die Überschrift wiederholt, verlängert die mobile Seite unnötig. Eine Reihe mit sechs Aktionen kann auf eine ungeklärte Priorität hinweisen. Frage vor dem Verdichten, ob die Inhalte eine klare Rolle haben.

Andere Fehler sind eindeutig Layoutprobleme. Wichtige Bedingungen sollten nicht entfernt werden, nur weil die Komponente zu starr ist. Eine Stornobedingung kann wesentlich sein, auch wenn sie die Komposition erschwert. Je nachdem, wann sie gebraucht wird, helfen eine bessere Platzierung, eine aufklappbare Erklärung oder mehr vertikaler Raum.

Eine nützliche Frage ist, ob die Information bei jeder Breite verfügbar sein sollte. Wenn ja, arbeite an der Darstellung. Hängt ihre Relevanz tatsächlich von Aufgabe oder Zustand ab, kann bedingtes Anzeigen passen. Breite allein ist ein schwacher Grund, Informationen zu entfernen, die auf jedem Gerät dieselbe Entscheidung unterstützen.

MDNs Überblick zu responsivem Design beschreibt das Zusammenspiel von flexiblem Layout, Medien, Typografie und Viewportverhalten. Das hilft bei der Zuweisung von Korrekturen: Ein einzelner Fehler auf kleinen Bildschirmen heißt nicht, dass die ganze Seite neu erzeugt werden muss.

Formuliere kleine, überprüfbare Änderungen

Konzentriere jeden Punkt auf einen Fehler. Beschreibe Komponente, Bedingung und erwartetes Verhalten. Zum Beispiel: „Bei der mittleren Vorschaubreite überlagert Veranstaltungsort die Aktion Platz buchen. Klappe diesen Header ein, bevor sich beide berühren. Erhalte Beschriftungen und Buchungsziel.“ Das ist hilfreicher als „Verbessere das Tablet-Layout“.

In OpenDesign können Desktop-, Tablet- und Mobilvorschauen den ersten Vergleich liefern. Nutze Kommentare oder sende die Beobachtung in den Chat und prüfe anschließend das aktualisierte HTML. Manuelle Änderungen an unterstützten Texten, Links, Bildern und Stilen helfen bei klar umrissenen Anpassungen.

Benenne bei Strukturänderungen, was stabil bleiben soll. Braucht der Header ein anderes Layout, halte währenddessen Inhalt und Ziele fest. Braucht ein Bild einen besseren Ausschnitt, ändere nicht gleichzeitig den umgebenden Text. Konstante Variablen erleichtern die Beurteilung, ob die Änderung das dokumentierte Problem löst.

Teste zuerst die fehlerhafte Bedingung erneut, dann benachbarte Breiten und verwandte Zustände. Eine Anpassung kann das Menü bei einer Breite passend machen und den Header bei einer anderen unnötig beengen. Ein höherer Button kann eine Karte mit fester Höhe entlarven. Diese kurze Rückprüfung gehört zur Korrektur und ist keine optionale Politur.

Schließe mit einer brauchbaren Prüfnotiz ab

Bevor du die responsive Prüfung als abgeschlossen bezeichnest, wiederhole die Hauptaufgabe an jedem Prüfpunkt vollständig. Lies die Inhalte, öffne die Bedienelemente und erreiche das Ergebnis. Prüfe zusätzlich mindestens eine Zwischenbreite mit Layoutwechsel. Sichere Belege wichtiger offener oder aufgeklappter Zustände, nicht nur drei hübsche ruhende Ansichten.

Die abschließende Notiz darf kurz sein: geprüfte Seiten, Breiten und Browser, erfolgreich ausgeführte Aufgaben und ungeprüfte Bedingungen. War kein echtes mobiles Gerät verfügbar, sage das. Scrollt eine Tabelle absichtlich seitwärts, halte die Entscheidung fest, damit die nächste Person sie nicht für einen übersehenen Fehler hält.

Priorisiere offene Probleme danach, was sie verhindern. Eine versteckte Aktion oder unlesbare Voraussetzung kann die Aufgabe blockieren. Eine unbeholfene, aber lesbare Überschrift ist meist nachrangig. So bekommt die nächste Überarbeitung eine sinnvolle Reihenfolge, ohne visuelle Qualität für unwichtig zu erklären. Kleine Details dürfen nur nicht die Probleme verdecken, die die Nutzung verhindern.