Vor nicht allzu langer Zeit war eine Website eine Sache für den Desktop-Browser. Feste Breite, feste Schriftgröße, festes Layout. Fertig.
Dann kam das Smartphone.
Heute surfen bereits über 60 % der Menschen über ihr Handy. Wer eine Website baut, die nur auf einem 1440px-Monitor gut aussieht, verliert jeden zweiten Besucher noch bevor er den ersten Satz gelesen hat. Responsive Web Design ist die Antwort darauf, und seit Jahren kein Trend mehr, sondern schlicht der Standard.
Dieser Artikel erklärt, wie es funktioniert. In fünf Schritten, von Grund auf.
Was “responsive” überhaupt bedeutet
Der Begriff geht zurück auf den Webentwickler Ethan Marcotte, der ihn 2010 geprägt hat. Die Idee dahinter ist so einfach wie elegant: Eine Website soll sich dem Bildschirm anpassen, auf dem sie gerade angezeigt wird, statt mehrere separate Versionen für Desktop, Tablet und Smartphone zu bauen.
Responsive heißt: ein Quellcode, beliebig viele Bildschirmgrößen.
Das klingt selbstverständlich. Ist es aber nicht. Denn hinter dieser Flexibilität stecken konkrete technische Entscheidungen, die von Anfang an richtig getroffen werden müssen.
Schritt 1: Den Viewport richtig setzen
Der erste und grundlegendste Schritt passiert im <head> jeder HTML-Seite, ein einzelner Meta-Tag, der entscheidet ob das Handy die Seite überhaupt korrekt darstellt:
<meta name="viewport" content="width=device-width, initial-scale=1">Ohne diesen Tag behandelt ein Smartphone die Seite so, als wäre sie für einen Desktop-Monitor gebaut, zoomt raus, macht alles winzig und zwingt den Nutzer zu scrollen und zu kneifen. Mit dem Tag weiß der Browser: Nutze die tatsächliche Bildschirmbreite des Geräts.
Das ist die Grundvoraussetzung für alles weitere. Kein einziger der nächsten Schritte funktioniert ohne ihn.
Schritt 2: Flexible Einheiten statt fixer Pixel
Die häufigste Ursache für nicht-responsive Layouts: alles ist in Pixel (px) angegeben. Feste Breiten, feste Schriftgrößen, feste Abstände.
Pixel sind absolut. Sie ändern sich nicht, egal wie breit der Bildschirm ist. Was auf einem 1200px-Monitor gut aussieht, sprengt auf einem 390px-Smartphone das Layout.
Die Lösung: relative Einheiten.
/* Nicht das: */
.container { width: 960px; }
/* Sondern das: */
.container { width: 90%; max-width: 1200px; }Die wichtigsten relativen Einheiten im Überblick:
| Einheit | Bedeutung | Typischer Einsatz |
|---|---|---|
% | Prozent des Elternelements | Breiten, Abstände |
em | Relativ zur Schriftgröße des Elternelements | Abstände, Schriftgrößen |
rem | Relativ zur Basis-Schriftgröße des Dokuments | Schriftgrößen, konsistente Abstände |
vw | 1 % der Viewport-Breite | Hero-Bereiche, Fluid-Typography |
vh | 1 % der Viewport-Höhe | Vollbild-Sektionen |
clamp() | Wert zwischen Minimum und Maximum | Fluid-Schriftgrößen |
Ein Beispiel für eine Schriftgröße die auf jedem Bildschirm gut skaliert:
h1 {
font-size: clamp(1.8rem, 4vw, 3.5rem);
/* Minimum: 1.8rem | Fluid: 4vw | Maximum: 3.5rem */
}Schritt 3: Flexible Layouts mit Flexbox und Grid
Früher haben Entwickler Layouts mit float gebaut, ein Workaround, der nie für Layouts gedacht war und entsprechend kompliziert zu handhaben war.
2026 gibt es zwei native CSS-Systeme die das ersetzen, und beide sind für responsive Designs gemacht:
CSS Flexbox, für eindimensionale Layouts
Flexbox ordnet Elemente in einer Reihe oder Spalte an und verteilt den verfügbaren Platz automatisch:
.card-row {
display: flex;
flex-wrap: wrap; /* Bricht um wenn kein Platz mehr da ist */
gap: 1.5rem;
}
.card {
flex: 1 1 280px; /* Wächst, schrumpft, Mindestbreite 280px */
}Das Ergebnis: Auf einem breiten Bildschirm liegen drei Karten nebeneinander. Auf dem Smartphone stapeln sie sich automatisch untereinander. Kein Media Query nötig.
CSS Grid, für zweidimensionale Layouts
Grid denkt in Zeilen und Spalten gleichzeitig, ideal für komplexe Seitenlayouts:
.layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}auto-fit und minmax zusammen sind eine der mächtigsten Responsive-Kombinationen in CSS: Spalten füllen den verfügbaren Platz, und wenn nicht genug Platz für eine weitere Spalte da ist, bricht das Layout um, vollautomatisch.
Schritt 4: Media Queries, gezielte Anpassungen
Flexible Einheiten und Grid/Flexbox lösen den Großteil aller Responsive-Probleme. Aber manchmal braucht man gezielte Anpassungen für bestimmte Bildschirmgrößen. Dafür gibt es Media Queries.
/* Standard-Layout für alle Bildschirme */
.nav {
display: flex;
flex-direction: column;
}
/* Ab 768px Breite: Navigation wird horizontal */
@media (min-width: 768px) {
.nav {
flex-direction: row;
}
}Mobile First, die richtige Reihenfolge
Es gibt zwei Ansätze: Mobile First und Desktop First. Mobile First ist der bessere.
Das bedeutet: Das Basis-CSS stylt die mobile Ansicht. Media Queries erweitern das Layout für größere Bildschirme (min-width). Nicht umgekehrt.
Warum? Weil mobiles CSS in der Regel schlanker ist. Was auf dem Smartphone funktioniert, lässt sich leichter erweitern als eine Desktop-Ansicht die man auf kleinen Bildschirmen mühsam zurückbaut. Und Google indexiert mobile-first, das Basis-Styling sollte also das mobile sein.
Typische Breakpoints (kein striktes Gesetz)
/* Mobile (Standard, kein Query nötig) */
/* Tablets und größer */
@media (min-width: 640px) { ... }
/* Laptop und größer */
@media (min-width: 1024px) { ... }
/* Desktop und größer */
@media (min-width: 1280px) { ... }Diese Werte sind Orientierungspunkte, keine heiligen Zahlen. Der beste Breakpoint ist der, an dem dein spezifisches Layout anfängt schlecht auszusehen, nicht irgendein Standard-Wert.
Schritt 5: Bilder und Medien responsiv machen
Bilder sind der häufigste Performance-Killer auf Mobilgeräten, und einer der einfachsten zu beheben.
Die CSS-Grundregel
img {
max-width: 100%;
height: auto;
}Zwei Zeilen. Verhindert, dass Bilder über ihren Container hinausragen, und hält das Seitenverhältnis korrekt. Gehört in jedes CSS-Reset.
Das srcset-Attribut
Ein 2400px-Bild auf einem Smartphone mit 390px Breite? Das lädt unnötig viel Daten und bremst die Seite. Mit srcset liefert der Browser automatisch die passende Größe:
<img
src="bild-800.jpg"
srcset="bild-400.jpg 400w, bild-800.jpg 800w, bild-1600.jpg 1600w"
sizes="(max-width: 640px) 100vw, 50vw"
alt="Beschreibung des Bildes"
loading="lazy"
>Der Browser entscheidet anhand der Bildschirmgröße und Auflösung selbst, welche Datei er lädt. Auf dem Smartphone die kleine, auf dem Retina-Display die große. Automatisch.
Moderne Bildformate
WebP ist inzwischen von allen modernen Browsern unterstützt und produziert bei gleicher Qualität 25-35 % kleinere Dateien als JPEG. AVIF spart nochmal mehr, aber die Browser-Unterstützung ist noch nicht überall vollständig. Mit dem <picture>-Element liefert man das beste Format je nach Browser:
<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Beschreibung">
</picture>Responsive testen, so geht es richtig
Entwicklertools im Browser (F12 → Toggle Device Toolbar) sind praktisch für schnelle Checks, aber kein Ersatz für echtes Testen. Simuliertes Mobile ist nicht dasselbe wie ein echter Touchscreen.
Minimum-Teststrategie:
- Echtes iPhone oder Android-Gerät, aktueller Browser
- Kleines Smartphone (ca. 375-390px Breite), hier scheitern die meisten Layouts
- Tablet im Hochformat (768px)
- Desktop-Monitor
Dazu kommt: Teste nicht nur die Darstellung, sondern die Bedienbarkeit. Lassen sich Buttons mit dem Daumen treffen? Öffnet sich die Navigation? Kann man Formulare ausfüllen ohne zu zoomen?
Zusammenfassung: Die 5 Schritte auf einen Blick
| Schritt | Was passiert | Werkzeug |
|---|---|---|
| 1. Viewport | Browser weiß, echte Gerätebreite zu nutzen | <meta name="viewport"> |
| 2. Flexible Einheiten | Kein starres Pixel-Denken mehr | %, rem, vw, clamp() |
| 3. Flexible Layouts | Inhalt ordnet sich selbst an | CSS Flexbox & Grid |
| 4. Media Queries | Gezielte Anpassungen je Bildschirmgröße | @media (min-width: ...) |
| 5. Responsive Bilder | Richtige Größe für jedes Gerät | srcset, WebP, max-width: 100% |
Responsive Web Design ist kein Trick und kein Plugin. Es ist eine Denkweise: Von Anfang an für alle Bildschirme bauen, statt Desktop zu bauen und dann Schadensbegrenzung für Mobilgeräte zu betreiben.
Wer das von Beginn an richtig macht, hat am Ende eine schnellere, bessere und universell nutzbare Website, ohne Kompromisse.
Du willst eine Website die auf jedem Gerät gut aussieht und schnell lädt? Ich bau sie dir.
Kommentare