Websites reagieren auf mehr als Bildschirmbreite

Responsive Layout ist die Basis

Breakpoints ordnen Inhalte neu; Anpassung betrifft auch Eingabeart, Lesereihenfolge und Informationsmenge. Eine Desktop-Navigation kann mobil fokussierter werden, während Tabellen wiederholte Beschriftungen benötigen.

Beginnen Sie mit den Jobs, die jede Seite in unterschiedlichen Breiten unterstützt. Ein Telefonbesucher benötigt möglicherweise eine Wegbeschreibung, einen Preis oder ein kurzes Anfrageformular, während ein Desktop-Besucher möglicherweise mehrere Optionen vergleicht. Beide sollten die gleichen wesentlichen Informationen erhalten, aber Kontrollen und unterstützende Details können für den verfügbaren Platz und die Eingabemethode arrangiert werden.

Die Responsive Acceptance sollte mehr als drei Screenshots umfassen. Testen Sie schmale und breite Telefone, gezoomten Desktop, Querformat und mittlere Breiten, bei denen Überschriften oder Navigation umbrochen werden. Verwenden Sie endgültige Übersetzungen und echte Validierungsnachrichten. Eine Komponente passt möglicherweise bei 390 Pixeln, schlägt jedoch bei 430 Pixeln fehl, weil eine Beschriftung in einer Zeile bleibt oder eine Karte die Spaltenanzahl ändert. Überprüfen Sie die Bereiche zwischen benannten Haltepunkten, nicht nur die Endpunkte.

Priorität ist mehr als Spalten stapeln

Touch, Tastatur und Zeigerbedienung im selben Komponentensystem berücksichtigen.

Die wichtigste Information muss über Größen hinweg erkennbar bleiben. Rutscht eine primäre Aktion mobil hinter mehrere Nebenabschnitte, verändert sich der Weg trotz technisch passendem Layout.

Tabellen, Filter und mehrstufige Formulare verdienen eigene reaktionsfähige Entscheidungen. Durch das Verkleinern einer Desktop-Komponente werden häufig Beschriftungen ausgeblendet oder es entsteht ein horizontaler Bildlauf. Eine mobile Version kann bei Bedarf Kontext wiederholen, verwandte Felder gruppieren oder Details anzeigen, vorausgesetzt, die zugrunde liegenden Informationen und verfügbaren Aktionen bleiben konsistent.

Die Lesereihenfolge muss logisch bleiben, wenn die Spalten ausgeblendet werden. Die visuelle Platzierung auf dem Desktop kann von der Quellreihenfolge abweichen, was Auswirkungen auf Tastaturen und Bildschirmleseprogramme hat. Überprüfen Sie die DOM-Sequenz, die Fokusbewegung und die Ankündigung erweiterter Inhalte. Wiederholen Sie die Beschriftungen, wenn ein Vergleich gestapelt wird. Eine kompakte mobile Präsentation kann sekundäre Erklärungen hinter einer absichtlichen Kontrolle verbergen, wesentliche Preis-, Umfangs- oder Fehlerinformationen sollten jedoch ohne eine versteckte Geste verfügbar bleiben.

Navigation für Touch, Tastatur und Pointer

Die Inhaltshierarchie beibehalten, auch wenn Navigation und Layout wechseln.

Touch-Ziele brauchen Platz, Tastaturnutzer eine sichtbare Fokusfolge und Hover-Funktionen eine Alternative. Diese Eingabearten gehören in die Abnahme.

Tastatur- und Berührungsprüfungen zeigen unterschiedliche Fehler. Menüs müssen geöffnet bleiben, während sich der Fokus durch sie bewegt, Dialoge benötigen eine vorhersehbare Schließaktion und Steuerelemente benötigen Beschriftungen, die auch ohne Mausklick verständlich bleiben. Das Testen dieser Verhaltensweisen auf kompletten Seitenreisen ist sinnvoller als das Überprüfen isolierter Komponenten in einem Katalog.

Die Eingabemethode ändert das Interaktionsdesign. Hover kann Feedback für Zeigerbenutzer hinzufügen, es kann jedoch nicht die einzige Möglichkeit sein, die Navigation zu öffnen oder erforderliche Informationen anzuzeigen. Geben Sie den Touch-Steuerelementen genügend Abstand, behalten Sie den sichtbaren Tastaturfokus bei und lassen Sie die Menüs geöffnet, während sich der Fokus durch ihre Elemente bewegt. Testen Sie Dialoge und Schubladen gegebenenfalls mit Escape, externen Klicks und der Browser-Zurück-Aktion. Diese Verhaltensweisen erfordern eine schriftliche Akzeptanz, keine visuelle Schlussfolgerung.

Komplette Wege mit echten Inhalten und Übersetzungen testen.

Echte Texte zeigen Probleme, die Platzhalter verdecken. Längere Übersetzungen, Fehlermeldungen, leere Zustände und Produktnamen werden vor dem Start in vollständigen Wegen geprüft.

Navigation und Inhalt werden mit finalen Texten auf Desktop und Mobilgeräten getestet.

Die Inhaltspriorität sollte der mobilen Aufgabe folgen, ohne ein anderes Angebot zu erstellen. Wenn die Kontaktdaten auf einem Telefon nach oben verschoben werden, benötigt die Desktop-Version immer noch eine klare Route. Wenn ein Vergleich zu einem Akkordeon wird, behalten Sie Überschriften und Status bei. Überprüfen Sie Analysen oder Belege, sofern verfügbar, und dokumentieren Sie dann bewusste Unterschiede. Adaptives Design funktioniert, wenn jede Präsentation nutzbar und erkennbar Teil desselben Informationssystems ist.