Responsive Design ist ein Gestaltungsansatz, bei dem sich Layouts, Schriftgrößen und Bildelemente flexibel an die Bildschirmgröße des verwendeten Geräts anpassen, ohne dass separate Versionen einer Website erstellt werden müssen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: Responsives Webdesign, Fluid Design, Adaptives Design
Was ist Responsive Design?
Responsive Design beschreibt die Fähigkeit einer Website oder Web-Anwendung, ihr Erscheinungsbild dynamisch an die Eigenschaften des Ausgabegeräts anzupassen. Das betrifft vor allem die Bildschirmbreite, aber auch Auflösung, Orientierung (Hoch- oder Querformat) und Eingabemethode (Touch vs. Maus).
Der Begriff wurde 2010 von Ethan Marcotte in seinem wegweisenden Artikel für das A List Apart Magazine geprägt. Marcotte beschrieb drei technische Grundpfeiler: fluide Rastersysteme, flexible Bilder und CSS Media Queries (Marcotte, 2010).
Für Designer bedeutet Responsive Design vor allem eine Denkhaltung: Inhalte und Layouts werden nicht für eine feste Pixelgröße entworfen, sondern als flexible Systeme, die unter verschiedenen Bedingungen funktionieren.
Erklärung
Breakpoints
Breakpoints sind Schwellenwerte der Bildschirmbreite, an denen sich das Layout gezielt verändert. Typische Breakpoints orientieren sich an gängigen Gerätekategorien:
| Breakpoint | Breite | Gerät |
|---|---|---|
| xs | < 576 px | Kleines Smartphone |
| sm | 576–767 px | Smartphone groß |
| md | 768–991 px | Tablet |
| lg | 992–1199 px | Laptop |
| xl | 1200–1399 px | Desktop |
| xxl | ≥ 1400 px | Großer Monitor |
Diese Werte stammen aus dem Bootstrap-Framework und haben sich als De-facto-Standard etabliert, auch wenn Projekte eigene Breakpoints definieren können und sollten.
Wichtig: Breakpoints sollten aus dem Inhalt heraus entstehen, nicht aus dem aktuellen Geräteportfolio. Ein Layout bricht an einer bestimmten Breite zusammen? Dann braucht es dort einen Breakpoint – unabhängig davon, ob ein bestimmtes Smartphone gerade diese Breite hat.
Fluide Raster
Statt fixer Pixelwerte arbeitet Responsive Design mit prozentualen Breiten. Eine Spalte, die auf dem Desktop 400 px breit ist, macht auf einem Tablet vielleicht 50 % der Containerbreite aus. Grid-Systeme im Web: 12-Spalten, CSS Grid, Flexbox erklärt die dahinterliegenden Rastersysteme detailliert.
Flexible Bilder
Bilder können ihren Container überlaufen, wenn sie nicht responsiv eingebunden sind. Die einfachste Lösung: max-width: 100% – das Bild wächst nie über seinen Container, schrumpft aber flexibel. Bildoptimierung für Web: WebP, AVIF, Lazy Loading geht auf performante Bildformate für responsive Seiten ein.
Viewport Meta-Tag
Damit mobile Browser das Layout korrekt skalieren, ist folgender HTML-Metaeintrag notwendig:
``html <meta name="viewport" content="width=device-width, initial-scale=1"> ``
Ohne diesen Tag zeigen mobile Browser die Desktop-Version verkleinert an.
Beispiele
Hamburger-Menü auf kleinen Bildschirmen: Eine horizontale Navigation mit sechs Punkten funktioniert auf Desktop problemlos. Auf dem Smartphone wird sie zum Symbol (☰), das ein Dropdown-Menü öffnet.
Zweispaltige zu einspaltige Layouts: Auf dem Desktop erscheinen Artikel-Text und Sidebar nebeneinander. Ab einem Breakpoint von 768 px stapeln sie sich vertikal.
Schriftgröße: Auf kleinen Bildschirmen liest sich eine Überschrift mit 48 px Schriftgröße zu groß. Responsive Typografie (z. B. mit CSS clamp()) passt Schriftgrößen stufenlos an. Webfonts: Einbindung, Performance, Lizenzen beschreibt, wie Webfonts in diesem Kontext performant eingebunden werden.
In der Praxis
Design-Workflow
Beim responsiven Design arbeiten die meisten Designer mit mehreren Artboards in Figma oder Sketch: typischerweise 375 px (iPhone), 768 px (Tablet) und 1440 px (Desktop). Das Figma-Plugin „Breakpoints" ermöglicht sogar eine interaktive Vorschau zwischen den Größen.
Es empfiehlt sich, alle Komponenten mit ihrem Verhalten bei verschiedenen Breiten zu dokumentieren, zum Beispiel in einem Design Systems: Von Figma zu Code. Damit wissen Entwickler, wie sich eine Karte bei 320 px vs. 1200 px verhalten soll.
Häufige Fehler
- Touch-Targets zu klein: Schaltflächen sollten mindestens 44 × 44 px groß sein (Apple Human Interface Guidelines) bzw. 48 × 48 dp (Google Material Design).
- Hover-Zustände als einzige Interaktion: Touchscreens kennen kein Hover. Micro-Interactions im Web: Hover, Click, Load erklärt, wie Interaktionen geräteunabhängig gestaltet werden.
- Texte als Bilder: Textelemente in Bildmaterial sind nicht responsiv skalierbar und nicht barrierefrei. Siehe Barrierefreiheit im Web (WCAG 2.2) für Designer.
Vergleich & Abgrenzung
| Ansatz | Beschreibung | Unterschied |
|---|---|---|
| Responsive Design | Ein Layout, das sich flexibel anpasst | Fließende Übergänge über Breakpoints |
| Adaptive Design | Mehrere feste Layouts für bestimmte Breakpoints | Sprunghafte Anpassung, oft server-seitig |
| Mobile First | Responsive Design, aber vom kleinsten Bildschirm aus | Denkhaltung, keine eigene Technik |
Mobile First: Design-Philosophie beschreibt den Mobile-First-Ansatz als empfohlene Arbeitsweise.
Häufige Fragen (FAQ)
Wie viele Breakpoints brauche ich? So wenige wie möglich, so viele wie nötig. Drei bis vier Breakpoints reichen für die meisten Projekte.
Muss ich jede Ansicht in Figma ausbauen? Mindestens die kritischen Layouts: mobil, Tablet, Desktop. Dazwischenliegende Zustände werden oft mit Notizen beschrieben.
Ist Responsive Design und Mobile First dasselbe? Nein. Responsive Design ist die Technik, Mobile First die Entwurfsreihenfolge. Mobile First ist ein Ansatz für Responsive Design, aber Responsive Design kann auch ohne Mobile First umgesetzt werden.
Was sind Core Web Vitals und haben sie mit Responsive Design zu tun? Indirekt ja: Große, nicht optimierte Bilder und Layout-Shifts beim Laden beeinflussen sowohl das responsive Erlebnis als auch die Core Web Vitals. Page Speed und Core Web Vitals: Was Designer wissen müssen geht darauf ein.
Verwandte Einträge
- Mobile First: Design-Philosophie – Mobile First als Entwurfsphilosophie
- Grid-Systeme im Web: 12-Spalten, CSS Grid, Flexbox – Rastersysteme im Web
- Bildoptimierung für Web: WebP, AVIF, Lazy Loading – Bilder für verschiedene Auflösungen optimieren
- Barrierefreiheit im Web (WCAG 2.2) für Designer – Zugänglichkeit auf allen Geräten
- Page Speed und Core Web Vitals: Was Designer wissen müssen – Ladegeschwindigkeit und Web Vitals
- Webfonts: Einbindung, Performance, Lizenzen – Schriften responsiv einbinden
- Design Systems: Von Figma zu Code – Komponenten für responsive Layouts dokumentieren
Weiterführend
- Marcotte, E. (2010). Responsive Web Design. A List Apart.
- Marcotte, E. (2014). Responsive Design: Patterns & Principles. A Book Apart.
- Frain, B. (2020). Responsive Web Design with HTML5 and CSS. 3. Aufl. Packt Publishing.
- Google Developers (2023). Responsive Web Design Basics.
- W3C (2012). Media Queries.
