Das neue responsive Webdesign in einer komponentengesteuerten Welt

Steuerung des Makro- und Mikrolayouts in einer neuen Ära des responsiven Webdesigns.

Responsives Design von heute

Wenn Sie heute den Begriff "Responsive Design" verwenden, denken Sie höchstwahrscheinlich darüber nach, Medienabfragen zu nutzen, um das Layout zu ändern, wenn die Größe eines Designs von der Größe eines Smartphones über die Tabletgröße bis hin zur Desktopgröße angepasst wird.

Schon bald wird diese Wahrnehmung von responsivem Design jedoch als veraltet angesehen, wie die Verwendung von Tabellen für das Seitenlayout.

Darstellungsbereichsbasierte Medienabfragen bieten Ihnen einige leistungsstarke Tools, aber sie sind nicht einfach zu komplex. Sie sind nicht in der Lage, auf die Anforderungen der Nutzer zu reagieren und responsive Stile selbst in die Komponenten einzufügen.

Sie können globale Informationen zum Darstellungsbereich verwenden, um Ihre Komponenten zu gestalten. Die Stile gehören ihnen aber immer noch nicht. Das funktioniert auch nicht, wenn unsere Designsysteme komponentenbasiert und nicht seitenbasiert sind.

Die gute Nachricht ist, dass sich das Ökosystem in einem rasanten Tempo wandelt. CSS befindet sich im Wandel und eine neue Ära des responsiven Designs naht am Horizont.

So etwas passiert etwa alle zehn Jahre. Vor 10 Jahren, zwischen 2010 und 2012, erfuhren wir große Veränderungen beim mobilen und responsiven Design und die Einführung von CSS3.

Das System ist also bereit für einige ziemlich große Änderungen an CSS. Die Entwickler von Chrome und der gesamten Webplattform erstellen Prototypen, spezifizieren und starten die Implementierung für die nächste Ära des responsiven Designs.

Diese Updates umfassen auf Nutzereinstellungen basierende Medienfunktionen, Containerabfragen und Medienabfragen für neue Bildschirmtypen wie faltbare Displays.

Reagiert auf den Nutzer

Mit den neuen Medienfunktionen für Nutzereinstellungen können Sie Weberlebnisse gestalten, die zu den spezifischen Präferenzen und Bedürfnissen des Nutzers passen. Das bedeutet, dass Sie mit bevorzugten Medienfunktionen die Nutzererfahrung an die User Experience anpassen können.

Zu diesen Medienfunktionen gehören:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• Und noch mehr

Präferenzfunktionen übernehmen die Präferenzen, die ein Nutzer in seinem Betriebssystem festgelegt hat, und tragen dazu bei, eine robustere und personalisiertere Webumgebung zu schaffen, insbesondere für Nutzer mit Anforderungen an die Barrierefreiheit.

prefers-reduced-motion

Nutzer, die Einstellungen für verringerte Bewegungen im Betriebssystem festgelegt haben, fordern weniger Animationen an, wenn sie ihren Computer im Allgemeinen verwenden. Daher werden sie im Web wahrscheinlich keinen auffälligen Einführungsbildschirm, Kartenumbruch-Animationen, ein aufwendiges Ladeprogramm oder andere gruselige Animationen schätzen.

Mit prefers-reduced-motion können Sie Ihre Seiten unter Berücksichtigung von eingeschränkten Bewegungselementen entwerfen und Nutzern, die diese Einstellungen nicht verwenden, eine bewegungsoptimierte Nutzung ermöglichen.

Diese Karte enthält Informationen auf beiden Seiten. Bei der grundlegenden Funktion mit reduzierten Bewegungen handelt es sich um eine Überblendung, um diese Informationen anzuzeigen. Bei der bewegungsoptimierten Wiedergabe wird die Karte umgedreht.

„Bevorzugt reduzierte Bewegungen“ sollte nicht „keine Bewegung“ bedeuten, da Bewegung für die Online-Vermittlung von Informationen so wichtig ist. Bieten Sie stattdessen eine solide Grundumgebung an, die Ihre Nutzer ohne unnötige Bewegung führt, und verbessern Sie sie schrittweise, ohne diese Anforderungen oder Präferenzen hinsichtlich der Barrierefreiheit.

prefers-color-scheme

Eine weitere bevorzugte Medienfunktion ist prefers-color-scheme. Mit dieser Funktion können Sie Ihre UI an das von Ihren Nutzern bevorzugte Design anpassen. In ihrem Betriebssystem können Nutzer unabhängig davon, ob es sich um einen Desktop-Computer oder ein Mobilgerät handelt, helle, dunkle oder automatische Designs verwenden, die sich je nach Tageszeit ändern.

Wenn Sie Ihre Seite mit benutzerdefinierten CSS-Eigenschaften einrichten, ist das Austauschen von Farbwerten ganz einfach. Sie können Ihre Farbthemenwerte wie backgroundColor und textOnPrimary schnell aktualisieren, um sie dynamisch an das neue Design in der Medienabfrage anzupassen.

Damit Sie einige dieser Einstellungsabfragen leichter testen können, können Sie die Entwicklertools zur Emulation verwenden, anstatt jedes Mal die Systemeinstellungen zu öffnen.

Design für dunkles Design

Beim Design für ein dunkles Design geht es nicht nur um das Umkehren der Hintergrund- und Textfarben oder der dunklen Bildlaufleisten. Es gibt ein paar Überlegungen, die Ihnen möglicherweise übersehen werden. Beispielsweise müssen Sie möglicherweise Farben auf einem dunklen Hintergrund entsättigen, um die visuelle Vibration zu reduzieren.

Anstatt Schatten zu verwenden, um Tiefe zu erzeugen und ein Element vorwärts zu zeichnen, können Sie Licht in der Hintergrundfarbe des Elements verwenden, um es vorwärts zu ziehen. Dies liegt daran, dass Schatten auf einem dunklen Hintergrund nicht so effektiv sind.

Dunkle Designs bieten nicht nur eine individuellere User Experience, sondern können auch die Akkulaufzeit bei AMOLED-Displays erheblich verbessern. Das sind die Bildschirme, die wir in neueren High-End-Smartphones sehen, und sie werden auf allen Mobilgeräten immer beliebter.

Eine Android-Studie von 2018 zu dunklen Designs ergab, dass abhängig von der Bildschirmhelligkeit und der gesamten Benutzeroberfläche Einsparungen von bis zu 60 % erzielt wurden. Die Statistik von 60% ergibt sich aus dem Vergleich des YouTube-Wiedergabebildschirms mit einem pausierten Video bei 100% Bildschirmhelligkeit und dem dunklen Design für die App-Benutzeroberfläche im Vergleich zu einem hellen Design.

Bieten Sie Ihren Nutzern nach Möglichkeit immer ein dunkles Design.

Reagiert auf den Container

Einer der interessantesten neuen CSS-Bereiche sind Containerabfragen, auch Elementabfragen genannt. Es ist schwer zu sagen, wie der Wechsel vom seitenbasierten responsiven Webdesign zum containerbasierten responsiven Webdesign dazu beitragen wird, die Designumgebung weiterzuentwickeln.

Hier ist ein Beispiel für die leistungsfähigen Funktionen von Containerabfragen. Sie können alle Stile des Kartenelements, einschließlich der Linkliste, der Schriftgrößen und des Gesamtlayouts, basierend auf dem übergeordneten Container ändern:

In diesem Beispiel sehen Sie zwei identische Komponenten mit zwei verschiedenen Containergrößen, die beide in einem mit CSS-Raster erstellten Layout Platz einnehmen. Jede Komponente passt sich ihrem individuellen Raumkontingent und ihrem Stil entsprechend an.

Ein solches Maß an Flexibilität ist mit Medienabfragen allein nicht möglich.

Containerabfragen bieten einen wesentlich dynamischeren Ansatz für responsives Webdesign. Wenn Sie diese Kartenkomponente also in einer Seitenleiste, einem Hero-Abschnitt oder in einem Raster innerhalb des Haupttexts einer Seite platzieren, besitzt die Komponente selbst die responsiven Informationen und Größen gemäß dem Container und nicht dem Darstellungsbereich.

Hierfür ist die At-Regel @container erforderlich. Dies funktioniert ähnlich wie eine Medienabfrage mit @media, nur dass @container Informationen im übergeordneten Container und nicht nach dem Darstellungsbereich und User-Agent abfragt.

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

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

Legen Sie zuerst die Begrenzung für das übergeordnete Element fest. Anschließend schreiben Sie eine @container-Abfrage, um mit min-width oder max-width ein Stilelement im Container basierend auf seiner Größe zu gestalten.

Der obige Code verwendet max-width, legt die Links auf display:none fest und verringert die Schriftgröße für die Zeit, wenn der Container weniger als 850px breit ist.

Container-Abfragekarten

Auf dieser Demopflanzen-Website sind alle Produktkarten, einschließlich der im Hero, der Seitenleiste der kürzlich angesehenen Artikel und des Produktrasters, alle die gleiche Komponente mit demselben Markup.

Das gesamte Layout wird keine Medienabfragen verwendet, nur Containerabfragen. So kann jede Produktkarte in das richtige Layout verschoben werden, um den Platz zu füllen. Das Raster verwendet beispielsweise ein Spaltenlayout mit minmax, damit die Elemente in ihren Bereich fließen. Das Raster wird neu angeordnet, wenn dieser Bereich zu komprimiert ist (was bedeutet, dass die Mindestgröße erreicht wird).

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

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

Wenn im Raster mindestens 350px Platz vorhanden ist, wird das Kartenlayout horizontal, indem es auf display: flex gesetzt wird, womit die standardmäßige flexible Richtung „Zeile“ verwendet wird.

Bei geringerem Platz werden die Produktkarten gestapelt. Jede Produktkarte passt sich an, was mit globalen Stilen allein nicht möglich wäre.

Containerabfragen mit Medienabfragen mischen

Für Containerabfragen gibt es so viele Anwendungsfälle – eine davon ist eine Kalenderkomponente. Mit Containerabfragen können Sie die Kalendertermine und andere Segmente basierend auf der verfügbaren Breite des übergeordneten Elements neu anordnen.

Mit diesem Democontainer können Sie das Layout und den Stil des Kalenderdatums und des Wochentags ändern sowie die Ränder und die Schriftgröße für geplante Termine anpassen, damit sie besser in den Raum passen.

Verwenden Sie dann eine Medienabfrage, um das gesamte Layout an kleinere Bildschirmgrößen zu verschieben. Dieses Beispiel zeigt, wie leistungsstark es ist, Medienabfragen zu combine (Anpassung der globalen oder Makrostile) mit Containerabfragen (Anpassen der untergeordneten Elemente des Containers und ihrer Mikrostile).

Wir können uns nun Makro- und Mikro-Layouts innerhalb derselben UI-Komponente vorstellen, um wirklich feine, differenzierte Designentscheidungen zu treffen.

Containerabfragen heute verwenden

Diese Demos können jetzt in Chrome Canary hinter einer Flagge gespielt werden. Rufen Sie about://flags in Canary auf und aktivieren Sie das Flag #enable-container-queries. Dadurch werden die Werte @container, inline-size und block-size für das Attribut contain und die LayoutNG Grid-Implementierung unterstützt.

Das Flag aktiviert auch die entsprechenden Funktionen der Chrome-Entwicklertools. Informationen zum Prüfen und Debuggen von Containerabfragen in den Entwicklertools

Auf einen Bereich reduzierte Stile

Um auf Containerabfragen aufzubauen, erörtert die CSS-Arbeitsgruppe aktiv Bereichsstile, um die korrekte Zuweisung von Namen und die Vermeidung von Konflikten zwischen Komponenten zu unterstützen.

Auf einen Bereich reduzierte Stile ermöglichen Passthrough- und komponentenspezifische Stile, um Namenskonflikte zu vermeiden. Viele Frameworks und Plug-ins wie CSS-Module ermöglichen es uns bereits innerhalb von Frameworks. Diese Spezifikation ermöglicht es uns nun, gekapselte Stile für unsere Komponenten nativ mit lesbarem CSS zu schreiben, ohne das Markup anpassen zu müssen.

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

Durch das Festlegen von Bereichen können „ringförmige“ Selektoren erstellt werden, mit denen wir angeben können, wo ein Stil gekapselt bleiben soll und wo dieser auf einen bestimmten Stil beschränkte Stil aufgehoben werden soll, um auf einen globaleren Stil zu verweisen.

Ein Beispiel hierfür wäre ein Tabbereich, in dem die Tabs den auf einen Umfang beschränkten Stil erhalten sollen und der Bereich innerhalb der Tabs einen übergeordneten Stil.

An den Formfaktor angepasst

Das nächste Thema in unserem Gespräch über die neue Ära des responsiven Webdesigns ist eine Änderung der Formfaktoren und die zunehmenden Möglichkeiten für das, was wir als Web-Community entwerfen müssen (z. B. formverändernde Bildschirme oder Virtual Reality).

Faltbare oder flexible Bildschirme und das Design für mehrere Bildschirme sind ein Beispiel dafür, dass sich der Formfaktor heute verändert. Eine weitere Spezifikation ist, um diese neuen Formfaktoren und Anforderungen abzudecken.

Eine experimentelle Medienabfrage für Bildschirmspannen könnte uns hier helfen. Aktuell verhält es sich so: @media (spanning: <type of fold>). In der Demo wird ein Rasterlayout mit zwei Spalten eingerichtet: Eine hat eine Breite von „--sidebar-width“ (standardmäßig 5 rem) und die andere hat 1fr. Wenn das Layout auf einem Dual Screen mit einem einzigen vertikalen Scrollen angezeigt wird, wird der Wert von --sidebar-width mit dem Umgebungswert des linken Scrollens aktualisiert.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

Dadurch wird ein Layout ermöglicht, bei dem die Seitenleiste – in diesem Fall die Navigation – den Bereich eines „Fold“-Bereichs einnimmt, während die App-UI den anderen Bereich ausfüllt. Dadurch wird eine „Falte“ in der Benutzeroberfläche verhindert.

Sie können faltbare Bildschirme im Chrome-Entwicklertools-Emulator testen, um Fehler zu beheben und Prototypen direkt im Browser zu erstellen.

Fazit

Die Untersuchung des UI-Designs über einen Flachbildfernseher hinaus ist ein weiterer Grund, warum Containerabfragen und Bereichsstile so wichtig sind. Sie bieten Ihnen die Möglichkeit, Komponentenstile aus Seitenlayout- und globalen Stilen sowie Nutzerstilen in Silos zu kombinieren, um ein stabileres responsives Design zu ermöglichen. Das bedeutet, dass Sie jetzt Makro-Layouts mit seitenbasierten Medienabfragen entwerfen können, einschließlich bildschirmübergreifender Nuancen. Gleichzeitig können Sie Mikro-Layouts mit Containerabfragen zu den Komponenten verwenden und nutzerspezifische Medienabfragen hinzufügen, um die Nutzererfahrung an ihre individuellen Präferenzen und Bedürfnisse anzupassen.

Das ist die neue responsive Website.

Makro- und Mikro-Layout werden kombiniert und es werden noch die Nutzeranpassung und der Formfaktor berücksichtigt.

Jede dieser Änderungen allein würde eine erhebliche Veränderung in unserem Design für das Web bedeuten. Aber zusammen stellen sie eine wirklich große Veränderung bei der Konzeption des responsiven Designs dar. Es ist an der Zeit, über responsives Design über die Größe des Darstellungsbereichs hinaus nachzudenken und all diese neuen Achsen für bessere komponentenbasierte und benutzerdefinierte User Experiences in Betracht zu ziehen.

Die nächste Ära des responsiven Designs ist da und Sie können bereits anfangen, sie selbst zu erkunden.

web.dev/learnCSS

Wenn Sie Ihr CSS-Spiel optimieren und sich vielleicht noch einmal ein paar Grundlagen noch einmal ansehen möchten, veröffentlicht mein Team einen brandneuen, kostenlosen Kurs mit CSS sowie eine Referenz auf web.dev. Sie können über web.dev/learnCSS darauf zugreifen.

Ich hoffe, dieser Überblick über die nächste Ära des responsiven Designs und einige der zugehörigen Primitive hat Ihnen gefallen, und ich hoffe, dass Sie genauso begeistert sind wie ich darüber, was dies für die Zukunft des Webdesigns bedeutet.

Für uns als UI-Community bietet dies eine große Chance, komponentenbasierte Stile, neue Formfaktoren und nutzerfreundliche Designs zu nutzen.