Un design visualizzato su uno schermo piccolo non dovrebbe avere l'aspetto di una versione ridotta di un layout su schermi di grandi dimensioni. Analogamente, un design visualizzato su uno schermo di grandi dimensioni non dovrebbe essere simile alla versione ingrandita di un layout su schermo piccolo. Il design deve essere abbastanza flessibile da adattarsi a schermi di tutte le dimensioni. Un design reattivo di successo sfrutta al meglio ogni fattore di forma.
Ciò significa che alcuni elementi dell'interfaccia potrebbero dover assumere un aspetto molto diverso a seconda del contesto in cui vengono visualizzati. Potresti dover applicare CSS molto diversi allo stesso codebase HTML per sfruttare al meglio dimensioni dello schermo diverse. Può essere una bella sfida progettuale!
Ecco alcune delle sfide più comuni che potresti dover affrontare.
Navigazione
La visualizzazione di un elenco di link di navigazione è piuttosto semplice su uno schermo di grandi dimensioni. C'è tanto spazio per questi link.
Su uno schermo piccolo, lo spazio è prezioso. Se stai progettando questo tipo di attività, potresti avere la tentazione di nascondere la navigazione dietro a un pulsante. Il problema di questa soluzione è che gli utenti devono seguire due passaggi per arrivare ovunque: aprire il menu e scegliere un'opzione. Finché il menu non viene aperto, l'utente continua a chiedersi "dove posso andare?"
Prova a trovare una strategia che eviti di nascondere la navigazione. Se hai un numero relativamente ridotto di elementi, puoi definire lo stile della navigazione in modo che abbia un aspetto ottimale sugli schermi di piccole dimensioni.
Questo pattern non si ridimensiona se la navigazione contiene molti link. La navigazione apparirà caotica se i link vanno a capo su due o tre righe su uno schermo piccolo.
Una possibile soluzione è mantenere i link su una sola riga, ma troncare l'elenco sul bordo dello schermo. Gli utenti possono scorrere in orizzontale per mostrare i link che non sono immediatamente visibili. Questo è il pattern di overflow.
Il vantaggio di questa tecnica è che si adatta a qualsiasi larghezza di dispositivo e qualsiasi numero di link. Lo svantaggio è che agli utenti potrebbero mancare link che non sono inizialmente visibili. Se utilizzi questa tecnica per la navigazione principale, assicurati che i primi link siano i più importanti e indichi visivamente che ci sono più elementi nell'elenco. L'esempio precedente utilizza un gradiente per questo indicatore.
Come ultima alternativa possibile, potresti decidere di nascondere la navigazione per impostazione predefinita e fornire agli utenti un meccanismo di attivazione/disattivazione per mostrare e nascondere i contenuti. Questo si chiama divulgazione progressiva.
Assicurati che il pulsante che attiva/disattiva la visualizzazione della navigazione sia etichettato. Non fare affidamento su un'icona per farti capire.
Un'icona senza etichetta è la navigazione "carne misteriosa": gli utenti non potranno sapere cosa c'è finché non lo mordono. Fornisci un'etichetta di testo per far sapere agli utenti cosa rivelerà il pulsante.
Caroselli
Ciò che è vero per la navigazione vale anche per altri contenuti: cerca comunque di non nascondere niente. Un carosello è un metodo comune per nascondere i contenuti. Può sembrare ordinato, ma ci sono buone probabilità che i tuoi utenti non scoprano mai i contenuti nascosti. I caroselli sono più efficaci nel risolvere i problemi organizzativi, ad esempio quali contenuti dovrebbero essere presenti nella home page, piuttosto che nel servire gli utenti.
Detto questo, quando lo spazio è limitato, i caroselli possono evitare che una pagina diventi troppo lunga e disordinata. Potresti adottare un approccio ibrido: mostrare i contenuti in un carosello per gli schermi piccoli, ma visualizzare gli stessi contenuti in una griglia per gli schermi più grandi.
Per schermi stretti, visualizza gli elementi in riga utilizzando Flexbox. La riga di elementi si estenderà oltre il bordo dello schermo. Usa overflow-x: auto per consentire lo scorrimento orizzontale.
@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;
}
}
Le proprietà scroll-snap assicurano che sia possibile scorrere gli elementi in modo fluido. Grazie a scroll-snap-type: inline mandatory, gli elementi scattano in posizione.
Quando lo schermo è abbastanza grande, in questo caso più largo di 50em, passa alla griglia e visualizza gli elementi in righe e colonne, senza nascondere nulla.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
È fondamentale che un elemento nella visualizzazione carosello non occupi l'intera larghezza. Se così fosse, non verrebbe indicato che sono disponibili altri contenuti oltre il bordo dell'area visibile.
I caroselli sono un altro esempio del pattern di overflow in azione. Se disponi di molti elementi che le persone possono consultare, puoi continuare a utilizzare il pattern di overflow anche sugli schermi di grandi dimensioni, compresi i televisori. Questo strumento di scorrimento dei contenuti multimediali utilizza più caroselli per gestire una quantità significativa di opzioni.
Anche in questo caso, le proprietà scroll-snap assicurano che l'interazione sia fluida. Inoltre, nota che alle immagini nel carosello è applicato loading="lazy". In questo caso, le immagini non sono below the fold, ma oltre il bordo, ma si applica lo stesso principio: se l'utente non scorre mai fino all'elemento, l'immagine non verrà scaricata, con un conseguente risparmio sulla larghezza di banda.
Con l'aggiunta di JavaScript, puoi aggiungere controlli interattivi a un carosello. Puoi anche fare in modo che scorra automaticamente tra gli elementi. Ma pensa a lungo e a lungo prima di farlo: la riproduzione automatica potrebbe funzionare se il carosello è l'unico contenuto sulla pagina, mentre un carosello a riproduzione automatica è incredibilmente fastidioso se qualcuno sta cercando di interagire con altri contenuti (ad esempio leggere del testo). Puoi leggere altre best practice per i carousel.
Tabelle dati
L'elemento table è perfetto per strutturare dati tabulari, righe e colonne di informazioni correlate. Tuttavia, se la tabella diventasse troppo grande, il layout degli schermi piccoli potrebbe non funzionare.
Puoi applicare il pattern di overflow alle tabelle. In questo esempio, la tabella è aggregata in un elemento div con una classe table-container.
.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);
}
Linee guida
Il pattern di overflow è un buon compromesso per gli schermi di piccole dimensioni, ma assicurati che sia chiaro che i contenuti fuori schermo sono raggiungibili. Valuta la possibilità di posizionare un'ombra o un gradiente sul bordo in cui i contenuti sono troncati.
L'informativa progressiva è utile per risparmiare spazio, ma fai attenzione a utilizzarla per contenuti molto importanti. È più adatto alle azioni secondarie. Assicurati che l'elemento dell'interfaccia che attiva l'informativa sia etichettato in modo chiaro, non affidarti solo all'iconografia.
Progetta prima su schermi più piccoli. È più facile adattare il design degli schermi di piccole dimensioni a schermi più grandi rispetto al contrario. Se progetti inizialmente uno schermo di grandi dimensioni, c'è il rischio che il design di quello piccolo sembri un riflesso.
Per altri pattern di layout e di elementi UI, esplora la sezione Pattern web.dev.
Quando adatti gli elementi dell'interfaccia a diverse dimensioni dello schermo, le query supporti sono molto utili per comprendere le dimensioni del dispositivo. Tuttavia, funzionalità multimediali come min-width e min-height sono solo l'inizio. e scoprirai una serie di altre funzionalità multimediali.