Responsive Website – Wie man es allen „recht macht“

Das mobile Internet dominiert die Nutzung

Mittlerweile sind laut der ARD-ZDF-Onlinestudie über 95% der Deutschen online – und die Mehrheit nutzt das Internet hauptsächlich mobil . Bereits 2017 überstieg der mobile Internetverkehr weltweit erstmals dauerhaft den Desktop-Traffic. Diese Entwicklung bestätigen auch aktuelle Studien: Über 70% der Nutzer:innen greifen primär per Smartphone auf Webinhalte zu. Mehr als 60% der mobilen User nutzen das mobile sogar häufiger als das stationäre Internet.  

Und das gilt auch für B2B-Entscheider:innen. Über 90 Prozent von ihnen nutzen laut Forbes Insight Smartphone und Tablet täglich für geschäftliche Zwecke. Besonders interessant: Rund 80 Prozent der Befragten gaben an, Produktrecherche per mobilem Endgerät zu betreiben. Auch das mobile Einkaufen ist dabei deutlich auf dem Vormarsch.

Das bedeutet: Auch im B2B darf man beim Webdesign nicht davon ausgehen, dass die Nutzer:innen große Bildschirme verwenden – auch wenn das in manchen Branchen die Regel sein mag. Es ist wichtig, eine Website so zu erstellen und umzusetzen, dass sie auf Bildschirmen aller Größen nutzbar ist.

Für Website-Betreiber bedeutet das: Wer seine Zielgruppe erreichen möchte, muss mobile Nutzer:innen optimal bedienen. Eine responsive Website ist nicht mehr optional, sondern Pflicht.

Was ist eine Responsive Website?

Eine responsive Website (auch: Website in responsivem Webdesign oder mit web responsive design) bezeichnet eine Website, die sich automatisch an die Bildschirmgröße und das jeweilige Endgerät anpasst. Layout, Navigationselemente, Schriftgrößen, Bilder und andere Bausteine werden so angezeigt, dass es für die jeweilige Bildschirmgröße optimiert ist – egal, ob die Seite auf einem Smartphone mit 5 Zoll Bildschirmdiagonale, einem Tablet mit 10 Zoll oder einem Desktop-Monitor mit 27 Zoll aufgerufen wird.

Das Grundprinzip lässt sich mit dem Konzept „Content is like water“ veranschaulichen: Wasser passt sich dem Gefäß an, in dem es sich befindet. Ebenso verhält es sich mit Content, welcher „responsive“ reagiert. D.h. der Inhalt passt sich an das „Gefäß“ an, in unserem Falle das verwendete Endgerät.

Anders als bei separaten mobilen Websites (die heute kaum noch verwendet werden) nutzt Responsive Webdesign eine einzige HTML-Codebasis, die über CSS-Anweisungen flexibel gestaltet wird. Dies hat entscheidende Vorteile: einfachere Wartung, bessere SEO-Performance und konsistente Nutzererfahrung über alle Geräte hinweg.

Wie funktioniert Responsive Design technisch?

„Media Queries“ und „Breakpoints“ sind die zentralen Steuerungselemente einer responsiven Website: Mit Hilfe von CSS3-Media Queries wird der Seite gesagt, wie sie sich bei verschiedenen Größen und Formaten zu verhalten hat. Eine Media Query prüft Eigenschaften wie Bildschirmbreite, -höhe, Auflösung oder Geräteausrichtung und wendet jeweils die entsprechend geeigneten CSS-Regeln an.

Üblicherweise hat eine Website mindestens drei bis fünf Breakpoints, für die jeweils Layouts vordefiniert werden. Ein Breakpoint ist sozusagen ein „Umschaltpunkt“ – ein festgelegter Pixelwert, bei dem die Website ihr Layout ändert.

Stellen Sie sich vor, Sie verkleinern Ihr Browserfenster langsam von groß nach klein: Ab einer bestimmten Breite springt das dreispaltige Desktop-Layout plötzlich in ein zweispaltiges Tablet-Layout um. Verkleinern Sie weiter, wechselt es schließlich in eine einspaltige mobile Ansicht. Diese „Sprungpunkte“ sind die Breakpoints und sie definieren, ab welcher Bildschirmbreite welches Layout zum Einsatz kommt.

Typische Breakpoints sind:

• Mobile (für Smartphones; bis 576px)
• Tablet Portrait (Hochformat; 577px bis 768px)
• Tablet Landscape (Querformat; 769px bis 1024px)
• Desktop (1025px bis 1440px)
• Large Desktop (ab 1441px)

Die Größe von Grafiken und Schrifttypen wird in der Regel nicht mehr fix angegeben, sondern flexibel in Bezug aufeinander und auf die Displaygrößen. Statt fester Pixelwerte nutzen moderne Websites relative Einheiten, die sich automatisch anpassen:

• Prozent (%): Bezieht sich auf das übergeordnete Element (z.B. 50% der Breite des Elternelements)
• em: Relativ zur Schriftgröße des Elternelements (2em = doppelte Schriftgröße)
• rem: Relativ zur Basis-Schriftgröße der gesamten Website (einheitlicher und vorhersehbarer als em)
• vw/vh (Viewport Width/Height: Bezieht sich direkt auf die Bildschirmgröße (10vw = 10% der Bildschirmbreite)

Der Vorteil: Eine Überschrift mit 2rem bleibt auf allen Geräten proportional lesbar, während eine fest definierte Schriftgröße von 32 Pixeln auf einem Smartphone möglicherweise zu groß oder zu klein wirken würde.

Relative Schriftgrößen haben außerdem den Vorteil, dass sie sich besser im Sinne der Barrierefreiheit auf die Anforderungen der Nutzer:innen anpassen lassen.

Zusätzlich spielen flexible Bilder eine wichtige Rolle: Mit dem HTML-Attribut srcset können unterschiedliche Bildgrößen für verschiedene Displayauflösungen bereitgestellt werden. So lädt ein Smartphone nur die benötigte kleine Bilddatei, während ein hochauflösender Desktop-Monitor die größere Version erhält.

Ist responsives Webdesign wichtig für SEO?

Responsives Webdesign ist für die Suchmaschinenoptimierung enorm wichtig. Google hatte bereits 2015 „Mobile-Friendliness“ als offiziellen Ranking-Faktor eingeführt, seit 2019 gilt “Mobile First”: Google nutzt für die Indexierung primär die mobile Version einer Website (Mobile-First-Indexing). Das bedeutet: Auch wenn jemand auf dem Desktop sucht, bewertet Google für das Ranking in den Suchergebnissen in der Regel dennoch jene Version einer Website, die auf einem mobilen Endgerät angezeigt würde.

Die SEO-Vorteile von Responsive Webdesign

Responsive Webdesign ist aus mehreren Gründen auch für eine ganzheitliche Perspektive auf Suchmaschinenoptimierung von Bedeutung:

• Eine URL für alle Geräte: Kein Duplicate Content, alle Backlinks gehen auf eine URL
• Bessere User Signals: Geringere Absprungraten und längere Verweildauer durch optimale Darstellung
• Schnellere Ladezeiten: Besonders mit optimierten mobilen Ansichten – das sorgt für Bevorzugung in den mobilen Suchergebnissen
• Einfacheres Crawling für Suchmaschinen-Bots

Diese Vorteile wirken sich auch direkt auf die Core Web Vitals aus, die Google als wichtige Ranking-Faktoren bewertet: Gutes Responsive Design sorgt für kürzere Ladezeiten und optimiert damit den Largest Contentful Paint (LCP), also die Zeit, bis der Hauptinhalt einer Seite sichtbar wird. Gleichzeitig verhindert es, dass nach dem Laden noch große Verschiebungen im Layout stattfinden, was den Cumulative Layout Shift (CLS) verbessert. Wenn Elemente beim Laden nicht mehr „springen“ oder sich verschieben, bleibt die Seite stabil und benutzerfreundlich – ein klarer Vorteil sowohl für die Nutzererfahrung als auch für das Ranking.

Websites ohne Responsive Design werden von Google in den mobilen Suchergebnissen deutlich schlechter gerankt oder mit einem Hinweis versehen, dass sie „nicht für Mobilgeräte optimiert“ sind – ein klarer Wettbewerbsnachteil.

Responsive Design oder Adaptive Design – wo ist der Unterschied?

Diese Begriffe werden oft synonym verwendet, beschreiben aber grundlegend unterschiedliche Ansätze in der technischen Umsetzung:

Responsive Design

Responsive Design arbeitet mit flexiblen, fließenden Layouts, die sich stufenlos und kontinuierlich an jede Bildschirmgröße anpassen, ähnlich wie Wasser, das die Form seines Gefäßes annimmt.

Charakteristika:

• Fließende, flexible Layouts, die sich stufenlos anpassen
• Nutzt prozentuale Werte und flexible Grids
• Eine einzige Codebasis für alle Geräte
• Anpassung erfolgt rein über CSS (Media Queries)
• Beispiel: Verkleinern Sie Ihr Browserfenster langsam – die Elemente passen sich kontinuierlich an, Spalten werden schmaler, Text umbricht fließend; an den Breakpoints verändert sich das Layout, der Inhalt aber bleibt identisch.

Adaptive Design

Adaptive Design hingegen arbeitet mit fest definierten Layouts für bestimmte Gerätekategorien. Die Website „springt“ zwischen verschiedenen vordefinierten Versionen hin und her.

Charakteristika:

• Nutzt feste Layoutgrößen für bestimmte Breakpoints
• Mehrere vordefinierte Layouts (z.B. exakt für 320px, 768px, 1024px)
• Kann serverseitige Geräteerkennung nutzen
• Möglicherweise unterschiedlicher Content je Gerät
• Beispiel: Die Website erkennt Ihr Gerät und lädt eine von mehreren vordefinierten Versionen. Beim Verkleinern des Browserfensters „springt“ das Layout abrupt von einer Version zur nächsten.

Der entscheidende Unterschied

Der Kernunterschied zwischen Responsive und Adaptive Design liegt in der Flexibilität:

• Responsive = kontinuierliche Anpassung an jede beliebige Bildschirmgröße (auch ungewöhnliche)
• Adaptive = sprunghafte Umschaltung zwischen wenigen vordefinierten Layouts

Was wird in der Praxis eingesetzt?

In der Praxis hat sich Responsive Design als Standard durchgesetzt, da es:

• Flexibler für die wachsende Gerätevielfalt ist
• Weniger Wartungsaufwand erfordert
• Zukunftssicherer ist (funktioniert auch auf noch nicht existierenden Geräten)

Moderne Websites nutzen jedoch oft einen hybriden Ansatz: grundsätzlich responsive, aber mit gezielten adaptiven Anpassungen für optimale Nutzererfahrung auf bestimmten Geräten (z.B. unterschiedliche Navigationselemente für Mobile vs. Desktop).

Ist Responsive Design nur für mobile Geräte wichtig?

Nein, responsive Design ist für alle Geräte relevant – nicht nur für Smartphones. Die Vielfalt der Endgeräte ist heute enorm:

• Smartphones mit 4 bis 7 Zoll Bildschirmdiagonale
• Tablets mit 7 bis 13 Zoll
• Laptops mit 12 bis 18 Zoll und mehr
• Desktop-Monitore mit 21 bis 32+ Zoll
• Ultrawide-Monitore mit 34 bis 49 Zoll
• Smart TVs

Jedes dieser Geräte hat unterschiedliche Auflösungen, Seitenverhältnisse und Nutzungskontexte. Eine responsive Website stellt sicher, dass auf allen Geräten eine optimale Darstellung erfolgt, vom kleinen Smartphone-Display bis zum riesigen 4K-Monitor.

Darüber hinaus wird es zunehmend wichtig, für die Zukunft auch an weitere Displayformen zu denken: Smartwatches mit ihren winzigen Bildschirmen, Smart-Home-Displays (z.B. an Kühlschränken oder Spiegeln), digitale Infotafeln, In-Car-Displays in Fahrzeugen oder sogar Smartglasses und AR-Brillen. Je nach Art der Webanwendung kann es sinnvoll sein, bereits in der Konzeptionsphase diese alternativen Endgeräte mitzudenken, insbesondere wenn es um Anwendungen geht, die im Internet of Things (IoT) oder in spezifischen Nutzungskontexten zum Einsatz kommen.

Wie funktioniert Responsive Design am Desktop-Monitor?

Auch Desktop-Nutzer profitieren von Responsive Design, obwohl dies oft übersehen wird:

• Flexible Anpassung an unterschiedliche Monitorgrößen (von 1366px bis 4K und darüber hinaus)
• Optimale Ausnutzung des verfügbaren Platzes beim Ändern der Größe des Browserfensters
• Bessere Lesbarkeit durch angepasste Zeilenlängen (optimal: 60-80 Zeichen) und Schriftgrößen
• Moderne Grid-Layouts mit 2, 3 oder mehr Spalten je nach verfügbarem Platz

Auf großen Monitoren sollten Inhalte nicht einfach extrem breit skaliert werden, das würde die Lesbarkeit beeinträchtigen. Stattdessen nutzen moderne Designs Container mit maximaler Breite (z.B. 1400px) und zentrieren den Inhalt, oder sie zeigen zusätzliche Spalten und Inhalte.

Muss eine Website heute mehr leisten?

Die Anforderungen an eine moderne responsive Website sind in den letzten Jahren deutlich gewachsen. Eine Vielzahl verschiedener Geräte wie Smartphones und Tablets nutzt unterschiedlichste Bildschirmgrößen – das stellt eine Website unter enormen Leistungsdruck: Sie muss es jedem recht machen.Nicht nur das jeweilige Endgerät soll die Website verstehen – also korrekt wiedergeben –, insbesondere die Benutzer:innen müssen mit ihren individuellen Absichten abgeholt werden. Unterschiedliche technische Voraussetzungen, Bildschirmgrößen und Eingabemöglichkeiten sowie Nutzungsgewohnheiten und -absichten variieren je nach Endgerät und erfordern komplexere Lösungen und Konzepte in Bezug auf Design, Technik, Content, Qualitätssicherung und dem übergreifenden Projektmanagement. Bei diesem Thema ist interdisziplinäres, ganzheitliches Denken und Handeln bei allen Projektbeteiligten gefragt. Schnittstellenkommunikation und Prozesse müssen definiert und laufend aktualisiert werden.

Moderne Websites müssen zudem weitere Anforderungen erfüllen

• Barrierefreiheit (WCAG-Richtlinien)
• DSGVO-Konformität
• Schnelle Ladezeiten (Core Web Vitals)

Das Ziel: positive UX auf allen Kanälen

Eine gute Website heißt alle Besucher:innen willkommen und schließt niemanden aus. Dies drückt sich in einer „positiven Nutzererfahrung“ (User Experience, UX) bei den Besucher:innen aus. Eine Website sollte nicht nur im Design auf allen Endgeräten gut aussehen und funktionieren, sondern auch den Usern Freude bereiten und mit Leichtigkeit zu bedienen sein. Kurz gesagt: Sie sollen das finden, was sie suchen und gerne verweilen.

Eine positive User Experience auf responsiven Websites zeichnet sich aus durch

• Intuitive Navigation auf allen Geräten
• Schnelle Ladezeiten (unter 3 Sekunden)
• Gut lesbare Schrift ohne Zoomen
• Ausreichend große, benutzerfreundliche Buttons 
• Vermeidung von horizontalem Scrollen (falls nicht als Design-Entscheidung gewünscht)
• Konsistentes Design über alle Breakpoints hinweg

Responsive heißt auch „Ladezeiten-optimiert“

Page Speed und Benutzerfreundlichkeit sind wichtige Faktoren bei mobilen Websites. Diese gilt es bei der Konzeption, dem Design, den CSS-Vorgaben und schlussendlich bei der technischen Umsetzung zu berücksichtigen. Mobile Nutzer:innen erwarten, dass eine Seite in unter 3 Sekunden lädt – jede weitere Sekunde erhöht die Absprungrate um bis zu 32%. 

Wichtige Optimierungsmaßnahmen für responsive Websites

• Lazy Loading: Bilder werden erst geladen, wenn sie im sichtbaren Bereich erscheinen
• Bildoptimierung: Moderne Formate wie WebP nutzen, unterschiedliche Größen für verschiedene Geräte
• Minimierung von CSS und JavaScript (für kürzere Ladezeiten)
• Critical CSS: Inline-CSS für den sofort sichtbaren Bereich („above the fold“), damit die Seite schneller initial dargestellt wird
• Vermeidung von Render-Blocking-Ressourcen

Vor allem für mobile Endgeräte sollte darauf geachtet werden, dass große Grafiken oder Animationsdateien bzw. Videos nicht geladen werden oder erst im Hintergrund nachgeladen werden.

Erwartungen und Wahrnehmung auf unterschiedlichen Endgeräten

Mobile Nutzer:innen verhalten sich anders als Desktop-Nutzer:innen. Allerdings dürfen Sie nicht davon ausgehen, dass sie auch zuverlässig andere Inhalte suchen oder gänzlich andere Prioritäten haben.

Wichtig ist aber: Auf einem Desktop-Monitor lassen sich allein durch die Bildschirmgröße wesentlich mehr Inhalte auf einen Blick erfassen und überfliegen als auf einem Smartphone. Ästhetik und Anordnung lassen sich hier deshalb ganz anders zum Einsatz bringen.

Auf der eingeschränkten, schmalen Mobilversion hingegen reihen sich die verschiedenen Bausteine der Website untereinander zu einem „Elemente-Turm“ („Stacking“ genannt). Für diese Darstellung ist es wichtig, die Prioritäten der Nutzer:innen zu verstehen und wichtige Inhalte möglichst weit oben anzubieten.

Für die Strukturierung der Inhalte auf jeder einzelnen Seite ist es deshalb wichtig, sich über die Antworten auf zwei grundlegende Fragen klar zu werden:

1. Was suchen mobile Nutzer:innen auf dieser Seite?
2. Und was interessiert sie, wenn sie im Büro sitzen und mit voller Bandbreite und Muße im Web surfen?

Desktop vs. Mobile: Die wichtigsten Unterschiede im Überblick

	Mobile	Desktop
Layout & visuelle Gestaltung	Einspaltiges Stacking-Layout mit kompakter Darstellung. Hoher Kontrast sorgt für gute Lesbarkeit, Touch-optimierte interaktive Elemente – Funktionalität schlägt Dekoration	Platz für mehrspaltiges Layout, großzügige Weißräume und komplexe visuelle Hierarchien. Hover-Effekte, Animationen und aufwändige Markeninszenierung sind möglich
Ladezeiten & Performance	Oft auf Mobilfunknetze angewiesen. Ladezeiten idealerweise unter 1,5 Sekunden	Meist stabile Breitbandverbindungen. Ladezeiten unter 2 Sekunden sind optimal
Navigation & Menüführung	Platzsparende Lösungen: Hamburger-Menü, Bottom-Navigation oder Sticky Header. Touch-Abstände großzügig bemessen, evtl. vereinfachte Menüstruktur	Dauerhaft sichtbare Hauptnavigation – horizontal oder vertikal. Verschachtelte Dropdown-Menüs mit mehreren Ebenen und Hover-Effekten möglich
Content-Struktur & Informationsdichte	Priorisiert radikal. Sekundäre Inhalte verstecken sich in Accordions oder Tabs, Call-to-Actions prominent platziert	Kann umfangreichere Inhalte präsentieren. Mehr als eine Informationsebene gleichzeitig sichtbar, Seitenleisten bieten Platz für Zusatzinformationen
Eingabe & Interaktion	Touchscreen: Wischgesten, Pinch-to-Zoom und Fingersteuerung erfordern größere Touch-Targets und großzügigere Abstände	Maus, Touchpad oder Tastatur. Präzise Steuerung mit Cursor erlaubt kleinere Klickflächen und feinere Interaktionen
Display-Ausrichtung	Kein Fokus auf eine Ausrichtung: Hochformat (Portrait) für Smartphones, Querformat (Landscape) für Tablets bzw. Videos oder spezielle Inhalte auf dem Smartphone	Querformat als Standard
Nutzungskontext: Wo und wie wird gesurft?	Smartphone: unterwegs oder in Pausen. Gesucht werden vor allem schnelle Informationen, lokale Angebote („near me“), sonstige Nutzung: Social Media, News, spontane Käufe. Impulsive und fragmentierte Nutzung.Tablet: Arbeitsgerät für unterwegs oder entspanntes Surfen auf der Couch	Büro oder Home Office. Fokussiertes Arbeiten, tiefgehende Recherchen, Produktvergleiche in mehreren Tabs, komplexe Formulare – alles möglich. Die Nutzung ist intensiv und zielgerichtet
Verweildauer & Nutzungsmuster	Kürzere Sessions von 2-4 Minuten, dafür mehrmals täglich – häufig aber flüchtig	Längere Sessions von 5-10 Minuten, intensive Beschäftigung mit Inhalten

Best Practices für Responsive Website Design

Aus unserer langjährigen Erfahrung in der Umsetzung responsiver Websites empfehlen wir:

1. Mobile-First-Approach: Beginnen Sie das Design mit der mobilen Ansicht und erweitern Sie dann für größere Bildschirme
2. Touch-freundliche Interaktionen: Ausreichend große Buttons und Abstände zwischen klickbaren Elementen
3. Testing auf realen Geräten: Emulation reicht nicht – testen Sie auf echten Smartphones und Tablets
4. Flexible Typografie: Nutzen Sie relative Schriftgrößen, die sich an die Bildschirmgröße anpassen
5. Progressive Enhancement: Basis-Funktionalität für alle, erweiterte Features für leistungsfähigere Geräte

Die Zukunft: Beyond Responsive

Responsive Design bleibt Standard, entwickelt sich aber weiter:

• Container Queries: CSS-Anpassungen basierend auf der Größe des Containers statt des Viewports
• Responsive Images der nächsten Generation: AVIF und andere moderne Bildformate
• Design für Foldables: Smartphones mit faltbaren Displays erfordern neue Konzepte für dynamische Bildschirmgrößen-Wechsel
• Voice UI Integration: Responsive Design auch für sprachgesteuerte Interaktionen – Inhalte müssen visuell und auditiv optimal aufbereitet sein

Die Entwicklung geht hin zu kontextbewusstem Design, das nicht nur Bildschirmgröße, sondern auch Nutzungskontext, Verbindungsgeschwindigkeit, Gerätefähigkeiten und Nutzereinstellungen berücksichtigt.

Fazit: Responsive Website Design ist unverzichtbar

Responsive Design ist längst kein „Nice-to-have“ mehr, sondern absoluter Standard für moderne Websites. Die Vorteile liegen auf der Hand:

✓ Optimale Nutzererfahrung auf allen Geräten 

✓ Bessere SEO-Performance durch Mobile-First-Indexing 

✓ Höhere Conversion-Rates durch geringere Absprungraten 

✓ Einfachere Wartung als separate mobile Websites 

✓ Zukunftssicherheit für neue Gerätetypen 

✓ Kosteneffizienz durch eine statt mehrere Website-Versionen

Die technische Umsetzung von Responsive Design erfordert zwar mehr Planungsaufwand und Expertise in der initialen Entwicklung, zahlt sich aber durch bessere Performance, höhere Nutzerzufriedenheit und langfristige Wartungsvorteile aus.Wenn Sie Ihre Website responsive gestalten oder eine bestehende Seite optimieren möchten, unterstützen wir Sie gerne mit unserer Expertise. Als erfahrene TYPO3-Agentur entwickeln wir responsive Websites, die nicht nur gut aussehen, sondern auch performant sind und Ihre Geschäftsziele unterstützen.