Responsive Design

Responsive Web-Design, auch responsive Webdesign: Gestaltungsansatz für Webseiten, bei dem sich Layout, Schriftgrößen und Bildgrößen automatisch an die Bildschirmgröße des Endgeräts anpassen.

Der Begriff wurde 2010 vom US-Webdesigner Ethan Marcotte in einem viel beachteten Artikel im Magazin „A List Apart” geprägt. Hintergrund war die wachsende Vielfalt an Bildschirmen — vom großen Desktop-Monitor über Notebooks und Tablets bis zu Smartphones —, für die bis dahin oft mehrere getrennte Layouts oder dedizierte Mobil-Websites gepflegt wurden.

Technisch basiert Responsive Design auf drei Bausteinen. Flexible Raster („Fluid Grids”) definieren Spaltenbreiten in Prozent statt in festen Pixeln, sodass sich der Inhalt skaliert. Flexible Medien sorgen dafür, dass Bilder und Videos sich proportional an ihre Container anpassen. CSS-Media-Queries fragen Eigenschaften des Anzeigegeräts wie Bildschirmbreite und Pixeldichte ab und schalten daraufhin unterschiedliche Stilregeln. Verbreitet ist heute zusätzlich der Mobile-First-Ansatz, bei dem zuerst das Layout für kleine Bildschirme entworfen und dann für größere erweitert wird.

Responsive Design hat sich seit Mitte der 2010er Jahre als Standard in der Webentwicklung durchgesetzt; Frameworks wie Bootstrap und Tailwind CSS bringen vorgefertigte Komponenten und Hilfsklassen mit. Suchmaschinen wie Google priorisieren mobil-taugliche Seiten in ihren Ergebnissen („Mobile-First-Indexing”), was den Druck zur durchgängigen Umsetzung zusätzlich erhöht hat.