Öffnen Sie eine Website auf Ihrem Smartphone, dann auf einem Laptop und schließlich auf einem Fernseher. Wenn sie auf allen drei Geräten ohne Zoomen oder Zusammenkneifen der Augen korrekt angezeigt wird, wurde sie mit responsivem Design erstellt. Dieses Verfahren ermöglicht es, dass eine einzige Codebasis Layout, Bilder und Typografie automatisch an das jeweilige Endgerät anpasst.

Ethan Marcotte prägte den Begriff 2010, als das mobile Surfen einen Boom erlebte und Designer vor der Wahl standen: Entweder separate Websites für jedes Gerät erstellen oder eine, die sich anpasst. Responsive Design setzte sich durch. Die wichtigsten Werkzeuge sind flexible Raster, anpassungsfähige Bilder und Media Queries. Eine Media Query fragt den Browser nach der Breite des Viewports und wendet je nach Antwort unterschiedliche CSS-Regeln an.

Was macht ein Design responsiv?

• Flexible Raster, die Prozentwerte anstelle von festen Pixeln verwenden
• Flexible Bilder, die innerhalb ihrer Container skalieren
• Media Queries, die Breakpoints für verschiedene Größen anwenden
• Touchfreundliche Ziele auf mobilen Layouts

Ziel ist es nicht nur, Inhalte auf kleinen Bildschirmen darzustellen. Vielmehr geht es darum, Lesbarkeit, Hierarchie und Benutzerfreundlichkeit in jedem Kontext zu gewährleisten. Ein dreispaltiges Desktop-Layout kann auf einem Smartphone auf eine Spalte reduziert werden. Ein Hamburger-Menü ersetzt die vollständige Navigationsleiste. Gutes responsives Design wirkt selbstverständlich, als wäre die Website von Anfang an für die Darstellung auf Ihrem Gerät optimiert gewesen.