Responsive Design: Eine Seite für jeden Screen

2010 schrieb ein Designer namens Ethan Marcotte einen Artikel, der das Web umkrempelte. Seine Idee klang fast trotzig einfach: Hör auf, Websites für „den Bildschirm“ zu bauen. Bau sie für alle Bildschirme gleichzeitig. Das war die Geburtsstunde von Responsive Design – einem Prinzip, das heute so selbstverständlich ist, dass man sich kaum noch vorstellen mag, wie es vorher war.

Responsive Design ist ein Ansatz, bei dem sich ein einziges Layout flüssig an die jeweilige Bildschirmgröße anpasst. Statt für jedes Gerät eine eigene Seite zu bauen, reagiert dieselbe Seite auf den verfügbaren Platz – sie „antwortet“ (englisch to respond) auf das Gerät, daher der Name.

Davor bastelten Firmen oft eine zweite, abgespeckte „m.“-Website fürs Handy: doppelte Pflege, doppelte Fehlerquellen, doppelte Kosten. Aus zwei mittelmäßigen Auftritten wurde einer, der überall funktioniert – wie Wasser, das sich in jedes Glas gießt.

Technisch steht der Ansatz auf drei Säulen:

• Flexible Raster: Breiten werden in relativen Einheiten (Prozent, fr, rem) statt in starren Pixeln definiert.
• Fluide Bilder: Medien skalieren mit ihrem Container und quellen nie über den Rand hinaus.
• Media Queries: CSS-Regeln, die abhängig von der Viewport-Breite greifen und das Layout an Breakpoints umbauen.

Diese Bausteine sind seit über einem Jahrzehnt stabil. Die Werkzeuge drumherum – Flexbox, CSS Grid, inzwischen Container Queries – sind nur komfortabler geworden, das Prinzip dahinter ist gleich geblieben.

Heute denkt man die Sache meist mobile-first: Man gestaltet zuerst für das kleine Display und erweitert nach oben Richtung Tablet und Desktop. Das klingt nach einer Detailfrage, ist aber eine Haltung.

Wer auf 360 Pixeln Breite überzeugen muss, ist gezwungen, Inhalte wirklich zu priorisieren. Was auf dem Handy nicht passt, war meistens auch auf dem Desktop überflüssig. Mobile-First ist damit nicht nur Technik, sondern eine Disziplin fürs Wesentliche.

Google bewertet Seiten überwiegend anhand ihrer mobilen Version (Mobile-First-Indexierung). Eine Seite, die auf dem Smartphone schlecht bedienbar ist – winzige Schrift, überlappende Buttons, horizontales Scrollen –, verliert doppelt: schlechtere Nutzererfahrung und schlechtere Sichtbarkeit.

Damit ist Responsive Design kein Designluxus, sondern Grundvoraussetzung. Es sorgt dafür, dass dieselbe gepflegte Seite auf jedem Gerät funktioniert, statt Parallelwelten zu erzeugen, die man getrennt aktuell halten müsste.

• Inhalte auf Mobilgeräten verstecken statt umzustrukturieren – was wichtig ist, muss überall sichtbar bleiben.
• Tap-Flächen zu klein gestalten: Finger sind ungenauer als ein Mauszeiger.
• Nur an wenigen „Standardgrößen“ testen statt am fließenden Übergang dazwischen.
• Riesige Bilder ungeprüft ausliefern – das kostet Ladezeit, besonders mobil.

Wir testen Responsive Design nicht an drei festen Geräten, sondern ziehen das Browserfenster langsam schmaler und beobachten, wo das Layout bricht. Genau an diesen Stellen sitzen die Breakpoints. Ergänzend gehört ein Test auf echten Geräten dazu – Emulatoren verraten nicht alles, vor allem nicht beim Tippen und Scrollen.

Gutes Responsive Design erkennt man daran, dass es nirgends auffällt: Es fühlt sich auf jedem Gerät an, als wäre die Seite genau dafür gemacht.

Ein verbreiteter Irrtum reduziert das Thema auf Spalten, die umbrechen. Doch ein Layout, das sich zwar anpasst, aber auf dem Handy ewig lädt, ist trotzdem gescheitert. Tempo gehört dazu: optimierte Bildgrößen, modernes Bildformat, verzögertes Nachladen (Lazy Loading). Googles Core Web Vitals belohnen genau solche schnellen mobilen Seiten – und bestrafen träge.

Genauso wichtig ist Barrierefreiheit. Lesbare Schriftgrößen, ausreichend große Tap-Flächen, funktionierender Zoom und ein Kontrast, der auch draußen in der Sonne trägt: All das entscheidet, ob eine Seite für alle nutzbar ist – nicht nur für die, die perfekt sehen und präzise tippen. Eine wirklich gute Umsetzung denkt Layout, Performance und Zugänglichkeit zusammen, nicht nacheinander. In der Praxis heißt das: Schon im Entwurf mitdenken, wie ein Abschnitt auf einem kleinen, langsamen Gerät mit dickem Daumen wirkt – nicht erst am Ende testen, wenn alles gebaut ist und Korrekturen teuer werden.