Websites & SEO

Responsive Webdesign

Allgemeine Infos

Responsive Webdesign (RWD) liefert allen Geräten dasselbe HTML unter derselben URL aus und passt die Darstellung per CSS an die verfügbare Breite an. Statt einer separaten Mobilseite (etwa m.example.de) gibt es nur eine Version, die gepflegt werden muss.

Für die Google-Suche ist das relevant, weil Google seit Abschluss der Umstellung auf Mobile-First-Indexing (laut Google-Ankündigung bis 5. Juli 2024) die mobile Version einer Seite mit dem Smartphone-Crawler abruft und für Indexierung und Ranking nutzt. Google empfiehlt Responsive Design ausdrücklich als das am einfachsten umzusetzende und zu pflegende Muster.

Abgrenzung: Beim Dynamic Serving liefert der Server je nach Gerät unterschiedliches HTML unter derselben URL aus, bei separaten URLs gibt es eigene Mobilseiten. Beide Varianten sind fehleranfälliger, weil Inhalte, strukturierte Daten und Meta-Angaben doppelt gepflegt werden. Mobile First beschreibt dagegen eine Arbeitsweise: Das Layout wird zuerst für kleine Bildschirme entworfen und dann erweitert.

Funktionsweise & Details

Responsive Webdesign stützt sich auf vier Bausteine:

  1. Viewport-Meta-Tag im Head (<meta name="viewport" content="width=device-width, initial-scale=1">), damit der Mobilbrowser die Seite nicht als verkleinerte Desktopseite darstellt.
  2. Flexible Layouts mit relativen Einheiten (%, rem, fr) sowie Flexbox und CSS Grid statt fester Pixelbreiten.
  3. Media Queries, die ab bestimmten Breiten oder Fähigkeiten (z. B. hover, pointer) andere Regeln anwenden. Breakpoints richten sich nach dem Inhalt, nicht nach konkreten Gerätemodellen.
  4. Flexible Bilder mit max-width: 100 %, srcset und sizes für passende Auflösungen sowie gesetzten width- und height-Attributen, damit der Browser Platz reserviert und kein Layout-Shift entsteht.

CSS-Frameworks wie Bootstrap oder Tailwind CSS bringen diese Muster als fertige Klassen mit.

Vorteile & Nutzen

  • Eine Codebasis und eine URL pro Inhalt, dadurch keine doppelte Pflege und keine abweichenden mobilen Inhalte.
  • Passt zur Mobile-First-Indexierung, weil die mobile Ansicht denselben Inhalt enthält wie die Desktopansicht.
  • Bessere Bedienbarkeit auf Smartphones, was Absprünge und abgebrochene Anfragen reduziert.
  • Unterstützt Barrierefreiheit, da Zoom und Textumbruch bei großer Schrift sauber funktionieren.

Praxisbeispiel

Ein Elektrogroßhändler aus Franken mit 90 Beschäftigten stellt fest, dass über die Hälfte der Besucher mobil kommt, die alte Website auf dem Smartphone aber nur mit Zoomen bedienbar ist. Beim Relaunch setzt die Agentur ein responsives Theme ein, testet die wichtigsten Seiten auf echten Geräten und in den Chrome DevTools und vergrößert Buttons und Formularfelder. Danach meldet der Vertrieb weniger telefonische Rückfragen, weil der Produktfinder auch unterwegs funktioniert.

Worauf sollte man achten?

  • Inhalte auf Mobilgeräten nicht einfach ausblenden: Was mobil fehlt, kennt Google wegen Mobile-First-Indexing nicht.
  • Klickflächen ausreichend groß gestalten; WCAG 2.2 verlangt in Stufe AA mindestens 24 × 24 CSS-Pixel oder ausreichenden Abstand (Kriterium 2.5.8 Target Size).
  • Mit echten Geräten und verschiedenen Zoomstufen testen; das Verkleinern des Browserfensters allein reicht nicht.
  • Bilder per srcset in passenden Größen ausliefern, sonst lädt das Smartphone Desktopbilder und die Ladezeit leidet.

Fazit

Responsive Webdesign ist der Standard für neue Websites und die von Google empfohlene Variante. Wer noch eine separate Mobilseite betreibt, sollte den Wechsel beim nächsten Relaunch einplanen.

Weiterführende Links

Verwandte Artikel