Responsive Design

Responsive Design ist ein Web-Design-Konzept, bei dem sich Webseiten automatisch an verschiedene Bildschirmgrößen und Gerätetypen (Desktop, Tablet, Smartphone) anpassen. Das Layout, die Bilder und sogar die Bedienelemente werden dynamisch basierend auf der Bildschirmbreite angepasst. Google hat Responsive Design als die bevorzugte Strategie für Mobile SEO bezeichnet, da es eine konsistente URL und ein konsistentes Content-Erlebnis bietet – anders als eine separate mobile Website. Eine responsive Webseite ist heute praktisch ein Muss für gute Suchmaschinen-Rankings und eine akzeptable Nutzererfahrung.

Technisch wird Responsive Design meist mit CSS-Media-Queries umgesetzt, die unterschiedliche Stilregeln für verschiedene Bildschirmgrößen definieren. Zum Beispiel kann eine Sidebar auf Desktop in drei Spalten angezeigt werden, auf Tablets in zwei und auf Mobilgeräten als vertikales Akkordeon. Moderne Responsive-Layouts nutzen auch Flexible Grids und Flexible Bilder, die sich proportional an die Bildschirmgröße anpassen. Wichtig ist, dass die gleiche HTML-URL auf alle Geräte gesendet wird – nicht wie bei RWD-Alternativen zwei verschiedene Versionen. Dies ist für Google transparent und ermöglicht bessere Indexierung und Rankings.

In der Praxis sollte jede neue Website mit Responsive Design gebaut werden. Bei bestehenden Websites ist eine Migration zu responsivem Design eine sinnvolle Investition. Ein Test im Mobile-Friendly-Test von Google zeigt sofort, ob eine Website responsive ist. Besonders wichtig sind responsive Bilder mit dem srcset-Attribut, das es ermöglicht, unterschiedliche Bildgrößen für verschiedene Geräte zu liefern. Auch das Viewport-Meta-Tag (das dem Browser mitteilt, dass die Seite responsive ist) ist essentiell. Ein responsive Design verbessert nicht direkt das Ranking, aber die bessere Nutzererfahrung auf Mobil führt zu besseren Engagement-Signalen und damit indirekt zu besseren Rankings.