Responsive Webdesign bedeutet, dass sich eine Website automatisch an jedes Gerät anpasst: an das Smartphone in der Hand, das Tablet auf dem Sofa und den großen Monitor im Büro. Inhalte werden neu angeordnet, Bilder skaliert und Bedienelemente groß genug zum Tippen dargestellt. Das ist heute keine Kür mehr, sondern Pflicht, denn in Deutschland kommt inzwischen die Mehrheit der Website-Aufrufe vom Smartphone. Hier erfährst du, wie responsives Design funktioniert, warum es für Google so wichtig ist, woran du eine gut umgesetzte Seite erkennst und wie du deine eigene Website prüfst.
Was ist Responsive Webdesign?
Bei responsivem Webdesign gibt es nicht mehrere Versionen einer Website für verschiedene Geräte, sondern eine einzige Website, die sich flexibel verhält. Je nach verfügbarer Breite ordnet sie Inhalte anders an: Drei Spalten auf dem Desktop werden auf dem Smartphone zu einer Spalte untereinander, das Menü verschwindet hinter einem Symbol, Bilder werden kleiner und Schriften bleiben lesbar.
Früher wurden oft getrennte mobile Seiten gebaut, etwa unter m.domain.de. Das bedeutete doppelte Pflege und häufig fehlende Inhalte auf der mobilen Version. Responsive Design löst das, weil alle Geräte dieselben Inhalte und dieselbe Adresse nutzen.
Warum responsives Design heute Pflicht ist
- Die meisten Besucher kommen mobil: Laut Statcounter entfielen im September 2026 in Deutschland 59,85 % der Website-Aufrufe auf Smartphones. Eine Seite, die mobil schlecht funktioniert, verliert also die Mehrheit ihrer Besucher.
- Google schaut zuerst aufs Smartphone: Google verwendet für Indexierung und Ranking die mobile Version des Website-Inhalts. Was mobil fehlt oder schlecht lesbar ist, zählt für Google nicht.
- Anfragen entstehen unterwegs: Viele Menschen suchen kurzfristig auf dem Smartphone nach einem Anbieter und rufen direkt an. Ein gut sichtbarer Anruf-Button bringt hier unmittelbar Kunden.
- Nur eine Website pflegen: Inhalte werden einmal gepflegt und erscheinen überall korrekt.
So funktioniert Responsive Webdesign technisch
Keine Sorge, du musst das nicht selbst programmieren. Es hilft aber zu wissen, worauf es ankommt, wenn du mit einem Webdesigner sprichst oder eine Website beurteilst. Laut web.dev sind das die Kerntechniken:
- Viewport-Meta-Tag: Eine kleine Angabe im Kopf der Seite sagt dem Browser, dass die Seite an die Gerätebreite angepasst werden soll. Ohne sie zeigen mobile Browser die Desktop-Version stark verkleinert an. Wichtig: Zoomen sollte nicht gesperrt werden.
- Flexible Layouts: Statt fester Pixelbreiten werden relative Breiten und moderne Techniken wie Flexbox und CSS-Grid genutzt, sodass sich Spalten an den verfügbaren Platz anpassen.
- Media Queries: Regeln, die je nach Bildschirmbreite oder Eingabeart andere Darstellungen festlegen, etwa eine Spalte statt drei.
- Breakpoints nach Inhalt: Die Umbruchpunkte richten sich nach dem Inhalt, nicht nach bestimmten Geräten. Man beginnt mit dem kleinen Bildschirm und setzt einen Umbruch dort, wo das Layout nicht mehr passt.
- Flexible Bilder: Bilder passen sich der verfügbaren Breite an. Feste Angaben zu Breite und Höhe verhindern, dass sich der Inhalt beim Laden verschiebt.
Mobile First
Viele moderne Websites werden nach dem Prinzip „Mobile First“ geplant: Zuerst wird die Smartphone-Version gestaltet, danach wird das Layout für größere Bildschirme erweitert. Das zwingt dazu, sich auf das Wesentliche zu konzentrieren, und passt dazu, dass Google und die meisten Besucher die mobile Version zuerst sehen.
Responsiv, adaptiv oder eigene App?
- Responsives Design: Eine Website, deren Layout fließend auf jede Breite reagiert. Der heutige Standard und für fast alle Unternehmenswebsites die richtige Wahl.
- Adaptives Design: Die Website liefert für bestimmte Gerätegruppen fest vorbereitete Layouts aus. Das ist aufwendiger zu pflegen und deckt neue Bildschirmgrößen schlechter ab.
- Eigene App: Sinnvoll nur, wenn Kunden dein Angebot sehr regelmäßig nutzen, etwa zum Bestellen oder Buchen. Für eine normale Unternehmenswebsite ersetzt eine gute responsive Seite jede App.
Für kleine Unternehmen gilt fast immer: Eine gut gemachte responsive Website ist die günstigste und wirksamste Lösung.
Woran du eine gute mobile Website erkennst
- Lesbare Schrift ohne Zoomen: Texte sind groß genug, Zeilen nicht zu lang.
- Kein seitliches Scrollen: Nichts ragt über den Bildschirmrand hinaus.
- Große Tippziele: Buttons und Links lassen sich mit dem Daumen sicher treffen. web.dev empfiehlt etwa 48 Pixel mit rund 8 Pixeln Abstand, die Barrierefreiheitsrichtlinien WCAG 2.2 fordern mindestens 24 mal 24 Pixel.
- Telefonnummer antippbar: Ein Tippen startet direkt den Anruf.
- Einfache Navigation: Das Menü ist leicht zu öffnen und zu schließen, die wichtigsten Punkte sind schnell erreichbar.
- Kurze Formulare: Wenige Felder, passende Tastaturen für E-Mail und Telefonnummer.
- Schnelle Ladezeit: Bilder in passender Größe, kein unnötiger Ballast.
- Keine störenden Pop-ups: Banner, die den Inhalt verdecken und sich schwer schließen lassen, vertreiben Besucher.
So prüfst du deine Website
- Selbst ausprobieren: Öffne deine Website auf dem eigenen Smartphone und versuche, als Kunde eine Anfrage zu stellen. Wo hakt es?
- Verschiedene Geräte testen: Kleines und großes Smartphone, Tablet im Hoch- und Querformat.
- Browser-Werkzeuge nutzen: In den Entwicklerwerkzeugen von Chrome lässt sich die Ansicht verschiedener Geräte simulieren.
- PageSpeed Insights: Zeigt Ladezeit und Core Web Vitals getrennt für Mobilgeräte.
- Search Console: Hinweise zu Problemen mit der Darstellung und den Core Web Vitals für alle Seiten.
Häufige Fehler
- Desktop zuerst, mobil vergessen: Die Seite sieht am Monitor gut aus, mobil sind Texte winzig oder Elemente überlappen.
- Inhalte mobil ausblenden: Was auf dem Smartphone fehlt, fehlt auch für Google.
- Riesige Bilder: Desktop-Bilder in voller Größe bremsen die mobile Ladezeit.
- Winzige Links: Eng beieinanderliegende Links führen zu Fehlklicks.
- Tabellen ohne Anpassung: Breite Tabellen sprengen das Layout, wenn sie nicht horizontal scrollbar sind.
- Zoom gesperrt: Menschen mit Sehschwäche können die Seite dann nicht vergrößern.
Responsive Design und Baukasten oder WordPress
Die meisten aktuellen Vorlagen von Baukästen und WordPress-Themes sind grundsätzlich responsiv. Probleme entstehen oft durch eigene Anpassungen, Page-Builder mit festen Abständen oder Plugins, die zusätzliche Elemente einblenden. Prüfe deshalb nicht nur, ob die Vorlage responsiv ist, sondern wie deine konkrete Website mit deinen Inhalten auf dem Smartphone aussieht.
Fazit: Erst das Smartphone, dann der Rest
- Responsive Webdesign passt eine einzige Website automatisch an alle Bildschirmgrößen an.
- Die Mehrheit der Aufrufe in Deutschland kommt vom Smartphone, und Google bewertet die mobile Version.
- Viewport, flexible Layouts, Media Queries und flexible Bilder sind die technische Basis.
- Große Tippziele, lesbare Schrift, schnelle Ladezeit und ein antippbarer Anruf-Button machen den Unterschied.
Mein Rat: Teste deine Website heute auf deinem eigenen Smartphone, so als wärst du ein Kunde. Was dich dort nervt, nervt auch deine Besucher, und die sind nur einen Fingertipp von der Konkurrenz entfernt.
