Was bedeutet Responsive Design?

Responsive Webdesign beschreibt den Ansatz, eine Website zu entwickeln, die auf verschiedenen Endgeräten optimal dargestellt wird. Der Begriff Responsive Design ist so alt wie das mobile Web und als Standardansatz im Webdesign verankert.

Responsive Webdesign im Überblick

Vor dem Aufkommen des mobilen Webs war die Landschaft der internetfähigen Endgeräte stark homogen: Es gab Desktop- oder Laptop-Rechner, die sich in Bezug auf die Ein- und Ausgabemedien recht ähnlich waren. Beide Arten von Geräten verfügten über Tastatur und Maus bzw. Trackpad sowie einen Bildschirm mit einer Breite von ca. 1.000 bis 2.000 Pixel.

Um damals eine Website zu entwickeln, die auf der Mehrzahl der eingesetzten Geräte ordentlich dargestellt wurde, musste kein ungebührender Aufwand betrieben werden. Die einfachste Lösung bestand darin, die Breite der Seiten auf den kleinsten gemeinsamen Nenner zu begrenzen. Ein beliebter Ansatz war, die Seiten 800 Pixel breit und zentriert oder linksbündig darzustellen. Auf einem größeren Bildschirm gab es so ggf. etwas mehr Weißraum, aber die Seiten waren auf allen Geräten gut lesbar.

Mit der Entwicklung von Mobilgeräten diversifizierte sich die Landschaft der internetfähigen Geräte grundlegend. Während sich die Bildschirme der ursprünglichen internetfähigen Geräte ähnlich waren, unterscheiden sich die Bildschirme der modernen Technik wie Smartphones, Tablets und Co in vielerlei Hinsicht: Moderne Geräte decken Bildschirmbreiten von 320 Pixel bis weit über 4.000 Pixel ab. Doch neben den reinen Pixel-Dimensionen muss auch die individuelle physische Auflösung („pixels per inch“, ppi) der Retina-Displays beachtet werden sowie das Device Pixel Ratio (DPR). Außerdem erfolgt die Navigation nicht unbedingt mit einer Maus, sondern auch mit dem Finger.

Eine responsive Website passt sich an den jeweils vorhandenen Platz auf dem Bildschirm an. Man spricht dabei auch von „screen real estate“. Die Website soll auf allen Geräten gut aussehen und eine optimale User Experience (UX) bieten.

Responsive Webdesign umfasst eine Vielzahl an Techniken und Ansätzen, die kombiniert werden, um eine vollständig responsive Website zu entwickeln. Dazu gehören insbesondere:

• HTML5-Elemente wie picture und Attribute wie srcset und sizes
• CSS Media Queries
• CSS-Einheiten
• Einsatz mehrerer Assets einer Ressource
• Mobile-First-Ansatz

Neben klassischen Smartphones und Tablets gewinnen zunehmend Foldables und Dual-Screen-Geräte an Bedeutung. Diese Geräte können ihre Displayfläche dynamisch verändern, etwa beim Aufklappen oder beim Wechsel zwischen ein- und zweigeteilter Ansicht. Für das Responsive Webdesign bedeutet dies, dass Layouts nicht nur auf unterschiedliche Bildschirmgrößen reagieren müssen, sondern auch auf plötzliche Änderungen der verfügbaren Fläche während der Nutzung. Moderne responsive Websites sollten daher flexibel genug sein, um Inhalte auch bei wechselnden Formfaktoren konsistent und nutzerfreundlich darzustellen.

Warum sollte eine Website responsiv gestaltet werden?

Die Entwicklung einer responsiven Website bietet verschiedene Vorteile. Dabei steht die User Experience im Vordergrund. Prinzipiell lässt sich eine gute Erfahrung der Nutzenden auch ohne responsives Design umsetzen. Dies bedingt dann aber entweder eine eigene mobile Seite oder die Nutzung von JavaScript. In der Summe ist das dann oft deutlich komplexer als der CSS-basierte Responsive-Webdesign-Ansatz und führt zu mehr Aufwand für die Pflege der unterschiedlichen Site-Versionen.

Responsive Webdesign für optimales Design

Das Design einer Website beeinflusst ausschlaggebend, wie Besuchende die dargestellten Informationen wahrnehmen. Ein gutes Design spiegelt die Identität der hinter der Website stehenden Organisation wider und hilft, Besuchende an die Marke zu binden. Besuchende sollen sich auf der Website wohlfühlen und eine positive Erfahrung machen. Betrachten wir zwei Beispiele, wie Responsive Webdesign zur optimalen Nutzererfahrung beiträgt:

• Nehmen wir an, eine Überschrift auf einem Mobilgerät füllt den gesamten Bildschirm. Jedoch fällt die Überschrift auf der Desktop-Version in gleicher Schriftgröße kaum auf. Auf dem Desktop muss die Überschrift größer dargestellt werden, um tatsächlich das Auge der Besuchenden auf sich zu ziehen.
• Auf einem Blog wird rechts neben dem Artikel eine Sidebar dargestellt. Die Sidebar enthält Links zu weiteren Artikeln mit kleinen Vorschaubildern. In der Desktop-Version hilft die Sidebar, die Artikelbreite zu begrenzen und trägt damit zur Lesbarkeit bei. Auf einem Mobilgerät würde die Sidebar jedoch fast die Hälfte des Screens bedecken. Das Layout muss auf Mobilgeräten umgeschaltet werden, damit der Inhalt der Sidebar unterhalb des Artikels erscheint.

Responsive Webdesign für die optimale User Experience (UX)

Prinzipiell wird eine nicht responsiv aufgebaute Website auf dem kleinen Bildschirm eines Mobilgeräts genauso dargestellt wie auf dem Desktop, nur eben sehr viel kleiner. Das zwingt Nutzende, in einzelne Seitenbereiche hineinzuzoomen. Daher ist es besser, eine optimierte Version anzubieten. Ein paar Beispiele:

• Ein Button auf einer Website wird am Desktop mit der Maus angeklickt. Ein Mobilgerät wird jedoch mit dem Finger bedient. Der Button muss daher für die Mobilversion größer sein und mehr Abstand zu anderen Elementen erhalten.
• Stellen Sie sich ein Formular auf einer Seite vor. Normalerweise wird diesem per CSS ein Innenabstand (padding) zugewiesen, damit der enthaltene Text gut lesbar ist und die Ränder des Formulars nicht berührt. Ein Innenabstand von jeweils 20 Pixeln rechts und links ist normal und sieht auf großen Bildschirmen gut aus. Aber auf dem Mobilgerät mit nur 320 Pixeln Bildschirmbreite gehen 40 von 320 Pixeln verloren (also ein Achtel). Hat das Formular auch noch einen Außenabstand (margin), sagen wir weitere 20 Pixel pro Seite, gehen auf dem Mobilgerät 25 Prozent des verfügbaren Platzes verloren. Um dies zu verhindern, sollten die Abstände auf dem Mobilgerät verringert werden.

Website nicht responsiv: Was sind die möglichen Konsequenzen?

Ein großer Prozentsatz der Nutzenden greift heutzutage über mobile Geräte auf Webinhalte zu. Es gibt reale, schwerwiegende Nachteile, wenn eine Website nicht komplett responsiv aufgebaut ist. Dazu zählen insbesondere:

• Schlechte Conversion-Rate und hohe Bounce-Rate, verursacht durch suboptimales Design und Störung der User Experience
• Schlechtes Suchmaschinenranking, denn Google bewertet u. a. Mobile Usability, Core Web Vitals und Touch-Zielgrößen
• Schlechte Performance durch Laden nicht optimierter Ressourcen (messbar z. B. über Largest Contentful Paint (LCP) und Interaction to Next Paint (INP)

Core Web Vitals: Messgrößen der User Experience

Um die tatsächliche Nutzererfahrung objektiv zu bewerten, nutzt Google die sogenannten Core Web Vitals. Dabei handelt es sich um standardisierte Leistungskennzahlen, die messen, wie schnell Inhalte geladen werden, wie stabil das Layout ist und wie reaktionsfähig eine Website auf Nutzereingaben reagiert. Die wichtigsten Core Web Vitals sind:

• Largest Contentful Paint (LCP): misst, wie lange es dauert, bis das größte sichtbare Inhaltselement gerendert ist (Zielwert ≤ 2,5 s)
• Interaction to Next Paint (INP): erfasst die Reaktionsfähigkeit einer Seite bei Nutzerinteraktionen (Zielwert ≤ 200 ms)
• Cumulative Layout Shift (CLS): bewertet, ob sich Inhalte während des Ladens unerwartet verschieben (Zielwert ≤ 0,1)

Nicht responsiv gestaltete Websites schneiden bei diesen Werten häufig schlechter ab, etwa durch zu große Bilddateien, nachladende Inhalte oder Layout-Anpassungen, die nicht auf mobile Geräte abgestimmt sind.

Tools zur Analyse der Core Web Vitals

Die Core Web Vitals lassen sich mit verschiedenen Tools messen. Besonders verbreitet sind die folgenden:

• Google PageSpeed Insights: analysiert einzelne Seiten und kombiniert Felddaten realer Nutzer mit Labordaten
• Google Lighthouse: integriert in die Chrome-Entwicklertools und geeignet für detaillierte Performance-Analysen
• Google Search Console: zeigt aggregierte Core-Web-Vitals-Daten für ganze Websites und identifiziert problematische URLs

Diese Tools helfen dabei, Schwachstellen gezielt zu erkennen und zu überprüfen, wie sich responsive Anpassungen konkret auf die Nutzererfahrung auswirken.

Welche Aspekte der Webentwicklung werden vom Responsive Design beeinflusst?

Responsive Design umfasst verschiedene Ansätze und Technologien. Normalerweise gibt es für die unterschiedlichen Szenarien mehrere Lösungswege. Die Entwicklung befindet sich weiterhin im Fluss.

Responsive Layout

Das Umsetzen komplexer Layouts auf Websites war seit Beginn des World Wide Web eine Wissenschaft für sich. HTML kennt verschiedene Element-Typen: block, inline und inline-block. Block-Elemente nehmen die gesamte verfügbare Breite ein und positionieren sich gestapelt. Inline-Elemente nehmen nur die von ihrem Inhalt tatsächlich benötigte Breite ein und positionieren sich nebeneinander. Hier eine Übersicht der fürs Responsive Webdesign wichtigsten Element-Typen:

Um Inhalte nebeneinander anzuordnen, wurden früher Tabellen- oder Float-basierte Layouts eingesetzt. Diese Ansätze gelten heute als überholt. Moderne responsive Layouts basieren nahezu ausschließlich auf CSS-Flexbox und CSS Grid. Flexbox eignet sich besonders für eindimensionale Layouts, etwa horizontale oder vertikale Listen, während CSS Grid für komplexe, zweidimensionale Seitenstrukturen genutzt wird.

Ein anschauliches Beispiel: Stellen Sie sich eine Seite mit vier Vorschau-Elementen für Blogartikel vor. Die Vorschau-Elemente enthalten jeweils Vorschaubild, Überschrift, Teaser und „Mehr lesen“-Button. Mit Flexbox lässt sich das folgende responsive Layout leicht umsetzen:

• Darstellung auf großem Bildschirm: alle Vorschau-Elemente nebeneinander in einer Reihe. Jedes der Elemente nimmt 25 Prozent des verfügbaren Platzes ein.
• Darstellung auf mittlerem Bildschirm: zwei Vorschau-Elemente nebeneinander in zwei Reihen. Jedes der Elemente nimmt 50 Prozent des verfügbaren Platzes ein.
• Darstellung auf kleinem Bildschirm: alle vier Vorschau-Elemente untereinander in einer Zeile. Jedes der Elemente nimmt 100 Prozent des verfügbaren Platzes ein.

Responsive Layout mit CSS-Grid und Media Queries

Moderne responsive Layouts lassen sich heute in vielen Fällen ohne zusätzliches CSS-Framework umsetzen. Native Layout-Module wie CSS Grid und Flexbox sind breit unterstützt und ermöglichen flexible, gut wartbare Strukturen. Ein zentrales Werkzeug dabei sind CSS Media Queries. Mit ihnen lassen sich CSS-Regeln abhängig von Eigenschaften des Ausgabegeräts anwenden, insbesondere von der Breite des Viewports. Media Queries beantworten damit die Frage, unter welchen Bedingungen ein bestimmtes Layout aktiv sein soll, etwa ab einer bestimmten Bildschirmgröße oder bei einer bestimmten Geräteausrichtung

Betrachten wir das Beispiel einer Seite mit vier Vorschau-Elementen für Blogartikel. Jedes Element enthält ein Vorschaubild, eine Überschrift, einen kurzen Text und einen Link zum vollständigen Artikel. Ziel ist es, die Anzahl der nebeneinander dargestellten Elemente abhängig von der verfügbaren Bildschirmbreite zu variieren.

HTML-Struktur:

<div class="blog-grid">
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
    <article class="blog-preview">…</article>
</div>

CSS-Implementierung mit CSS Grid:

.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
/ *mittlere Bildschirme* /
@media screen and (min-width: 600px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/ *große Bildschirme* /
@media screen and (min-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Ohne Media Query wird zunächst ein einfaches Layout für kleine Bildschirme definiert. Ab einer Breite von 600 Pixeln werden zwei Spalten dargestellt, ab 1.024 Pixeln vier. Dieses Vorgehen folgt dem Mobile-first-Prinzip und stellt sicher, dass Inhalte auf kleinen Displays übersichtlich bleiben und auf größeren Bildschirmen optimal genutzt werden. Media Queries reagieren dabei stets auf den Viewport, also auf die Größe des Browserfensters oder Bildschirms.

Container Queries: Responsive Design auf Komponentenebene

Während Media Queries auf die Größe des Viewports reagieren, setzen CSS Container Queries an einer anderen Stelle an. Sie ermöglichen es, Styles abhängig von der Größe eines umgebenden Containers anzuwenden, unabhängig von der tatsächlichen Bildschirmgröße. Damit reagieren Elemente nicht mehr auf das gesamte Browserfenster, sondern auf den Platz, der ihnen innerhalb eines Layouts tatsächlich zur Verfügung steht. Das ist besonders relevant in modularen Layouts, in denen Komponenten mehrfach und in unterschiedlichen Kontexten eingesetzt werden, etwa sowohl im schmalen Seitenbereich als auch im breiten Hauptinhalt. Mit Media Queries allein lassen sich solche Szenarien nur eingeschränkt abbilden.

Ein typisches Beispiel ist ein Vorschau-Element für Artikel. Befindet es sich in einer schmalen Sidebar, soll Bild und Text untereinander angezeigt werden. Im Hauptbereich mit mehr Platz können Bild und Text hingegen nebeneinander dargestellt werden. Container Queries erlauben genau diese kontextabhängige Anpassung, ohne zusätzliche Breakpoints für jede Layoutvariante definieren zu müssen. Zunächst wird der übergeordnete Container als sogenannter „Query Container“ definiert:

CSS-Implementierung mit CSS Grid:

.preview-container {
    container-type: inline-size;
}

Die Vorschau-Komponente selbst erhält ein einfaches Grundlayout, das für wenig Platz optimiert ist:

.article-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

Anschließend wird per Container Query festgelegt, dass sich das Layout ändert, sobald der Container eine bestimmte Breite überschreitet:

@container (min-width: 500px) {
    .article-preview {
        flex-direction: row;
    }
}

Die Komponente passt sich damit automatisch an den verfügbaren Platz ihres Containers an. Ob sie in einer Sidebar oder im Hauptbereich steht, spielt keine Rolle mehr. Entscheidend ist allein die Breite des Containers, nicht die des Viewports. Container Queries unterstützen so einen komponentenbasierten Ansatz im Responsive Webdesign und ergänzen klassische Media Queries sinnvoll. In modernen Projekten werden beide Techniken häufig kombiniert, um sowohl globale Layoutwechsel als auch fein granulare Anpassungen einzelner Komponenten umzusetzen.

Responsive Typografie und Textinhalte

Für eine optimale User Experience muss die Schriftgröße der Textelemente einer Website an die vorhandene Bildschirmfläche und Nutzungskontexte angepasst werden. Neben der reinen Lesbarkeit spielen dabei auch Faktoren wie Skalierbarkeit, Barrierefreiheit und Layoutstabilität eine zentrale Rolle. Dabei kommen im Responsive Webdesign verschiedene Schrift-Techniken zum Einsatz.

Als grundlegende Maßnahme nutzt man die CSS-Einheit rem („root element“), um die Schriftgröße eines Elements proportional an das HTML-root-Element zu binden. Dann genügt es, die Schriftgröße des root-Elements über CSS-Breakpoints anzupassen, um alle Schriften konsistent zu skalieren.

html {
    font-size: 16px;
}
h1 {
    font-size: 3rem;
}

Dieses Vorgehen lässt sich im Mobile-First-Ansatz sinnvoll mit Media Queries kombinieren, um die Basisschriftgröße auf größeren Bildschirmen moderat zu erhöhen:

@media screen and (min-width: 30em) {
    html {
        font-size: 18px;
    }
}

In modernen Layouts kommt zunehmend eine fluide Typografie zum Einsatz, die sich stufenlos an die verfügbare Fläche anpasst. Dafür wird heute bevorzugt die CSS-Funktion clamp() verwendet. Sie erlaubt es, eine minimale, eine bevorzugte und eine maximale Schriftgröße festzulegen, ganz ohne zusätzliche Breakpoints.

h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

So bleibt die Schrift auf kleinen Displays gut lesbar, wächst auf größeren Bildschirmen dynamisch mit und überschreitet dabei nie definierte Grenzwerte. clamp() gilt heute als Best Practice für responsive Typografie.

Responsive Bilder

Neben Layout und Typografie steht die optimierte Darstellung von Bildern im Fokus des Responsive Designs. Offensichtlich ist es nicht sehr sinnvoll, ein Bild mit 1.920 Pixel Kantenlänge auf ein Handy mit 400 Pixel breitem Bildschirm zu laden. Zum einen muss das viel zu große Bild dann rechenaufwendig im Browser herunterskaliert werden. Zum anderen steigt die Dateigröße eines Bilds, je mehr Pixel das Bild enthält.

Ein Bild mit 1.920 x 1.080 Pixel wird ca. viermal so viel Speicherplatz benötigen, wie ein Bild mit 960 x 540 Pixel. Entsprechend länger dauert auch das Herunterladen eines solchen Bildes auf ein Mobilgerät. Zusammengenommen ergibt das einen ausgesprochen negativen Effekt auf die Performanz und Nutzbarkeit einer Website, wenn Bilder nicht responsiv optimiert sind.

Für responsive Bilder wurden die Attribute srcset und sizes werden etabliert, mit denen Browser je nach Kontext die passende Bildressource wählen können. Man spricht dabei auch von „Assets“. Jede einzelne Datei wird an die Abfrage eines CSS-Media-Features geknüpft. So kann der Browser aus der Liste verfügbaren Assets eines laden, das für das jeweilige Gerät optimal ist.

Schauen wir uns ein kurzes Beispiel an. Der nachfolgende HTML-Code definiert ein Bild, für das zwei per srcset definierte Assets existieren; eines mit 480 Pixel Kantenlänge und eines mit 800 Pixel Kantenlänge. Ferner wird per sizes festgelegt, dass das Bild mit 480 Pixel bis zu einer Bildschirmbreite von 600 Pixel verwendet werden soll. Ansonsten soll der Browser das Bild mit 800 Pixel laden:

<img
    src="bild-800w.jpg"
    srcset="bild-480w.jpg 480w,
                    bild-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
                 800px"
    alt="Bildbeschreibung">

Der entscheidende Vorteil dieses Ansatzes besteht darin, dass der Browser selbst entscheidet, welche Bildvariante geladen wird. Entwickler müssen lediglich sinnvolle Bildgrößen bereitstellen, nicht aber die Auswahl manuell steuern.

Traditionell waren Bildschirme als Querformat ausgerichtet; Handy-Bildschirme sind jedoch im Hochformat. Ein Querformat-Bild auf einem Hochformat-Gerät wirkt sehr klein. Für ein besseres Ergebnis soll ein eigens zugeschnittenes quadratisches oder hochformatiges Bild zum Einsatz kommen. Die Wahl unterschiedlicher Zuschnitte eines Bildes bezeichnet man als „Art Direction“. Dies lässt sich mit dem Element <picture> umsetzen. Das <picture>-Element erlaubt die komplexe Definition mehrerer äquivalenter Bilder für unterschiedliche Anwendungsfälle.

Schauen wir uns ein Beispiel an. Der nachfolgende HTML-Code definiert ein <picture>-Element, das unterschiedliche Assets für Quer- und Hochformat festlegt. Für beide Fälle gibt es jeweils mehrere, für verschiedene Bildschirmgrößen optimierte Versionen:

<picture>
<source
media="(orientation: landscape)"
srcset="bild-klein-quer.png 320w,
bild-gross-quer.png 1200w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
<source
media="(orientation: portrait)"
srcset="bild-klein-hoch.png 160w,
bild-gross-hoch.png 600w"
sizes="(min-width: 60rem) 80vw,
(min-width: 40rem) 90vw,
100vw">
<img src="bild-klein.png" alt="Bildbeschreibung">
</picture>

So lässt sich sicherstellen, dass ein Motiv auf kleinen, hochformatigen Displays ebenso wirkungsvoll dargestellt wird wie auf großen Bildschirmen.

Responsive Navigation

Die Navigation gehört zu den zentralen Bedienelementen einer Website und stellt im Responsive Design eine besondere Herausforderung dar. Traditionell wird die Navigation auf großen Bildschirmen im Kopfbereich der Seite angezeigt und hat Untermenüs, die beim Überfahren mit dem Mauszeiger aufklappen. Dies lässt sich auf Mobilgeräten nicht umsetzen. Zum einen fehlt auf kleinen Bildschirmen der Platz für das Menü, zum anderen erfolgt die Bedienung hier nicht mit Maus, sondern per Touch.

Zur Darstellung von Navigationsmenüs auf Mobilgeräten gibt es verschiedene Ansätze. Diese sind allesamt platzsparend und benötigen keinen Mauszeiger. Die Aktivierung der Navigation wird oft mit einer Animation unterfüttert, um die Aufmerksamkeit des Nutzers zu lenken. Zu den am weitesten verbreiteten Ansätzen für responsive Navigation zählen:

• Das „Hamburger Menu“-Icon (drei waagerechte Striche): Es dient als zentrales Bedienelement zum Aktivieren des Menüs.
• Die „Off Canvas“-Navigation: Das Menü rutscht dann vom Bildschirmrand herein und schiebt den eigentlichen Seiteninhalt beiseite.

In der Praxis kommen jedoch weitere etablierte Navigationsmuster zum Einsatz, die je nach Nutzungskontext Vorteile bieten. Dazu zählt etwa die Bottom Navigation, bei der zentrale Navigationspunkte am unteren Bildschirmrand platziert werden und so besonders gut mit dem Daumen erreichbar sind. „Priority+“-Menüs priorisieren wichtige Navigationspunkte und lagern weniger relevante Einträge dynamisch in ein Untermenü aus. Für umfangreiche Websites werden zudem Mega-Menüs mit Touch-Optimierung genutzt, die auch auf größeren Tablets und hybriden Geräten eine übersichtliche Struktur ermöglichen.