Was bedeutet Re­spon­si­ve Design?

Re­spon­si­ve Webdesign be­schreibt den Ansatz, eine Website zu ent­wi­ckeln, die auf ver­schie­de­nen End­ge­rä­ten optimal dar­ge­stellt wird. Der Begriff Re­spon­si­ve Design ist so alt wie das mobile Web und als Stan­dardan­satz im Webdesign verankert.

Re­spon­si­ve Webdesign im Überblick

Vor dem Aufkommen des mobilen Webs war die Land­schaft der in­ter­net­fä­hi­gen Endgeräte stark homogen: Es gab Desktop- oder Laptop-Rechner, die sich in Bezug auf die Ein- und Aus­ga­be­me­di­en recht ähnlich waren. Beide Arten von Geräten verfügten über Tastatur und Maus bzw. Trackpad sowie einen Bild­schirm mit einer Breite von ca. 1.000 bis 2.000 Pixel.

Um damals eine Website zu ent­wi­ckeln, die auf der Mehrzahl der ein­ge­setz­ten Geräte or­dent­lich dar­ge­stellt wurde, musste kein un­ge­büh­ren­der Aufwand betrieben werden. Die ein­fachs­te Lösung bestand darin, die Breite der Seiten auf den kleinsten ge­mein­sa­men Nenner zu begrenzen. Ein beliebter Ansatz war, die Seiten 800 Pixel breit und zentriert oder links­bün­dig dar­zu­stel­len. Auf einem größeren Bild­schirm gab es so ggf. etwas mehr Weißraum, aber die Seiten waren auf allen Geräten gut lesbar.

Mit der Ent­wick­lung von Mo­bil­ge­rä­ten di­ver­si­fi­zier­te sich die Land­schaft der in­ter­net­fä­hi­gen Geräte grund­le­gend. Während sich die Bild­schir­me der ur­sprüng­li­chen in­ter­net­fä­hi­gen Geräte ähnlich waren, un­ter­schei­den sich die Bild­schir­me der modernen Technik wie Smart­phones, Tablets und Co in vielerlei Hinsicht: Moderne Geräte decken Bild­schirm­brei­ten von 320 Pixel bis weit über 4.000 Pixel ab. Doch neben den reinen Pixel-Di­men­sio­nen muss auch die in­di­vi­du­el­le physische Auflösung („pixels per inch“, ppi) der Retina-Displays beachtet werden sowie das Device Pixel Ratio (DPR). Außerdem erfolgt die Na­vi­ga­ti­on nicht unbedingt mit einer Maus, sondern auch mit dem Finger.

Eine re­spon­si­ve Website passt sich an den jeweils vor­han­de­nen Platz auf dem Bild­schirm an. Man spricht dabei auch von „screen real estate“. Die Website soll auf allen Geräten gut aussehen und eine optimale User Ex­pe­ri­ence (UX) bieten.

Re­spon­si­ve Webdesign umfasst eine Vielzahl an Techniken und Ansätzen, die kom­bi­niert werden, um eine voll­stän­dig re­spon­si­ve Website zu ent­wi­ckeln. Dazu gehören ins­be­son­de­re:

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

Neben klas­si­schen Smart­phones und Tablets gewinnen zunehmend Foldables und Dual-Screen-Geräte an Bedeutung. Diese Geräte können ihre Dis­play­flä­che dynamisch verändern, etwa beim Auf­klap­pen oder beim Wechsel zwischen ein- und zwei­ge­teil­ter Ansicht. Für das Re­spon­si­ve Webdesign bedeutet dies, dass Layouts nicht nur auf un­ter­schied­li­che Bild­schirm­grö­ßen reagieren müssen, sondern auch auf plötz­li­che Än­de­run­gen der ver­füg­ba­ren Fläche während der Nutzung. Moderne re­spon­si­ve Websites sollten daher flexibel genug sein, um Inhalte auch bei wech­seln­den Form­fak­to­ren kon­sis­tent und nut­zer­freund­lich dar­zu­stel­len.

Warum sollte eine Website responsiv gestaltet werden?

Die Ent­wick­lung einer re­spon­si­ven Website bietet ver­schie­de­ne Vorteile. Dabei steht die User Ex­pe­ri­ence im Vor­der­grund. Prin­zi­pi­ell lässt sich eine gute Erfahrung der Nutzenden auch ohne re­spon­si­ves Design umsetzen. Dies bedingt dann aber entweder eine eigene mobile Seite oder die Nutzung von Ja­va­Script. In der Summe ist das dann oft deutlich komplexer als der CSS-basierte Re­spon­si­ve-Webdesign-Ansatz und führt zu mehr Aufwand für die Pflege der un­ter­schied­li­chen Site-Versionen.

Re­spon­si­ve Webdesign für optimales Design

Das Design einer Website be­ein­flusst aus­schlag­ge­bend, wie Be­su­chen­de die dar­ge­stell­ten In­for­ma­tio­nen wahr­neh­men. Ein gutes Design spiegelt die Identität der hinter der Website stehenden Or­ga­ni­sa­ti­on wider und hilft, Be­su­chen­de an die Marke zu binden. Be­su­chen­de sollen sich auf der Website wohl­füh­len und eine positive Erfahrung machen. Be­trach­ten wir zwei Beispiele, wie Re­spon­si­ve Webdesign zur optimalen Nut­zer­er­fah­rung beiträgt:

• Nehmen wir an, eine Über­schrift auf einem Mo­bil­ge­rät füllt den gesamten Bild­schirm. Jedoch fällt die Über­schrift auf der Desktop-Version in gleicher Schrift­grö­ße kaum auf. Auf dem Desktop muss die Über­schrift größer dar­ge­stellt werden, um tat­säch­lich das Auge der Be­su­chen­den auf sich zu ziehen.
• Auf einem Blog wird rechts neben dem Artikel eine Sidebar dar­ge­stellt. Die Sidebar enthält Links zu weiteren Artikeln mit kleinen Vor­schau­bil­dern. In der Desktop-Version hilft die Sidebar, die Ar­ti­kel­brei­te zu begrenzen und trägt damit zur Les­bar­keit bei. Auf einem Mo­bil­ge­rät würde die Sidebar jedoch fast die Hälfte des Screens bedecken. Das Layout muss auf Mo­bil­ge­rä­ten um­ge­schal­tet werden, damit der Inhalt der Sidebar unterhalb des Artikels erscheint.

Re­spon­si­ve Webdesign für die optimale User Ex­pe­ri­ence (UX)

Prin­zi­pi­ell wird eine nicht responsiv auf­ge­bau­te Website auf dem kleinen Bild­schirm eines Mo­bil­ge­räts genauso dar­ge­stellt wie auf dem Desktop, nur eben sehr viel kleiner. Das zwingt Nutzende, in einzelne Sei­ten­be­rei­che hin­ein­zu­zoo­men. Daher ist es besser, eine op­ti­mier­te Version an­zu­bie­ten. Ein paar Beispiele:

• Ein Button auf einer Website wird am Desktop mit der Maus an­ge­klickt. Ein Mo­bil­ge­rät wird jedoch mit dem Finger bedient. Der Button muss daher für die Mo­bil­ver­si­on größer sein und mehr Abstand zu anderen Elementen erhalten.
• Stellen Sie sich ein Formular auf einer Seite vor. Nor­ma­ler­wei­se wird diesem per CSS ein In­nen­ab­stand (padding) zu­ge­wie­sen, damit der ent­hal­te­ne Text gut lesbar ist und die Ränder des Formulars nicht berührt. Ein In­nen­ab­stand von jeweils 20 Pixeln rechts und links ist normal und sieht auf großen Bild­schir­men gut aus. Aber auf dem Mo­bil­ge­rät mit nur 320 Pixeln Bild­schirm­brei­te gehen 40 von 320 Pixeln verloren (also ein Achtel). Hat das Formular auch noch einen Au­ßen­ab­stand (margin), sagen wir weitere 20 Pixel pro Seite, gehen auf dem Mo­bil­ge­rät 25 Prozent des ver­füg­ba­ren Platzes verloren. Um dies zu ver­hin­dern, sollten die Abstände auf dem Mo­bil­ge­rät ver­rin­gert werden.

Website nicht responsiv: Was sind die möglichen Kon­se­quen­zen?

Ein großer Pro­zent­satz der Nutzenden greift heut­zu­ta­ge über mobile Geräte auf Web­in­hal­te zu. Es gibt reale, schwer­wie­gen­de Nachteile, wenn eine Website nicht komplett responsiv aufgebaut ist. Dazu zählen ins­be­son­de­re:

• Schlechte Con­ver­si­on-Rate und hohe Bounce-Rate, ver­ur­sacht durch sub­op­ti­ma­les Design und Störung der User Ex­pe­ri­ence
• Schlech­tes Such­ma­schi­nen­ran­king, denn Google bewertet u. a. Mobile Usability, Core Web Vitals und Touch-Ziel­grö­ßen
• Schlechte Per­for­mance durch Laden nicht op­ti­mier­ter Res­sour­cen (messbar z. B. über Largest Con­tentful Paint (LCP) und In­ter­ac­tion to Next Paint (INP)

Core Web Vitals: Mess­grö­ßen der User Ex­pe­ri­ence

Um die tat­säch­li­che Nut­zer­er­fah­rung objektiv zu bewerten, nutzt Google die so­ge­nann­ten Core Web Vitals. Dabei handelt es sich um stan­dar­di­sier­te Leis­tungs­kenn­zah­len, die messen, wie schnell Inhalte geladen werden, wie stabil das Layout ist und wie re­ak­ti­ons­fä­hig eine Website auf Nut­zer­ein­ga­ben reagiert. Die wich­tigs­ten Core Web Vitals sind:

• Largest Con­tentful Paint (LCP): misst, wie lange es dauert, bis das größte sichtbare In­halts­ele­ment gerendert ist (Zielwert ≤ 2,5 s)
• In­ter­ac­tion to Next Paint (INP): erfasst die Re­ak­ti­ons­fä­hig­keit einer Seite bei Nut­zer­inter­ak­tio­nen (Zielwert ≤ 200 ms)
• Cu­mu­la­ti­ve Layout Shift (CLS): bewertet, ob sich Inhalte während des Ladens un­er­war­tet ver­schie­ben (Zielwert ≤ 0,1)

Nicht responsiv ge­stal­te­te Websites schneiden bei diesen Werten häufig schlech­ter ab, etwa durch zu große Bild­da­tei­en, nach­la­den­de Inhalte oder Layout-An­pas­sun­gen, die nicht auf mobile Geräte ab­ge­stimmt sind.

Tools zur Analyse der Core Web Vitals

Die Core Web Vitals lassen sich mit ver­schie­de­nen Tools messen. Besonders ver­brei­tet sind die folgenden:

• Google PageSpeed Insights: ana­ly­siert einzelne Seiten und kom­bi­niert Felddaten realer Nutzer mit La­bor­da­ten
• Google Light­house: in­te­griert in die Chrome-Ent­wick­ler­tools und geeignet für de­tail­lier­te Per­for­mance-Analysen
• Google Search Console: zeigt agg­re­gier­te Core-Web-Vitals-Daten für ganze Websites und iden­ti­fi­ziert pro­ble­ma­ti­sche URLs

Diese Tools helfen dabei, Schwach­stel­len gezielt zu erkennen und zu über­prü­fen, wie sich re­spon­si­ve An­pas­sun­gen konkret auf die Nut­zer­er­fah­rung auswirken.

Welche Aspekte der Web­ent­wick­lung werden vom Re­spon­si­ve Design be­ein­flusst?

Re­spon­si­ve Design umfasst ver­schie­de­ne Ansätze und Tech­no­lo­gien. Nor­ma­ler­wei­se gibt es für die un­ter­schied­li­chen Szenarien mehrere Lö­sungs­we­ge. Die Ent­wick­lung befindet sich weiterhin im Fluss.

Re­spon­si­ve Layout

Das Umsetzen komplexer Layouts auf Websites war seit Beginn des World Wide Web eine Wis­sen­schaft für sich. HTML kennt ver­schie­de­ne Element-Typen: block, inline und inline-block. Block-Elemente nehmen die gesamte ver­füg­ba­re Breite ein und po­si­tio­nie­ren sich gestapelt. Inline-Elemente nehmen nur die von ihrem Inhalt tat­säch­lich benötigte Breite ein und po­si­tio­nie­ren sich ne­ben­ein­an­der. Hier eine Übersicht der fürs Re­spon­si­ve Webdesign wich­tigs­ten Element-Typen:

Um Inhalte ne­ben­ein­an­der an­zu­ord­nen, wurden früher Tabellen- oder Float-basierte Layouts ein­ge­setzt. Diese Ansätze gelten heute als überholt. Moderne re­spon­si­ve Layouts basieren nahezu aus­schließ­lich auf CSS-Flexbox und CSS Grid. Flexbox eignet sich besonders für ein­di­men­sio­na­le Layouts, etwa ho­ri­zon­ta­le oder vertikale Listen, während CSS Grid für komplexe, zwei­di­men­sio­na­le Sei­ten­struk­tu­ren genutzt wird.

Ein an­schau­li­ches Beispiel: Stellen Sie sich eine Seite mit vier Vorschau-Elementen für Blog­ar­ti­kel vor. Die Vorschau-Elemente enthalten jeweils Vor­schau­bild, Über­schrift, Teaser und „Mehr lesen“-Button. Mit Flexbox lässt sich das folgende re­spon­si­ve Layout leicht umsetzen:

• Dar­stel­lung auf großem Bild­schirm: alle Vorschau-Elemente ne­ben­ein­an­der in einer Reihe. Jedes der Elemente nimmt 25 Prozent des ver­füg­ba­ren Platzes ein.
• Dar­stel­lung auf mittlerem Bild­schirm: zwei Vorschau-Elemente ne­ben­ein­an­der in zwei Reihen. Jedes der Elemente nimmt 50 Prozent des ver­füg­ba­ren Platzes ein.
• Dar­stel­lung auf kleinem Bild­schirm: alle vier Vorschau-Elemente un­ter­ein­an­der in einer Zeile. Jedes der Elemente nimmt 100 Prozent des ver­füg­ba­ren Platzes ein.

Re­spon­si­ve Layout mit CSS-Grid und Media Queries

Moderne re­spon­si­ve Layouts lassen sich heute in vielen Fällen ohne zu­sätz­li­ches CSS-Framework umsetzen. Native Layout-Module wie CSS Grid und Flexbox sind breit un­ter­stützt und er­mög­li­chen flexible, gut wartbare Struk­tu­ren. Ein zentrales Werkzeug dabei sind CSS Media Queries. Mit ihnen lassen sich CSS-Regeln abhängig von Ei­gen­schaf­ten des Aus­ga­be­ge­räts anwenden, ins­be­son­de­re von der Breite des Viewports. Media Queries be­ant­wor­ten damit die Frage, unter welchen Be­din­gun­gen ein be­stimm­tes Layout aktiv sein soll, etwa ab einer be­stimm­ten Bild­schirm­grö­ße oder bei einer be­stimm­ten Ge­rä­te­aus­rich­tung

Be­trach­ten wir das Beispiel einer Seite mit vier Vorschau-Elementen für Blog­ar­ti­kel. Jedes Element enthält ein Vor­schau­bild, eine Über­schrift, einen kurzen Text und einen Link zum voll­stän­di­gen Artikel. Ziel ist es, die Anzahl der ne­ben­ein­an­der dar­ge­stell­ten Elemente abhängig von der ver­füg­ba­ren Bild­schirm­brei­te 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-Im­ple­men­tie­rung 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 Bild­schir­me definiert. Ab einer Breite von 600 Pixeln werden zwei Spalten dar­ge­stellt, ab 1.024 Pixeln vier. Dieses Vorgehen folgt dem Mobile-first-Prinzip und stellt sicher, dass Inhalte auf kleinen Displays über­sicht­lich bleiben und auf größeren Bild­schir­men optimal genutzt werden. Media Queries reagieren dabei stets auf den Viewport, also auf die Größe des Brow­ser­fens­ters oder Bild­schirms.

Container Queries: Re­spon­si­ve Design auf Kom­po­nen­ten­ebe­ne

Während Media Queries auf die Größe des Viewports reagieren, setzen CSS Container Queries an einer anderen Stelle an. Sie er­mög­li­chen es, Styles abhängig von der Größe eines um­ge­ben­den Con­tai­ners an­zu­wen­den, un­ab­hän­gig von der tat­säch­li­chen Bild­schirm­grö­ße. Damit reagieren Elemente nicht mehr auf das gesamte Brow­ser­fens­ter, sondern auf den Platz, der ihnen innerhalb eines Layouts tat­säch­lich zur Verfügung steht. Das ist besonders relevant in modularen Layouts, in denen Kom­po­nen­ten mehrfach und in un­ter­schied­li­chen Kontexten ein­ge­setzt werden, etwa sowohl im schmalen Sei­ten­be­reich als auch im breiten Haupt­in­halt. Mit Media Queries allein lassen sich solche Szenarien nur ein­ge­schränkt abbilden.

Ein typisches Beispiel ist ein Vorschau-Element für Artikel. Befindet es sich in einer schmalen Sidebar, soll Bild und Text un­ter­ein­an­der angezeigt werden. Im Haupt­be­reich mit mehr Platz können Bild und Text hingegen ne­ben­ein­an­der dar­ge­stellt werden. Container Queries erlauben genau diese kon­text­ab­hän­gi­ge Anpassung, ohne zu­sätz­li­che Break­points für jede Lay­out­va­ri­an­te de­fi­nie­ren zu müssen. Zunächst wird der über­ge­ord­ne­te Container als so­ge­nann­ter „Query Container“ definiert:

CSS-Im­ple­men­tie­rung mit CSS Grid:

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

Die Vorschau-Kom­po­nen­te selbst erhält ein einfaches Grund­lay­out, das für wenig Platz optimiert ist:

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

An­schlie­ßend wird per Container Query fest­ge­legt, dass sich das Layout ändert, sobald der Container eine bestimmte Breite über­schrei­tet:

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

Die Kom­po­nen­te passt sich damit au­to­ma­tisch an den ver­füg­ba­ren Platz ihres Con­tai­ners an. Ob sie in einer Sidebar oder im Haupt­be­reich steht, spielt keine Rolle mehr. Ent­schei­dend ist allein die Breite des Con­tai­ners, nicht die des Viewports. Container Queries un­ter­stüt­zen so einen kom­po­nen­ten­ba­sier­ten Ansatz im Re­spon­si­ve Webdesign und ergänzen klas­si­sche Media Queries sinnvoll. In modernen Projekten werden beide Techniken häufig kom­bi­niert, um sowohl globale Lay­out­wech­sel als auch fein granulare An­pas­sun­gen einzelner Kom­po­nen­ten um­zu­set­zen.

Re­spon­si­ve Ty­po­gra­fie und Text­in­hal­te

Für eine optimale User Ex­pe­ri­ence muss die Schrift­grö­ße der Text­ele­men­te einer Website an die vor­han­de­ne Bild­schirm­flä­che und Nut­zungs­kon­tex­te angepasst werden. Neben der reinen Les­bar­keit spielen dabei auch Faktoren wie Ska­lier­bar­keit, Bar­rie­re­frei­heit und Lay­out­sta­bi­li­tät eine zentrale Rolle. Dabei kommen im Re­spon­si­ve Webdesign ver­schie­de­ne Schrift-Techniken zum Einsatz.

Als grund­le­gen­de Maßnahme nutzt man die CSS-Einheit rem („root element“), um die Schrift­grö­ße eines Elements pro­por­tio­nal an das HTML-root-Element zu binden. Dann genügt es, die Schrift­grö­ße des root-Elements über CSS-Break­points an­zu­pas­sen, um alle Schriften kon­sis­tent zu skalieren.

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

Dieses Vorgehen lässt sich im Mobile-First-Ansatz sinnvoll mit Media Queries kom­bi­nie­ren, um die Ba­sis­schrift­grö­ße auf größeren Bild­schir­men moderat zu erhöhen:

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

In modernen Layouts kommt zunehmend eine fluide Ty­po­gra­fie zum Einsatz, die sich stufenlos an die ver­füg­ba­re Fläche anpasst. Dafür wird heute bevorzugt die CSS-Funktion clamp() verwendet. Sie erlaubt es, eine minimale, eine be­vor­zug­te und eine maximale Schrift­grö­ße fest­zu­le­gen, ganz ohne zu­sätz­li­che Break­points.

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

So bleibt die Schrift auf kleinen Displays gut lesbar, wächst auf größeren Bild­schir­men dynamisch mit und über­schrei­tet dabei nie de­fi­nier­te Grenz­wer­te. clamp() gilt heute als Best Practice für re­spon­si­ve Ty­po­gra­fie.

Re­spon­si­ve Bilder

Neben Layout und Ty­po­gra­fie steht die op­ti­mier­te Dar­stel­lung von Bildern im Fokus des Re­spon­si­ve Designs. Of­fen­sicht­lich ist es nicht sehr sinnvoll, ein Bild mit 1.920 Pixel Kan­ten­län­ge auf ein Handy mit 400 Pixel breitem Bild­schirm zu laden. Zum einen muss das viel zu große Bild dann re­chen­auf­wen­dig im Browser her­un­ter­ska­liert werden. Zum anderen steigt die Da­tei­grö­ße eines Bilds, je mehr Pixel das Bild enthält.

Ein Bild mit 1.920 x 1.080 Pixel wird ca. viermal so viel Spei­cher­platz benötigen, wie ein Bild mit 960 x 540 Pixel. Ent­spre­chend länger dauert auch das Her­un­ter­la­den eines solchen Bildes auf ein Mo­bil­ge­rät. Zu­sam­men­ge­nom­men ergibt das einen aus­ge­spro­chen negativen Effekt auf die Per­for­manz und Nutz­bar­keit einer Website, wenn Bilder nicht responsiv optimiert sind.

Für re­spon­si­ve Bilder wurden die Attribute srcset und sizes werden etabliert, mit denen Browser je nach Kontext die passende Bild­res­sour­ce 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 ver­füg­ba­ren Assets eines laden, das für das jeweilige Gerät optimal ist.

Schauen wir uns ein kurzes Beispiel an. Der nach­fol­gen­de HTML-Code definiert ein Bild, für das zwei per srcset de­fi­nier­te Assets exis­tie­ren; eines mit 480 Pixel Kan­ten­län­ge und eines mit 800 Pixel Kan­ten­län­ge. Ferner wird per sizes fest­ge­legt, dass das Bild mit 480 Pixel bis zu einer Bild­schirm­brei­te 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 ent­schei­den­de Vorteil dieses Ansatzes besteht darin, dass der Browser selbst ent­schei­det, welche Bild­va­ri­an­te geladen wird. Ent­wick­ler müssen lediglich sinnvolle Bild­grö­ßen be­reit­stel­len, nicht aber die Auswahl manuell steuern.

Tra­di­tio­nell waren Bild­schir­me als Quer­for­mat aus­ge­rich­tet; Handy-Bild­schir­me sind jedoch im Hoch­for­mat. Ein Quer­for­mat-Bild auf einem Hoch­for­mat-Gerät wirkt sehr klein. Für ein besseres Ergebnis soll ein eigens zu­ge­schnit­te­nes qua­dra­ti­sches oder hoch­for­ma­ti­ges Bild zum Einsatz kommen. Die Wahl un­ter­schied­li­cher Zu­schnit­te eines Bildes be­zeich­net man als „Art Direction“. Dies lässt sich mit dem Element <picture> umsetzen. Das <picture>-Element erlaubt die komplexe De­fi­ni­ti­on mehrerer äqui­va­len­ter Bilder für un­ter­schied­li­che An­wen­dungs­fäl­le.

Schauen wir uns ein Beispiel an. Der nach­fol­gen­de HTML-Code definiert ein <picture>-Element, das un­ter­schied­li­che Assets für Quer- und Hoch­for­mat festlegt. Für beide Fälle gibt es jeweils mehrere, für ver­schie­de­ne Bild­schirm­grö­ßen op­ti­mier­te 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 si­cher­stel­len, dass ein Motiv auf kleinen, hoch­for­ma­ti­gen Displays ebenso wir­kungs­voll dar­ge­stellt wird wie auf großen Bild­schir­men.

Re­spon­si­ve Na­vi­ga­ti­on

Die Na­vi­ga­ti­on gehört zu den zentralen Be­dien­ele­men­ten einer Website und stellt im Re­spon­si­ve Design eine besondere Her­aus­for­de­rung dar. Tra­di­tio­nell wird die Na­vi­ga­ti­on auf großen Bild­schir­men im Kopf­be­reich der Seite angezeigt und hat Un­ter­me­nüs, die beim Über­fah­ren mit dem Maus­zei­ger auf­klap­pen. Dies lässt sich auf Mo­bil­ge­rä­ten nicht umsetzen. Zum einen fehlt auf kleinen Bild­schir­men der Platz für das Menü, zum anderen erfolgt die Bedienung hier nicht mit Maus, sondern per Touch.

Zur Dar­stel­lung von Na­vi­ga­ti­ons­me­nüs auf Mo­bil­ge­rä­ten gibt es ver­schie­de­ne Ansätze. Diese sind allesamt platz­spa­rend und benötigen keinen Maus­zei­ger. Die Ak­ti­vie­rung der Na­vi­ga­ti­on wird oft mit einer Animation un­ter­füt­tert, um die Auf­merk­sam­keit des Nutzers zu lenken. Zu den am weitesten ver­brei­te­ten Ansätzen für re­spon­si­ve Na­vi­ga­ti­on zählen:

• Das „Hamburger Menu“-Icon (drei waa­ge­rech­te Striche): Es dient als zentrales Be­dien­ele­ment zum Ak­ti­vie­ren des Menüs.
• Die „Off Canvas“-Na­vi­ga­ti­on: Das Menü rutscht dann vom Bild­schirm­rand herein und schiebt den ei­gent­li­chen Sei­ten­in­halt beiseite.

In der Praxis kommen jedoch weitere eta­blier­te Na­vi­ga­ti­ons­mus­ter zum Einsatz, die je nach Nut­zungs­kon­text Vorteile bieten. Dazu zählt etwa die Bottom Na­vi­ga­ti­on, bei der zentrale Na­vi­ga­ti­ons­punk­te am unteren Bild­schirm­rand platziert werden und so besonders gut mit dem Daumen er­reich­bar sind. „Priority+“-Menüs prio­ri­sie­ren wichtige Na­vi­ga­ti­ons­punk­te und lagern weniger relevante Einträge dynamisch in ein Untermenü aus. Für um­fang­rei­che Websites werden zudem Mega-Menüs mit Touch-Op­ti­mie­rung genutzt, die auch auf größeren Tablets und hybriden Geräten eine über­sicht­li­che Struktur er­mög­li­chen.