Eine Website sieht auf einem großen Desktopmonitor hervorragend aus.
Das Menü liegt sauber nebeneinander.
Links steht Text.
Rechts ein großes Bild.
Darunter erscheinen drei Karten in einer Reihe.
Dann öffnest du dieselbe Website auf dem Smartphone.
Plötzlich passiert Folgendes:
Die Navigation läuft aus dem Bildschirm.
Der Text ist winzig.
Das Bild ist halb abgeschnitten.
Die drei Karten sind so schmal, dass jedes zweite Wort umbrechen muss.
Man kann horizontal scrollen.
Technisch ist die Website erreichbar.
Benutzbar ist sie kaum.
Genau dieses Problem löst Responsive Webdesign.
Das Grundprinzip lautet:
gleicher Inhalt
↓
unterschiedlich verfügbarer Raum
↓
Layout passt sich an
Eine responsive Website besitzt also nicht einfach eine feste Darstellung.
Sie reagiert auf die Umgebung, in der sie angezeigt wird.
Responsive bedeutet anpassungsfähig
Der englische Begriff „responsive“ bedeutet in diesem Zusammenhang sinngemäß:
reagierend beziehungsweise anpassungsfähig.
Die Website reagiert beispielsweise auf:
Bildschirmbreite
verfügbaren Raum
Geräteorientierung
Eingabeart
und verändert ihre Darstellung entsprechend.
Das Ziel lautet nicht:
Auf jedem Gerät soll die Website exakt gleich aussehen.
Sondern:
Auf jedem Gerät soll sie sinnvoll funktionieren.
Responsive Design ist mehr als eine mobile Version
Früher wurden teilweise getrennte Websites betrieben.
Zum Beispiel:
www.example.com
für Desktop
und:
m.example.com
für Mobilgeräte.
Heute wird in der Regel dieselbe Website verwendet.
Der Inhalt bleibt grundsätzlich derselbe.
Die Darstellung reagiert.
eine Website
↓
Desktop
Tablet
Smartphone
Damit müssen Inhalte nicht in mehreren getrennten Versionen gepflegt werden.
Ein responsives Layout verändert seine Struktur
Desktop:
┌────────────────────────────┐
│ Logo Navigation Suche │
├────────────────────────────┤
│ Text │ Bild │
│ │ │
├───────────────┼────────────┤
│ Card │ Card │ Card │
└────────────────────────────┘
Smartphone:
┌───────────────┐
│ Logo Menü│
├───────────────┤
│ Text │
│ │
├───────────────┤
│ Bild │
├───────────────┤
│ Card │
├───────────────┤
│ Card │
├───────────────┤
│ Card │
└───────────────┘
Das ist nicht einfach dieselbe Seite in kleiner.
Die Elemente wurden neu angeordnet.
Responsive Design verändert Beziehungen
Auf Desktop können zwei Elemente nebeneinanderstehen.
Text | Bild
Mobil vielleicht:
Text
↓
Bild
Eine Sidebar:
Artikel | Inhaltsverzeichnis
kann auf Smartphone zu:
Inhaltsverzeichnis
↓
Artikel
oder zu einem einklappbaren Element werden.
Die Beziehung bleibt bestehen.
Die räumliche Darstellung verändert sich.
Warum reicht Verkleinern nicht?
Stell dir eine Desktopseite mit einer Breite von 1440 Pixeln vor.
Würde man sie einfach auf 360 Pixel zusammenschrumpfen:
1440
↓
360
wäre alles nur noch ein Viertel so groß.
Schrift.
Buttons.
Bilder.
Abstände.
Das wäre kaum lesbar oder bedienbar.
Deshalb müssen einzelne Bestandteile nicht nur skaliert, sondern neu organisiert werden.
Responsive Webdesign ist deshalb Layoutlogik
Ein hilfreiches Denkmodell:
großer Raum
→ mehr Elemente nebeneinander
kleiner Raum
→ stärker untereinander
Das ist keine starre Regel.
Aber ein sehr häufiges Muster.
Was sind Breakpoints?
Ein Breakpoint ist eine Stelle, an der sich das Layout verändert.
Zum Beispiel:
breit
↓
2 Spalten
unterhalb einer bestimmten Breite:
schmal
↓
1 Spalte
Der Übergangspunkt ist der Breakpoint.
Breakpoints sollten nicht nur nach Gerätemodellen gewählt werden
Eine schlechte Denkweise lautet:
iPhone
→ Breakpoint A
iPad
→ Breakpoint B
Laptop
→ Breakpoint C
Das Problem:
Es gibt unzählige Geräte und Bildschirmgrößen.
Neue Geräte erscheinen ständig.
Besser ist:
Wann funktioniert unser Layout
nicht mehr sinnvoll?
Dann entsteht dort ein Breakpoint.
Der Inhalt bestimmt den Breakpoint
Beispiel Navigation:
Wissen Magazin Über uns Kontakt Suche
Solange diese Punkte sauber nebeneinanderpassen:
kein Problem.
Sobald sie:
zu eng werden,
umbrechen,
sich überlagern,
braucht das Layout eine andere Lösung.
Zum Beispiel:
☰ Menü
Der Breakpoint entsteht also aus der tatsächlichen Gestaltung.
Breakpoints sind keine exakten Gerätegrenzen
Ein Breakpoint bedeutet nicht:
unter 768 px
=
Smartphone
Es bedeutet eher:
unter dieser Breite
braucht diese Komponente
eine andere Darstellung
Das ist ein viel robusteres Modell.
Verschiedene Komponenten können unterschiedliche kritische Punkte besitzen
Navigation funktioniert vielleicht bis:
900 px
Eine dreispaltige Card-Ansicht vielleicht bis:
750 px
Eine Tabelle braucht eventuell bereits bei:
1050 px
eine andere Darstellung.
Responsive Design muss deshalb nicht zwangsläufig aus genau drei globalen Zuständen bestehen.
Was bedeutet Mobile First?
Mobile First bedeutet, das Design zunächst für eine kleine verfügbare Fläche zu planen.
Dann wird es für größere Ansichten erweitert.
Konzeptionell:
Smartphone
↓
Tablet
↓
Desktop
statt:
Desktop
↓
alles irgendwie verkleinern
↓
Smartphone
Der Ansatz hat einen großen Vorteil:
Kleine Bildschirme zwingen zu Priorisierung.
Auf Mobilgeräten passt nicht alles gleichzeitig
Desktop bietet vielleicht Platz für:
Navigation,
Sidebar,
mehrere Cards,
Filter,
Zusatzinformationen.
Auf dem Smartphone stellt sich sofort die Frage:
Was davon braucht der Nutzer wirklich zuerst?
Das kann Designentscheidungen verbessern.
Mobile First bedeutet nicht Mobile Only
Eine häufige Fehlinterpretation:
Dann ist Desktop nicht mehr wichtig.
Nein.
Mobile First bedeutet:
Die grundlegende Struktur funktioniert zunächst im kleinen Raum.
Auf größeren Displays darf sie anschließend mehr Möglichkeiten nutzen.
Progressive Enhancement
Eine verwandte Denkweise lautet:
solide Basis
↓
größerer Bildschirm
↓
zusätzliche Layoutmöglichkeiten
Zum Beispiel:
Mobil:
Artikel
Desktop:
Inhaltsverzeichnis | Artikel | verwandte Themen
Die Basis bleibt nutzbar.
Größere Displays erhalten zusätzlichen Komfort.
Desktop First kann trotzdem sinnvoll sein
Nicht jedes Produkt wird überwiegend mobil verwendet.
Beispiel:
komplexe Buchhaltungssoftware,
Videoeditor,
administratives Backend.
Wenn 95 Prozent der Nutzung auf großen Monitoren stattfindet, darf Desktop einen stärkeren Schwerpunkt erhalten.
Das Grundprinzip bleibt trotzdem:
Auch andere sinnvolle Viewports müssen funktionieren.
Nutzerstatistik sollte Entscheidungen beeinflussen
Mit Webanalyse lässt sich feststellen:
Wie viele Besucher nutzen:
Desktop,
Tablet,
Smartphone?
Das ist wertvolle Information.
Aber:
Die heutige Nutzung kann teilweise auch durch schlechtes mobiles Design beeinflusst sein.
Wenn eine Website auf Smartphone unbrauchbar ist, sind wenig mobile Nutzer nicht automatisch Beweis dafür, dass niemand mobil kommen möchte.
Was ist ein fluides Layout?
Ein fluides beziehungsweise fließendes Layout verwendet nicht überall starre feste Breiten.
Beispiel:
Schlecht:
Contentbreite = immer 1200 px
Auf einem 375-Pixel-Display entsteht dann horizontaler Überlauf.
Besser:
Breite
→ passt sich dem verfügbaren Raum an
bis zu bestimmten Grenzen.
Maximalbreiten sind trotzdem sinnvoll
Ein fluides Layout muss nicht bedeuten:
Text wird auf einem 4K-Monitor über 3000 Pixel breit.
Man kann beispielsweise konzeptionell sagen:
Content
→ wächst mit
→ bis Maximalbreite
Danach:
mehr freier Rand
Das erhält Lesbarkeit.
Artikel brauchen häufig besonders begrenzte Breite
Ein Monitor kann sehr breit sein.
Fließtext sollte deshalb nicht automatisch die gesamte Breite verwenden.
┌──────────────────────────────────────┐
│ │
│ ┌──────────────────────┐ │
│ │ Artikeltext │ │
│ │ │ │
│ │ angenehm breit │ │
│ └──────────────────────┘ │
│ │
└──────────────────────────────────────┘
Die Bildschirmbreite und die optimale Lesebreite sind zwei verschiedene Dinge.
Container helfen dabei
Ein typisches Layoutprinzip:
Viewport
↓
Container
↓
Content
Der Container besitzt:
seitliche Abstände
und eventuell:
eine Maximalbreite.
Auf kleinen Bildschirmen:
fast volle Breite
+
kleiner Rand
Auf großen:
begrenzte Contentbreite
+
größere Außenräume
Außenabstände sollten ebenfalls responsiv sein
Ein Desktoplayout kann beispielsweise großzügige Seitenränder besitzen.
Auf einem 320-Pixel-Gerät wären 80 Pixel links und rechts absurd.
Dort braucht man deutlich weniger.
großer Screen
→ großzügiger Rand
kleiner Screen
→ kompakter Rand
Raster können responsiv reagieren
Desktop:
12 Spalten
Ein Bereich verwendet:
8 + 4
Mobil:
12
↓
12
Die gleichen Komponenten werden untereinander gestellt.
Grid und Flexbox
Im modernen CSS werden Layouts häufig mit Mechanismen wie:
CSS Grid
und:
Flexbox
umgesetzt.
Für das konzeptionelle Verständnis genügt:
Flexbox eignet sich besonders gut für flexible Anordnungen entlang einer Hauptachse.
Grid eignet sich besonders gut für zweidimensionale Raster mit Zeilen und Spalten.
Flexbox als Denkmodell
Desktop:
[ A ] [ B ] [ C ]
Wenn weniger Platz vorhanden ist:
[ A ] [ B ]
[ C ]
oder:
[ A ]
[ B ]
[ C ]
Die Anordnung kann flexibel reagieren.
Grid als Denkmodell
┌─────┬─────┬─────┐
│ A │ B │ C │
├─────┼─────┼─────┤
│ D │ E │ F │
└─────┴─────┴─────┘
Auf kleinerem Display:
┌───────────┐
│ A │
├───────────┤
│ B │
├───────────┤
│ C │
└───────────┘
Wie die konkrete Umsetzung erfolgt, ist Webentwicklung.
Die Designentscheidung lautet:
Welche Elemente sollten bei welchem Platzangebot nebeneinander oder untereinander stehen?
Kartenraster sind ein klassischer responsiver Fall
Großer Bildschirm:
[ Card ][ Card ][ Card ][ Card ]
mittlerer Bildschirm:
[ Card ][ Card ]
[ Card ][ Card ]
klein:
[ Card ]
[ Card ]
[ Card ]
[ Card ]
So bleibt jede Karte ausreichend breit.
Nicht nur Breite, auch Inhalt bestimmt die Anzahl der Spalten
Sehr einfache Produktkarten können vielleicht vier Spalten vertragen.
Komplexe Artikelcards mit:
Überschrift,
Text,
Metadaten,
Button
brauchen mehr Breite.
Das Layout sollte sich am Inhalt orientieren.
Karten sollten eine sinnvolle Mindestbreite besitzen
Wenn ein Card-Layout immer weiter schrumpft:
Card
↓
schmaler
↓
noch schmaler
↓
unlesbar
ist irgendwann Umbruch besser.
zu schmal
↓
nächste Zeile
Das ist die eigentliche Logik responsiver Raster.
Navigation ist einer der schwierigsten Bereiche
Desktop besitzt genug Platz für:
Logo Wissen Magazin Design Sicherheit Suche
Auf Smartphone:
nicht.
Deshalb braucht die Navigation ein alternatives Muster.
Hamburger-Menü
Ein verbreitetes Muster:
Logo ☰
Ein Klick öffnet:
Wissen
Magazin
Design
Sicherheit
Suche
Das spart Platz.
Das Hamburger-Menü besitzt einen Nachteil
Die Navigation ist zunächst verborgen.
Auf Desktop sieht der Nutzer wichtige Bereiche sofort.
Mobil muss er erst:
Menü erkennen
und:
öffnen.
Für Hauptnavigation ist das häufig akzeptabel.
Für besonders wichtige Aktionen kann man aber überlegen, sie sichtbar zu lassen.
Nicht alles ins mobile Menü verstecken
Beispiel Shop:
Logo Suche Warenkorb ☰
Warenkorb und Suche bleiben direkt sichtbar.
Sekundäre Navigation wandert ins Menü.
Das ist Priorisierung.
Bottom Navigation kann sinnvoll sein
Bei bestimmten mobilen Apps oder Webanwendungen können Hauptfunktionen unten liegen.
Home Suche Favoriten Konto
Warum?
Weil diese Bereiche mit dem Daumen gut erreichbar sind.
Für jede normale Website ist dieses Muster aber nicht zwingend nötig.
Mobile Navigation braucht klare Hierarchie
Ein Menü mit:
40 Punkten
bleibt auch im Hamburger-Menü ein Menü mit 40 Punkten.
Responsive Design löst keine schlechte Informationsarchitektur.
Die Grundlagen aus UX Design gelten weiterhin.
Verschachtelte Menüs können mobil schwierig werden
Desktop:
Hover über „Wissen“.
Dann Untermenü.
Mobil gibt es keinen klassischen Hover.
Das Menü braucht daher einen klaren Klickmechanismus.
Zum Beispiel:
Wissen >
öffnet:
Web & WordPress
KI & Automatisierung
Design & Medien
Sicherheit
Touch verändert Interaktion
Ein Mauszeiger kann ein sehr kleines Ziel treffen.
Ein Finger ist wesentlich unpräziser.
Deshalb sollten wichtige Touchziele ausreichend groß und voneinander getrennt sein.
Kleine sichtbare Icons können größere Klickflächen besitzen
Zum Beispiel:
×
ist visuell klein.
Die tatsächlich interaktive Fläche kann aber deutlich größer sein.
┌───────────┐
│ × │
└───────────┘
Dadurch wird die Bedienung leichter.
Hover funktioniert auf Touchgeräten nicht zuverlässig
Deshalb dürfen wichtige Funktionen nicht ausschließlich über:
Maus darüber
↓
Option erscheint
zugänglich sein.
Die Benutzeroberfläche braucht auch ohne Hover verständliche Zustände.
Responsive Typografie
Schrift muss ebenfalls auf unterschiedlichen Displays funktionieren.
Eine riesige Hero-Überschrift:
96 px
kann auf Desktop stark wirken.
Auf Smartphone könnte sie:
jedes Wort einzeln umbrechen.
Dann braucht sie eine andere Größe.
Schrift sollte nicht beliebig schrumpfen
Eine schlechte Lösung:
Desktopüberschrift
↓
proportional auf 40 %
↓
Mobile
Dann wird Fließtext vielleicht ebenfalls winzig.
Besser sind definierte Typografieregeln für verschiedene verfügbare Räume.
Fluid Typography
Zwischen:
kleinem
und:
großem
Display
kann Schrift auch fließend skalieren.
Konzeptionell:
kleiner Viewport
→ kleinere Überschrift
größerer Viewport
→ Überschrift wächst
ab bestimmter Größe
→ Wachstum stoppt
So entstehen weniger harte Sprünge.
Mindest- und Maximalgrößen bleiben wichtig
Fließend bedeutet nicht:
unbegrenzt.
Minimum
↔
flüssiger Bereich
↔
Maximum
Das lässt Typografie kontrolliert reagieren.
Fließtext braucht häufig weniger starke Skalierung
Eine H1 kann auf Desktop deutlich wachsen.
Body Text bleibt möglicherweise relativ stabil.
Denn Lesbarkeit benötigt auf allen Geräten eine brauchbare Grundgröße.
Zeilenlänge ändert sich responsiv
Mobil:
weniger Zeichen pro Zeile.
Desktop:
mehr.
Auf sehr breiten Displays sollte die Textspalte trotzdem begrenzt werden.
Sonst entstehen extrem lange Zeilen.
Zeilenhöhe muss zur Schriftgröße passen
Wenn Überschriften kleiner werden:
kann auch die Zeilenhöhe angepasst werden.
Sonst wirken mehrzeilige mobile Headlines möglicherweise zu weit auseinander.
Responsive Typografie bedeutet deshalb mehr als nur:
font-size ändern.
Bilder sind ein zentraler Teil von Responsive Design
Ein Desktop-Hero kann beispielsweise:
2000 × 1000 Pixel
besitzen.
Auf Smartphone ist diese Datei eventuell unnötig groß.
Das verschwendet:
Bandbreite,
Ladezeit,
Datenvolumen.
Responsive Images
Browser können abhängig von:
Viewport,
Pixeldichte,
Layout
passende Bildvarianten laden.
Das Prinzip lautet:
kleines Display
→ kleinere Bilddatei
großes Display
→ größere Bilddatei
So wird nicht immer die größtmögliche Datei übertragen.
srcset als Grundidee
Technisch kann ein Bild mehrere Varianten anbieten.
Zum Beispiel:
480 px
960 px
1440 px
1920 px
Der Browser wählt eine passende Variante.
Für den Leser wichtig ist weniger die konkrete Syntax.
Entscheidend:
Responsive Design betrifft auch die ausgelieferte Ressource, nicht nur ihre sichtbare Größe.
Ein riesiges Bild klein anzeigen ist nicht dasselbe wie ein kleines Bild laden
3000 px Bild
↓
CSS zeigt es mit 300 px
Der Browser kann trotzdem die große Datei herunterladen.
Das ist Performanceverschwendung.
Responsive Images können dies vermeiden.
WordPress unterstützt verschiedene Bildgrößen
WordPress erzeugt üblicherweise mehrere Varianten hochgeladener Bilder und kann diese für responsive Auslieferung verwenden.
Das ist ein gutes Beispiel dafür, wie CMS und Responsive Design zusammenarbeiten.
Die Grundlagen aus Bilder für Websites optimieren bleiben trotzdem wichtig.
Art Direction bei Bildern
Manchmal reicht es nicht, nur dasselbe Bild kleiner zu laden.
Beispiel Desktop:
Person rechts
+
großer leerer Raum links
Im Smartphone-Crop bleibt nur:
leerer Raum.
Dann braucht man vielleicht eine andere Bildkomposition.
Unterschiedliche Crops für unterschiedliche Formate
Desktop:
┌───────────────────────────┐
│ Textbereich Person │
└───────────────────────────┘
Mobil:
┌───────────────┐
│ Person │
│ │
└───────────────┘
Es ist weiterhin dasselbe Motiv.
Aber anders zugeschnitten.
Deshalb sollte Bilddesign responsive Safe Zones berücksichtigen
Wichtige Motive sollten nicht immer extrem am Rand liegen, wenn das Bild später stark beschnitten wird.
Bei generierten Bildern kann man bereits im Briefing berücksichtigen:
wichtige Inhalte
→ crop-sicher platzieren
Das verbindet Responsive Design mit KI-Bildstilen.
Outpainting kann Formatvarianten erzeugen
Ein vorhandenes Bild:
1:1
kann mit generativer Bildbearbeitung zu:
16:9
erweitert werden.
Oder eine Desktopversion zu einer mobilen Hochformatversion.
Das kann sinnvoller sein als ein brutaler Crop.
Tabellen sind ein besonders schwieriges responsives Element
Desktop:
Name | Tarif | Speicher | Traffic | Preis | Aktion
Auf einem kleinen Display passt das nicht.
Einfach alles verkleinern:
schlechte Idee.
Möglichkeit 1: horizontal scrollen
Die Tabelle behält ihre Struktur.
Der Nutzer scrollt horizontal.
Das kann sinnvoll sein, wenn:
alle Spalten wichtig
und:
Vergleichbarkeit entscheidend
ist.
Möglichkeit 2: weniger Spalten
Mobil zeigt man nur:
Tarif | Preis | Aktion
Weitere Daten erscheinen nach Klick.
Das funktioniert, wenn einige Informationen sekundär sind.
Möglichkeit 3: Cards
Desktop:
Tabelle
Mobil:
┌───────────────┐
│ Tarif A │
│ 20 GB │
│ 9,90 € │
│ [Details] │
└───────────────┘
Das kann besser lesbar sein.
Aber direkte Zeilenvergleiche werden schwieriger.
Es gibt keine universell beste mobile Tabellenlösung
Die Frage lautet:
Was möchte der Nutzer mit diesen Daten tun?
Vergleichen?
Einzelwerte lesen?
Aktion ausführen?
Das bestimmt das responsive Muster.
Filter können ebenfalls responsiv werden
Desktop:
[ Kategorie ] [ Preis ] [ Marke ] [ Sortierung ]
Mobil vielleicht:
[ Filter ] [ Sortieren ]
Nach Klick öffnet sich eine eigene Filteransicht.
So bleibt das Hauptinterface übersichtlich.
Formulare auf Mobilgeräten
Desktop kann manchmal zwei Felder nebeneinander anzeigen:
Vorname | Nachname
Mobil:
Vorname
↓
Nachname
Das ist meist leichter zu bedienen.
Mehrspaltige Formulare brauchen einen guten Grund
Auch auf Desktop können viele nebeneinanderliegende Felder die Reihenfolge unklar machen.
Responsive Design ist eine Gelegenheit, Formulare generell zu vereinfachen.
Passende Eingabetypen verbessern mobile UX
Telefonnummer:
geeignete Tastatur.
E-Mail:
entsprechende Tastatur.
Zahl:
numerische Eingabe.
Das ist zwar eher UI-/UX-Technik, wird aber auf Mobilgeräten besonders relevant.
Sticky Elemente können mobil problematisch sein
Desktop besitzt:
sticky Header,
sticky Sidebar,
Chatbutton,
Cookieleiste.
Auf Smartphone bleibt vielleicht kaum noch sichtbare Fläche für Inhalt.
Header
↓
Inhalt
↓
Sticky CTA
↓
Cookieleiste
Auf 700 Pixel Bildschirmhöhe kann das enorm störend sein.
Sticky muss pro Gerät neu bewertet werden
Ein Element, das auf Desktop sehr nützlich ist:
Inhaltsverzeichnis rechts
kann mobil besser als normaler Block dargestellt werden.
Responsive Design bedeutet auch:
bestimmte Verhaltensweisen zu deaktivieren.
display:none ist keine vollständige Mobilstrategie
Eine einfache Lösung lautet manchmal:
Was nicht passt, verstecken wir auf Mobilgeräten.
Das kann kurzfristig funktionieren.
Aber wenn wichtige Inhalte verschwinden, wird die mobile Version funktional schlechter.
Die Frage sollte lauten:
Braucht der Nutzer diese Information?
Wenn ja:
anders darstellen.
Nicht automatisch entfernen.
Manche sekundären Inhalte dürfen tatsächlich entfallen
Ein dekoratives Hintergrundbild.
Eine rein illustrative Zusatzgrafik.
Ein redundanter Teaser.
Wenn sie mobil keinen Nutzen bringt, kann Weglassen sinnvoll sein.
Responsive Design ist Priorisierung.
Reihenfolge kann wichtiger sein als Sichtbarkeit
Desktop:
Bild | Text
Mobil:
Soll das Bild zuerst kommen?
Oder der Text?
Das hängt davon ab, was wichtiger ist.
CSS-Reihenfolge und semantische Reihenfolge sollten zusammenpassen
Man kann visuell vieles umsortieren.
Doch für:
Tastaturnavigation,
Screenreader,
Dokumentlogik
ist eine sinnvolle zugrunde liegende Reihenfolge wichtig.
Responsive Gestaltung sollte nicht eine völlig widersprüchliche semantische Struktur erzeugen.
Content First
Ein hilfreicher Ansatz lautet:
Inhalt
↓
Priorität
↓
Layout
nicht:
Layout
↓
Inhalt hineinpressen
Das ist besonders bei Responsive Design wichtig.
Lange Überschriften testen
Designentwurf:
Was ist DNS?
passt perfekt.
Realität:
Wie funktionieren strukturierte Ausgaben bei KI-Modellen?
Auf Smartphone braucht diese Überschrift vielleicht vier Zeilen.
Das muss das Layout verkraften.
Lange Wörter testen
Deutsch besitzt wunderbare Kandidaten wie:
Datenschutzgrundverordnung
oder technische Begriffe.
Ein responsives Layout sollte dadurch nicht horizontal explodieren.
Nutzergenerierte Inhalte sind noch unberechenbarer
Kommentare.
Benutzernamen.
Dateinamen.
Produktnamen.
Ein echtes System muss auch extreme Inhalte aushalten.
Responsive Design braucht reale Testdaten
Nicht nur:
Lorem ipsum
sondern:
reale Titel,
reale Bilder,
reale Tabellen,
reale Navigation.
Erst dann zeigen sich echte Probleme.
Was bedeutet Viewport?
Der Viewport ist vereinfacht der sichtbare Bereich, in dem eine Website dargestellt wird.
Auf einem Smartphone kann dieser beispielsweise nur wenige hundert CSS-Pixel breit sein.
Auf Desktop deutlich mehr.
Responsive CSS reagiert häufig auf diese verfügbare Breite.
Gerät und Viewport sind nicht dasselbe
Ein Gerät kann:
hohe physische Pixelauflösung
besitzen.
Der Browser arbeitet trotzdem mit einer anderen logischen Layoutbreite.
Für Webdesign ist deshalb die tatsächliche CSS-Layoutfläche entscheidender als die nackte Hardwarepixelzahl.
Hochauflösende Displays brauchen passende Bilder
Ein Bild, das visuell 400 Pixel breit erscheint, kann auf einem hochauflösenden Display von einer größeren Quelldatei profitieren.
Deshalb berücksichtigen responsive Bildmechanismen nicht nur Breite, sondern auch Pixeldichte.
Mehr Pixel bedeuten wiederum mehr Dateigröße
Man muss also balancieren:
Bildschärfe
↔
Datenmenge
Die größte verfügbare Datei ist nicht automatisch die beste.
Performance ist ein Kernbestandteil von Responsive Design
Mobile Geräte können:
langsamere Netze,
weniger Rechenleistung,
begrenzte Akkukapazität
haben.
Ein responsives Layout, das trotzdem 15 MB Daten lädt, ist nur halb responsiv.
Responsive bedeutet auch ressourcenbewusst
Zum Beispiel:
kleinere Bilder,
weniger unnötige Animationen,
keine riesigen Videos,
nur notwendiges JavaScript.
Die Performanceartikel unter WordPress-Performance und Core Web Vitals hängen deshalb direkt mit Responsive Design zusammen.
Ein Desktopvideo als Hintergrund kann mobil entfallen
Desktop:
großes Hero-Video.
Mobil:
statisches Bild.
Das kann sinnvoll sein, wenn:
Video nicht essenziell
und:
Ressourcenverbrauch hoch
ist.
Wichtig ist, dass die Kernaussage erhalten bleibt.
Nicht nur Bildschirmbreite zählt
Responsive Design kann auch auf andere Bedingungen reagieren.
Zum Beispiel:
Portrait
gegen:
Landscape
oder:
Hover verfügbar
gegen:
Touch
oder:
Nutzer bevorzugt weniger Bewegung
Die Website kann solche Umgebungsinformationen berücksichtigen.
Landscape auf Smartphone ist ein Sonderfall
Ein Smartphone horizontal:
sehr breit,
aber:
sehr geringe Höhe.
Ein riesiger sticky Header kann dort besonders problematisch werden.
Nur Breite zu testen reicht daher nicht immer.
Höhe kann ebenfalls kritisch sein
Beispiel Modal:
600 px hoch
Auf einem kleinen Gerät mit eingeblendeter Tastatur kann es nicht mehr vollständig sichtbar sein.
Dialoge müssen deshalb auch bei geringer Höhe funktionieren.
On-Screen-Tastatur verändert den Viewport
Ein Formularfeld wird fokussiert.
Die Bildschirmtastatur öffnet sich.
Plötzlich bleibt deutlich weniger sichtbarer Raum.
Mobile Formulare sollten nicht davon ausgehen, dass die volle Displayhöhe ständig verfügbar ist.
Zoom darf nicht grundlos blockiert werden
Nutzer können Vergrößerung benötigen.
Ein Design, das nur funktioniert, wenn Zoom deaktiviert wird, besitzt ein grundlegendes Problem.
Responsive Design sollte flexible Nutzung unterstützen.
Responsive UI braucht keine exakten Pixelpositionen
Ein fragiles Layout:
Button
→ exakt 327 px von links
funktioniert nur unter bestimmten Bedingungen.
Robuster sind Beziehungen:
Button
→ rechts im Container
oder:
Element
→ nach Textblock
Responsive Design arbeitet stärker mit Layoutregeln als mit fest verdrahteten Koordinaten.
Relative Einheiten
Im CSS existieren verschiedene relative Maße.
Zum Beispiel:
%
rem
em
vw
Sie können flexibel auf Kontext reagieren.
Das bedeutet nicht:
relative Einheit = automatisch gutes Responsive Design.
Aber sie ermöglichen flexiblere Systeme als ausschließlich starre Pixelwerte.
Pixel sind trotzdem nicht verboten
Ein Rahmen kann beispielsweise:
1 px
breit sein.
Ein Icon besitzt möglicherweise definierte Maße.
Responsive Design bedeutet nicht, sämtliche Pixelwerte zu vermeiden.
Es bedeutet:
starre Werte dort vermeiden, wo Flexibilität benötigt wird.
Komponenten statt Seiten denken
Ein modernes responsives System sollte nicht nur fragen:
Wie sieht die Startseite bei 375 Pixel aus?
Sondern:
Wie verhält sich unsere Card, wenn ihr wenig Platz zur Verfügung steht?
Wie reagiert die Navigation?
Wie verhält sich ein Formular?
Damit wird Responsive Design Bestandteil des UI Designs.
Komponenten brauchen responsive Regeln
Beispiel Card:
groß
→ Bild links, Text rechts
mittel
→ Bild oben, Text unten
klein
→ kompaktere Abstände
Diese Regeln können auf vielen Seiten wiederverwendet werden.
Container Queries als konzeptionelle Idee
Traditionell reagiert Responsive Design häufig auf die Breite des gesamten Viewports.
Aber eine Komponente kann auch in unterschiedlich breiten Containern vorkommen.
Zum Beispiel dieselbe Card:
Hauptbereich
→ breit
Sidebar
→ schmal
Ein moderneres Komponentenmodell kann deshalb auf den tatsächlich verfügbaren Platz der Komponente reagieren.
Das Grundprinzip:
Komponente
↓
prüft ihren verfügbaren Raum
↓
passt sich an
Das ist besonders für wiederverwendbare Designsysteme interessant.
Responsive Komponenten sind besser wiederverwendbar
Eine Card muss dann nicht wissen:
Bin ich auf der Startseite?
Sondern:
Wie viel Platz habe ich?
Das ist eine robustere Abstraktion.
Designsysteme sollten responsive Verhalten dokumentieren
Nicht nur:
Button / Primary
sondern auch:
Wie verhält sich die Komponente auf kleinen Screens?
Bei Cards:
Wie viele Spalten?
Bei Navigation:
Wann wird sie kompakt?
Bei Tabellen:
Wann ändert sich das Muster?
Breakpoints gehören damit zum Designsystem
Aber sie sollten nicht blind für jede Komponente identisch verwendet werden.
Das System kann gemeinsame Basiswerte besitzen.
Einzelne Komponenten können zusätzliche Regeln benötigen.
Responsive Design und Barrierefreiheit
Viele responsive Entscheidungen beeinflussen Accessibility.
Zum Beispiel:
Reihenfolge,
Touchgrößen,
Zoom,
Focus,
Lesbarkeit.
Mobile und barrierefreie Gestaltung besitzen zahlreiche Überschneidungen.
Kleine Schrift ist doppelt problematisch
Auf kleinem Bildschirm ist sie bereits schwer lesbar.
Für Menschen mit Sehbeeinträchtigung zusätzlich.
Die Lösung sollte nicht lauten:
mehr Inhalt unterbringen
↓
Schrift kleiner
Sondern eher:
Inhalt priorisieren
↓
Layout vereinfachen
Horizontales Scrollen sollte bewusst eingesetzt werden
Für eine Datentabelle kann es sinnvoll sein.
Für die gesamte Website:
meist nicht.
Wenn der Nutzer ständig links und rechts scrollen muss, ist das Layout normalerweise nicht wirklich responsiv.
Ausnahme: bewusst horizontale Komponenten
Zum Beispiel:
Bildergalerie,
Tabellen,
bestimmte Carousels.
Dort kann horizontales Scrollen Teil der Interaktion sein.
Es sollte aber klar erkennbar sein.
Carousels auf Mobilgeräten
Horizontales Wischen kann natürlich wirken.
Aber:
Der Nutzer muss erkennen, dass weitere Inhalte existieren.
Wenn nur eine Karte exakt den gesamten Bildschirm füllt, kann verborgen bleiben, dass rechts noch etwas kommt.
Ein teilweise sichtbares nächstes Element kann dieses Verhalten andeuten.
Carousels sind trotzdem keine Lösung für jedes Platzproblem
„Es passt nicht, also machen wir einen Slider“ ist kein Designprinzip.
Wichtige Inhalte sollten nicht unnötig versteckt werden.
Reihenfolge wichtiger Inhalte
Mobil ist die vertikale Reihenfolge besonders mächtig.
Was zuerst kommt:
wird zuerst gesehen.
Desktop kann Inhalte nebeneinanderstellen und dadurch gleichzeitig präsentieren.
Mobil zwingt zu einer Sequenz.
Responsive Design ist deshalb auch redaktionelle Priorisierung
Beispiel Produktseite.
Desktop:
Galerie | Produktname
| Preis
| Varianten
| Kaufen
Mobil:
Welche Reihenfolge?
Vielleicht:
Produktname
↓
Galerie
↓
Preis
↓
Varianten
↓
Kaufen
Oder anders.
Die richtige Reihenfolge hängt vom Nutzerverhalten ab.
Sticky Kaufbutton kann mobil sinnvoll sein
Bei langen Produktseiten:
[ In den Warenkorb ]
unten fixiert.
Das kann die Hauptaktion erreichbar halten.
Aber:
Er beansprucht dauerhaft Bildschirmfläche.
Die Entscheidung sollte getestet werden.
Responsive Design darf den Inhalt nicht unnötig duplizieren
Schlecht:
eine komplette Desktopnavigation
plus:
eine separate vollständige Mobilnavigation
beide dauerhaft im Markup,
nur jeweils versteckt.
Manchmal ist das technisch notwendig oder pragmatisch.
Oft lässt sich jedoch eine gemeinsame semantische Struktur responsiv darstellen.
Weniger Duplikation erleichtert Wartung.
Wartbarkeit gehört zu Responsive Design
Wenn für jedes neue Smartphone ein Sonder-CSS geschrieben werden muss:
iPhone A
iPhone B
Samsung C
Tablet D
ist die Architektur falsch.
Ein gutes responsives System arbeitet mit allgemeinen Layoutbedingungen.
Geräte testen, aber nicht für Geräte programmieren
Das ist ein guter Grundsatz.
Man sollte reale Smartphones testen.
Aber:
die CSS-Logik sollte nicht von einzelnen Modellnamen abhängen.
Browser-Entwicklertools helfen beim Testen
Moderne Browser können verschiedene Viewportgrößen simulieren.
Damit lässt sich schnell prüfen:
320,
375,
768,
1024,
1440 Pixel
und beliebige Zwischenwerte.
Wichtiger als die konkreten Zahlen ist:
auch zwischen typischen Gerätegrößen zu testen.
Warum Zwischenwerte wichtig sind
Ein Layout sieht perfekt aus bei:
375 Pixel
und:
768 Pixel.
Bei:
612 Pixel
brechen plötzlich Buttons um.
Wenn nur vorgefertigte Gerätevorschauen getestet werden, kann dieses Problem übersehen werden.
Zieh den Browser langsam kleiner
Eine sehr einfache Testmethode:
breit
↓
langsam schmaler ziehen
↓
beobachten
Wo wirkt etwas:
zu eng?
zu breit?
ungeordnet?
Genau dort entstehen mögliche Breakpoints.
Echtes Gerät bleibt wichtig
Simulation kann viel.
Aber nicht perfekt:
Touchgefühl,
reale Browserleisten,
Tastatur,
Performance,
Pixeldichte,
Netzwerkbedingungen
nachbilden.
Deshalb sollte mindestens auf einigen realen Geräten getestet werden.
Testmatrix muss nicht riesig sein
Man braucht nicht 80 Smartphones.
Eine pragmatische Auswahl kann abdecken:
kleines Smartphone
größeres Smartphone
Tablet
Laptop
großer Desktop
plus verschiedene Browserfamilien.
Zusätzlich flexible Viewporttests.
Inhaltsszenarien testen
Nicht nur Geräte.
Auch:
lange Überschrift,
fehlendes Bild,
lange Navigation,
Fehlermeldung,
geöffnete Tastatur,
große Tabelle.
Responsive Fehler entstehen oft aus der Kombination von Inhalt und Bildschirmgröße.
Design sollte mit Browser-Zoom getestet werden
Ein Nutzer vergrößert Inhalte.
Was passiert?
Wenn sofort:
Text abgeschnitten,
Buttons überlagert,
Navigation zerstört
wird, ist das Layout zu fragil.
Responsive Design und Core Web Vitals
Mobile Layouts beeinflussen Core Web Vitals unmittelbar.
Beispiel:
Ein Hero-Bild besitzt keine reservierte Höhe.
Es lädt später.
Dann:
Inhalt
↓
springt nach unten
Das ist ein Layout Shift.
Responsive Bilder und stabile Dimensionen können dies verbessern.
Auch Navigation kann Layout Shift erzeugen
Webfont lädt.
Menüpunkte werden breiter.
Navigation springt.
Oder:
Cookiebanner erscheint nachträglich und verschiebt alles.
Responsive Design sollte auch Stabilität berücksichtigen.
Reihenfolge des Ladens kann entscheidend sein
Wichtiger Inhalt sollte möglichst früh sichtbar sein.
Wenn mobile Nutzer zuerst:
riesiges Hintergrundvideo,
mehrere Scripts,
Webfonts
laden müssen, bevor Text erscheint, ist das Nutzungserlebnis schlecht.
Responsive Design betrifft deshalb nicht nur CSS
Es betrifft:
Layout
+
Content
+
Bilder
+
Interaktion
+
Performance
Genau deshalb ist es Teil von Webdesign und UX zugleich.
WordPress und Responsive Design
Moderne WordPress-Themes sind in der Regel bereits grundsätzlich responsiv.
Das bedeutet aber nicht automatisch:
jede individuelle Seite ist gut responsiv gestaltet.
Ein Redakteur kann trotzdem:
zu breite Tabellen,
feste Bildgrößen,
problematische Spalten,
lange untrennbare Elemente
einbauen.
Theme und Content müssen zusammenspielen
Das Theme liefert:
responsive Regeln.
Der Inhalt sollte diese Regeln nicht ständig brechen.
WordPress-Spalten sind ein typischer Fall
Desktop:
Spalte A | Spalte B
Mobil:
oft:
Spalte A
↓
Spalte B
Die Reihenfolge muss deshalb bereits beim Erstellen sinnvoll sein.
Man sollte Desktop nicht als einzige Vorschau verwenden
Im WordPress-Editor ist leicht zu vergessen:
Die Hälfte der Nutzer sieht vielleicht eine ganz andere Anordnung.
Vor Veröffentlichung:
Mobilansicht prüfen.
Custom CSS kann responsive Probleme erzeugen
Zum Beispiel:
width: 900px
auf einem Element.
Desktop:
perfekt.
Mobil:
Überlauf.
Deshalb sollten individuelle CSS-Regeln möglichst flexibel geplant werden.
Page Builder können Responsive Einstellungen anbieten
Zum Beispiel separate Werte für:
Desktop,
Tablet,
Mobil.
Das ist nützlich.
Aber leicht zu übertreiben.
Wenn jedes Element 15 gerätespezifische Sonderwerte besitzt:
wird die Seite schwer wartbar.
Gute globale Regeln sind besser als tausend lokale Korrekturen
Beispiel:
Container Padding Mobile
→ global
statt:
bei jeder einzelnen Sektion einen eigenen mobilen Abstand einzutragen.
Das entspricht dem Designsystem-Gedanken aus UI Design.
Responsive Design sollte systematisch sein
Zum Beispiel:
Spacing Scale
↓
responsive Varianten
Typography Scale
↓
responsive Varianten
Grid
↓
responsive Regeln
Components
↓
responsive Zustände
Dann entstehen viele Seiten aus denselben Grundregeln.
Die Startseite sollte kein Sonderuniversum sein
Ein häufiger Fehler:
Startseite mit eigenem komplett individuellen responsive CSS.
Artikelseiten wieder anders.
Landingpages wieder anders.
Besser:
gemeinsame Layoutprinzipien.
Sonderfälle nur dort, wo sie wirklich benötigt werden.
Responsive Design und visuelle Hierarchie
Auf Desktop kann eine große Hero-Illustration neben einer Überschrift stehen.
Beide sind gleichzeitig sichtbar.
Auf Smartphone steht vielleicht zuerst das Bild.
Dann die Überschrift erst nach dem Scrollen.
Dadurch hat sich die visuelle Hierarchie verändert.
Das kann problematisch sein.
Deshalb reicht technische Umordnung nicht
Man muss fragen:
Bleibt das Wichtigste tatsächlich zuerst sichtbar?
Responsive Design ist nicht nur:
„passt hinein“.
Es muss auch die beabsichtigte Priorität erhalten.
Mobile Hero-Beispiel
Desktop:
Überschrift Illustration
Unterzeile
Button
Mobil vielleicht besser:
Überschrift
Unterzeile
Button
Illustration
statt:
Illustration
↓
lange Bildhöhe
↓
Überschrift erst weiter unten
Wenn der Inhalt wichtiger ist als die Dekoration.
Die richtige Reihenfolge hängt vom Zweck ab
Ein Fotografieportfolio kann bewusst mit dem Bild beginnen.
Eine Wissensplattform vielleicht eher mit:
Thema und Nutzen.
Responsive Design folgt erneut der Funktion.
Responsive Design und visuelle Dichte
Desktop kann mehr Informationen gleichzeitig vertragen.
Mobil benötigt häufig größere Abstände und weniger parallele Informationen.
Aber:
nicht zwangsläufig gigantische Abstände.
Zu viel Whitespace kann dazu führen, dass der Nutzer endlos scrollt.
Mobil bedeutet nicht automatisch „alles riesig“
Das Ziel lautet:
lesbar,
bedienbar,
klar.
Nicht:
jede Card 600 Pixel hoch.
Information Density muss sinnvoll balanciert werden
Produktive Anwendungen können auf Mobile weiterhin relativ dicht sein.
Ein Blog darf luftiger wirken.
Der Nutzungskontext bestimmt die optimale Dichte.
Responsive Design und Scrollen
Vertikales Scrollen ist auf mobilen Geräten vollkommen normal.
Man muss nicht versuchen, alles „above the fold“ unterzubringen.
Die wichtigere Frage lautet:
Ist die Reihenfolge logisch?
„Above the fold“ ist keine feste Pixelhöhe
Bildschirmgrößen unterscheiden sich.
Browserleisten unterscheiden sich.
Nutzer zoomen.
Deshalb sollte keine Gestaltung auf einer magischen exakten Fold-Linie basieren.
Wichtig ist:
Der erste sichtbare Bereich vermittelt Orientierung und einen sinnvollen Einstieg.
Ein sichtbarer Hinweis auf weiteren Inhalt kann helfen
Wenn der Hero exakt die gesamte Bildschirmhöhe ausfüllt und unten sauber abschließt, kann manchmal der Eindruck entstehen:
Die Seite ist hier zu Ende.
Ein angeschnittener nächster Abschnitt kann visuell zeigen:
Es geht weiter.
Das kann bewusst gestaltet werden.
100vh kann auf Mobilgeräten überraschend sein
Browserleisten verändern die tatsächlich sichtbare Höhe.
Ein Hero, der starr auf die Viewporthöhe gesetzt wird, kann dadurch unerwartet reagieren.
Das ist ein Beispiel dafür, warum reale Geräte wichtig bleiben.
Bilder müssen unterschiedliche Orientierungen verkraften
Eine Landschaftsaufnahme funktioniert im breiten Desktopformat.
Mobil im Hochformat bleibt vielleicht nur ein kleiner Ausschnitt.
Deshalb sollte das Bildkonzept bereits verschiedene Einsatzformen berücksichtigen.
Generative Bildsysteme können mehrere Varianten direkt erzeugen
Zum Beispiel:
hero-desktop
→ 16:9
hero-mobile
→ 4:5
gleiche visuelle Idee,
angepasste Komposition.
Das kann qualitativ besser sein als automatisches Zuschneiden.
Responsive Design und Social Media sind verwandt, aber nicht dasselbe
Social Preview:
eigene feste Formate.
Website:
dynamische Layoutgrößen.
Ein Asset-System kann deshalb mehrere Varianten derselben Bildidee verwalten.
Was ist Adaptive Design?
Responsive und Adaptive Design werden teilweise unterschieden.
Vereinfacht:
Responsive:
Layout reagiert fließend
Adaptive:
mehrere definierte Layoutvarianten
In der Praxis können moderne Websites Elemente beider Ansätze kombinieren.
Zum Beispiel:
fluides Raster
plus:
bestimmte Breakpoints mit klaren Zustandswechseln.
Die Begriffe sind weniger wichtig als das Ergebnis
Ein gutes System kann:
fließende Breiten,
diskrete Breakpoints,
komponentenspezifische Varianten
kombinieren.
Wichtiger ist:
Die Website funktioniert über den relevanten Größenbereich hinweg.
Responsive Design für E-Mail ist ein eigener Spezialfall
E-Mail-Clients besitzen andere technische Einschränkungen als Browser.
Die allgemeinen Prinzipien:
Priorisierung,
Lesbarkeit,
mobile Anpassung
gelten trotzdem.
Für Webdesign sollte E-Mail aber separat betrachtet werden.
Responsive Design für Dashboards
Dashboards stellen besondere Anforderungen.
Desktop:
viele Daten nebeneinander.
Mobil:
weniger Platz.
Man kann priorisieren:
wichtige Kennzahlen
↓
zuerst
sekundäre:
aufklappbar oder weiter unten
Diagramme müssen ebenfalls reagieren
Ein Diagramm mit 20 Beschriftungen funktioniert auf Desktop.
Mobil:
unlesbar.
Mögliche Lösungen:
weniger Labels,
horizontal scrollbare Grafik,
interaktive Detailansicht,
anderes Diagramm.
Nicht einfach:
Diagramm auf 25 % verkleinern.
Responsive Datenvisualisierung ist eigene Gestaltung
Ein Diagramm besteht aus Information.
Wenn diese durch Skalierung unlesbar wird, wurde die Aufgabe verfehlt.
Responsive Design für Modals
Desktopdialog:
600 px breit
Mobil:
fast volle Breite
oder sogar:
Full-Screen Sheet
Das kann besser funktionieren.
Bottom Sheets auf Mobilgeräten
Ein Panel kommt von unten.
Zum Beispiel für:
Filter,
Optionen,
Auswahl.
Das kann gut zur Daumenbedienung passen.
Desktop verwendet vielleicht stattdessen:
Dropdown
oder:
seitliches Panel.
Die Funktion bleibt dieselbe.
Die Komponente passt sich an.
Responsive Design und Interaktionsmuster
Genau das ist ein wichtiges Prinzip:
gleiche Aufgabe
≠
zwingend gleiche UI
Desktop und Mobil dürfen unterschiedliche Interaktionsmuster verwenden, wenn sie dasselbe Nutzerziel besser unterstützen.
Kontext vor visueller Gleichheit
Eine Website muss nicht auf allen Geräten pixelgleich aussehen.
Sie sollte:
markenkonsistent,
inhaltlich konsistent,
funktional konsistent
sein.
Die konkrete Anordnung darf variieren.
Designsysteme sollten deshalb funktionale Konsistenz priorisieren
Desktop:
Filter Sidebar
Mobil:
Filter Button → Bottom Sheet
Optisch verschieden.
Funktional:
gleiche Filterlogik.
Das ist gutes Responsive Design.
Was sollte auf allen Geräten gleich bleiben?
Typischerweise:
Inhalt
Markenidentität
Grundfunktion
Begriffe
Statusbedeutungen
Was darf sich ändern?
Anordnung
Größe
Sichtbarkeit sekundärer Elemente
Interaktionsmuster
Bildcrop
Anzahl der Spalten
Diese Flexibilität ist notwendig.
Häufiger Fehler: Desktop zuerst bis ins Detail perfektionieren
Monatelang wird die Desktopansicht optimiert.
Erst am Ende:
Jetzt noch Mobile.
Dann beginnt:
Elemente verstecken,
Schrift verkleinern,
Sonder-CSS.
Das mobile Ergebnis wirkt wie ein nachträglicher Kompromiss.
Besser parallel denken
Bereits beim Komponentenentwurf:
Wie funktioniert das breit?
und:
Wie funktioniert das schmal?
So werden responsive Probleme früh erkannt.
Responsive Wireframes
Man kann bereits in der Wireframephase mehrere Ansichten skizzieren.
Desktop:
┌─────────────────────────────┐
│ Navigation │
├───────────────┬─────────────┤
│ Inhalt │ Sidebar │
└───────────────┴─────────────┘
Mobil:
┌─────────────┐
│ Navigation │
├─────────────┤
│ Inhalt │
├─────────────┤
│ Sidebar- │
│ Inhalt │
└─────────────┘
Damit wird die strukturelle Veränderung früh sichtbar.
Prototypen sollten ebenfalls mehrere Viewports abdecken
Nicht jede Mikroanimation muss sofort mobil prototypisiert werden.
Aber kritische:
Navigation,
Formulare,
Tabellen,
Checkout,
Filter
sollten getestet werden.
Responsive Design und Contentstrategie
Manche Inhalte sind zu lang für kleine UI-Komponenten.
Beispiel Button:
Alle verfügbaren Tarife miteinander vergleichen
Vielleicht ist die Beschriftung generell zu lang.
Responsive Probleme können also auch Contentprobleme sichtbar machen.
Kurze präzise Microcopy hilft
Nicht aus Platzgründen um jeden Preis kürzen.
Aber:
Tarife vergleichen
kann denselben Zweck klarer erfüllen.
Das hilft auf allen Geräten.
Responsive Design verbessert dadurch oft auch Desktop
Die Beschränkung kleiner Bildschirme zwingt zu:
klareren Prioritäten,
kürzerer Sprache,
besserer Informationsstruktur.
Diese Verbesserungen profitieren anschließend auch große Layouts.
Was du dir über Responsive Webdesign merken solltest
Responsive Webdesign bedeutet, dass eine Website ihre Darstellung und teilweise ihre Interaktionsmuster an den verfügbaren Raum und die Nutzungssituation anpasst.
Das Grundprinzip lautet:
gleicher Inhalt
↓
unterschiedlicher Raum
↓
passendes Layout
Responsive Design bedeutet nicht:
Desktopseite
↓
einfach kleiner machen
Sondern:
Layout neu organisieren
Desktop kann beispielsweise zeigen:
Text | Bild
Mobil:
Text
↓
Bild
Mehrere Cards können reagieren:
4 Spalten
↓
2 Spalten
↓
1 Spalte
Der Wechsel erfolgt häufig über Breakpoints.
Ein Breakpoint sollte nicht primär deshalb entstehen, weil ein bestimmtes Smartphone eine bestimmte Breite besitzt.
Besser:
Layout funktioniert nicht mehr gut
↓
Breakpoint
↓
andere Darstellung
Damit wird das Design unabhängiger von einzelnen Geräten.
Mobile First bedeutet:
kleine Fläche zuerst
↓
Prioritäten klären
↓
größere Layouts erweitern
Das ist besonders hilfreich, weil Smartphoneansichten wenig Platz für überflüssige Elemente lassen.
Ein gutes responsives System nutzt außerdem flexible Breiten.
Viewport
↓
flexibler Container
↓
Maximalbreite
So wird Inhalt auf kleinen Displays breit genug, ohne auf großen Monitoren endlos auseinanderzulaufen.
Typografie muss ebenfalls reagieren.
kleiner Screen
→ kleinere Überschrift
großer Screen
→ größere Überschrift
aber immer innerhalb sinnvoller Mindest- und Maximalgrößen.
Dasselbe gilt für Bilder.
Ein Bild nur kleiner anzuzeigen reicht nicht.
Idealerweise wird auch eine passende Dateigröße ausgeliefert.
kleines Display
→ kleinere Ressource
großes Display
→ größere Ressource
Responsive Images verbessern damit gleichzeitig Website-Performance.
Manchmal braucht ein Bild sogar eine andere Komposition.
Desktop
→ breites Motiv
Mobil
→ engerer Crop
Das ist Art Direction.
Bei Bild-KI können dafür auch separate Formatvarianten erzeugt werden.
Navigation muss ebenfalls responsiv gedacht werden.
Desktop
→ vollständige Navigation
Mobil
→ kompakteres Menü
Aber ein Hamburger-Menü löst keine schlechte Informationsarchitektur.
Zu viele Menüpunkte bleiben auch versteckt zu viele Menüpunkte.
Touchbedienung verändert zudem die Anforderungen an UI-Komponenten.
Maus
→ sehr präzise
Finger
→ größere Ziele nötig
Deshalb benötigen interaktive Elemente auf kleinen Displays ausreichend große Klickflächen und Abstand.
Hover kann dort nicht als zentrale Bedienlogik vorausgesetzt werden.
Tabellen sind ein weiterer Spezialfall.
Je nach Aufgabe können sie mobil:
horizontal scrollbar
werden,
weniger Spalten anzeigen
oder:
in Cards umgewandelt werden.
Die richtige Lösung hängt davon ab, was der Nutzer mit den Daten tun möchte.
Dasselbe gilt für Filter, Dialoge und andere Komponenten.
Ein besonders wichtiger Grundsatz lautet:
gleiche Funktion
≠
zwingend gleiche Darstellung
Ein Desktopfilter kann eine Sidebar sein.
Mobil ein Button mit Bottom Sheet.
Die Funktion bleibt identisch.
Das Interface passt sich an.
Responsive Design betrifft außerdem Performance.
Ein Smartphone sollte nicht dieselben unnötig großen:
Bilder,
Videos,
Skripte
laden müssen wie ein High-End-Desktop.
Damit treffen sich Responsive Design, Core Web Vitals und UX unmittelbar.
Für WordPress gilt:
Ein responsives Theme ist nur die Grundlage.
Auch einzelne Inhalte müssen responsive bleiben.
Problematisch können unter anderem sein:
feste Breiten
zu breite Tabellen
individuelles CSS
komplizierte Spalten
schlecht zugeschnittene Bilder
Deshalb sollten Seiten nicht nur in der Desktopansicht kontrolliert werden.
Ein sinnvoller Testprozess lautet:
kleiner Viewport
↓
größer ziehen
↓
jede Zwischenbreite beobachten
↓
reale Geräte testen
Nicht nur:
iPhone-Preset
+
Desktop-Preset
↓
fertig
Responsive Design sollte ein System sein.
Design Tokens
↓
responsive Typografie
↓
responsive Spacing
↓
responsive Komponenten
↓
responsive Seiten
Dadurch muss nicht jede einzelne Seite mit Sonderregeln repariert werden.
Die vielleicht wichtigste Erkenntnis lautet:
Responsive Webdesign bedeutet nicht, Inhalte möglichst geschickt auf kleine Bildschirme zu quetschen. Es bedeutet, Prioritäten, Layout und Interaktion so anzupassen, dass dieselbe Aufgabe auch unter anderen Platzbedingungen verständlich und angenehm bleibt.