Das neue responsive Webdesign in einer komponentengesteuerten Welt

Makro- und Mikrolayout in einer neuen Ära des responsiven Webdesigns steuern

Responsives Webdesign heute

Wenn Sie heute den Begriff „responsives Design“ verwenden, denken Sie wahrscheinlich an die Verwendung von Medienabfragen, um das Layout zu ändern, wenn Sie die Größe eines Designs von der mobilen Größe über die Tablet-Größe bis hin zur Desktop-Größe ändern.

Aber bald wird diese Wahrnehmung von responsivem Design möglicherweise als veraltet angesehen werden, genau wie die Verwendung von Tabellen für das Seitenlayout.

Bildschirmbasierte Medienabfragen bieten zwar einige leistungsstarke Tools, sind aber nicht sehr nutzerfreundlich. Sie können nicht auf die Anforderungen der Nutzer reagieren und keine responsiven Stile in die Komponenten einfügen.

Sie können globale Informationen zum Darstellungsbereich verwenden, um Ihre Komponenten zu stylen, aber sie haben immer noch keine eigenen Stile. Das funktioniert nicht, wenn unsere Designsysteme komponentenbasiert und nicht seitenbasiert sind.

Die gute Nachricht ist, dass sich das Umfeld ändert und das ziemlich schnell. CSS entwickelt sich weiter und eine neue Ära des responsiven Designs steht vor der Tür.

Das passiert etwa alle 10 Jahre. Vor zehn Jahren, etwa zwischen 2010 und 2012, gab es eine große Veränderung mit mobilem und responsivem Design und der Einführung von CSS3.

So ist das Ökosystem wieder einmal bereit für einige ziemlich große Änderungen an CSS. Die Entwickler von Chrome und der Webplattform erstellen Prototypen, erstellen Spezifikationen und beginnen mit der Implementierung für die nächste Ära des responsiven Designs.

Dazu gehören nutzerpräferenzbasierte Medienfunktionen, Containerabfragen und Medienabfragen für neue Bildschirmtypen wie faltbare Displays.

Auf die Nutzer eingehen

Mit den neuen Medienfunktionen für Nutzereinstellungen können Sie die Weboberfläche so gestalten, dass sie den individuellen Vorlieben und Anforderungen der Nutzer entspricht. Das bedeutet, dass Sie mithilfe von Medienfunktionen für Präferenzen die Nutzerfreundlichkeit an die Bedürfnisse Ihrer Nutzer anpassen können.

Zu diesen Medienfunktionen für Nutzereinstellungen gehören:

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

Die Einstellungen werden anhand der Einstellungen übernommen, die Nutzer in ihrem Betriebssystem festgelegt haben. So wird eine robustere und personalisiertere Webnutzung ermöglicht, insbesondere für Nutzer mit Beeinträchtigungen.

prefers-reduced-motion

Nutzer, die die Betriebssystemeinstellungen für eingeschränkte Bewegung festgelegt haben, fordern bei der Nutzung ihres Computers im Allgemeinen weniger Animationen an. Daher sind sie wahrscheinlich nicht begeistert von einem auffälligen Startbildschirm, einer Karten-Flip-Animation, einem komplizierten Ladebildschirm oder anderen auffälligen Animationen im Web.

Mit prefers-reduced-motion können Sie Ihre Seiten mit reduzierter Bewegung entwerfen und eine verbesserte Bewegung für Nutzer erstellen, die diese Einstellung nicht festgelegt haben.

Diese Karte enthält Informationen auf beiden Seiten. In der Kontrollgruppe mit reduzierter Bewegung wird ein Cross-Fade verwendet, um diese Informationen zu präsentieren. In der Variante mit mehr Bewegung wird eine Karte umgedreht.

„prefers-reduced-motion“ sollte nicht „keine Bewegung“ bedeuten, da Bewegung für die Vermittlung von Informationen online so wichtig ist. Bieten Sie stattdessen eine solide Standardoberfläche, die Nutzer ohne unnötige Bewegungen führt, und verbessern Sie diese Oberfläche nach und nach für Nutzer ohne diese Anforderungen oder Vorlieben in Bezug auf Barrierefreiheit.

prefers-color-scheme

Eine weitere Medienfunktion für Einstellungen ist prefers-color-scheme. Mit dieser Funktion können Sie die Benutzeroberfläche an das bevorzugte Design Ihrer Nutzer anpassen. Nutzer können in ihrem Betriebssystem, egal ob auf dem Computer oder auf einem Mobilgerät, eine Einstellung für ein helles, dunkles oder automatisches Design festlegen, das sich je nach Tageszeit ändert.

Wenn Sie Ihre Seite mit benutzerdefinierten CSS-Eigenschaften einrichten, können Sie die Farbwerte ganz einfach ändern. Sie können die Werte für das Farbschema, z. B. backgroundColor und textOnPrimary, schnell aktualisieren, um sie dynamisch an das neue Design in der Mediaabfrage anzupassen.

Um einige dieser Abfragen zu Einstellungen einfacher zu testen, können Sie die DevTools zur Emulation verwenden, anstatt jedes Mal die Systemeinstellungen zu öffnen.

Für dunkles Design entwerfen

Beim Entwerfen eines dunklen Designs geht es nicht nur darum, Hintergrund- und Textfarben umzukehren oder dunkle Bildlaufleisten zu verwenden. Es gibt einige Dinge, die Sie vielleicht nicht beachten. Beispielsweise müssen Sie Farben auf einem dunklen Hintergrund möglicherweise entsättigen, um visuelle Vibrationen zu reduzieren.

Anstatt mit Schatten Tiefe zu erzeugen und ein Element hervorzuheben, können Sie auch Licht im Hintergrund des Elements verwenden, um es hervorzuheben. Das liegt daran, dass Schatten auf einem dunklen Hintergrund nicht so effektiv sind.

Dunkle Designs bieten nicht nur eine individuellere Benutzererfahrung, sondern können auch die Akkulaufzeit bei AMOLED-Displays deutlich verlängern. Diese Bildschirme finden wir in neueren High-End-Smartphones und werden auf Mobilgeräten immer beliebter.

Eine Android-Studie aus dem Jahr 2018 zu dunklen Designs hat gezeigt, dass je nach Bildschirmhelligkeit und Nutzeroberfläche eine Energieeinsparung von bis zu 60 % möglich ist. Die Statistik von 60% wurde durch den Vergleich des YouTube-Wiedergabebildschirms mit einem angehaltenen Video bei 100% Bildschirmhelligkeit mit einem dunklen Design für die App-Benutzeroberfläche und einem hellen Design ermittelt.

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

Sie passen sich dem Container an.

Containerabfragen, auch häufig als Elementabfragen bezeichnet, sind einer der spannendsten neuen Bereiche in CSS. Die Umstellung von einem seitenbasierten responsiven Design zu einem containerbasierten responsiven Design wird das Designsystem nachhaltig verändern.

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

Dieses Beispiel zeigt zwei identische Komponenten mit zwei verschiedenen Containergrößen, die beide Platz in einem Layout einnehmen, das mit CSS-Grid erstellt wurde. Jede Komponente passt in ihren individuellen Platzbereich und wird entsprechend formatiert.

Diese Flexibilität ist mit Medienabfragen allein nicht möglich.

Containerabfragen bieten einen viel dynamischeren Ansatz für responsives Design. Wenn Sie diese Kartenkomponente also in eine Seitenleiste oder einen Hero-Bereich oder in ein Raster im Hauptbereich einer Seite einfügen, hat die Komponente selbst ihre responsiven Informationen und Größen entsprechend dem Container, nicht dem Darstellungsbereich.

Dazu ist die At-Rule-Anweisung @container erforderlich. Sie funktioniert ähnlich wie eine Medienabfrage mit @media, bei @container werden jedoch Informationen nicht vom Viewport und User-Agent, sondern vom übergeordneten Container abgefragt.

.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. Schreiben Sie dann eine @container-Abfrage, um die Elemente im Container basierend auf ihrer Größe mit min-width oder max-width zu formatieren.

Im Code oben wird max-width verwendet und die Links werden auf display:none festgelegt. Außerdem wird die Schriftgröße der Zeit verringert, wenn der Container weniger als 850px breit ist.

Containerabfragekarten

Auf dieser Demo-Website für Pflanzen sind alle Produktkarten, einschließlich der im Hero-Bereich, der Seitenleiste mit den zuletzt angesehenen Artikeln und dem Produktraster, genau dieselbe Komponente mit demselben Markup.

Für die Erstellung dieses gesamten Layouts werden keine Medienabfragen, sondern nur Containerabfragen verwendet. So kann jede Produktkarte in das richtige Layout wechseln, um den verfügbaren Platz auszufüllen. Das Raster verwendet beispielsweise ein MinMax-Spaltenlayout, damit die Elemente in den verfügbaren Bereich passen, und legt das Raster neu an, wenn der Bereich zu eng ist (d. h. die Mindestgröße erreicht ist).

.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 festgelegt wird. Dieser Wert hat standardmäßig die Flex-Richtung „row“.

Bei weniger Platz werden die Produktkarten gestapelt. Jede Produktkarte wird individuell gestaltet, was mit globalen Stilen allein nicht möglich wäre.

Containerabfragen mit Medienabfragen kombinieren

Containerabfragen haben viele Anwendungsfälle, z. B. für eine Kalenderkomponente. Mit Containerabfragen können Sie das Layout der Kalendertermine und anderer Segmente anhand der verfügbaren Breite des übergeordneten Elements neu anordnen.

In diesem Democontainer werden Abfragen ausgeführt, um das Layout und den Stil des Datums und des Wochentags im Kalender zu ändern sowie die Ränder und die Schriftgröße der geplanten Ereignisse anzupassen, damit sie besser in den verfügbaren Bereich passen.

Verwenden Sie dann eine Medienabfrage, um das gesamte Layout für kleinere Bildschirmgrößen zu verschieben. Dieses Beispiel zeigt, wie leistungsfähig es ist, Medienabfragen (Anpassung der globalen oder Makro-Stile) mit Containerabfragen (Anpassung der untergeordneten Elemente des Containers und ihrer Mikro-Stile) zu kombinieren.

So können wir uns jetzt Makro- und Mikrolayouts innerhalb derselben UI-Komponente vorstellen, um wirklich gute nuancierte Designentscheidungen zu ermöglichen.

Containerabfragen heute verwenden

Diese Demos sind jetzt in Chrome Canary verfügbar. Rufen Sie in Canary about://flags auf und aktivieren Sie das Flag #enable-container-queries. Dadurch werden die Werte @container, inline-size und block-size für die contain-Property und die LayoutNG-Grid-Implementierung unterstützt.

Außerdem werden dadurch die entsprechenden Chrome DevTools-Funktionen aktiviert. Weitere Informationen zum Prüfen und Beheben von Containerabfragen in den DevTools

Stile mit Bereich

Wenn Sie Containerabfragen verwenden möchten, können Sie stilspezifische Regeln mit @scope verwenden, um die Reichweite Ihrer Auswahlen einzuschränken.

Mithilfe von benutzerdefinierten Stilen können Sie komponentenspezifische Stile verwenden, um Namenskollisionen zu vermeiden. Dies ist bereits in vielen Frameworks und Plug-ins wie CSS-Modulen möglich. Mit begrenzten Stilen können Sie eingekapselte Stile nativ für Komponenten mit lesbarem CSS 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 */ }
}

Mithilfe von Scopes können Sie Donut-förmige Auswahlen erstellen, für die Sie eine Ober- und eine Untergrenze festlegen können. Die in der @scope-Regel enthaltenen Auslöser werden mit diesen Limits abgeglichen.

Ein Beispiel hierfür wäre ein Tab-Bereich, bei dem die Tabs die stilistischen Elemente erhalten sollen, der Bereich innerhalb dieser Tabs jedoch nicht.

An den Formfaktor anpassen

Das nächste Thema in unserer Unterhaltung über das neue Zeitalter des responsiven Designs ist die Veränderung der Formfaktoren und die wachsenden Möglichkeiten, für die wir als Web-Community entwickeln müssen (z. B. Bildschirme mit variabler Form oder virtuelle Realität).

Faltbare oder flexible Bildschirme und das Entwerfen für die Bildschirmausdehnung sind ein Beispiel dafür, wie sich der Formfaktor heute verändert. Und an einer weiteren Spezifikation wird gearbeitet, um diese neuen Formfaktoren und Anforderungen zu erfüllen.

Eine experimentelle Mediaabfrage für die Bildschirmausrichtung könnte hier helfen. Derzeit 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“, was standardmäßig 5 rem entspricht, die andere ist 1fr. Wenn das Layout auf einem Dualscreen mit einer einzigen vertikalen Falte angezeigt wird, wird der Wert von --sidebar-width mit dem Umgebungswert der linken Falte 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;
}

Dies ermöglicht ein Layout, bei dem die Seitenleiste, in diesem Fall die Navigation, den Bereich einer der Falze füllt, während die App-Benutzeroberfläche den anderen füllt. So wird verhindert, dass die Benutzeroberfläche „zerknittert“.

Sie können faltbare Bildschirme im Chrome DevTools-Emulator testen, um direkt im Browser Fehler zu beheben und einen Prototyp für den Bildschirm zu erstellen.

Fazit

Das UI-Design über einen flachen Bildschirm hinaus zu erkunden, ist ein weiterer Grund, warum Containerabfragen und stilisierte Bereiche so wichtig sind. Sie bieten die Möglichkeit, Komponentenstile vom Seitenlayout und globalen Stilen sowie Nutzerstilen zu trennen, was ein resilienteres responsives Design ermöglicht. Das bedeutet, dass Sie jetzt Makrolayouts mit seitenbasierten Medienabfragen entwerfen können, einschließlich geräteübergreifender Nuancen. Gleichzeitig können Sie Micro-Layouts mit Containerabfragen für die Komponenten verwenden und nutzerbasierte Medienabfragen hinzufügen, um die Nutzererfahrung an ihre individuellen Vorlieben und Anforderungen anzupassen.

Das ist das neue responsive Design.

Es kombiniert das Makro-Layout mit dem Mikro-Layout und berücksichtigt außerdem die Anpassung durch den Nutzer und den Formfaktor.

Jede dieser Änderungen würde für sich genommen eine erhebliche Veränderung in der Art und Weise bedeuten, wie wir das Web entwerfen. Zusammengenommen bedeuten sie jedoch eine wirklich große Veränderung in der Art und Weise, wie wir responsives Webdesign konzipieren. Es ist an der Zeit, über responsives Design hinauszudenken und all diese neuen Achsen für eine bessere komponentenbasierte und personalisierte Nutzung zu berücksichtigen.

Die nächste Ära des responsiven Designs ist da und Sie können es jetzt selbst ausprobieren.

web.dev/learnCSS

Wenn Sie Ihr CSS-Wissen auffrischen und vielleicht noch einmal die Grundlagen durchgehen möchten, bietet mein Team auf web.dev einen brandneuen, völlig kostenlosen CSS-Kurs und eine Referenz an. Sie können unter web.dev/learnCSS darauf zugreifen.

Ich hoffe, Ihnen hat dieser Überblick über die nächste Ära des responsiven Designs und einige der damit verbundenen Primitive gefallen. Ich hoffe auch, dass Sie genauso begeistert sind wie ich von den Möglichkeiten, die sich dadurch für die Zukunft des Webdesigns ergeben.

Das eröffnet uns als UI-Community eine große Chance, komponentenbasierte Stile und neue Formfaktoren zu nutzen und nutzerfreundliche Oberflächen zu erstellen.