Ein Design, das auf einem kleinen Bildschirm angezeigt wird, sollte nicht wie eine verkleinerte Version eines Layouts für einen großen Bildschirm aussehen. Ebenso sollte ein Design, das auf einem großen Bildschirm angezeigt wird, nicht wie eine vergrößerte Version eines Layouts für einen kleinen Bildschirm aussehen. Stattdessen muss das Design flexibel genug sein, um sich an alle Bildschirmgrößen anzupassen. Ein gelungenes responsives Design nutzt jeden Formfaktor optimal.
Das bedeutet, dass einige Elemente der Benutzeroberfläche je nach Kontext, in dem sie angezeigt werden, ganz anders aussehen müssen. Möglicherweise müssen Sie sehr unterschiedliches CSS auf dieselbe HTML-Codebasis anwenden, um verschiedene Bildschirmgrößen optimal zu nutzen. Das kann eine ziemliche Designherausforderung sein.
Hier sind einige häufige Herausforderungen, mit denen Sie konfrontiert werden könnten.
Navigation
Das Anzeigen einer Liste von Navigationslinks ist auf einem großen Bildschirm ganz einfach. Es gibt viel Platz für diese Links.
Auf einem kleinen Bildschirm ist Platz ein knappes Gut. Wenn Sie für diese Situation entwickeln, ist es verlockend, die Navigation hinter einer Schaltfläche zu verbergen. Das Problem bei dieser Lösung ist, dass Nutzer dann zwei Schritte ausführen müssen, um irgendwohin zu gelangen: Sie müssen das Menü öffnen und dann eine Option auswählen. Bis das Menü geöffnet ist, fragen sich Nutzer: „Wo kann ich hin?“
Versuchen Sie, eine Strategie zu finden, bei der die Navigation nicht verborgen wird. Wenn Sie eine relativ kleine Anzahl von Elementen haben, können Sie die Navigation so gestalten, dass sie auf kleinen Bildschirmen gut aussieht.
Dieses Muster lässt sich nicht skalieren, wenn Ihre Navigation viele Links enthält. Die Navigation sieht unübersichtlich aus, wenn die Links auf einem kleinen Bildschirm auf zwei oder drei Zeilen umgebrochen werden.
Eine mögliche Lösung besteht darin, die Links in einer Zeile zu belassen, die Liste aber am Rand des Bildschirms zu kürzen. Nutzer können horizontal wischen, um die Links zu sehen, die nicht sofort sichtbar sind. Dies ist das Überlaufmuster.
Der Vorteil dieser Technik ist, dass sie sich an jede Gerätebreite und jede Anzahl von Links anpassen lässt. Der Nachteil ist, dass Nutzer Links möglicherweise übersehen, die nicht sofort sichtbar sind. Wenn Sie diese Technik für Ihre Hauptnavigation verwenden, sollten die ersten Links die wichtigsten sein und visuell darauf hinweisen, dass die Liste weitere Elemente enthält. Im vorherigen Beispiel wird für diesen Hinweis ein Farbverlauf verwendet.
Als letzte Möglichkeit können Sie die Navigation standardmäßig ausblenden und einen Umschaltmechanismus bereitstellen, mit dem Nutzer die Inhalte ein- und ausblenden können. Dies wird als progressive Offenlegung bezeichnet.
Die Schaltfläche, mit der die Anzeige der Navigation umgeschaltet wird, muss beschriftet sein. Verlassen Sie sich nicht darauf, dass ein Symbol verstanden wird.
Ein nicht beschriftetes Symbol ist wie ein Überraschungsmenü – Nutzer wissen nicht, was sich dahinter verbirgt, bis sie es ausprobieren. Geben Sie eine Textbeschriftung an, damit Nutzer wissen, was die Schaltfläche offenbart.
Karussells
Was für die Navigation gilt, gilt auch für andere Inhalte: Versuchen Sie, nichts zu verbergen. Ein Karussell ist eine gängige Methode, um Inhalte zu verbergen. Es kann ganz ordentlich aussehen, aber es besteht eine gute Chance, dass Ihre Nutzer die versteckten Inhalte nie entdecken. Karussells eignen sich besser, um organisatorische Probleme zu lösen – z. B. welche Inhalte auf der Startseite angezeigt werden sollen – als um Nutzern zu helfen.
Wenn Platz jedoch ein knappes Gut ist, können Karussells verhindern, dass eine Seite zu lang und unübersichtlich wird. Sie könnten einen hybriden Ansatz verwenden: Inhalte auf kleinen Bildschirmen in einem Karussell anzeigen, aber dieselben Inhalte auf größeren Bildschirmen in einem Raster.
Auf schmalen Bildschirmen können Sie Elemente mit Flexbox in einer Reihe anzeigen. Die Reihe von Elementen erstreckt sich über den Rand des Bildschirms hinaus. Verwenden Sie overflow-x: auto, um horizontales Wischen zu ermöglichen.
@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;
}
}
Die scroll-snap-Eigenschaften sorgen dafür, dass die Elemente reibungslos gewischt werden können. Dank scroll-snap-type: inline mandatory werden die Elemente eingerastet.
Wenn der Bildschirm groß genug ist – in diesem Fall breiter als 50em – wechseln Sie zu einem Raster und zeigen Sie die Elemente in Zeilen und Spalten an, 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 über den Rand des Darstellungsbereichs hinaus weitere Inhalte verfügbar sind.
Karussells sind ein weiteres Beispiel für das Überlaufmuster in Aktion. Wenn Sie viele Elemente haben, durch die Nutzer blättern können, können Sie das Überlaufmuster auch auf großen Bildschirmen, einschließlich Fernsehern, verwenden. Dieser Media-Scroller verwendet mehrere Karussells, um eine große Anzahl von Optionen zu verwalten.
Auch hier sorgen die scroll-snap-Eigenschaften dafür, dass die Interaktion reibungslos ist. Beachten Sie außerdem, dass auf die Bilder im Karussell loading="lazy" angewendet wird. In diesem Fall befinden sich die Bilder nicht „below the fold“ (mit Scrollen sichtbar), sondern über den Rand hinaus. Es gilt aber dasselbe Prinzip: Wenn der Nutzer nicht so weit wischt, dass er das Element erreicht, wird das Bild nicht heruntergeladen, wodurch Bandbreite gespart wird.
Mit JavaScript können Sie einem Karussell interaktive Steuerelemente hinzufügen. Sie können es sogar so einstellen, dass es automatisch durch die Elemente wechselt. Überlegen Sie sich das aber gut: Die automatische Wiedergabe funktioniert möglicherweise, wenn das Karussell der einzige Inhalt auf der Seite ist. Ein automatisch wiedergegebenes Karussell ist jedoch unglaublich störend, wenn jemand mit anderen Inhalten interagieren möchte (z. B. Text lesen). Weitere Informationen finden Sie in den Best Practices für Karussells.
Datentabellen
Das table-Element eignet sich perfekt zum Strukturieren von Tabellendaten, also Zeilen und Spalten mit zusammengehörigen Informationen. Wenn die Tabelle jedoch zu groß wird, kann sie das Layout für kleine Bildschirme beschädigen.
Sie können das Überlaufmuster auf Tabellen anwenden. In diesem Beispiel ist die Tabelle in ein div-Element mit der Klasse table-container eingebettet.
.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 deutlich wird, dass die Inhalte außerhalb des Bildschirms erreichbar sind. Sie können einen Schatten oder einen Farbverlauf über den Rand legen, an dem Inhalte abgeschnitten werden.
Die progressive Offenlegung ist eine nützliche Möglichkeit, Platz zu sparen. Sie sollten sie aber nicht für sehr wichtige Inhalte verwenden. Sie eignet sich besser für sekundäre Aktionen. Das Element der Benutzeroberfläche, das die Offenlegung auslöst, muss klar beschriftet sein. Verlassen Sie sich nicht nur auf Symbole.
Entwickeln Sie zuerst für kleinere Bildschirme. Es ist einfacher, Designs für kleine Bildschirme an größere Bildschirme anzupassen als umgekehrt. Wenn Sie zuerst für einen großen Bildschirm entwickeln, besteht die Gefahr, dass Ihr Design für kleine Bildschirme wie ein nachträglicher Einfall wirkt.
Weitere Muster für Layouts und UI-Elemente finden Sie im Bereich „Patterns“ (Muster) auf web.dev.
Wenn Sie Elemente der Benutzeroberfläche an verschiedene Bildschirmgrößen anpassen, sind Media-Queries sehr nützlich, um die Abmessungen des Geräts zu ermitteln. Media-Features wie min-width und min-height sind aber nur der Anfang. Als Nächstes lernen Sie eine ganze Reihe anderer Media-Features kennen.