Responsive Webdesign einfach erklärt: Vorteile und Beispiele

Deine Website sieht am Computer gut aus, auf dem Handy musst du aber zoomen und seitlich wischen? Dann fehlt ihr responsives Webdesign. Hier ist die Definition, die wichtigsten Vorteile und eine Checkliste, mit der du deine Website mobil optimieren kannst.

Responsive Webdesign: die Definition

Responsives Webdesign bedeutet, dass sich eine Website automatisch an die Bildschirmgröße anpasst. Es gibt nur eine Website mit einer Adresse. Das Layout ordnet sich je nach Gerät neu: Spalten stehen auf dem Handy untereinander, Bilder werden kleiner, das Menü klappt in einen Knopf. Technisch geschieht das über flexible Raster und sogenannte Media Queries im CSS. Früher gab es oft eine getrennte Handy-Fassung unter einer eigenen Adresse wie m.beispiel.de. Das ist heute nicht mehr üblich.

Warum das für Google zählt

Google crawlt Websites seit dem 5. Juli 2024 nur noch mit dem Smartphone-Googlebot (Quelle: developers.google.com/search/blog, Juni 2024). Bewertet wird also die Handy-Fassung deiner Seite. Inhalte, die auf dem Handy fehlen oder nicht erreichbar sind, kann Google nicht berücksichtigen. Dazu kommt das Verhalten der Besucher: Gerade bei lokalen Suchen kommen viele Anfragen vom Smartphone, und wer sich durch eine unpassende Seite quälen muss, ist schnell wieder weg.

Die Vorteile von responsivem Webdesign

• Eine Website für alle Geräte, nur ein Inhalt zu pflegen.
• Bessere Bedienung auf Handy und Tablet, damit mehr Anrufe und Anfragen.
• Grundlage für gute Platzierungen bei Google.
• Kürzere Ladezeiten, wenn Bilder passend zur Bildschirmgröße geladen werden.
• Bessere Barrierefreiheit, weil Text vergrößert werden kann, ohne dass die Seite zerfällt.

Beispiele: Was sich auf dem Handy ändert

• Das Hauptmenü wird zu einem Menüknopf.
• Mehrspaltige Bereiche stehen untereinander.
• Die Telefonnummer wird zum Knopf, der direkt anruft.
• Bilder werden in kleinerer Auflösung geladen.
• Formularfelder haben mindestens 16 Pixel Schriftgröße. Sonst zoomt das iPhone beim Antippen automatisch hinein.

Website mobil optimieren: Checkliste

• Im Quelltext steht die Viewport-Angabe für mobile Geräte.
• Nichts lässt sich seitlich verschieben, kein Element ist breiter als der Bildschirm.
• Schrift ist ohne Zoomen lesbar.
• Knöpfe und Links sind groß genug zum Tippen und haben Abstand zueinander.
• Keine großen Einblendungen, die beim Öffnen den Inhalt verdecken. Google nennt solche aufdringlichen Pop-ups ausdrücklich als Problem für die Nutzererfahrung.
• Bilder in modernen Formaten wie WebP oder AVIF und in passender Größe.
• Die Seite lädt auch mit schwachem Empfang zügig.

So testest du deine Seite

Öffne sie auf deinem eigenen Handy und versuch, einen Termin anzufragen. Am Computer kannst du in Chrome mit F12 die Geräteansicht einschalten und verschiedene Handys simulieren. PageSpeed Insights (pagespeed.web.dev) zeigt Ladezeit und mobile Probleme. Der kostenlose Website-Check auf dieser Seite prüft unter anderem, ob die Handy-Angabe vorhanden ist.

Häufige Fragen

Was ist der Unterschied zwischen responsiv und einer App?

Eine responsive Website läuft im Browser und braucht keine Installation. Eine App muss aus dem App Store geladen werden. Für die meisten lokalen Betriebe ist eine gute responsive Website völlig ausreichend.

Kann man eine alte Website nachträglich responsiv machen?

Manchmal mit einem neuen Theme oder angepasstem CSS. Bei sehr alten Seiten ist ein Neubau oft günstiger und sauberer als Flickwerk.