Responsive Web design sorgt dafür, dass deine Website auf dem Smartphone genauso gut aussieht wie auf dem 27-Zoll-Monitor — ohne dass du drei verschiedene Seiten pflegen musst. In diesem Guide lernst du Schritt für Schritt, wie du mit Viewport-Meta-Tag, Mobile-First, Media Queries, relativen Einheiten und flexiblen Layouts ein Design baust, das sich automatisch an jedes Gerät anpasst. Du brauchst dafür nur HTML und CSS — keine Frameworks, keine Magie.
Mehr als 60 % aller Seitenaufrufe kommen weltweit vom Smartphone, und Google bewertet Websites seit Jahren primär über die mobile Version (Mobile-First-Indexing). Wer hier nicht responsive arbeitet, verliert Besucher und Rankings. Die gute Message: Responsive Web design ist kein Hexenwerk, sondern eine Handvoll Techniken, die du in einem Nachmittag verstehst. Los geht's.
Warum responsive Pflicht ist — nicht Kür
Früher baute man eine feste Pixel-Breite, etwa 980 px, und alle schauten auf ähnlichen Desktop-Monitoren. Heute reicht die Bandbreite vom 320-px-Smartphone über Tablets und Laptops bis zu Ultrawide-Displays und Faltbaren. Ein starres Layout zwingt mobile Nutzer zum Zoomen und seitlichen Scrollen — und sie springen ab.
- Reichweite: Die Mehrheit deiner Besucher ist mobil. Eine nicht-responsive Seite verschenkt direkt deren Aufmerksamkeit.
- SEO: Google indexiert die mobile Variante. Schlechte Mobile-Darstellung = schlechtere Rankings, auch am Desktop.
- Wartung: Ein einziges responsives Layout statt getrennter Mobil- und Desktop-Seiten spart dir enorm viel Pflege.
- Conversion: Lesbare Buttons, antippbare Links und keine quetschenden Spalten führen schlicht zu mehr Käufen, Anfragen und Klicks.
Der Startschuss: das Viewport-Meta-Tag
Ohne diese eine Zeile im <head> ist jede Mühe umsonst — Smartphones rendern deine Seite dann in einer virtuellen Breite von rund 980 px und skalieren sie winzig herunter. Das Viewport-Tag sagt dem Browser: nimm die echte Gerätebreite.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width setzt die Layout-Breite auf die physische Bildschirmbreite, initial-scale=1.0 verhindert ungewolltes Zoomen beim Laden. Diese Zeile gehört in jede HTML-Seite. Setze keinen maximum-scale oder user-scalable=no — das blockiert das Zoomen und ist ein Barrierefreiheits-Problem.
Mobile-First: klein anfangen, groß denken
Beim Mobile-First-Ansatz schreibst du dein Basis-CSS für die kleinste Ansicht und erweiterst es dann nach oben für größere Schirme. Das hat zwei handfeste Vorteile: Smartphones laden nur das, was sie brauchen (schneller!), und du wirst gezwungen, dich auf das Wesentliche zu konzentrieren.
Basis ohne Media Query
Schreibe das Layout für Mobil: eine Spalte, große Schrift, gestapelte Elemente. Das ist dein Fundament.
Nach oben aufbohren
Mit min-width-Media-Queries fügst du ab Tablet- und Desktop-Breite mehrspaltige Layouts und mehr Abstand hinzu.
Inhalt zuerst
Priorisiere, was mobil sichtbar sein muss. Was am Handy unwichtig ist, ist es meist auch am Desktop.
Nutze konsequent min-width statt max-width. So baust du additiv vom Kleinen ins Große — das CSS bleibt logischer und Konflikte zwischen Breakpoints werden seltener.
Media Queries: Regeln je nach Bildschirm
Media Queries sind das Herzstück. Sie aktivieren CSS-Regeln nur, wenn eine Bedingung zutrifft — typischerweise eine Mindestbreite. So sieht eine Mobile-First-Query aus, die ab 768 px zwei Spalten erzeugt:
