„Die Seite muss auch auf dem Handy laufen." Das war 2015 die Ansage. 2026 ist Responsive Design viel mehr. Neue CSS-Funktionen, andere Gewohnheiten und eine Flut an Geräten haben die Regeln verschoben. Wer heute noch mit starren Breakpoints bei 768 und 1024 Pixel arbeitet, baut für eine Welt von gestern.
Was hat sich geändert?
Die Zahl der Geräte ist stark gewachsen. Neben Handys und Desktops gibt es jetzt:
- Faltbare Handys (Samsung Fold, Pixel Fold) mit Bildschirmen, die die Größe wechseln
- Tablets in jeder Größe — vom iPad Mini bis zum iPad Pro 13"
- Ultra-breite Monitore mit 3440 Pixel und mehr
- Smartwatches mit Browser
- Auto-Displays — die Bildschirme im Auto zeigen Websites an
- Smart-TVs mit Browser
Mobile-First ist nicht falsch. Aber es reicht nicht mehr. Gute Seiten müssen heute von 200 bis 3440 Pixel laufen.
Container Queries: Der große Sprung
Die wichtigste CSS-Neuerung der letzten Jahre: @container. Statt auf die Breite des Browsers zu reagieren, reagieren Bausteine auf die Breite ihres eigenen Bereichs.
Warum das so wichtig ist:
Stell dir eine Karte vor. In einer schmalen Seitenleiste ist sie 300 Pixel breit. Im Hauptbereich 600 Pixel. Mit Media Queries reagiert die Karte auf den Browser. Obwohl ihr Platz ganz anders ist. Container Queries lösen das: Die Karte passt sich an ihren eigenen Bereich an.
Ein Beispiel:
Eine Kontakt-Karte zeigt bei wenig Platz nur Name und Telefon. Ab 400 Pixel kommt die Mail dazu. Ab 600 Pixel das Foto. Die Karte entscheidet selbst — egal wie breit der Bildschirm ist.
Das macht Bausteine wiederverwendbar. Dieselbe Karte klappt in der Seitenleiste, im Hauptteil und im Footer. Ohne extra Styles für jeden Platz.
Fließende Schrift: Schluss mit festen Größen
Feste Schriftgrößen pro Breakpoint sind 2026 überholt. Statt dessen: clamp(). Eine CSS-Funktion, die Schrift stufenlos zwischen einem Minimum und Maximum skaliert.
Statt:
h1 { font-size: 24px; }
@media (min-width: 768px) { h1 { font-size: 36px; } }
@media (min-width: 1200px) { h1 { font-size: 48px; } }
Besser:
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
Das Ergebnis: Die Überschrift ist am iPhone gut lesbar und am 27-Zoll-Monitor groß genug. Ohne einen einzigen Breakpoint. Die Skalierung passiert fließend, nicht in Sprüngen.
Tipp: clamp() klappt nicht nur für Schrift. Auch für Abstände, Padding und Lücken. Eine ganze Seite kann damit fließend skalieren.
Dynamische Layouts mit CSS Grid und Subgrid
CSS Grid kennen viele. Aber subgrid bringt noch mehr Möglichkeiten. Damit können verschachtelte Elemente sich am Grid des Elternteils ausrichten. Ohne dass jede Ebene ein eigenes Grid braucht.
Warum das hilft:
Bei einem Kartenraster sollen Titel, Text und Button bei allen Karten auf gleicher Höhe sitzen. Auch wenn die Texte verschieden lang sind. Ohne Subgrid: Aufwendige Tricks mit festen Höhen. Mit Subgrid: Drei Zeilen CSS.
Zusammen mit auto-fill und minmax() entstehen Layouts, die sich an jede Breite anpassen. Ganz ohne Media Query.
Neue Viewport-Einheiten: svh, lvh, dvh
Die alten Einheiten vh und vw haben ein bekanntes Problem am Handy: Die Adressleiste verschwindet beim Scrollen. Plötzlich ändert sich 100vh. Das führt zu springenden Layouts und verdeckten Inhalten.
2026 gibt es bessere Optionen:
svh(Small Viewport Height): Die kleinste Höhe. Adressleiste sichtbar.lvh(Large Viewport Height): Die größte Höhe. Adressleiste weg.dvh(Dynamic Viewport Height): Passt sich an den aktuellen Zustand an.
Für einen Fullscreen-Hero am Handy: height: 100dvh statt 100vh. Kein Springen mehr. Kein verdeckter Button.
Nutzer-Einstellungen beachten
Moderne Browser teilen mit, was Nutzer wollen. Gutes Design hört darauf:
prefers-color-scheme: Dunkler oder heller Modusprefers-reduced-motion: Weniger Bewegung gewünscht (wichtig für alle)prefers-contrast: Mehr Kontrast nötigprefers-reduced-data: Weniger Daten nutzen (wichtig am Berg mit schwachem Netz)
Eine Seite, die darauf reagiert, zeigt Respekt. Und Google bewertet gute Zugänglichkeit zunehmend als Ranking-Faktor.
Was heißt das für Firmen im Allgäu?
Ganz praktisch:
- Tourismus: Gäste suchen am Handy beim Frühstück, am Tablet auf der Terrasse und abends am Laptop. Die Seite muss überall gleich gut laufen.
- Handwerk: Dein Kunde googelt am Handy. Ruft dich an. Und schickt abends am Desktop eine Anfrage. Jeder Kontaktpunkt muss sitzen.
- Gastro: Die Speisekarte am Handy aufrufen. In 2 Sekunden lesbar. Nicht erst nach Zoomen und Hin-und-her-Wischen.
- Gesundheit: Ältere Nutzer mit größerer Schrift. Deine Seite darf bei 150 % Zoom nicht kaputt gehen.
Drei Fragen an deinen Webdesigner
Wenn du 2026 eine neue Seite beauftragst, frage nach:
- Container Queries: Reagieren die Bausteine auf ihren eigenen Bereich? Oder nur auf den Browser?
- Fließende Schrift: Skaliert die Schrift stufenlos? Oder springt sie bei Breakpoints?
- Tempo-Budget: Wie stellst du sicher, dass die Seite auf einem normalen Handy in unter 2 Sekunden lädt?
Wenn die Antworten vage sind, ist das ein Warnzeichen.
Fazit: Responsive ist kein Extra
Flexibles Layout ist 2026 keine Leistung, die man dazu bucht. Es ist die Grundlage jeder guten Website. Neue CSS-Funktionen ermöglichen Seiten, die sich an jedes Gerät und jeden Nutzer anpassen. Ohne dutzende Breakpoints.
Du willst eine Seite, die auf jedem Gerät funktioniert? Sprich mich an — ich zeige dir, wie modernes Responsive Design aussieht. Oder informiere dich über meine Leistungen.