Responsive Design
Responsive Design bezeichnet einen Gestaltungsansatz, bei dem sich eine Webseite automatisch an die Bildschirmgrösse des verwendeten Geräts anpasst – ob Smartphone, Tablet oder Desktop. Statt mehrere separate Versionen einer Seite zu erstellen, reagiert eine responsive Webseite flexibel auf verschiedene Auflösungen. Google bevorzugt responsive Webseiten im Ranking.
- Mobile-freundlich
Was ist Responsive Design?
Responsive Design ist ein Gestaltungsprinzip für Webseiten, bei dem Layout, Schriftgrössen, Abstände und Bilder sich automatisch an die Bildschirmbreite des verwendeten Geräts anpassen. Eine responsive Webseite sieht auf dem Desktop anders aus als auf dem Smartphone – ist aber dieselbe Seite mit demselben Code.
Technisch wird das mit sogenannten Media Queries in CSS umgesetzt: Regeln, die festlegen, wie eine Seite ab einer bestimmten Bildschirmbreite aussehen soll. Mehrspaltige Layouts werden auf kleinen Bildschirmen zu einspaltigen, Navigation faltet sich zu einem Menü zusammen, und Schriften werden angepasst.
Funfact
Der Begriff «Responsive Web Design» wurde 2010 vom Designer Ethan Marcotte in einem Artikel auf A List Apart geprägt – zu einem Zeitpunkt, als mobiles Surfen gerade begann, den Desktop zu überholen. Google führte 2015 den «Mobilegeddon» ein: ein Algorithmus-Update, das nicht-mobile-optimierte Webseiten in den Rankings abstraft. Das Update veränderte die Webentwicklung nachhaltig.
Geräteverteilung im Web heute
- Smartphone: 320–480 px, ~55 %
- Desktop: 1200–1920 px, ~40 %
- Tablet: 768–1024 px, ~5 %
Typische Breakpoints im Responsive Design
- unter 480 px: Kleine Smartphones – einspaltiges Layout, grosse Touch-Targets
- 480–768 px: Grosse Smartphones und kleine Tablets – teils zweispaltig
- 768–1024 px: Tablets – zweispaltig, Navigation oft noch offen
- ab 1024 px: Desktop – volle Breite, mehrspaltiges Layout, komplette Navigation
Die drei Grundprinzipien
- Flexibles Rastersystem: Statt fixer Pixelbreiten werden relative Einheiten (Prozent, em, rem) verwendet, damit sich Spalten und Abstände proportional zur Bildschirmbreite anpassen.
- Flexible Bilder: Bilder werden so eingebunden, dass sie sich nie über ihre Container-Breite hinaus ausdehnen – typischerweise mit max-width: 100%.
- Media Queries: CSS-Regeln, die ab bestimmten Bildschirmbreiten (Breakpoints) greifen und das Layout gezielt anpassen – zum Beispiel Navigation ausblenden und Hamburger-Menü einblenden.
Responsive Design und SEO
Google indexiert Webseiten primär anhand ihrer mobilen Version – dieses Prinzip heisst «Mobile-First Indexing». Eine Webseite, die auf dem Smartphone schlecht aussieht oder schwer zu bedienen ist, wird von Google entsprechend schlechter bewertet. Responsive Design ist damit nicht nur eine Frage der Nutzererfahrung, sondern direkt mit dem Ranking verknüpft.
Konkret bewertet Google über die Core Web Vitals, wie gut eine Seite auf mobilen Geräten lädt und wie stabil das Layout beim Laden ist. Ein responsives Design ist die Voraussetzung dafür, diese Werte auf Smartphones zu erreichen.
Was bedeutet das für meine Webseite?
Wer ein Theme oder einen Page-Builder einsetzt, sollte die Seite trotzdem auf dem Smartphone testen: Stimmen Abstände und Schriftgrössen? Sind Buttons gross genug zum Antippen? Lädt die Seite schnell? Google bietet mit dem Mobile-Friendly-Test unter search.google.com/test/mobile-friendly ein kostenloses Tool zur Überprüfung.