Responsive Design bezeichnet ein Gestaltungskonzept, bei dem sich das Layout einer Website automatisch an die Bildschirmgröße des jeweiligen Geräts anpasst. Auf dem Smartphone sieht die gleiche Seite anders aus als auf dem Desktop, zeigt aber dieselben Inhalte in einer passend optimierten Darstellung.
Warum Responsive Design heute Standard ist
Über 60 Prozent aller Zugriffe im deutschen Web kommen heute vom Smartphone. Google indexiert Websites seit 2019 im Mobile-First-Ansatz, das heißt: die mobile Version ist die primäre Grundlage für das Ranking. Eine Seite, die am Handy schlecht aussieht, verliert nicht nur Besucher, sondern auch Google-Sichtbarkeit.
Kernprinzipien
- Flexible Layouts: Spalten und Abstände in relativen Einheiten, nicht in festen Pixeln
- Breakpoints: bestimmte Bildschirmgrößen, bei denen sich das Layout umstellt
- Angepasste Navigation: klassisches Menü am Desktop, Burger-Menü am Handy
- Optimierte Bilder: unterschiedliche Größen für unterschiedliche Geräte
- Touch-freundliche Bedienelemente: ausreichend große Buttons für Finger
Responsive Design vs. adaptives Design
Responsive Design arbeitet mit einem flexiblen Layout, das sich flüssig an jede Größe anpasst. Adaptives Design liefert fest definierte Layouts für bestimmte Gerätegruppen. In der Praxis hat sich Responsive Design durchgesetzt, weil es auf beliebige Geräte reagiert, auch auf neue.
Wie sich mobile Optimierung konkret auf Handwerksbetriebe auswirkt, findest du im Artikel Webdesign für Handwerker.