←  Alle Begriffe
R
Frontend & Web Development

Responsive Design

Responsive Design passt Layout und Bedienung flexibel an verschiedene Bildschirmgrößen und Eingabemethoden an.

Responsive Design sorgt dafür, dass Inhalte und Bedienelemente auf unterschiedlichen Bildschirmgrößen sinnvoll angeordnet und gut nutzbar bleiben. Flexible Layouts, relative Maße, Breakpoints und anpassungsfähige Medien helfen dabei, Darstellung und Bedienung an verschiedene Geräte anzupassen. Wichtig sind dabei eine klare Struktur, gute Performance und zugängliche Interaktionen unabhängig von Bildschirmgröße oder Eingabemethode. Eng verbunden ist der Begriff mit Mobile First und CSS.

Weiterlesen

Mobile First

CSS

Barrierefreiheit

FAQ

Responsive Design

Wie hängen Responsive Design und Barrierefreiheit zusammen?
Beide greifen ineinander: Ein responsives Layout muss auch bei Zoom und größerer Schrift nutzbar bleiben. Wird Text vergrößert, sollte kein Inhalt abgeschnitten werden und kein zweidimensionales Scrollen nötig sein. Responsive Umsetzung ersetzt keine Barrierefreiheit, unterstützt aber Anforderungen wie Reflow. Zoom-Tests gehören deshalb in jede Prüfung.
Welche Fehler treten bei Responsive Design häufig auf?
Typisch sind zu kleine Tap-Ziele, horizontales Scrollen durch feste Breiten, nicht skalierende Bilder und Navigation, die nur per Hover funktioniert. Meist werden Layouts nur durch Verkleinern des Browserfensters geprüft. Tests auf echten Geräten und mit Touch-Bedienung decken deutlich mehr auf.
Wie viele Breakpoints braucht ein Responsive Design?
Eine feste Zahl gibt es nicht. Breakpoints sollten dort liegen, wo das Layout bricht, nicht an einzelnen Gerätemodellen. Oft genügen wenige gut gewählte Stufen; fließende Größen und flexible Raster reduzieren den Bedarf weiter. Jeder zusätzliche Breakpoint erhöht Test- und Pflegeaufwand.
Wie verhält sich Responsive Design zu Mobile First?
Responsive Design ist das Ziel, Mobile First eine Vorgehensweise dazu. Beim Responsive Design passt sich das Layout jeder Bildschirmgröße an. Mobile First startet beim kleinsten Viewport und ergänzt Regeln für größere. Ein responsives Layout lässt sich auch Desktop-first bauen, oft mit mehr Überschreibungen im CSS.