Responsive Oberflächen konzipieren
Ein responsives Konzept plant Layouts vom kleinsten Bildschirm aus, damit sie auf jedem Gerät funktionieren.
Ausgangslage
Ein responsives Konzept legt fest, wie sich Layout, Navigation und Inhalte auf Smartphone, Tablet und Desktop verhalten. Es entsteht vor dem Design und nicht als Nacharbeit in der Entwicklung.
Was das Konzept regelt
Inhaltspriorität: was auf dem Smartphone zuerst erscheint.
Layout: flexible Raster, die sich an den verfügbaren Platz anpassen.
Navigation: mit dem Daumen bedienbar und auf dem Desktop nicht überladen.
Bedienung: große Klickflächen, lesbare Schrift und passende Eingabetypen in Formularen.
Medien: Bilder in mehreren Größen und Formaten wie AVIF oder WebP.
Technik
Grundlage sind CSS Grid, Flexbox und Container Queries. Komponenten reagieren damit auf ihren eigenen Platz und nicht nur auf die Fensterbreite. Schriftgrößen und Abstände skalieren fließend. Über srcset und sizes lädt der Browser nur die Bildgröße, die er braucht. Das verbessert die Core Web Vitals.
Vorgehen
Klären, welche Geräte deine Nutzer verwenden und wofür.
Die wichtigsten Seitentypen zuerst für kleine Bildschirme skizzieren.
Für Tablet und Desktop erweitern und das Verhalten jeder Komponente festlegen.
Prototypen auf echten Geräten prüfen.
Statt drei getrennter Designs legen wir Regeln fest, nach denen sich jede Komponente anpasst.
Ergebnis
Design und Entwicklung arbeiten mit demselben Konzept. Neue Seiten und Module fügen sich ein, ohne dass jemand jedes Gerät einzeln nachbessert. Bei 400 % Zoom bleibt das Layout ohne horizontales Scrollen nutzbar, wie es die WCAG 2.2 im Kriterium „Reflow“ verlangt.