Il nuovo responsive design: il web design in un mondo basato sui componenti

Controllare il layout macro e micro in una nuova era del Adattamento web.

Il Adaptive Design oggi stesso

Oggi, utilizzando il termine "design reattivo", è molto probabile che tu stia pensando di usare le query supporti per modificare il layout durante il ridimensionamento di un design dalle dimensioni del dispositivo mobile alle dimensioni del tablet, fino a quelle del desktop.

Tuttavia, presto questa percezione del design reattivo potrebbe essere considerata obsoleta come l'uso delle tabelle per il layout di pagina.

Le query sui contenuti multimediali basate sul viewport offrono alcuni strumenti efficaci, ma non sono molto limitate. Non sono in grado di rispondere alle esigenze degli utenti e di inserire stili adattabili nei componenti.

Puoi utilizzare le informazioni dell'area visibile globale per definire lo stile dei componenti, ma questi non ne sono ancora proprietari e questo non funziona se i nostri sistemi di progettazione sono basati su componenti e non su pagine.

La buona notizia è che l'ecosistema sta cambiando e sta cambiando piuttosto rapidamente. Il CSS si sta evolvendo e si sta avvicinando una nuova era del adattabile.

Lo assistiamo ogni 10 anni circa. 10 anni fa, intorno al 2010-2012, abbiamo assistito a un enorme cambiamento con il mobile e al reattivo design e l'emergere di CSS3.

Ribadiamo che l'ecosistema è pronto ad applicare alcune importanti modifiche a CSS. Gli ingegneri di Chrome e di tutta la piattaforma web stanno prototipando, installando specifiche e avviando l'implementazione per la prossima era del design reattivo.

Questi aggiornamenti includono funzionalità multimediali basate sulle preferenze degli utenti, query sui container e query sui contenuti multimediali per nuovi tipi di schermata, come gli schermi pieghevoli.

Adattabile all'utente

Le nuove funzionalità per i contenuti multimediali con preferenze dell'utente ti offrono la possibilità di definire esperienze web in linea con le preferenze e le esigenze specifiche dell'utente. Ciò significa che le funzionalità per i contenuti multimediali con preferenze ti consentono di adattare le tue esperienze utente a quelle dei tuoi utenti.

Queste funzionalità per i contenuti multimediali con preferenze dell'utente includono:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• E altro ancora

Le funzionalità relative alle preferenze prendono in considerazione le preferenze impostate da un utente nel suo sistema operativo e aiutano a creare un'esperienza web più solida e personalizzata, soprattutto per coloro che hanno esigenze di accessibilità.

prefers-reduced-motion

Gli utenti che hanno impostato preferenze del sistema operativo per lo spostamento ridotto richiedono meno animazioni quando utilizzano il computer in generale. Pertanto, è probabile che durante l'utilizzo del web non apprezzerebbero una schermata introduttiva appariscente, un'animazione del capovolgimento delle schede, un caricatore complesso o altre animazioni appariscenti.

Con prefers-reduced-motion puoi progettare le tue pagine pensando alle riduzioni di movimento e creare un'esperienza con movimento migliorato per gli utenti che non hanno questa preferenza.

Questa scheda contiene informazioni su entrambi i lati. L'esperienza di base con movimento ridotto è una dissolvenza incrociata per mostrare queste informazioni, mentre l'esperienza di movimento migliorato è un capovolgimento di carte.

La preferenza-riduzione-movimento non significa "nessun movimento", dal momento che il movimento è fondamentale per trasmettere informazioni online. Fornisci invece una solida esperienza di base che guidi gli utenti senza movimenti superflui e migliora progressivamente questa esperienza per gli utenti senza queste esigenze o preferenze di accessibilità.

prefers-color-scheme

Un'altra funzionalità dei contenuti multimediali con preferenze è prefers-color-scheme. Questa funzionalità ti consente di personalizzare l'interfaccia utente con il tema che preferisci dall'utente. Nel loro sistema operativo, su computer o dispositivi mobili, gli utenti possono impostare una preferenza per i temi chiari, scuri o automatici, che cambiano in base all'ora del giorno.

Se configuri la pagina utilizzando le proprietà CSS personalizzate, lo scambio dei valori dei colori è semplicissimo. Puoi aggiornare rapidamente i valori del tuo tema cromatico, ad esempio backgroundColor e textOnPrimary, per adattarsi dinamicamente al nuovo tema all'interno della query supporti.

Per semplificare il test di alcune di queste query sulle preferenze, puoi utilizzare DevTools per l'emulazione anziché aprire ogni volta le preferenze di sistema.

Progettazione del tema scuro

Quando progetti per un tema scuro, non si tratta solo di invertire i colori di sfondo e del testo o le barre di scorrimento scure. Ci sono alcune considerazioni di cui potresti non renderti conto. Ad esempio, potrebbe essere necessario desaturare i colori su uno sfondo scuro per ridurre la vibrazione visiva.

Invece di usare le ombre per creare profondità e disegnare un elemento in avanti, potresti usare la luce nel colore di sfondo dell'elemento per disegnarlo in avanti. Questo perché le ombre non saranno così efficaci su uno sfondo scuro.

I temi scuri non solo offrono un'esperienza utente più personalizzata, ma possono anche migliorare significativamente la durata della batteria negli schermi AMOLED. Questi sono gli schermi che vediamo nei telefoni di fascia alta più recenti e stanno diventando sempre più popolari su tutti i dispositivi mobili.

Uno studio di Android del 2018 sui temi scuri ha dimostrato che il consumo energetico può essere ridotto fino al 60%, a seconda della luminosità dello schermo e dell'interfaccia utente complessiva. La statistica del 60% proviene dal confronto della schermata di riproduzione di YouTube con un video in pausa con una luminosità dello schermo del 100% utilizzando un tema scuro per l'interfaccia utente dell'app e un tema chiaro.

Dovresti sempre offrire agli utenti un'esperienza con il tema scuro quando è possibile.

Adattabile al container

Una delle aree emergenti più interessanti del CSS sono le query dei container, anche chiamate spesso query di elementi. È difficile sottovalutare ciò che farà il passaggio dal design reattivo basato su pagine al design reattivo basato su container per far evolvere l'ecosistema della progettazione.

Ecco un esempio delle potenti funzionalità offerte dalle query dei container. Puoi modificare qualsiasi stile dell'elemento della scheda, tra cui l'elenco di link, le dimensioni dei caratteri e il layout generale in base al relativo contenitore principale:

Questo esempio mostra due componenti identici con due diverse dimensioni del contenitore, entrambi che occupano spazio in un layout creato utilizzando la griglia CSS. Ogni componente si adatta alla sua allocazione dello spazio univoca.

Questa flessibilità non è possibile solo con le query supporti.

Le query container offrono un approccio molto più dinamico al design adattabile. Ciò significa che se inserisci questo componente scheda in una sezione della barra laterale o hero oppure in una griglia all'interno del corpo principale di una pagina, il componente stesso possiede le informazioni adattabili e le dimensioni in base al contenitore, non all'area visibile

Questo richiede la regola at-rule di @container. Questo funziona in modo simile a una query multimediale con @media; tuttavia, @container esegue una query sul contenitore principale per trovare informazioni, anziché sull'area visibile e sullo user agent.

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

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

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

Per prima cosa, imposta il contenimento sull'elemento principale. Poi scrivi una query @container per definire lo stile di qualsiasi elemento all'interno del container in base alle sue dimensioni, utilizzando min-width o max-width.

Il codice riportato sopra utilizza max-width, imposta i link su display:none, oltre a diminuire le dimensioni del carattere temporale quando il contenitore è largo meno di 850px.

Schede delle query del container

In questo sito web dello stabilimento demo, tutte le schede dei prodotti, inclusa quella nella pagina hero, la barra laterale degli articoli visualizzati di recente e la griglia dei prodotti, sono esattamente lo stesso componente, con lo stesso markup.

Non vengono utilizzate query supporti per creare l'intero layout, solo query container. In questo modo, la scheda di ogni prodotto può passare al layout corretto per riempire lo spazio. La griglia, ad esempio, utilizza un layout di colonna minmax per consentire agli elementi di fluire nel loro spazio e riorganizzare il layout della griglia quando lo spazio è troppo compresso, il che significa che raggiunge la dimensione minima.

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

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

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

Quando nella griglia è presente almeno 350px di spazio, il layout della scheda diventa orizzontale impostandolo su display: flex, che ha una direzione di flessione predefinita di "riga".

Con meno spazio, le schede dei prodotti si sovrappongono. Ogni scheda di prodotto si adatta a se stessa, qualcosa che sarebbe impossibile con i soli stili globali.

Combinazione di query container con query supporti

Le query container hanno molti casi d'uso, uno dei quali è un componente del calendario. Puoi utilizzare le query container per reinserire il layout degli eventi del calendario e di altri segmenti in base alla larghezza disponibile dell'elemento padre.

Questo contenitore dimostrativo esegue query per modificare il layout e lo stile del giorno e della data della settimana del calendario, nonché modificare i margini e le dimensioni dei caratteri per gli eventi pianificati per adattarli meglio allo spazio.

Quindi, utilizza una query supporti per spostare l'intero layout per schermi di dimensioni inferiori. Questo esempio mostra quanto è potente la combine di query supporti (modificando gli stili globali o delle macro) con le query del container (regolando gli stili secondari e i micro stili del container).

Ora possiamo pensare ai layout Macro e Micro all'interno dello stesso componente dell'interfaccia utente per prendere decisioni di progettazione molto gradevoli e ricche di sfumature.

Utilizzo delle query container oggi

Queste demo sono ora disponibili dietro un flag in Chrome Canary. Vai a about://flags in Canary e attiva il flag #enable-container-queries. Verrà attivato il supporto dei valori @container, inline-size e block-size per la proprietà contain e l'implementazione della griglia di LayoutNG.

Il flag attiva anche le funzionalità di Chrome DevTools corrispondenti. Scopri come controllare ed eseguire il debug delle query dei container in DevTools.

Stili con ambito

Per basarsi sulle query relative ai container, il gruppo di lavoro CSS sta discutendo attivamente anche degli stili basati su ambito per facilitare il pacing dei nomi corretto e la prevenzione di conflitti per i componenti.

Gli stili con ambito consentono di utilizzare stili passthrough e specifici dei componenti per evitare conflitti di denominazione, cosa che molti framework e plug-in come i moduli CSS ci consentono già di fare all'interno dei framework. Questa specifica ora ci consentirebbe di scrivere stili incapsulati in modo nativo per i nostri componenti con CSS leggibile senza dover modificare il markup.

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

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

La definizione dell'ambito ci consentirebbe di creare selettori a forma di ciambella, in cui possiamo specificare dove mantenere uno stile incapsulato e dove uscire da questo stile per fare riferimento a uno stile più globale.

Un esempio potrebbe essere un riquadro delle schede, in cui le schede dovrebbero avere lo stile basato sull'ambito e il riquadro all'interno delle schede per avere uno stile principale.

Adattabile al fattore di forma

L'argomento successivo della nostra conversazione sulla nuova era del reattivo design riguarda il cambiamento nei fattori di forma e le crescenti possibilità di ciò per cui sarà necessario progettare una community web (ad esempio uno schermo mutante o la realtà virtuale).

Schermi pieghevoli o flessibili e la progettazione per schermi di vario tipo è un esempio di come oggi notiamo un cambiamento del fattore di forma. L'estensione dello schermo è ancora un'altra specifica per coprire questi nuovi fattori di forma e necessità.

In questo caso, una query multimediale sperimentale per l'estensione delle schermate potrebbe aiutarci. Al momento si comporta nel seguente modo: @media (spanning: <type of fold>). La demo imposta un layout a griglia con due colonne: una con larghezza --sidebar-width, che per impostazione predefinita è 5 rem, e l'altra con 1fr. Quando il layout viene visualizzato su un doppio schermo con un'unica piegatura verticale, il valore di --sidebar-width viene aggiornato con il valore dell'ambiente del fold a sinistra.

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

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

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

Ciò consente un layout in cui la barra laterale, ovvero la navigazione in questo caso, riempie lo spazio di una delle pieghe, dove l'interfaccia utente dell'app riempie l'altra. In questo modo si evita una "piega" nell'interfaccia utente.

Puoi testare gli schermi pieghevoli nell'emulatore di Chrome DevTools per eseguire il debug e creare un prototipo di schermo direttamente nel browser.

Conclusione

L'esplorazione del design dell'interfaccia utente al di là dello schermo piatto è un altro motivo per cui le query dei container e gli stili con ambito sono così importanti. Ti offrono l'opportunità di isolare gli stili dei componenti da layout di pagina, stili globali e stili utente, consentendo un design reattivo più resiliente. Ciò significa che ora è possibile progettare macro layout utilizzando query supporti basate sulle pagine, incluse sfumature relative agli schermi. Allo stesso tempo, puoi utilizzare micro layout con query dei container sui componenti e aggiungere query supporti basate sulle preferenze dell'utente per personalizzare l'esperienza utente in base alle loro preferenze e esigenze uniche.

Questo è il nuovo adattabile.

Combina il layout macro con quello micro e, soprattutto, tiene conto della personalizzazione dell'utente e del fattore di forma.

Ognuna di queste modifiche da sola costituirebbe un cambiamento considerevole nel modo in cui progettiamo il web. Insieme, questo cambiamento rappresenta un cambiamento enorme nel modo in cui concettualizziamo il reindirizzamento. Ora è il momento di considerare il design reattivo al di là delle dimensioni dell'area visibile e iniziare a prendere in considerazione tutti questi nuovi assi per esperienze migliori e basate sui componenti.

È arrivata la prossima era del design reattivo, che ora puoi già iniziare a esplorare.

web.dev/learnCSS

Per ora, se vuoi migliorare il tuo gioco CSS e rivisitare alcune nozioni di base, il mio team sta lanciando un nuovo corso CSS completamente senza costi e un riferimento su web.dev. Puoi accedervi tramite web.dev/learnCSS.

Spero che tu abbia apprezzato questa panoramica sulla prossima era del reattivo design e su alcune delle primitive che lo seguiranno e spero anche che tu sia entusiasta quanto me per quanto riguarda le implicazioni di tutto questo per il futuro del web design.

A questo punto, ci offre un'enorme opportunità, come community UI, per adottare stili basati su componenti, nuovi fattori di forma e creare esperienze reattive per l'utente.