Responsive Design zielt darauf ab, eine Website über eine Reihe von Ansichtsfensterbreiten und -ausrichtungen hinweg nutzbar zu halten. Beim Testen nur einer Desktop- und einer Telefonbreite können Überlauf-, Umbruch- und Navigationsprobleme zwischen diesen Punkten übersehen werden. Dieser browserbasierte Tester passt die Größe eines Sandbox-Iframes an voreingestellte oder benutzerdefinierte CSS-Abmessungen an und erleichtert so wiederholbare visuelle Überprüfungen. Es handelt sich um eine Hilfe zur Größenanpassung des Ansichtsfensters und nicht um einen Ersatz für Tests an realen Geräten, Browser-Entwicklertools oder Barrierefreiheitsprüfungen.
Auswählen und Testen von Haltepunkten
Haltepunkte sind Entscheidungen, die durch den Inhalt und das Layout einer Website getroffen werden, nicht durch universelle Gerätekategorien. Tailwind-, Bootstrap- und Material-Systeme verwenden unterschiedliche Schwellenwerte, und eine Site benötigt möglicherweise zusätzliche oder weniger Schwellenwerte. Testen Sie die durch das CSS des Projekts definierten Breiten sowie Zwischenwerte direkt unter und über jedem Schwellenwert. Überprüfen Sie bei jeder Breite die Navigation, die Spalten, den Textumbruch, die Bilder, die Formulare und den horizontalen Überlauf. Dieser Tester kann diese Ansichtsfensterprüfungen wiederholbar machen, identifiziert jedoch keine Haltepunkte und beurteilt nicht, ob ein Layout korrekt ist.
Voreinstellungen vs. benutzerdefinierte Ansichtsfenstertests
Voreinstellungen sind praktische benannte Breiten- und Höhenpaare für gängige Überprüfungsziele. Benutzerdefinierte Dimensionen sind besser, wenn das CSS eines Projekts bestimmte Haltepunkte verwendet oder wenn Sie einen Fehlerbericht reproduzieren müssen. Die Größe des Frames und des Iframes wird geändert, aber der Tester ändert nicht den Browser-Benutzeragenten, emuliert nicht den DPR eines echten Geräts, zeichnet seine Kerbe, stellt sichere Bereichseinsätze bereit, simuliert seine Tastatur und reproduziert nicht das Chrome des mobilen Browsers. Verwenden Sie die Browser-Geräteemulation und physische Geräte, wenn diese Verhaltensweisen wichtig sind, und verwenden Sie dann diesen Tester für schnelle Vergleiche der Darstellungsfenster.
Eine praktische, reaktionsfähige QA-Checkliste
Verwenden Sie diesen Tester als manuelle Checkliste: Laden Sie eine zulässige URL, überprüfen Sie schmale, mittlere und breite Breiten, drehen Sie mobile und Tablet-Ziele und überprüfen Sie Textumbruch, Bilder, Formulare, Navigation, Sticky-Elemente und horizontalen Überlauf. Ein Leer- oder Fehlerstatus kann bedeuten, dass das Ziel die Iframe-Einbettung blockiert. Es ist kein Beweis dafür, dass das Ziel selbst kaputt ist. Touch-Target-Größe, Tastaturzugriff, Fokussichtbarkeit, Screenreader-Verhalten und Probleme mit realen Geräten erfordern separate Browser- oder Hilfstechnologieprüfungen. Notieren Sie Breite, Höhe, Zoom, Browser und Ziel-URL, wenn Sie einen responsiven Fehler melden, damit eine andere Person ihn reproduzieren kann.