Con l'aumento del numero di utenti di telefoni cellulari su internet, è diventato sempre più importante per i web designer disporre i contenuti in modo da funzionare bene per una varietà di dimensioni dello schermo. Il web design adattabile, originariamente definito da Ethan Marcotte in A List Apart, è una strategia di progettazione che risponde alle esigenze degli utenti e alle capacità dei loro dispositivi modificando il layout di un sito in base al dispositivo utilizzato. Ad esempio, un sito responsivo potrebbe mostrare i contenuti in una visualizzazione a una sola colonna su uno smartphone, in due colonne su un tablet e in tre o quattro colonne su un computer.
Poiché i dispositivi con accesso a internet hanno molte dimensioni dello schermo possibili, è importante che il tuo sito si adatti a qualsiasi dimensione dello schermo esistente o futura. Il design responsive moderno tiene conto anche delle modalità di interazione come i touchscreen. L'obiettivo è ottimizzare l'esperienza per tutti.
Impostare l'area visibile
Le pagine ottimizzate per una serie di dispositivi devono includere un meta tag viewport nell'intestazione del documento. Questo tag indica al browser come controllare le dimensioni e il ridimensionamento della pagina.
Per cercare di offrire la migliore esperienza possibile, i browser mobile eseguono il rendering della pagina alla larghezza dello schermo di un computer (di solito circa 980px, anche se questo valore può variare da un dispositivo all'altro) e poi cercano di migliorare l'aspetto dei contenuti aumentando le dimensioni dei caratteri e ridimensionando i contenuti in base allo schermo. In questo modo i caratteri possono apparire incoerenti e
gli utenti devono aumentare lo zoom per visualizzare e interagire con i contenuti.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
L'utilizzo del valore del meta viewport width=device-width indica alla pagina di corrispondere alla larghezza dello schermo in pixel indipendenti dal dispositivo (DIP), un'unità di pixel visivi standard (che può essere composta da molti pixel fisici su uno schermo ad alta densità). In questo modo
la pagina può ridisporre i contenuti in base alle diverse dimensioni dello schermo.
Alcuni browser mantengono
costante la larghezza della pagina quando si passa alla modalità orizzontale e aumentano lo zoom per riempire lo
schermo anziché riformattare il testo. L'aggiunta del valore initial-scale=1 indica ai browser
di impostare una relazione 1:1 tra i pixel CSS e i pixel indipendenti dal dispositivo
indipendentemente dall'orientamento del dispositivo, consentendo alla pagina di sfruttare l'intera
larghezza orizzontale.
Il controllo Non ha un tag <meta name="viewport"> con width o initial-scale
di Lighthouse può aiutarti ad automatizzare il processo per assicurarti che i documenti HTML
utilizzino correttamente il meta tag viewport.
Ridimensionare i contenuti in base all'area visibile
Sia su computer che su dispositivi mobili, gli utenti sono abituati a scorrere i siti web verticalmente, ma non orizzontalmente. Obbligare l'utente a scorrere orizzontalmente o a ridurre lo zoom per visualizzare l'intera pagina causa una scarsa esperienza utente.
Quando sviluppi un sito mobile con un tag meta viewport, è comune creare accidentalmente contenuti della pagina che non rientrano perfettamente nell'area visibile specificata. Ad esempio, un'immagine visualizzata più larga dell'area visibile può causare lo scorrimento orizzontale. Per evitare questo problema, adatta i contenuti in modo che rientrino nella finestra.
Il controllo Lighthouse Le dimensioni dei contenuti non sono corrette per l'area visibile può aiutarti ad automatizzare il processo di rilevamento dei contenuti in overflow.
Immagini
Un'immagine con dimensioni fisse fa scorrere la pagina se è più grande dell'area visibile. Ti consigliamo di impostare un max-width di 100% per tutte le immagini, in modo da ridimensionarle per adattarle allo spazio disponibile ed evitare che si allunghino oltre le dimensioni iniziali.
Nella maggior parte dei casi, puoi farlo aggiungendo quanto segue al tuo foglio di stile:
img {
max-width: 100%;
display: block;
}
Aggiungi le dimensioni dell'immagine all'elemento img
Anche quando imposti max-width: 100%, ti consigliamo comunque di aggiungere gli attributi width e
height ai tag <img> in modo che il browser possa riservare spazio per
le immagini prima che vengano caricate. In questo modo si evitano variazioni del layout.
Layout
Poiché le dimensioni e la larghezza dello schermo in pixel CSS variano notevolmente da un dispositivo all'altro (ad esempio, tra smartphone e tablet e persino tra smartphone diversi), i contenuti non devono fare affidamento su una larghezza specifica dell'area visibile per essere visualizzati correttamente.
In passato, per farlo era necessario impostare gli elementi del layout in percentuale. L'utilizzo delle misurazioni in pixel richiede all'utente di scorrere orizzontalmente su schermi di piccole dimensioni:
L'utilizzo delle percentuali, invece, rende le colonne più strette sugli schermi più piccoli, perché ogni colonna occupa sempre la stessa percentuale della larghezza dello schermo:
Le moderne tecniche di layout CSS come flexbox, layout a griglia e multicol rendono molto più semplice la creazione di queste griglie flessibili.
Flexbox
Utilizza Flexbox quando hai un insieme di elementi di dimensioni diverse e vuoi che si adattino comodamente a una o più righe, con gli elementi più piccoli che occupano meno spazio e quelli più grandi che occupano più spazio.
.items {
display: flex;
justify-content: space-between;
}
Puoi utilizzare Flexbox per visualizzare gli elementi come una singola riga o disposti su più righe man mano che lo spazio disponibile diminuisce.
Layout a griglia CSS
Il layout a griglia CSS crea griglie flessibili. Puoi migliorare l'esempio precedente
utilizzando il layout a griglia e l'unità fr, che rappresenta una parte
dello spazio disponibile nel contenitore.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Puoi anche utilizzare la griglia per creare layout a griglia regolari con tutti gli elementi
che possono essere inseriti. Il numero di tracce disponibili si riduce man mano che le dimensioni dello schermo
diminuiscono. La seguente demo mostra una griglia contenente tante schede quante ne entrano in ogni riga, con una dimensione minima di 200px.
Scopri di più sul layout a griglia CSS
Layout a più colonne
Per alcuni tipi di layout, puoi utilizzare il layout a più colonne (Multicol),
che crea un numero adattabile di colonne con la proprietà column-width.
Nella seguente demo, la pagina aggiunge colonne quando c'è
spazio per un'altra colonna 200px.
Utilizzare le query supporti CSS per la reattività
A volte potrebbe essere necessario apportare modifiche più estese al layout per supportare determinate dimensioni dello schermo rispetto a quanto consentito dalle tecniche descritte in precedenza. È qui che le query supporti diventano utili.
Le query supporti sono filtri semplici che puoi applicare agli stili CSS per modificarli in base ai tipi di dispositivo che eseguono il rendering dei contenuti. Possono anche modificare lo stile in base alle funzionalità del dispositivo, tra cui larghezza, altezza, orientamento e se il dispositivo viene utilizzato come touchscreen.
Per fornire stili diversi per la stampa, puoi scegliere come target un tipo di output e includere un foglio di stile per gli stili di stampa:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Puoi anche utilizzare una media query per includere gli stili di stampa nel foglio di stile principale:
@media print {
/* print styles go here */
}
Per il responsive web design, le query più comuni riguardano le funzionalità del dispositivo, quindi puoi personalizzare il layout per touchscreen o schermi più piccoli.
Query multimediali basate sulle dimensioni dell'area visibile
Le query supporti ti consentono di creare un'esperienza adattabile che applica stili specifici a dimensioni dello schermo specifiche. Le query per le dimensioni dello schermo possono testare i seguenti aspetti:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Query multimediali basate sulle funzionalità del dispositivo
Data la gamma di dispositivi disponibili, gli sviluppatori non possono presumere che ogni dispositivo di grandi dimensioni sia un normale computer desktop o laptop o che ogni dispositivo di piccole dimensioni utilizzi un touchscreen. Alcune aggiunte più recenti alla specifica delle media query consentono di testare funzionalità come il tipo di puntatore utilizzato per interagire con il dispositivo e se l'utente può tenere un puntatore sopra gli elementi.
hoverpointerany-hoverany-pointer
Prova a visualizzare questa demo su dispositivi diversi, come un computer desktop normale e uno smartphone o un tablet.
Queste nuove funzionalità sono ben supportate in tutti i browser moderni. Scopri di più sulle pagine MDN per hover, any-hover, pointer e any-pointer.
Utilizza any-hover e any-pointer
Le funzionalità any-hover e any-pointer verificano se l'utente può tenere un puntatore
sopra gli elementi (spesso chiamato hover) o utilizzare un puntatore, anche se non è
il modo principale in cui interagisce con il dispositivo. Presta molta attenzione quando li utilizzi, ad esempio per evitare di costringere un utente del touchscreen a passare a un mouse.
Tuttavia, any-hover e any-pointer possono essere utili se è importante
determinare il tipo di dispositivo di un utente. Ad esempio, un laptop con
touchscreen e trackpad deve corrispondere ai puntatori grossolani e precisi, oltre alla
possibilità di passare il mouse sopra.
Come scegliere i punti di interruzione
Non definire i punti di interruzione in base alle classi di dispositivi o a prodotti, nomi di brand o sistemi operativi. In questo modo, il codice diventa difficile da gestire. Lascia invece che i contenuti determinino come cambia il layout per adattarsi al contenitore.
Scegli i punti di interruzione principali iniziando da quelli più piccoli e poi aumentando
Progetta i contenuti in modo che si adattino prima a uno schermo di piccole dimensioni, poi espandi lo schermo finché non diventa necessario un punto di interruzione. In questo modo, puoi ridurre al minimo il numero di breakpoint nella pagina e ottimizzarli in base ai contenuti.
L'esempio seguente illustra l'esempio di widget delle previsioni meteo all'inizio di questa pagina. Il primo passaggio consiste nel rendere la previsione adatta a uno schermo piccolo:
Successivamente, ridimensiona il browser finché non c'è troppo spazio bianco tra gli elementi
per far apparire bene il widget. La decisione è soggettiva, ma più di 600px
è sicuramente troppo ampia.
Per inserire un punto di interruzione a 600px, crea due media query alla fine del CSS per il componente: una da utilizzare quando il browser è 600px o più stretto e una per quando è più largo di 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Infine, esegui il refactoring del CSS. All'interno della media query per una max-width di 600px,
aggiungi il CSS solo per gli schermi piccoli. All'interno della media query per un
min-width di 601px aggiungi il CSS per schermi più grandi.
Scegli i punti di interruzione secondari quando necessario
Oltre a scegliere i punti di interruzione principali quando il layout cambia in modo significativo, è utile anche apportare modifiche minori. Ad esempio, tra i breakpoint principali può essere utile regolare i margini o il padding di un elemento oppure aumentare le dimensioni del carattere per renderlo più naturale nel layout.
Questo esempio segue lo stesso pattern del precedente, a partire dall'ottimizzazione dei layout per schermi più piccoli. Innanzitutto, aumenta il carattere quando la larghezza
del riquadro è maggiore di 360px. Dopodiché, quando c'è spazio sufficiente, puoi
separare le temperature massima e minima in modo che si trovino sulla stessa riga e ingrandire le
icone meteo.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
Per gli schermi di grandi dimensioni, ti consigliamo di limitare la larghezza massima del riquadro delle previsioni in modo che non occupi l'intera larghezza dello schermo.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Ottimizzare il testo per la lettura
La teoria classica della leggibilità suggerisce che una colonna ideale dovrebbe contenere da 70 a 80 caratteri per riga (circa 8-10 parole in inglese). Valuta la possibilità di aggiungere un punto di interruzione ogni volta che la larghezza di un blocco di testo supera le 10 parole circa.
In questo esempio, il carattere Roboto a 1em produce 10 parole per riga sullo schermo più piccolo, ma gli schermi più grandi hanno bisogno di un punto di interruzione. In questo caso, se la
larghezza del browser è superiore a 575px, la larghezza ideale dei contenuti è 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Evita di nascondere i contenuti (:#avoid-hiding-content)
Fai attenzione quando scegli quali contenuti nascondere o mostrare a seconda delle dimensioni dello schermo. Non nascondere i contenuti solo perché non riesci a inserirli sullo schermo. Le dimensioni dello schermo non prevedono ciò che un utente potrebbe voler vedere. Ad esempio, la rimozione del conteggio del polline dalle previsioni meteo potrebbe essere un problema serio per chi soffre di allergie primaverili e ha bisogno di queste informazioni per decidere se può uscire.
Visualizzare i punti di interruzione delle media query in Chrome DevTools
Dopo aver configurato i punti di interruzione della media query, controlla in che modo influiscono sull'aspetto del tuo sito. Potresti ridimensionare la finestra del browser per attivare i punti di interruzione, ma Chrome DevTools ha una funzionalità integrata che mostra l'aspetto di una pagina in corrispondenza di diversi punti di interruzione.
Per visualizzare la pagina in corrispondenza di diversi punti di interruzione:
- Apri DevTools.
- Attiva la modalità Dispositivo. Questa pagina si apre in modalità reattiva per impostazione predefinita.
- Per visualizzare le media query, apri il menu Modalità dispositivo e seleziona Mostra media query. Mostra i punti di interruzione sotto forma di barre colorate sopra la pagina.
- Fai clic su una delle barre per visualizzare la pagina mentre la media query è attiva. Fai clic con il tasto destro del mouse su una barra per passare alla definizione della relativa media query.