Nozioni di base sul Responsive Web Design

Con l'aumento del numero di utenti di cellulari su internet, è diventato è sempre più importante per i web designer disporre i contenuti in modi che funzionino adatta a schermi di varie dimensioni. Il Adaptive Web Design, definito in origine da Ethan Marcotte in A List Apart, è una strategia di progettazione che risponde alle esigenze necessità e dei loro dispositivi funzionalità modificando il layout di un sito per adeguarlo al dispositivo utilizzato. Per Ad esempio, un sito adattabile potrebbe mostrare i contenuti in una visualizzazione a colonna su uno smartphone due colonne su un tablet e tre o quattro colonne su un computer.

Man mano che lo schermo si allarga, il widget cambia forma in risposta.

Poiché i dispositivi che supportano internet hanno possibili dimensioni dello schermo di tantissime dimensioni, è importante che il sito si adatti a dimensioni dello schermo esistenti o future. Moderno il responsive design tiene conto anche delle modalità di interazione, come i touch screen. L'obiettivo è ottimizzare l'esperienza per tutti.

Impostare l'area visibile

Le pagine ottimizzate per diversi dispositivi devono includere un meta tag area visibile nella all'intestazione del documento. Questo tag indica al browser come controllare la visualizzazione dimensioni e scalabilità.

Per cercare di offrire la migliore esperienza possibile, i browser mobile visualizzano la pagina in un larghezza dello schermo del computer desktop (di solito circa 980px, anche se può variare in base al dispositivo), e cercare di migliorare l'aspetto dei contenuti aumentandone le dimensioni e ridimensionando i contenuti per adattarli allo schermo. Ciò può far sì che i caratteri abbiano un aspetto incoerente richiedono agli utenti di 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 meta area visibile width=device-width indica alla pagina di corrispondere al larghezza dello schermo in pixel indipendenti dal dispositivo (DIP), un'unità di pixel visivi standard (che può essere costituita da molti pixel fisici su uno schermo ad alta densità). Questo consente alla pagina di ripetere il flusso dei contenuti per adattarli a schermi di dimensioni diverse.

Screenshot di un
    pagina con testo difficile da leggere perché lo zoom è molto ridotto.
. Una pagina senza il meta tag dell'area visibile viene caricata molto ridotta, in modo che il testo difficili da leggere. Guarda questo esempio su Glitch.
di Gemini Advanced.
.
. Screenshot di
    la stessa pagina con il testo in una dimensione leggibile.
Con il meta tag dell'area visibile impostato, puoi leggere la pagina senza aumentare lo zoom. Guarda questo esempio su Glitch.

Alcuni browser mantengono costante di larghezza della pagina durante la rotazione in modalità Orizzontale e eseguire lo zoom per riempire invece di ripetere il flusso. L'aggiunta del valore initial-scale=1 indica ai browser per impostare una relazione 1:1 tra pixel CSS e pixel indipendenti dal dispositivo indipendentemente dall'orientamento del dispositivo, in modo che la pagina possa sfruttare orizzontale.

Non ha un tag <meta name="viewport"> con width o initial-scale Il controllo di Lighthouse può aiutarti ad automatizzare la procedura per verificare che il codice HTML utilizzano correttamente il meta tag dell'area visibile.

Ridimensiona i contenuti in base all'area visibile

Sia sui computer che sui dispositivi mobili, gli utenti sono abituati a scorrere i siti web in verticale, ma non in orizzontale. Obbligare l'utente a scorrere in orizzontale o a diminuisci lo zoom per visualizzare l'intera pagina causa un'esperienza utente scadente.

Quando si sviluppa un sito per dispositivi mobili con un meta tag area visibile, capita di frequente creare accidentalmente contenuti di pagina che non rientrano nel area visibile. Ad esempio, un'immagine visualizzata più larga dell'area visibile può causare scorrimento orizzontale. Per evitare che ciò accada, modifica i contenuti in modo che si adattino all'interno area visibile.

La casella di controllo Le dimensioni dei contenuti non sono corrette per l'area visibile Il controllo di Lighthouse può aiutarti ad automatizzare il processo di rilevamento dell'overflow contenuti.

Immagini

Un'immagine con dimensioni fisse causa lo scorrimento della pagina se è più grande del area visibile. Ti consigliamo di assegnare a tutte le immagini un valore max-width di 100%, che si riduce le immagini per adattarsi allo spazio disponibile, impedendo al contempo di estendersi oltre le dimensioni iniziali.

Nella maggior parte dei casi, puoi eseguire questa operazione aggiungendo al foglio di stile quanto segue:

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

Aggiungi le dimensioni dell'immagine all'elemento img

Anche se imposti max-width: 100%, ti consigliamo comunque di aggiungere width e height ai tuoi tag <img> in modo che il browser possa riservare spazio per prima che vengano caricate. In questo modo si evitano le variazioni del layout.

Layout

Perché le dimensioni e la larghezza dello schermo in pixel CSS variano notevolmente da dispositivo a dispositivo (ad esempio tra telefoni e tablet e anche tra telefoni diversi), i contenuti non devono fare affidamento sulla larghezza di un'area visibile specifica per essere visualizzati correttamente.

In passato, per farlo, era necessario impostare gli elementi di layout in percentuale. Utilizzo di Pixel le misurazioni richiedono che l'utente scorra orizzontalmente su schermi piccoli:

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

Se si usano le percentuali, le colonne sono più strette sugli schermi più piccoli, ciascuna colonna occupa sempre la stessa percentuale della larghezza dello schermo:

Le moderne tecniche di layout CSS, come Flexbox, Grid Layout e Multicol Make è molto più facile creare queste griglie flessibili.

Flexbox

Utilizza Flexbox quando hai un set di articoli di dimensioni diverse che desideri stare comodamente in una o più file, con oggetti più piccoli che occupano meno più grandi e quelle 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 aggregati su più elementi di righe quando lo spazio disponibile diminuisce.

Scopri di più su Flexbox.

Layout griglia CSS

Il layout a griglia CSS crea griglie flessibili. Puoi migliorare il valore in virgola mobile precedente esempio utilizzando il layout a griglia e l'unità fr, che rappresenta una parte lo spazio disponibile nel container.

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

Puoi utilizzare il layout a griglia anche per creare layout a griglia regolari con quanti più elementi quanto più possibile. Il numero di tracce disponibili viene ridotto con le dimensioni dello schermo diminuisce. La demo seguente mostra una griglia contenente tutte le schede disponibili 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 usare il layout a più colonne (multicolore), che crea numeri adattabili di colonne con la proprietà column-width. Nella demo riportata di seguito, la pagina aggiunge colonne quando per un'altra colonna 200px.

Scopri di più sul multicol

Utilizzare le query multimediali CSS per la reattività

A volte può essere necessario apportare modifiche più significative al layout per supportano schermi di dimensioni diverse rispetto a quelle consentite in precedenza dalle tecniche descritte in precedenza. È qui che entrano in gioco le query supporti.

Le query supporti sono semplici filtri che puoi applicare agli stili CSS per modificare questi stili in base ai tipi di dispositivi su cui vengono visualizzati i contenuti. Possono anche cambia gli stili in base alle caratteristiche del dispositivo, tra cui larghezza, altezza, orientamento e se il dispositivo viene usato come touchscreen.

Per fornire stili di stampa diversi, puoi scegliere come target un tipo di output e includi 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 query supporti per includere gli stili di stampa nel foglio di stile principale:

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

Nel caso del responsive web design, le query più comuni riguardano le funzionalità dei dispositivi, puoi personalizzare il layout per i touchscreen o gli schermi più piccoli.

Query multimediali basate sulle dimensioni dell'area visibile

Le query supporti consentono di creare un'esperienza reattiva che applica da stili a dimensioni specifiche dello schermo. Le query relative alle dimensioni dello schermo possono testare le seguenti cose:

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

Tutte queste funzioni hanno un eccellente supporto del browser. Per ulteriori dettagli, incluse le informazioni di supporto del browser, vedi width, height, orientamento e rapporto aspetto su MDN.

Query multimediali basate sulle funzionalità del dispositivo

Data la gamma di dispositivi disponibili, gli sviluppatori non possono dare per scontato che ogni dispositivo di grandi dimensioni è un normale computer o laptop o che ogni su un piccolo dispositivo usa un touchscreen. Alcune aggiunte più recenti alle query supporti consente di testare funzionalità quali il tipo di puntatore utilizzato interagiscono con il dispositivo e se l'utente può tenere premuto elementi.

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

Prova a guardare questa demo su dispositivi diversi, come un normale computer desktop e un telefono o tablet.

Queste funzionalità più recenti sono supportate in modo adeguato in tutti i browser moderni. Scopri di più su le pagine MDN per hover, in qualsiasi momento, pointer e qualsiasi-pointer.

Utilizza any-hover e any-pointer

Le funzionalità any-hover e any-pointer verificano se l'utente è in grado di tenere un puntatore su elementi (spesso chiamati hovering) o utilizzare un puntatore, anche se non è il modo principale in cui interagiscono con il dispositivo. Presta molta attenzione quando utilizzi come ad esempio per evitare di costringere gli utenti del touchscreen a passare al 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 il touchscreen e il trackpad devono corrispondere a puntatori granulari e approssimativi, oltre a possibilità di passare il mouse sopra.

Come scegliere i punti di interruzione

Non definire punti di interruzione in base alle classi dei dispositivi o a qualsiasi prodotto, nome di brand o un intero sistema operativo. Questo rende difficile la manutenzione del codice. Invece, lascia che i contenuti determinano in che modo il layout cambia per adattarsi al contenitore.

Scegli i punti di interruzione principali iniziando con piccoli passi e poi aumentando

Progetta i contenuti in modo che si adattino a schermi di dimensioni ridotte, quindi espandi lo schermo finché non è necessario un punto di interruzione. Ciò consente di ridurre al minimo il numero punti di interruzione sulla pagina e ottimizzarli in base ai contenuti.

L'esempio seguente illustra l'esempio di widget delle previsioni meteo nella all'inizio di questa pagina. Il primo passaggio consiste nel fare in modo che la previsione schermo piccolo:

Screenshot di
    un&#39;app meteo per dispositivi mobili
. L'app ha una larghezza ridotta.

Quindi, ridimensiona il browser finché non ci sia troppo spazio vuoto tra gli elementi. per migliorare l'aspetto del widget. La decisione è soggettiva, ma superiore a 600px è di sicuro troppo ampio.

Screenshot di
    un&#39;app meteo con ampi intervalli tra gli elementi
. Con queste dimensioni, probabilmente il layout dell'app dovrebbe cambiare.

Per inserire un punto di interruzione in 600px, crea due query supporti alla fine CSS per il componente: uno da utilizzare quando il browser è 600px o più stretto e una per quando è più larga di 600px.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

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

Scegli punti di interruzione minori quando necessario

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

Questo esempio segue lo stesso pattern del precedente, iniziando con per ottimizzare i layout degli schermi più piccoli. Innanzitutto, aumenta il carattere quando viene visualizzato è maggiore di 360px. Dopodiché, quando lo spazio sarà sufficiente, potrai separa le temperature massime e basse in modo che siano sulla stessa linea e fai in modo che icone meteo più grandi.

@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 schermi di grandi dimensioni, consigliamo di limitare la larghezza massima del riquadro di previsione in modo che non utilizzi l'intera larghezza dello schermo.

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

Ottimizza 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 ogni volta che la larghezza di un blocco di testo supera le 10 parole.

Screenshot di un
    pagina di testo su un dispositivo mobile
. Inviare messaggi su un dispositivo mobile.
di Gemini Advanced.
.
. Screenshot di una pagina di testo in un browser desktop
Lo stesso testo in un browser desktop con un punto di interruzione aggiunto per vincolare la lunghezza della linea di testo.

In questo esempio, il carattere Roboto in 1em produce 10 parole per riga nella uno schermo più piccolo, ma quelli più grandi necessitano di un punto di interruzione. In questo caso, se la larghezza del browser è maggiore di 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 (:#evita-di-nascondere-contenuti)

Fai attenzione quando scegli i contenuti da nascondere o mostrare in base alle dimensioni dello schermo. Non nascondere i contenuti solo perché non riesci a farli vedere sullo schermo. Dimensioni schermo non prevede quello che un utente potrebbe voler vedere. Ad esempio, rimuovendo il polline il conteggio delle previsioni meteo potrebbe costituire un grave problema per l'allergia primaverile che hanno bisogno di queste informazioni per decidere se poter uscire all'aperto.

Visualizzare i punti di interruzione delle query multimediali in Chrome DevTools

Dopo aver impostato i punti di interruzione della query supporti, verifica in che modo influiscono sulle aspetto. Puoi 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 diversi punti di interruzione.

Screenshot di DevTools con la nostra app meteo aperta e una larghezza di 822 pixel selezionati.
. DevTools che mostra l'app meteo a un'area visibile più ampia.
di Gemini Advanced.
.
. Screenshot di DevTools con la nostra app meteo aperta e una larghezza di 436 pixel selezionati.
DevTools che mostra l'app meteo con dimensioni dell'area visibili più ristrette.

Per visualizzare la pagina sotto punti di interruzione diversi:

  1. Apri DevTools.
  2. Attiva la Modalità dispositivo. Si apre in modalità adattabile per impostazione predefinita.
  3. Per vedere le tue query supporti, apri il menu Modalità dispositivo e seleziona Mostra query supporti. I punti di interruzione vengono visualizzati come barre colorate sopra la pagina.
  4. Fai clic su una delle barre per visualizzare la pagina mentre la query multimediale è attiva. Fai clic con il pulsante destro del mouse su una barra per passare alla definizione della query multimediale.