Was ist Responsive Design?
Wasser hat keine eigene Form. Gießt du es in ein Sektglas, wird es schmal und hoch. In einer Schale wird es breit und flach. Genau so soll sich eine Website verhalten: gleicher Inhalt, Form passend zum Gefäß.
Beim Responsive Design bekommt jedes Gerät denselben HTML-Code unter derselben URL. Erst im Browser entscheidet das CSS, wie die Seite aussieht: drei Spalten am Monitor, eine Spalte am Handy, das Menü hinter einem Knopf.
Den Begriff hat der Webdesigner Ethan Marcotte 2010 geprägt. Er nannte drei Zutaten:
- Flexibles Raster — Spalten in Prozent statt in festen Pixeln.
- Flexible Bilder — sie werden nie breiter als ihr Platz.
- Media Queries — CSS-Regeln, die ab einer bestimmten Breite greifen. Diese Schwellen heißen Breakpoints.
Warum ist Responsive Design so wichtig?
Weil die Mehrheit längst am Handy sitzt. Im September 2026 kamen in Deutschland rund 60 % aller Seitenaufrufe von Mobilgeräten, gut 38 % vom Desktop und knapp 2 % vom Tablet.
Dazu kommt Google. Seit Ende 2023 bewertet Google Websites nach ihrer mobilen Version — der Fachbegriff ist Mobile-First-Indexing. Was am Handy fehlt, existiert für das Ranking praktisch nicht.
Google nennt drei Wege, eine Seite mobil auszuliefern:
Weg
So funktioniert er
Responsive
Gleicher Code, gleiche URL
Dynamic Serving
Gleiche URL, Code je Gerät
Separate URLs
Eigene Mobilseite, etwa m.
Google empfiehlt ausdrücklich den ersten, weil er am einfachsten zu bauen und zu pflegen ist. Eine eigene m.-Seite heißt doppelte Pflege, doppelte Fehlerquellen.
Wie gut ist das Web heute?
Die Grundlage ist fast überall da, die Details hapern. Zwei Messungen aus dem Web Almanac, der jährlich Millionen Websites auswertet:
Case A · Grundlage
Viewport-Angabe gesetzt
94 %
der Mobilseiten
23 %
sperren das Zoomen
Fast alle sagen „Ich bin mobil“ — fast jede vierte verbietet Zoomen
Web Almanac 2024. Die Viewport-Angabe ist ein Hinweis auf responsives Design, kein Beweis.
Case B · Bedienung
Tippflächen am Handy
42 %
ausreichend groß
5
zu kleine je Seite (Median)
Mehr als die Hälfte hat zu kleine Knöpfe und Links
Web Almanac 2022, Prüfung mit Lighthouse. Neuere Werte gibt es dazu nicht.
Häufige Fehler
Fehler 1 · Zoomen abschalten
Ein kleiner Zusatz im Code verhindert, dass Besucher mit zwei Fingern vergrößern. Für Menschen mit schlechten Augen ist die Seite dann kaum lesbar. web.dev rät davon ab, und es verstößt gegen die Barrierefreiheit.
Fehler 2 · Breakpoints nach Geräten setzen
„Ab 390 Pixel fürs iPhone“ hält bis zum nächsten Modell. Besser: Zieh das Fenster langsam schmaler. Wo das Layout bricht, setzt du die Schwelle. Der Inhalt bestimmt den Breakpoint, nicht das Gerät.
Fehler 3 · Knöpfe für Mausfinger
Ein Link, den man am Monitor mühelos trifft, ist am Handy ein Glücksspiel. Die Richtlinien für Barrierefreiheit WCAG verlangen mindestens 24 × 24 Pixel oder genug Abstand zum Nachbarn.
Fehler 4 · Inhalte mobil verstecken
Texte am Handy auszublenden, damit es aufgeräumter aussieht, rächt sich: Für Google zählt die mobile Version. Lieber kürzen und umsortieren als verstecken.
So testest du deine Seite
- Gerätemodus im Browser — in den Chrome DevTools Bildschirmgrößen durchklicken. Google nennt das selbst nur eine erste Annäherung.
- 320 Pixel Breite — so schmal muss die Seite laut WCAG ohne seitliches Scrollen funktionieren. Ausnahmen sind etwa große Tabellen und Karten.
- Lighthouse — prüft unter anderem Viewport und Tippflächen.
- Echte Geräte — einmal mit dem eigenen Handy durchs Kontaktformular. Das findet mehr als jede Simulation.
In WordPress mit Elementor gibt es eigene Ansichten für Desktop, Tablet und Handy. Standard sind die Schwellen 1024 und 767 Pixel, weitere lassen sich ergänzen.
Häufige Fragen
Ist Responsive Design ein Rankingfaktor bei Google?
Nicht als eigener Schalter. Google empfiehlt Responsive Design und bewertet Seiten nach ihrer mobilen Version. Eine Seite, die am Handy schlecht funktioniert oder Inhalte versteckt, hat damit klare Nachteile.
Was ist der Unterschied zwischen Responsive Design und Mobile First?
Mobile First ist eine Arbeitsweise: Du gestaltest zuerst für den kleinen Bildschirm und erweiterst dann. Responsive Design ist das Ergebnis — eine Seite, die sich an alle Größen anpasst. Das eine ist der Weg, das andere das Ziel.
Brauche ich noch eine eigene Mobilseite?
Nein. Eine separate m.-Seite heißt doppelte Pflege und mehr Fehlerquellen. Google empfiehlt eine responsive Seite, und jedes aktuelle WordPress-Theme bringt das mit.
Welche Breakpoints sollte ich nehmen?
Die, an denen dein Layout bricht. Als Startpunkt taugen die Standards deines Systems, in Elementor 767 und 1024 Pixel. Feste Werte für einzelne Handymodelle veralten schnell.
Wie teste ich, ob meine Website responsiv ist?
Im Browser den Gerätemodus öffnen, das Fenster bis 320 Pixel verkleinern und auf seitliches Scrollen achten. Dazu Lighthouse laufen lassen und einmal am echten Handy alle wichtigen Wege durchklicken.
Quellen
- A List Apart: Responsive Web Design (Ethan Marcotte)
- Google Search Central: Mobile-First-Indexing
- StatCounter: Anteil Mobil, Desktop, Tablet in Deutschland
- HTTP Archive: Web Almanac 2024, SEO
- HTTP Archive: Web Almanac 2022, Mobile Web
- W3C: WCAG 2.2 Reflow
- W3C: WCAG 2.2 Zielgröße
- web.dev: Grundlagen Responsive Webdesign
