Responsive Design bedeutet, dass sich die Darstellung einer Website dynamisch an Bildschirmgröße und Gerät anpasst. Layout, Größenverhältnisse und Navigation ordnen sich neu, die Inhalte bleiben dabei vollständig erhalten. Eine gekürzte Mobilversion ist kein responsives Design, sondern ein Ausschluss.
Responsive Design ist keine reine Mobilfrage. Wer am Desktop auf 400 Prozent zoomt, erzeugt technisch denselben schmalen Anzeigebereich wie ein Smartphone. Eine Website ohne funktionierendes responsives Layout wird dadurch für Menschen mit Sehbeeinträchtigung auch am großen Bildschirm unbenutzbar.
Die maßgeblichen Erfolgskriterien der WCAG:
1.4.10 Reflow (Level AA): Darstellung bei 320 CSS-Pixeln Breite ohne horizontales Scrollen — das entspricht 400 Prozent Zoom
1.4.4 Textgröße ändern (Level AA): Vergrößerung des Textes auf 200 Prozent ohne Funktions- oder Inhaltsverlust
1.3.4 Bildschirmausrichtung (Level AA): Hoch- oder Querformat dürfen nicht erzwungen werden
2.5.8 Zielgröße (Minimum) (Level AA): Bedienelemente mindestens 24 × 24 CSS-Pixel groß, kleinere mit entsprechendem Abstand. Für reine Touch-Bedienung sind 44 × 44 Pixel empfehlenswert, das ist allerdings erst der AAA-Wert
Bei der technischen Umsetzung sollten beachtet werden:
Flexible Layouts statt fixer Breiten
Media Queries für Breakpoints, definiert in em statt px. Sonst greift der Umbruch nicht, wenn jemand die Basis-Schriftgröße im Browser erhöht
Container Queries für einzelne Komponenten: Sie reagieren auf den umgebenden Container statt auf das Browserfenster und sind damit für wiederverwendbare Bauteile die passendere Wahl
Relative Maßeinheiten für Schriftgrößen, also rem oder em.
Kontrastverhältnisse bleiben bei allen Viewport-Größen erhalten, auch bei Text über Bildern, die auf kleinen Bildschirmen anders beschnitten werden
Wenn sich Spalten und Container bei kleinen Viewports umsortieren, verschiebt sich nur die visuelle Anordnung — die Reihenfolge im Quelltext bleibt unverändert. Der Tastaturfokus folgt weiterhin dem Quelltext. Wo beides auseinanderläuft, springt der Fokus für sehende Tastaturnutzende scheinbar wahllos über die Seite (2.4.3 Fokus-Reihenfolge). Näheres im Eintrag zu CSS.
