Responsive Design

Responsive Design passt Layout, Texte und Bilder automatisch an die Bildschirmgrösse an – mit flexiblen Rastern, CSS Media Queries und responsiven Bildern. Google empfiehlt es ausdrücklich; es ist die Grundlage für Mobile-First-Indexing und gute mobile Nutzererfahrung.

Ein Grossteil der Internetnutzung findet heute auf Smartphones statt, im E-Commerce sogar der grösste Teil der Besuche. Websites müssen deshalb auf jedem Gerät gut funktionieren – vom kleinen Smartphone bis zum grossen Monitor. Google bewertet Websites zudem nach ihrer mobilen Version (Mobile-First-Indexing). Die Standardlösung dafür ist Responsive Design.

Was ist Responsive Design?

Responsive Design stammt aus dem Webdesign und bedeutet „reagierende Gestaltung“: Das Layout einer Seite passt sich automatisch an die Bildschirmgrösse des jeweiligen Geräts an. Statt mit festen Pixelbreiten wird mit relativen Grössen und flexiblen Rastern gearbeitet.

Mit Responsive Design ist es egal, mit welchem Gerät eine Seite aufgerufen wird. Ob Desktop, Tablet oder Smartphone, ob Hoch- oder Querformat – die Seite passt sich an. Eine separate mobile Website ist nicht nötig, denn eine einzige Website unter einer URL deckt alle Geräte ab. Angepasst werden nicht nur Texte, sondern auch Bilder, Navigation, Tabellen und Formulare. Moderne Shopsysteme wie Shopware und Shopify arbeiten standardmässig mit responsiven Themes.

Die Notwendigkeit zeigt sich nicht nur zwischen PC, Tablet und Smartphone, sondern auch innerhalb dieser Gerätegruppen, denn Bildschirmgrössen unterscheiden sich stark. Der grosse Vorteil: Nutzer müssen Inhalte nicht mit zwei Fingern vergrössern oder verkleinern, sondern können bequem scrollen. Gerade auf dem Smartphone ist das deutlich angenehmer.

Wie funktioniert Responsive Design?

Grundlage ist ein flexibles Raster (Grid) aus Spalten und Reihen, in dem alle Elemente einer Seite angeordnet werden. Mit HTML, CSS, Media Queries und Breakpoints wird festgelegt, wie sich dieses Raster auf unterschiedlichen Bildschirmen verhält.

HTML gibt der Website ihre Struktur. Mit CSS werden Layout und Gestaltung der Elemente festgelegt. Media Queries sind CSS-Regeln, die abhängig von Bildschirmbreite, Auflösung oder Ausrichtung des Geräts greifen. Damit Smartphones die Seite richtig skalieren, braucht es ausserdem das Viewport-Meta-Tag im HTML-Kopf.

Breakpoints sind die Bildschirmbreiten, ab denen eine andere Layoutvariante gilt – etwa wenn aus einer dreispaltigen Produktliste auf dem Smartphone eine einspaltige wird. Bilder werden über responsive Bildformate (srcset) in der jeweils passenden Grösse ausgeliefert, damit Smartphones keine unnötig grossen Dateien laden.

Responsive Design setzte sich in den 2010er-Jahren mit der Verbreitung von Smartphones und Tablets durch. Flexible Raster mit relativen Werten sorgen dafür, dass Inhalte passend zur Bildschirmgrösse dargestellt werden. Das lässt sich leicht ausprobieren: Verkleinern Sie das Browserfenster auf dieser Seite, und Sie sehen, wie sich die Darstellung anpasst.

Responsive Design und die Bedeutung für die Suchmaschinenoptimierung

Responsive Design hat eine grosse Bedeutung für die Suchmaschinenoptimierung.

Responsive Design ermöglicht es Nutzern, Inhalte und Angebote auf jedem Gerät bequem zu nutzen. Eine gute mobile Nutzererfahrung senkt Absprünge, erhöht die Conversion Rate und stärkt die Signale, die Google auswertet – etwa über die Core Web Vitals und das Verhalten der Nutzer in den Suchergebnissen.

Google hat die mobile Nutzung schrittweise in den Mittelpunkt gerückt. Seit April 2015 ist Mobilfreundlichkeit ein Rankingfaktor für mobile Suchanfragen. Mit dem Mobile-First-Indexing ist Google noch weiter gegangen: Bewertet wird inzwischen grundsätzlich die mobile Version einer Website – auch für die Desktop-Suche. Google empfiehlt Responsive Design ausdrücklich als einfachste und am wenigsten fehleranfällige Lösung, weil alle Geräte dieselbe URL und denselben Inhalt erhalten.

Man stelle sich vor, eine Website wird auf dem Smartphone aufgerufen und sieht aus wie eine Desktopseite, die in einen kleinen Bildschirm gepresst wurde. Die Lust am Surfen – und am Einkaufen – ist schnell vorbei. Eine mobilfreundliche Website sorgt dagegen für eine gute Nutzererfahrung: Besucher finden Informationen schnell und übersichtlich und kommen leichter zum Kauf.

Mit Responsive Design entfällt die Pflege einer separaten mobilen Website. Der grosse Vorteil: Nutzer finden auf jedem Gerät dieselben Inhalte vor – nur anders dargestellt. Getrennte mobile Websites boten dagegen oft nur einen reduzierten Umfang, was beim Mobile-First-Indexing direkt Rankings kosten kann.