Configurazioni schermo

Il Adaptive web design è stato sotto molti aspetti una reazione ai telefoni cellulari. Prima che apparissero gli smartphone, pochissime persone hanno preso in seria considerazione l'aspetto e il design dei siti web sui dispositivi portatili. Le cose sono cambiate con il vertiginoso aumento dei telefoni cellulari dotati di browser web integrati.

Il Responsive Web Design ha favorito una mentalità che metteva in discussione le ipotesi. Mentre in precedenza era comune supporre che un sito web venisse visualizzato solo su un computer desktop, ora è prassi comune progettare lo stesso sito web anche per telefoni e tablet. Infatti, l'utilizzo dei dispositivi mobili ha ora superato l'uso dei computer desktop sul web.

Questo atteggiamento mentale reattivo ti sarà utile per il futuro. È del tutto possibile che i tuoi siti web vengano visualizzati su dispositivi e schermi che al momento non possiamo nemmeno immaginare. Questa mentalità va oltre gli schermi. Ancora oggi le persone utilizzano dispositivi privi di schermo per accedere ai tuoi contenuti. Gli assistenti vocali possono utilizzare i tuoi siti web se utilizzi una solida base di HTML semantico.

C'è molta sperimentazione anche nel mondo degli schermi. Oggi sul mercato sono disponibili dispositivi dotati di schermi pieghevoli. Questo comporta alcune sfide per i tuoi progetti.

Doppio schermo

Gli utenti di dispositivi pieghevoli possono scegliere se il browser web deve occupare solo uno degli schermi o occupare entrambi gli schermi. Se il browser si estende su entrambi gli schermi, il sito web visualizzato verrà suddiviso in base alla cerniera tra i due schermi. Non ha un bell'aspetto.

Segmenti dell'area visibile

È disponibile una funzione sperimentale per i contenuti multimediali progettata per rilevare se il tuo sito web viene visualizzato su un dispositivo con doppio schermo. Il nome proposto per la funzionalità multimediale è viewport-segments. Ce ne sono due tipi: horizontal-viewport-segments e vertical-viewport-segments.

Se la funzionalità multimediale horizontal-viewport-segments riporta un valore pari a 2 e vertical-viewport-segments indica un valore pari a 1, significa che la cerniera sul dispositivo viene eseguita dall'alto verso il basso, suddividendo i contenuti in due riquadri affiancati.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

Se la funzionalità dei contenuti multimediali vertical-viewport-segments riporta un valore pari a 2 e horizontal-viewport-segments indica un valore pari a 1, il cardine viene eseguito da un lato all'altro e divide i contenuti in due riquadri, uno sopra l'altro.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

Se sia vertical-viewport-segments sia horizontal-viewport-segments riportano il valore 1 significa che il sito web viene visualizzato su una sola schermata, anche se il dispositivo ha più di una schermata. Equivale a non utilizzare alcuna query supporti.

Variabili di ambiente

La funzionalità per i contenuti multimediali viewport-segments da sola non ti aiuterà a progettare in base a quella fastidiosa cerniera. Hai bisogno di un modo per conoscere le dimensioni della cerniera. In questi casi possono essere utili le variabili di ambiente.

Le variabili di ambiente in CSS ti consentono di tenere conto di intrusioni imbarazzanti nei dispositivi negli stili. Ad esempio, puoi progettare intorno alla "tacca" dell'iPhone X utilizzando i valori di ambiente safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom e safe-area-inset-left. Queste parole chiave sono incluse in una funzione env().

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Le variabili di ambiente funzionano come proprietà personalizzate. Ciò significa che puoi passare un'opzione di riserva nel caso in cui la variabile di ambiente non esista.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

Affinché queste variabili di ambiente funzionino su iPhone X, aggiorna l'elemento meta che specifica le informazioni viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Ora il layout di pagina occuperà l'intera area visibile e riempirà in modo sicuro il documento con valori predefiniti forniti dal dispositivo.

Per gli schermi pieghevoli, vengono proposte sei nuove variabili di ambiente: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom e viewport-segment-right.

Ecco un esempio di layout con due colonne, una più larga dell'altra.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

Per gli schermi doppi con supporto verticale, imposta la prima colonna in modo che corrisponda alla larghezza del primo schermo e della seconda colonna alla larghezza del secondo.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

Considera il doppio schermo come un'opportunità. Una schermata potrebbe essere utilizzata per visualizzare contenuti di testo scorrevoli, mentre l'altra mostra un elemento fisso come un'immagine o una mappa.

Il futuro

I display pieghevoli diventeranno la prossima grande novità? Chissà. Nessuno avrebbe mai immaginato quanto sarebbero diventati popolari i dispositivi mobili, quindi vale la pena avere una mentalità aperta sui futuri fattori di forma.

Prima di tutto, vale la pena verificare che i tuoi siti web siano in grado di rispondere a qualsiasi evenienza futura. Questo è ciò che il Responsive Web ti offre: non solo un insieme di tecniche pratiche, ma una mentalità che ti aiuterà a costruire il web di domani.

Verifica la tua comprensione

Verifica le tue conoscenze sulle configurazioni dello schermo