Responsive Design 2026: Über Mobile-First hinaus

Kurz gefasst: Mobile-First bleibt ein guter Ausgangspunkt, beschreibt aber nur einen Teil von Responsive Design. Moderne Oberflächen reagieren auf den Platz, den eine Komponente tatsächlich hat (Container Queries), auf die Eingabeart (Touch, Maus, Tastatur) und auf Nutzerpräferenzen wie dunkles Farbschema oder reduzierte Bewegung. Mit den CSS-Werkzeugen, die heute in allen aktuellen Browsern verfügbar sind, lässt sich das ohne Tricks umsetzen.

Was Mobile-First richtig macht, und wo es aufhört

Mobile-First heißt, das Layout zuerst für kleine Bildschirme zu entwerfen und dann für größere zu erweitern. Das zwingt zur Konzentration auf das Wesentliche und führt meist zu schlankerem Code. Daran hat sich nichts geändert.

Die Annahme dahinter war allerdings, dass sich Geräte gut nach Bildschirmbreite einteilen lassen: Smartphone, Tablet, Desktop. Diese Einteilung passt immer schlechter. Faltbare Smartphones wechseln ihre Größe im Betrieb, Tablets werden mit Tastatur und Trackpad genutzt, Fenster auf großen Monitoren sind oft schmal, und dieselbe Komponente steht einmal in einer breiten Hauptspalte und einmal in einer engen Seitenleiste.

Container Queries: Komponenten, die ihren Platz kennen

Media Queries fragen die Breite des Viewports ab. Container Queries fragen die Breite des umgebenden Elements ab. Damit passt sich eine Produktkarte an den Platz an, den sie wirklich hat, egal ob sie im Raster, im Slider oder in der Seitenleiste steckt. Container Queries werden seit 2023 von allen großen Browsern unterstützt.

Für Teams mit einem Designsystem ist das ein großer Fortschritt. Komponenten werden wirklich wiederverwendbar, weil sie nicht mehr wissen müssen, auf welcher Seite sie landen. Die globalen Breakpoints bleiben für das Seitenlayout zuständig, die Komponenten regeln ihr Innenleben selbst.

Fließende Typografie und Abstände

Statt Schriftgrößen an festen Breakpoints sprunghaft zu ändern, skalieren sie mit der CSS-Funktion clamp() stufenlos zwischen einem Minimum und einem Maximum. Dasselbe gilt für Abstände. Das Ergebnis wirkt auf jeder Breite stimmig und braucht weniger Media Queries.

Wichtig dabei: Die Werte sollten auf rem aufbauen, damit Nutzer, die im Browser eine größere Schrift eingestellt haben, diese auch bekommen. Eine reine Skalierung über Viewport-Einheiten würde diese Einstellung aushebeln.

Eingabeart und Nutzerpräferenzen berücksichtigen

Touch, Maus und Tastatur

Die Media Features pointer und hover zeigen, ob ein Gerät präzise zeigen und schweben kann. Auf Touch-Geräten brauchen Bedienelemente ausreichend große Trefferflächen, und Inhalte dürfen nicht nur bei Hover erreichbar sein. WCAG 2.2 legt als Mindestgröße für Zielbereiche 24 mal 24 CSS-Pixel fest, für komfortable Touch-Bedienung sind größere Flächen sinnvoll. Tastaturnutzer brauchen sichtbare Fokuszustände auf jedem Gerät.

Farbschema, Bewegung und Kontrast

Mit prefers-color-scheme reagiert eine Oberfläche auf das dunkle oder helle Farbschema des Systems, mit prefers-reduced-motion auf den Wunsch nach weniger Animation. prefers-contrast zeigt an, dass jemand mehr Kontrast braucht. Diese Präferenzen gehören zu einem zeitgemäßen Responsive Design ebenso wie die Bildschirmbreite. Wer hier sauber arbeitet, erfüllt gleichzeitig viele Anforderungen an Barrierefreiheit im Web.

Technische Details, die oft vergessen werden

Viewport-Höhe auf Mobilgeräten

Die klassische Einheit 100vh ist auf Smartphones unzuverlässig, weil die Adressleiste ein- und ausfährt. Die neueren Einheiten dvh, svh und lvh lösen das Problem und werden breit unterstützt.

Responsive Bilder

Mit srcset und sizes lädt der Browser die passende Bildgröße, mit dem picture-Element können Sie je nach Format oder Ausschnitt unterschiedliche Bilder ausliefern. Das spart Datenvolumen auf dem Smartphone und verbessert die Ladezeit spürbar.

Testen auf echten Geräten

Die Gerätesimulation im Browser ist nützlich, ersetzt aber keine echten Geräte. Touch-Verhalten, Tastaturen auf dem Bildschirm und die Performance auf einem Mittelklasse-Smartphone zeigen sich nur dort. Welche Bedienmuster auf Mobilgeräten gut funktionieren, beschreibt unser Beitrag zu mobilen UX-Mustern.

Häufige Fragen (FAQ)

Ist Mobile-First 2026 noch sinnvoll?

Ja, als Arbeitsweise für Layout und Priorisierung von Inhalten. Ergänzen Sie es um Container Queries für Komponenten und um Media Features für Eingabeart und Nutzerpräferenzen. Mobile-First allein deckt die heutige Gerätevielfalt nicht mehr vollständig ab.

Können wir Container Queries schon ohne Bedenken einsetzen?

Für aktuelle Browser ja. Alle großen Browser unterstützen sie seit 2023. Wenn Ihre Zielgruppe nachweislich sehr alte Browser nutzt, planen Sie ein einfaches Fallback-Layout, das ohne Container Queries funktioniert.

Wie viele Breakpoints braucht eine Website?

Weniger als früher. Mit fließender Typografie und Container Queries kommen viele Projekte mit zwei oder drei globalen Breakpoints für das Seitenlayout aus. Die Breakpoints sollten sich am Inhalt orientieren, also dort liegen, wo das Layout bricht, nicht an bestimmten Gerätemodellen.

Muss eine Business-Website einen Dark Mode haben?

Pflicht ist er nicht. Viele Nutzer haben ihr System aber dauerhaft auf dunkel gestellt, und eine Seite, die darauf reagiert, wirkt gepflegt. Wenn Sie ihn anbieten, sollte er sorgfältig gestaltet sein, mit ausreichendem Kontrast in beiden Varianten.

Fazit

Responsive Design bedeutet 2026, auf den tatsächlichen Kontext zu reagieren: verfügbarer Platz, Eingabeart und Nutzerwünsche. Die Werkzeuge dafür stehen in jedem aktuellen Browser bereit, und sie machen Ihren Code meist einfacher statt komplizierter. Wenn Sie eine Website oder Webanwendung planen, die auf jedem Gerät gut funktioniert, sprechen Sie mit uns über Webentwicklung.