Nozioni di base sul Responsive Web Design

Come creare siti che soddisfino le esigenze e le funzionalità del dispositivo su cui vengono visualizzati.

L'uso dei dispositivi mobili per navigare sul web continua a crescere a un ritmo astronomico. Questi dispositivi sono spesso limitati dalle dimensioni del display e richiedono un approccio diverso per la disposizione dei contenuti sullo schermo.

Il Adaptive web design, originariamente definito da Ethan Marcotte in A List Apart, soddisfa le esigenze degli utenti e dei dispositivi che utilizzano. Il layout cambia in base alle dimensioni e alle funzionalità del dispositivo. Ad esempio, su un telefono gli utenti potrebbero visualizzare i contenuti in una visualizzazione a colonna singola, mentre su un tablet potrebbero essere visualizzati gli stessi contenuti in due colonne.

In questo video, il design si sposta da un'area visibile stretta a una ampia, in base allo spazio disponibile sullo schermo.

Esistono molteplici dimensioni di schermo diverse per telefoni, "phablet", tablet, computer, console per videogiochi, TV e persino indossabili. Le dimensioni degli schermi cambiano continuamente, pertanto è importante che il tuo sito possa adattarsi a qualsiasi dimensione dello schermo, oggi e in futuro. Inoltre, i dispositivi hanno diverse funzionalità con cui interagiamo. Ad esempio, alcuni dei tuoi visitatori utilizzeranno un touchscreen. Il moderno design reattivo tiene conto di tutti questi fattori per ottimizzare l'esperienza per tutti.

Impostare l'area visibile

Le pagine ottimizzate per diversi dispositivi devono includere un meta tag dell'area visibile nella sezione head del documento. Un meta tag dell'area visibile fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina.

Per tentare di offrire la migliore esperienza possibile, i browser mobile visualizzano la pagina alla larghezza dello schermo desktop (di solito circa 980px, anche se questo valore può variare da un dispositivo all'altro), quindi prova a migliorare l'aspetto dei contenuti aumentando le dimensioni dei caratteri e ridimensionando i contenuti per adattarli allo schermo. Ciò significa che le dimensioni dei caratteri potrebbero apparire incoerenti per gli utenti, che potrebbero dover toccare due volte o pizzicare per eseguire 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 visualizzazione width=device-width indica alla pagina di corrispondere alla larghezza dello schermo nei pixel indipendenti dal dispositivo. Un pixel indipendente dal dispositivo (o dalla densità) è una rappresentazione di un singolo pixel, che su uno schermo ad alta densità può essere costituito da molti pixel fisici. Ciò consente alla pagina di adattare il flusso dei contenuti in base a dimensioni dello schermo diverse, sia che vengano visualizzati su un cellulare di piccole dimensioni o su un grande monitor di un computer.

Screenshot di una pagina con testo difficile da leggere perché è molto ingrandita.
Un esempio di come viene caricata la pagina in un dispositivo senza il meta tag dell'area visibile. Guarda questo esempio su Glitch.
Screenshot della stessa pagina con il testo in una dimensione leggibile.
Un esempio di come viene caricata la pagina in un dispositivo con il meta tag dell'area visibile. Guarda questo esempio su Glitch.

Alcuni browser mantengono costante la larghezza della pagina quando viene ruotata in modalità Orizzontale e utilizzano lo zoom anziché ripetere il flusso per riempire lo schermo. L'aggiunta del valore initial-scale=1 indica ai browser di stabilire una relazione 1:1 tra i pixel CSS e i pixel indipendenti dal dispositivo indipendentemente dall'orientamento del dispositivo e consente alla pagina di utilizzare l'intera larghezza orizzontale.

Il controllo Non ha un tag <meta name="viewport"> con width o initial-scale Il controllo Lighthouse può aiutarti ad automatizzare il processo di verifica che i documenti HTML utilizzino correttamente il meta tag dell'area visibile.

Assicurati che l'area visibile sia accessibile

Oltre a impostare un initial-scale, puoi anche impostare i seguenti attributi nell'area visibile:

  • minimum-scale
  • maximum-scale
  • user-scalable

Se impostate, queste opzioni possono impedire all'utente di eseguire lo zoom dell'area visibile, causando potenzialmente problemi di accessibilità. Pertanto, ti sconsigliamo di utilizzare questi attributi.

Ridimensiona i contenuti in base all'area visibile

Sia su computer che su dispositivi mobili, gli utenti sono abituati a scorrere i siti web in verticale ma non in orizzontale; obbligare l'utente a scorrere orizzontalmente o a diminuire lo zoom per visualizzare l'intera pagina comporta un'esperienza utente negativa.

Durante lo sviluppo di un sito mobile con un meta tag dell'area visibile, è facile creare accidentalmente contenuti della pagina che non si adattano all'area visibile specificata. Ad esempio, un'immagine visualizzata con una larghezza superiore a quella dell'area visibile può causare lo scorrimento orizzontale dell'area visibile. Dovresti regolare questi contenuti per adattarli alla larghezza dell'area visibile, in modo che l'utente non debba scorrere orizzontalmente.

Il controllo I contenuti non hanno le dimensioni corrette per l'area visibile Il controllo di Lighthouse può aiutarti ad automatizzare il processo di rilevamento dei contenuti in eccesso.

Immagini

Un'immagine ha dimensioni fisse e, se è più grande dell'area visibile, genererà una barra di scorrimento. Un modo comune per affrontare questo problema è assegnare a tutte le immagini un valore max-width di 100%. In questo modo, l'immagine si restringerà per adattarsi allo spazio che dispone, nel caso in cui le dimensioni dell'area visibile siano inferiori a quelle dell'immagine. Tuttavia, poiché max-width, anziché width, è 100%, l'immagine non si estenderà più grande delle sue dimensioni naturali. In genere si consiglia di aggiungere quanto segue al foglio di stile, in modo da non avere problemi con le immagini che attivano una barra di scorrimento.

img {
  max-width: 100%;
  display: block;
}

Aggiungi le dimensioni dell'immagine all'elemento img

Quando utilizzi max-width: 100%, esegui l'override delle dimensioni naturali dell'immagine, ma devi comunque utilizzare gli attributi width e height nel tag <img>. Questo perché i browser moderni utilizzano queste informazioni per prenotare spazio per l'immagine prima che venga caricata, per evitare variazioni del layout durante il caricamento dei contenuti.

Layout

Poiché le dimensioni e la larghezza dei pixel CSS dello schermo variano notevolmente in base al dispositivo (ad es. tra telefoni e tablet, e anche tra telefoni diversi), per un rendering ottimale non è consigliabile fare affidamento sui contenuti relativi a una determinata larghezza dell'area visibile.

In passato, questa operazione richiedeva elementi di impostazione utilizzati per creare il layout in percentuale. Nell'esempio riportato di seguito, puoi vedere un layout a due colonne con elementi fluttuanti, dimensionati in pixel. Quando l'area visibile diventa più piccola della larghezza totale delle colonne, dobbiamo scorrere in orizzontale per vederne i contenuti.

Screenshot di un layout a due colonne con la maggior parte della seconda colonna esterna all&#39;area visibile
Un layout fluttuante con pixel. Guarda questo esempio su Glitch.

Utilizzando le percentuali per le larghezze, le colonne rimangono sempre una determinata percentuale del contenitore. Ciò significa che le colonne diventano più strette anziché creare una barra di scorrimento.

Le moderne tecniche di layout CSS, come Flexbox, Grid Layout e Multicol, semplificano molto la creazione di queste griglie flessibili.

Flexbox

Questo metodo di layout è ideale quando hai un insieme di elementi di dimensioni diverse e vuoi che si adattino comodamente in fila o in righe, con gli elementi più piccoli che occupano meno spazio e quelli più grandi.

.items {
  display: flex;
  justify-content: space-between;
}

In un design adattabile, puoi utilizzare Flexbox per visualizzare gli elementi come una singola riga o aggregati su più righe quando lo spazio disponibile diminuisce.

Scopri di più su Flexbox.

Layout griglia CSS

Il layout griglia CSS consente di creare facilmente griglie flessibili. Se consideriamo il precedente esempio con valori in virgola mobile, anziché creare le colonne con le percentuali, potremmo utilizzare il layout a griglia e l'unità fr, che rappresenta una parte dello spazio disponibile nel container.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Puoi usare la griglia anche per creare layout a griglia regolari, con tutti gli elementi che vuoi. Il numero di tracce disponibili si riduce man mano che le dimensioni dello schermo si riducono. Nella demo di seguito, abbiamo tutte le schede che rientrano in ogni riga, con una dimensione minima di 200px.

Scopri di più sul layout griglia CSS

Layout a più colonne

Per alcuni tipi di layout puoi usare il layout a più colonne (multicol), che può creare numeri adattabili di colonne con la proprietà column-width. Nella demo di seguito, puoi vedere che vengono aggiunte colonne se c'è spazio per un'altra colonna 200px.

Scopri di più sulla tecnologia Multicol

Utilizzare query multimediali CSS per l'adattabilità

A volte, per supportare schermi di dimensioni specifiche, dovrai apportare modifiche più estese rispetto a quanto consentito dalle tecniche mostrate sopra. È qui che diventano utili le query supporti.

Le query supporti sono semplici filtri che possono essere applicati agli stili CSS. Facilitano il cambio degli stili in base ai tipi di dispositivo che visualizzano i contenuti o alle funzionalità del dispositivo (ad esempio larghezza, altezza, orientamento, possibilità di passare il mouse) e se il dispositivo viene utilizzato come touchscreen.

Per fornire stili diversi per la stampa, devi scegliere come target un tipo di output in modo da poter includere un foglio di stile con stili di stampa come segue:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

In alternativa, potresti includere stili di stampa nel foglio di stile principale utilizzando una query supporti:

@media print {
  /* print styles go here */
}

Per quanto riguarda il web design reattivo, in genere eseguiamo query sulle funzionalità del dispositivo per fornire un layout diverso per schermi più piccoli o quando rileviamo che il visitatore utilizza un touchscreen.

Query multimediali basate sulle dimensioni dell'area visibile

Le query supporti ci permettono di creare un'esperienza reattiva in cui stili specifici vengono applicati a schermi piccoli e grandi e in qualsiasi altro elemento. La caratteristica che stiamo rilevando qui è la dimensione dello schermo, perciò possiamo verificare quanto segue.

  • width (min-width, max-width)
  • height (min-height, max-height)
  • orientation
  • aspect-ratio

Tutte queste funzionalità presentano un eccellente supporto del browser. Per ulteriori dettagli, incluse le informazioni sul supporto del browser, consulta larghezza, altezza, orientamento e aspect-ratio su MDN.

Query multimediali basate sulle funzionalità del dispositivo

Data la gamma di dispositivi disponibili, non possiamo dare per scontato che ogni dispositivo di grandi dimensioni sia un normale computer desktop o laptop o che le persone utilizzino un touchscreen solo su un dispositivo di piccole dimensioni. Con alcune aggiunte recenti alla specifica delle query supporti possiamo testare funzionalità quali il tipo di puntatore utilizzato per interagire con il dispositivo e se l'utente può passare il mouse sopra gli elementi.

  • hover
  • pointer
  • any-hover
  • any-pointer

Prova a visualizzare la demo su diversi dispositivi, ad esempio un normale computer desktop e un telefono o tablet.

Queste funzionalità più recenti sono supportate correttamente in tutti i browser moderni. Scopri di più nelle pagine MDN relative a hover, any-hover, pointer, any-pointer.

Utilizzo di any-hover e any-pointer

Le funzionalità any-hover e any-pointer consentono di verificare se l'utente ha la possibilità di passare il mouse sopra o di utilizzare quel tipo di puntatore anche se non è il modo principale per interagire con il dispositivo. Fai molta attenzione quando li usi. Obbligare gli utenti a passare a un mouse quando usa il touchscreen non è molto intuitivo. Tuttavia, any-hover e any-pointer possono essere utili se è importante capire che tipo di dispositivo utilizza un utente. Ad esempio, un laptop con touchscreen e trackpad dovrebbe abbinare i puntatori grossi e fini, oltre alla possibilità di passare il mouse sopra.

Come scegliere i punti di interruzione

Non definire i punti di interruzione in base alle classi dei dispositivi. La definizione di punti di interruzione in base a dispositivi, prodotti, nomi di brand o sistemi operativi in uso oggi può provocare un incubo per la manutenzione. Sarà però il contenuto stesso a stabilire in che modo il layout si adatta al contenitore.

Scegli i punti di interruzione principali partendo da poco e poi lavorando

Progetta i contenuti in modo che si adattino a schermi di piccole dimensioni, quindi espandi lo schermo fino a quando non si rende necessario un punto di interruzione. In questo modo, puoi ottimizzare i punti di interruzione in base ai contenuti e mantenere il minor numero possibile di punti di interruzione.

Esaminiamo l'esempio visto all'inizio: le previsioni meteo. Il primo passaggio è fare in modo che la previsione venga visualizzata correttamente su uno schermo di piccole dimensioni.

Screenshot di un&#39;app per il meteo con larghezza mobile
L'app con una larghezza ridotta.

Quindi, ridimensiona il browser finché non c'è troppo spazio bianco tra gli elementi e la previsione semplicemente non risulta soddisfacente. La decisione è alquanto soggettiva, ma al di sopra di 600px è certamente troppo ampia.

Screenshot di un&#39;app meteo con ampi intervalli tra gli elementi
L'app in un punto in cui riteniamo di dover modificare il design.

Per inserire un punto di interruzione in 600px, crea due query multimediali alla fine del CSS per il componente: una da utilizzare quando il browser è 600px e inferiore e un'altra per quando è più grande di 600px.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

Infine, esegui il refactoring del CSS. All'interno della query supporti per max-width di 600px, aggiungi il CSS, che è destinato solo agli schermi di piccole dimensioni. Nella query supporti per un elemento min-width di 601px aggiungi CSS per schermi più grandi.

Scegli i punti di interruzione minori se necessario

Oltre a scegliere i punti di interruzione principali quando il layout cambia in modo significativo, è utile anche effettuare aggiustamenti per modifiche di minore entità. Ad esempio, tra i punti di interruzione principali può essere utile regolare i margini o la spaziatura interna di un elemento oppure aumentare le dimensioni del carattere per renderlo più naturale nel layout.

Inizia ottimizzando il layout degli schermi piccoli. In questo caso, aumentiamo il carattere quando la larghezza dell'area visibile è superiore a 360px. Quando lo spazio è sufficiente, possiamo separare le temperature alta e bassa in modo che siano sulla stessa linea e non una sopra l'altra. Inoltre, ingrandiamo un po' 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;
  }
}

Analogamente, per gli schermi grandi è meglio limitare la larghezza massima del riquadro di previsione in modo che non occupi l'intera larghezza dello schermo.

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

Ottimizza il testo per la lettura

Secondo la teoria classica della leggibilità, una colonna ideale dovrebbe contenere da 70 a 80 caratteri per riga (circa 8-10 parole in inglese). Pertanto, ogni volta che la larghezza di un blocco di testo supera le 10 parole, valuta la possibilità di aggiungere un punto di interruzione.

Screenshot di una pagina di testo su un dispositivo mobile
Il testo letto su un dispositivo mobile.
Screenshot di una pagina di testo su un browser desktop
Il testo letto su un browser desktop con un punto di interruzione aggiunto per limitare la lunghezza della riga.

Esaminiamo più nel dettaglio l'esempio di post del blog riportato sopra. Su schermi più piccoli, il carattere Roboto in 1em funziona perfettamente fornendo 10 parole per riga, ma gli schermi più grandi richiedono 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 semplicemente di nascondere i contenuti

Fai attenzione quando scegli quali contenuti nascondere o mostrare in base alle dimensioni dello schermo. Non semplicemente nascondere i contenuti solo perché non riesci a inserirli sullo schermo. Le dimensioni dello schermo non sono un'indicazione definitiva di ciò che un utente può volere. Ad esempio, eliminare il numero di pollini dalle previsioni meteo potrebbe essere un problema serio per chi soffre di allergie in primavera e che hanno bisogno delle informazioni per capire se possono uscire o no.

Visualizzare i punti di interruzione delle query multimediali in Chrome DevTools

Dopo aver impostato i punti di interruzione della query multimediale, dovrai vedere come viene visualizzato il tuo sito. Puoi ridimensionare la finestra del browser per attivare i punti di interruzione, ma Chrome DevTools ha una funzionalità integrata che consente di vedere facilmente l'aspetto di una pagina sotto diversi punti di interruzione.

Screenshot di DevTools con la nostra app meteo aperta e con una larghezza di 822 pixel selezionata.
DevTools che mostra l'app Meteo in un'area visibile di dimensioni più ampie.
Screenshot di DevTools con la nostra app Meteo aperta e una larghezza di 436 pixel selezionata.
DevTools che mostra l'app Meteo in un'area visibile di dimensioni ridotte.

Per visualizzare la pagina in punti di interruzione diversi:

Apri DevTools e attiva l'opzione Modalità dispositivo. Per impostazione predefinita, si apre in modalità adattabile.

Per visualizzare le query supporti, apri il menu Modalità dispositivo e seleziona Mostra query supporti per visualizzare i punti di interruzione sotto forma di barre colorate sopra la pagina.

Fai clic su una delle barre per visualizzare la pagina mentre è attiva la query supporti. Fai clic con il tasto destro del mouse su una barra per passare alla definizione della query multimediale.