Responsive Design

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

Ein großer Teil der Besucher kommt heute mit dem Smartphone. Google hat seit 2019 schrittweise auf Mobile-First-Indexierung umgestellt, inzwischen gilt sie für alle Websites. Die mobile Version ist also die Grundlage für das Ranking. Eine Seite, die am Handy schlecht aussieht, verliert Besucher und Sichtbarkeit bei Google.

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.

Mehr zum Thema

Wie sich mobile Optimierung konkret auf Handwerksbetriebe auswirkt, findest du im Artikel Webdesign für Handwerker.