Ein Design, das auf einem kleinen Bildschirm angezeigt wird, sollte nicht wie eine verkleinerte Version eines großen Bildschirmlayouts aussehen. Ebenso sollte ein Design, das auf einem großen Bildschirm angezeigt wird, nicht wie eine erweiterte Version eines Layouts eines kleinen Bildschirms aussehen. Stattdessen muss das Design flexibel genug sein, um sich an alle Bildschirmgrößen anzupassen. Ein erfolgreiches responsives Design nutzt jeden Formfaktor optimal.
Das bedeutet, dass einige Elemente der Benutzeroberfläche abhängig vom Kontext, in dem sie betrachtet werden, ziemlich unterschiedlich aussehen müssen. Möglicherweise müssen Sie sehr unterschiedliche CSS-Elemente auf dieselbe HTML-Codebasis anwenden, um unterschiedliche Bildschirmgrößen optimal nutzen zu können. Das kann eine ziemliche Designherausforderung sein!
Hier sind einige häufige Herausforderungen, denen Sie begegnen können.
Navigation
Das Anzeigen einer Liste mit Navigationslinks ist auf einem großen Bildschirm ziemlich einfach. Es ist viel Platz für diese Links.
Auf einem kleinen Bildschirm ist Platz komfortabel. Wenn Sie das Design für diese Situation entwerfen, ist es verlockend, die Navigation hinter einer Schaltfläche zu verbergen. Das Problem bei dieser Lösung besteht darin, dass die Nutzenden dann zwei Schritte unternehmen müssen, um irgendwohin zu gelangen: Öffnen Sie das Menü und wählen Sie dann eine Option aus. Bis das Menü geöffnet ist, fragt sich der Nutzer: „Wo kann ich gehen?“.
Versuchen Sie, eine Strategie zu finden, mit der Sie vermeiden, dass Ihre Navigation verdeckt wird. Bei einer relativ kleinen Anzahl von Elementen können Sie die Navigation so gestalten, dass sie auch auf kleinen Bildschirmen gut aussieht.
Dieses Muster lässt sich nicht skalieren, wenn Ihre Navigation viele Links enthält. Die Navigation wirkt unübersichtlich, wenn die Links auf einem kleinen Bildschirm auf zwei oder drei Zeilen zusammengefasst werden.
Eine mögliche Lösung besteht darin, Links in einer Zeile zu belassen, aber die Liste am Bildschirmrand zu kürzen. Nutzer können horizontal wischen, um die Links aufzurufen, die nicht sofort sichtbar sind. Das ist das Überlaufmuster.
Der Vorteil dieser Technik besteht darin, dass sie auf jede Gerätebreite und eine beliebige Anzahl von Links skaliert werden kann. Der Nachteil ist, dass Nutzer möglicherweise Links übersehen, die zunächst nicht sichtbar sind. Wenn Sie diese Technik für die Hauptnavigation verwenden, stellen Sie sicher, dass die ersten Links die wichtigsten sind und visuell anzeigen, dass die Liste weitere Elemente enthält. Im vorherigen Beispiel wird für diesen Indikator ein Farbverlauf verwendet.
Als letzte Möglichkeit könnten Sie die Navigation standardmäßig ausblenden und Nutzern eine Ein-/Aus-Schaltfläche zum Ein- und Ausblenden der Inhalte bieten. Dies wird als progressive Offenlegung bezeichnet.
Die Schaltfläche zum Ein-/Ausblenden der Navigation muss beschriftet sein. Verlassen Sie sich nicht darauf, dass ein Symbol verstanden wird.
Ein unbeschriftetes Symbol ist die „Mystery-Navigation“. Geben Sie ein Textlabel an, um Nutzende darüber zu informieren, was auf der Schaltfläche angezeigt wird.
Karusselle
Für die Navigation gilt auch für andere Inhalte: Versuchen Sie, sowieso nichts zu verstecken. Ein Karussell ist eine gängige Methode, um Inhalte auszublenden. Es kann ziemlich schön aussehen, aber die Wahrscheinlichkeit ist groß, dass Ihre Nutzer die verborgenen Inhalte nie entdecken werden. Karussells eignen sich besser zum Lösen organisatorischer Probleme – z. B. welche Inhalte auf der Startseite präsentiert werden sollten – als bei der Bereitstellung von Nutzern.
Allerdings können Karussells verhindern, dass eine Seite zu lang und unübersichtlich wird, wenn der Platz knapp ist. Sie könnten einen hybriden Ansatz verwenden: Inhalte werden auf kleinen Bildschirmen in einem Karussell angezeigt, auf größeren Bildschirmen jedoch in einem Raster.
Bei schmalen Bildschirmen können Sie die Elemente mithilfe der Flexbox in einer Zeile anzeigen. Die Elementzeile geht über den Bildschirmrand hinaus. Verwende overflow-x: auto, um horizontales Wischen zuzulassen.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Mit den scroll-snap-Eigenschaften wird sichergestellt, dass das Wischen der Elemente problemlos möglich ist. Dank scroll-snap-type: inline mandatory rasten die Elemente ein.
Wenn der Bildschirm groß genug ist – in diesem Fall breiter als 50em –, kannst du zum Raster wechseln und die Elemente in Zeilen und Spalten anzeigen, ohne etwas zu verbergen.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Wichtig ist, dass ein Element in der Karussellansicht nicht die volle Breite einnimmt. Andernfalls gäbe es keinen Hinweis darauf, dass mehr Inhalte jenseits des Darstellungsbereichs verfügbar sind.
Karussells sind ein weiteres Beispiel für das Überlaufmuster in Aktion. Wenn Sie viele Artikel haben, in denen Nutzer stöbern können, könnten Sie das Überlaufmuster auch auf großen Bildschirmen wie Fernsehern beibehalten. Bei diesem Medien-Scroller werden mehrere Karussells verwendet, um eine große Anzahl von Optionen zu verwalten.
Auch hier sorgen die scroll-snap-Eigenschaften dafür, dass die Interaktion reibungslos abläuft. Beachten Sie auch, dass auf die Bilder im Karussell loading="lazy" angewendet wurde. In diesem Fall befinden sich die Bilder nicht „below the fold“ (mit Scrollen sichtbar), sondern über den Rand. Es gilt jedoch das gleiche Prinzip: Wenn der Nutzer nie bis zu diesem Element wischt, wird das Bild nicht heruntergeladen, wodurch Bandbreite gespart wird.
Mithilfe von JavaScript können Sie einem Karussell interaktive Steuerelemente hinzufügen. Du kannst sogar festlegen, dass die Artikel automatisch durchgegangen werden sollen. Das sollte jedoch lange und hart sein – die Autoplay-Funktion könnte funktionieren, wenn das Karussell der einzige Inhalt auf der Seite ist, aber ein Karussell mit automatischer Wiedergabe ist unglaublich ärgerlich, wenn jemand versucht, mit anderen Inhalten zu interagieren (z. B. Text lesen). Weitere Informationen zu Best Practices für Karussells
Datentabellen
Das table-Element eignet sich perfekt für die Strukturierung von Tabellendaten, d. h. Zeilen und Spalten verwandter Informationen. Wenn die Tabelle jedoch zu groß wird, könnte das Layout für den kleinen Bildschirm beschädigt werden.
Sie können das Überlaufmuster auf Tabellen anwenden. In diesem Beispiel ist die Tabelle von einem div mit der Klasse table-container umschlossen.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Richtlinien
Das Überlaufmuster ist ein guter Kompromiss für kleine Bildschirme. Achten Sie aber darauf, dass klar erkennbar ist, dass die außerhalb des Bildschirms erreichbaren Inhalte erreichbar sind. Platzieren Sie gegebenenfalls einen Schatten oder einen Farbverlauf über den Rand, wo der Inhalt abgeschnitten ist.
Die schrittweise Offenlegung ist eine nützliche Möglichkeit, Platz zu sparen. Seien Sie aber vorsichtig, wenn Sie sie für sehr wichtige Inhalte verwenden. Sie eignet sich besser für sekundäre Aktionen. Achten Sie darauf, dass das Oberflächenelement, das die Offenlegung auslöst, deutlich gekennzeichnet ist – verlassen Sie sich nicht nur auf Symbole.
Entwerfen Sie Ihre Designs zuerst für kleinere Bildschirme. Es ist einfacher, Designs für kleine Bildschirme an größere Bildschirme anzupassen als umgekehrt. Wenn Sie zuerst ein Design für einen großen Bildschirm entwerfen, besteht die Gefahr, dass das Design für kleine Bildschirme nachgedacht wird.
Weitere Layout- und UI-Elementmuster finden Sie im Abschnitt Muster von web.dev.
Wenn Sie Elemente der Benutzeroberfläche an verschiedene Bildschirmgrößen anpassen, sind Medienabfragen sehr nützlich, um die Abmessungen des Geräts zu ermitteln. Aber Medienfunktionen wie min-width und min-height sind erst der Anfang. Als Nächstes lernen Sie eine ganze Reihe weiterer Medienfunktionen kennen.