Un design visualizzato su uno schermo piccolo non deve apparire come una versione ridotta di un layout per schermi grandi. Allo stesso modo, un design visualizzato su uno schermo grande non deve apparire come una versione ingrandita di un layout per schermi piccoli. Il design deve invece essere abbastanza flessibile da adattarsi a tutte le dimensioni dello schermo. Un design adattabile efficace sfrutta al meglio ogni fattore di forma.
Ciò significa che alcuni elementi dell'interfaccia potrebbero avere un aspetto molto diverso a seconda del contesto in cui vengono visualizzati. Potresti dover applicare CSS molto diversi alla stessa base di codice HTML per sfruttare al meglio le diverse dimensioni dello schermo. Questa può essere una sfida di progettazione piuttosto impegnativa.
Ecco alcune sfide comuni che potresti dover affrontare.
Navigazione
Visualizzare un elenco di link di navigazione è abbastanza semplice su uno schermo grande. C'è molto spazio per ospitare questi link.
Su uno schermo piccolo, lo spazio è un bene prezioso. Quando progetti per questa situazione, è allettante nascondere la navigazione dietro un pulsante. Il problema di questa soluzione è che gli utenti devono eseguire due passaggi per raggiungere qualsiasi punto: aprire il menu e poi scegliere un'opzione. Finché il menu non viene aperto, l'utente si chiede "Dove posso andare?".
Prova a trovare una strategia che eviti di nascondere la navigazione. Se hai un numero relativamente piccolo di elementi, puoi applicare uno stile alla navigazione in modo che abbia un bell'aspetto sugli schermi piccoli.
Questo pattern non verrà scalato se la navigazione contiene molti link. La navigazione apparirà disordinata se i link vanno a capo su due o tre righe su uno schermo piccolo.
Una possibile soluzione è mantenere i link su una riga, ma troncare l'elenco al bordo dello schermo. Gli utenti possono scorrere orizzontalmente per visualizzare i link non immediatamente visibili. Questo è il pattern di overflow.
Il vantaggio di questa tecnica è che viene scalata in base alla larghezza di qualsiasi dispositivo e a qualsiasi numero di link. Lo svantaggio è che gli utenti potrebbero non vedere i link non visibili inizialmente. Se utilizzi questa tecnica per la navigazione principale, assicurati che i primi link siano i più importanti e indica visivamente che nell'elenco sono presenti altri elementi. L'esempio precedente utilizza una sfumatura per questo indicatore.
Come ultima risorsa, puoi scegliere di nascondere la navigazione per impostazione predefinita e fornire un meccanismo di attivazione/disattivazione per consentire agli utenti di mostrare e nascondere i contenuti. Questa operazione è chiamata divulgazione progressiva.
Assicurati che il pulsante che attiva/disattiva la visualizzazione della navigazione sia etichettato. Non fare affidamento su un'icona per essere compreso.
Un'icona senza etichetta è una navigazione "misteriosa": gli utenti non sapranno cosa c'è finché non la aprono. Fornisci un'etichetta di testo per informare gli utenti su cosa rivelerà il pulsante.
Caroselli
Ciò che vale per la navigazione vale anche per gli altri contenuti: cerca di non nascondere nulla. Un carosello è un metodo comune per nascondere i contenuti. Può sembrare piuttosto ordinato, ma è molto probabile che gli utenti non scopriranno mai i contenuti nascosti. I caroselli sono più adatti a risolvere problemi organizzativi, ad esempio quali contenuti devono essere visualizzati nella home page, piuttosto che a servire gli utenti.
Detto ciò, quando lo spazio è un bene prezioso, i caroselli possono impedire che una pagina diventi troppo lunga e disordinata. Puoi 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 gli schermi stretti, visualizza gli elementi in una riga utilizzando flexbox. La riga di elementi si estenderà oltre il bordo dello schermo. Utilizza 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 scroll-snap proprietà assicurano che gli elementi possano essere scorri in modo fluido. Grazie a scroll-snap-type: inline mandatory, gli elementi si agganciano 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 del carosello non occupi l'intera larghezza. In caso contrario, non ci sarebbe alcuna indicazione che sono disponibili altri contenuti oltre il bordo dell'area visibile.
I caroselli sono un altro esempio del pattern di overflow in azione. Se hai molti elementi che gli utenti possono sfogliare, puoi continuare a utilizzare il pattern di overflow anche su schermi grandi, inclusi i televisori. Questo scroller multimediale 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, tieni presente che alle immagini del carosello è applicato loading="lazy". In questo caso, le immagini non sono sotto la piega, ma oltre il bordo, ma si applica lo stesso principio: se l'utente non scorre fino a quell'elemento, l'immagine non verrà scaricata, risparmiando larghezza di banda.
Con l'aggiunta di JavaScript, puoi aggiungere controlli interattivi a un carosello. Potresti persino fare in modo che scorra automaticamente tra gli elementi. Tuttavia, pensaci bene prima di farlo: la riproduzione automatica potrebbe funzionare se il carosello è l'unico contenuto della pagina, ma un carosello con riproduzione automatica è incredibilmente fastidioso se qualcuno sta cercando di interagire con altri contenuti (ad esempio, leggere il testo). Puoi saperne di più sulle best practice per i caroselli.
Tabelle dati
L'elemento table è perfetto per strutturare i dati tabulari: righe e colonne di informazioni correlate. Tuttavia, se la tabella diventa troppo grande, potrebbe interrompere il layout per schermi piccoli.
Puoi applicare il pattern di overflow alle tabelle. In questo esempio, la tabella è racchiusa in un 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 piccoli, ma assicurati che sia chiaro che i contenuti fuori schermo sono raggiungibili. Valuta la possibilità di inserire un'ombra o una sfumatura sul bordo in cui i contenuti vengono troncati.
La divulgazione progressiva è un modo utile per risparmiare spazio, ma fai attenzione a utilizzarla per contenuti molto importanti. È più adatta alle azioni secondarie. Assicurati che l'elemento dell'interfaccia che attiva la divulgazione sia etichettato chiaramente: non fare affidamento solo sull'iconografia.
Progetta prima per gli schermi più piccoli. È più facile adattare i design per schermi piccoli a schermi più grandi che viceversa. Se progetti prima per uno schermo grande, c'è il rischio che il design per schermi piccoli sembri un'aggiunta successiva.
Per altri pattern di layout ed elementi dell'interfaccia utente, esplora la sezione Pattern di web.dev.
Quando adatti gli elementi dell'interfaccia a diverse dimensioni dello schermo, le query supporti sono molto utili per determinare le dimensioni del dispositivo. Tuttavia, le funzionalità dei media come min-width e min-height sono solo l'inizio. Nella prossima sezione scoprirai una serie di altre funzionalità dei media.