Responsive Design
Responsive Design bedeutet nicht, das gleiche Layout einfach zu schrumpfen. Es bedeutet, jede Bildschirmgröße als eigenständigen Kontext zu behandeln — mit angepasster Hierarchie, Proportionen und Interaktion.
- Mobile-First als Designstrategie verstehen und anwenden
- Sinnvolle Breakpoints wählen — basierend auf Inhalten, nicht auf Geräten
- Fluid vs. Fixed Layouts unterscheiden und gezielt einsetzen
- Touch-Targets und Typografie für mobile Kontexte optimieren
- Content-Priorisierung: Was zeigst du wann und wo?
Responsive Design ist eine Denkweise, nicht nur Media Queries. Nicht nur Breite ändert sich — auch Proportionen, Abstände, Schriftgrößen und Informationshierarchie müssen sich an den Kontext anpassen.
Responsive Design — Mehr als nur Media Queries
Responsive Design ist eine Denkweise, nicht nur Media Queries. Nicht nur Breite ändert sich — auch Proportionen, Abstände, Schriftgrößen, Informationshierarchie.
Mobile First
Beginne mit kleinster Viewport und erweitere. Mobile zwingt zu Priorisierung — was ist wirklich wichtig?
Content-basierte Breakpoints
Setze Breakpoints dort, wo Layout bricht — nicht bei Geräten (iPhone 6, Galaxy S10 …)
Fluid + Fixed kombinieren
Nicht alles muss sich proportional zur Breite verhalten. Sidebar kann fixed sein, Content fluid
Proportionen sind nicht skalierbar
48px zu 24px ist nicht korrekt — Verhältnisse ändern sich mit Kontext
Touch vs. Cursor
Touch-Targets müssen 44×44px oder 48×48dp sein (nicht 24px Buttons auf Mobile)
Navigation: Desktop vs. Mobile
Desktop: Platz für horizontale Links. Mobile: Kompaktes Format mit wichtigsten Aktionen sichtbar.
Touch Targets: Mobile-Größen sicherstellen
Desktop: 32px möglich. Mobile: Minimum 44×44px oder 48×48dp. Zu kleine Buttons führen zu Misclicks.
Okay für Desktop, zu klein für Touch
Sicher für Touchscreen
Typografie: Bewusste Anpassung statt Schrumpfen
Headlines schrumpfen nicht proportional. 48px Desktop → 24px Mobile ist falsch. Bewusste Anpassung an Kontext erforderlich.
28px Desktop
Genug Platz für große Headline
22px Tablet
Leicht reduziert, immer noch prominent
18px Mobile
Bewusst angepasst, nicht willkürlich halbiert