Eine Website, viele Bildschirmauflösungen. Responsives Design sorgt dafür, dass sich ein einziges Layout an unterschiedliche Gerätegrößen und -ausrichtungen anpasst. Der Begriff wurde 2010 von Ethan Marcotte geprägt und baute auf früheren Ideen zu flexiblen Rastern und dynamischen Bildern auf. Anstatt separate Websites für Desktop und Mobilgeräte zu erstellen, entwickeln Designer eine einzige Codebasis, die sich automatisch an die Bildschirmbreite anpasst.

Drei technische Komponenten ermöglichen dies. Flexible Raster verwenden Prozentangaben anstelle fester Pixel, sodass sich Spalten dehnen und zusammenziehen. Bilder skalieren innerhalb ihrer Container. Media Queries erkennen die Bildschirmgröße und wenden an definierten Breakpoints unterschiedliche CSS-Regeln an. Ein dreispaltiges Desktop-Layout kann auf einem Smartphone zu einer einzigen Spalte reduziert werden, wobei die Navigation in ein Hamburger-Menü verschoben wird. Ziel ist nicht pixelgenaue Kontrolle, sondern eine elegante Anpassung.

Kerntechniken

• Fluidgitter basierend auf Prozentwerten.
• Flexible Bild- und Medienformate.
• Medienabfragen an definierten Haltepunkten.
• Priorisierung von Inhalten für mobile Endgeräte.

Responsives Design ist heute Standard. Nutzer erwarten, dass eine Website auf jedem Gerät – ob Smartphone, Tablet, Laptop oder Fernseher – einwandfrei funktioniert.