Responsive web design nozioni di base

• Impostare la finestra
• Dimensioni del contenuto del riquadro di visualizzazione
• Utilizzare i CSS media query per la reattività
• Come scegliere i punti di interruzione
• Visualizzare la media query punti di interruzione in Chrome DevTools

L’uso di dispositivi mobili per navigare il web continua a crescere ad un astronomico di pace, e questi dispositivi sono spesso limitato dalle dimensioni del display e richiedono un approccio diverso al modo in cui il contenuto è presentato sullo schermo.,

Responsive web design, originariamente definito da Ethan Marcotte in A List Apart, risponde alle esigenze degli utenti e dei dispositivi che stanno utilizzando. Il layout cambia in base alle dimensioni e alle capacità del dispositivo. Ad esempio, su un telefono gli utenti vedrebbero il contenuto mostrato in una vista a colonna singola; un tablet potrebbe mostrare lo stesso contenuto in due colonne.

Esiste una moltitudine di diverse dimensioni dello schermo tra telefoni, “phablets”, tablet, desktop, console di gioco, TV e persino dispositivi indossabili., Dimensioni dello schermo sono in continua evoluzione, quindi è importante che il vostro sito può adattarsi a qualsiasi dimensione dello schermo, oggi o in futuro. Inoltre, i dispositivi hanno caratteristiche diverse con cui interagiamo con loro. Ad esempio, alcuni dei tuoi visitatori utilizzeranno un touchscreen. Il design reattivo moderno considera tutte queste cose per ottimizzare l’esperienza per tutti.

Imposta la finestra #

Le pagine ottimizzate per una varietà di dispositivi devono includere un tag meta finestra nella testa del documento.Un tag meta viewport fornisce le istruzioni del browser su come controllare le dimensioni e il ridimensionamento della pagina.,

Per tentare di fornire la migliore esperienza, i browser mobili renderthe pagina a una larghezza dello schermo del desktop (di solito circa980px, anche se questo variesacross dispositivi), e quindi provare a rendere il contenuto un aspetto migliore aumentando le dimensioni del campo e ridimensionando il contenuto per adattarsi allo schermo.Ciò significa che le dimensioni dei caratteri possono apparire incoerenti per gli utenti, che potrebbero dover toccare due volte o pinch-to-zoomin per vedere e interagire con il contenuto.,

Utilizzando il valore meta viewport width=device-width indica alla pagina di corrispondere alla larghezza dello schermo in pixel indipendenti dal dispositivo. Un dispositivo (o densità) pixel indipendente essendo una rappresentazione di un singolo pixel, che può su uno schermo ad alta densità costituito da molti pixel fisici. Ciò consente alla pagina di reflowcontent di abbinare diverse dimensioni dello schermo, sia renderizzate su un piccolo cellulare o un monitor desktop di grandi dimensioni.,

Alcuni browser mantengono la costante di larghezza della pagina durante la rotazione su landscapemode e lo zoom anziché il reflow per riempire lo schermo., L’aggiunta del valore initial-scale=1 indica ai browser di stabilire una relazione 1:1 tra CSSpixels e pixel indipendenti dal dispositivo, indipendentemente dall’orientamento del dispositivo, e consente alla pagina di sfruttare l’intera larghezza orizzontale.

Non ha un tag<meta name="viewport">conwidthoinitial-scale Lighthouse audit può aiutarti ad automatizzare il processo di assicurarsi che i tuoi documenti HTML utilizzino correttamente il meta tag viewport.,

Garantire un accessibile viewport #

In aggiunta per l’impostazione di un initial-scale,è anche possibile impostare i seguenti attributi di visualizzazione:

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

Quando è impostato, questi possono disabilitare l’utente”s la capacità di zoom finestra,causando potenzialmente problemi di accessibilità.Pertanto non consigliamo di utilizzare questi attributi.,

Dimensione contenuto nella finestra #

Su dispositivi desktop e mobili,gli utenti sono abituati a scorrere i siti Web verticalmente ma non orizzontalmente;costringendo l’utente a scorrere orizzontalmente o a ridurre lo zumoper vedere l’intera pagina si ottiene un’esperienza utente scarsa.

Quando si sviluppa un sito mobile con un tag meta viewport,è facile creare accidentalmente il contenuto della pagina che non si adatta perfettamente alla finestra specificata.Ad esempio, un’immagine visualizzata con una larghezza più ampia della finestra può far scorrere orizzontalmente la finestra.,È necessario regolare questo contenuto per adattarlo alla larghezza della finestra,in modo che l’utente non debba scorrere orizzontalmente.

Il contenuto non è dimensionato correttamente per l’audit viewportLighthouse può aiutarti ad automatizzare il processo di rilevamento del contenuto traboccante.

Immagini #

Un’immagine ha dimensioni fisse e se è più grande della finestra causerà una barra di scorrimento.Un modo comune per affrontare questo problema è dare a tutte le immagini un max-width di 100%.,Ciò farà sì che l’immagine si riduca per adattarsi allo spazio che ha,se la dimensione della finestra fosse più piccola dell’immagine.Tuttavia, poiché max-width, anziché width è 100%,l’immagine non si estenderà più grande del suo naturale size.It è generalmente sicuro aggiungere quanto segue al tuo foglio di stilein modo che non avrai mai un problema con le immagini che causano una barra di scorrimento.,

Aggiungere le dimensioni dell’immagine per l’elemento img #

Quando si utilizza max-width: 100% si stanno sostituendo la dimensione naturale dell’immagine,tuttavia, è ancora possibile utilizzare il tag width e height attributi di un <img> tag.Questo perché i browser moderni utilizzeranno queste informazioni per riservare spazio all’immagine prima che venga caricata, ciò contribuirà ad evitare spostamenti di layout man mano che il contenuto viene caricato.,

Layout #

Poiché le dimensioni dello schermo e la larghezza dei pixel CSS variano ampiamente tra i dispositivi(ad esempio, tra telefoni e tablet e persino tra telefoni diversi), il contenuto non dovrebbe fare affidamento su una particolare larghezza della finestra per il rendering.

In passato, ciò richiedeva elementi di impostazione utilizzati per creare il layout in percentages.In nell’esempio seguente, puoi vedere un layout a due colonne con elementi fluttuanti, dimensionati utilizzando i pixel.Una volta che la finestra diventa più piccola della larghezza totale delle colonne, dobbiamo scorrere orizzontalmente per vedere il contenuto.,

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

Le moderne tecniche di layout CSS come Flexbox, Grid Layout e Multicolmake rendono molto più semplice la creazione di queste griglie flessibili.,

Flexbox #

Questo metodo di layout è ideale quando si dispone di un set di elementi di diverse dimensionie si desidera che si adattino comodamente in una riga o righe,con oggetti più piccoli che occupano meno spazio e quelli più grandi che ottengono più spazio.

In un design reattivo, è possibile utilizzare Flexbox per visualizzare gli elementi come una singola riga,o avvolto su più righe come lo spazio disponibile diminuisce.

Per saperne di più su Flexbox.

CSS Grid Layout #

CSS Grid Layout consente la creazione semplice di griglie flessibili.,Se consideriamo l’esempio floated precedente, piuttosto che creare le nostre colonne con percentuali, potremmo usare il layout della griglia e l’unitàfr, che rappresenta una porzione dello spazio disponibile nel contenitore.

La griglia può anche essere utilizzata per creare layout di griglia regolari,con tutti gli elementi che si adattano.Il numero di tracce disponibili sarà ridotto come le dimensioni dello schermo shrinks.In la demo qui sotto, abbiamo tutte le carte che si adatteranno su ogni riga, con una dimensione minima di 200px.,

per saperne di più sui CSS Layout a Griglia

Più layout di colonna #

Per alcuni tipi di layout, è possibile utilizzare Più Layout di colonna (Multicol),che può creare reattivo il numero di colonne con il column-width proprietà.Nella demo di seguito, si può vedere che le colonne sono aggiunte, se c’è spazio per un altro 200px colonna.,

Leggi di più su Multicol

Usa le query multimediali CSS per la reattività #

A volte dovrai apportare modifiche più estese al tuo layout per supportare una certa dimensione dello schermo rispetto alle tecniche mostrate sopra consentiranno.Questo è dove media query diventano utili.

Le query multimediali sono semplici filtri che possono essere applicati agli stili CSS.,Semplificano la modifica degli stili in base ai tipi di dispositivo che esegue il rendering del contenuto o alle caratteristiche di tale dispositivo,ad esempio larghezza, altezza, orientamento, possibilità di librarsi e se il dispositivo viene utilizzato come touchscreen.,

fornire stili diversi per la stampa,è necessario identificare un tipo di output, in modo che si potrebbe includere un foglio di stile con stili di stampa come segue:

in Alternativa, è possibile includere stili di stampa all’interno del vostro foglio principale utilizzando una media query:

Per il web design reattivo, in genere stiamo interrogando le funzionalità del dispositivoper fornire un layout diverso per schermi più piccoli o quando rileviamo che il nostro visitatore utilizza un touchscreen.

Le query multimediali basate sulla dimensione della finestra #

Le query multimediali ci consentono di creare un’esperienza reattiva in cui gli stili specifici vengono applicati a schermi di piccole dimensioni, schermi di grandi dimensioni e ovunque nel mezzo.La caratteristica che stiamo rilevando qui è quindi la dimensione dello schermo e possiamo testare le seguenti cose.,

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

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

Media query basate sulla capacità del dispositivo #

Data la gamma di dispositivi disponibili, non possiamo supporre che ogni dispositivo di grandi dimensioni sia un normale computer portatile desktopor o che le persone utilizzino solo un touchscreen su un dispositivo piccolo.,Con alcune aggiunte più recenti alla specifica media queries, possiamo testare funzionalità come il tipo di puntatore utilizzato per interagire con il dispositivo e se l’utente può passare il mouse sugli elementi.

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

Provare la visualizzazione di questa demo su diversi dispositivi,come un normale computer desktop e un telefono o un tablet.

Queste funzionalità più recenti hanno un buon supporto in tutti i browser moderni., Per saperne di più sulle pagine MDN perhover,any-hover,pointer,any-pointer.

Uso any-hover e any-pointer #

caratteristiche any-hover e any-pointer verificare se l’utente ha il capabilityto passaggio del mouse o utilizzare quel tipo di puntatore, anche se non è il primo modo per interagire con il proprio dispositivo.Essere molto attenti quando si usano questi.Costringere un utente a passare a un mouse quando utilizza il touchscreen non è molto amichevole!,Tuttavia, any-hovereany-pointer possono essere utili se è importante capire che tipo di dispositivo ha un utente.Ad esempio,un laptop con touchscreen e trackpad dovrebbe corrispondere a puntatori grossolani e fini, oltre alla possibilità di librarsi.

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, marchi o sistemi operativi specifici oggi in uso può comportare un incubo di manutenzione.,Invece, il contenuto stesso dovrebbe determinare come il layout si adatta al suo contenitore.

Scegli i punti di interruzione principali avviando piccoli, quindi lavorando su #

Progetta prima il contenuto per adattarlo a uno schermo di piccole dimensioni,quindi espandi lo schermo fino a quando non diventa necessario un punto di interruzione.Ciò consente di ottimizzare i punti di interruzione in base al contenutoe mantenere il minor numero possibile di punti di interruzione.

Cerchiamo di lavorare attraverso l’esempio che abbiamo visto all’inizio: le previsioni del tempo.Il primo passo è quello di rendere la previsione guardare bene su un piccolo schermo.,

Quindi, ridimensionare il browser fino a quando non c’è troppo spazio bianco tra gli elementi e la previsione semplicemente non sembra così buona.La decisione è in qualche modo soggettiva, ma sopra 600px è certamente troppo ampia.

Per inserire un punto di interruzione all’ 600px creare due query supporti alla fine del CSS del componente,uno da utilizzare quando il browser è 600px e sotto, e uno per quando è più ampia rispetto a 600px.

Infine, refactoring del CSS. All’interno della query multimediale per un max-width di 600px,aggiungere il CSS che è solo per schermi di piccole dimensioni., All’interno della query multimediale per unmin-width di 601px aggiungere CSS per schermi più grandi.

Scegli i punti di interruzione minori quando necessario #

Oltre a scegliere i punti di interruzione principali quando il layout cambia in modo significativo,è anche utile regolare per modifiche minori.Ad esempio,tra i punti di interruzione principali può essere utile regolare i margini o il padding su un elemento o aumentare la dimensione del carattere per renderlo più naturale nel layout.

Iniziamo ottimizzando il layout del piccolo schermo.,In questo caso, facciamo aumentare il carattere quando la larghezza della finestra è maggiore di 360px.Secondo,quando c’è abbastanza spazio, siamo in grado di separare le alte e basse temperature in modo che siano sulla stessa lineinstead di uno sopra l”altro.E facciamo anche le icone meteo un po ” più grande.

Allo stesso modo, per gli schermi di grandi dimensioni è meglio limitare alla larghezza massima del pannello di previsione, quindi non consuma l’intera larghezza dello schermo.,

Ottimizza il testo per la lettura #

La classica teoria della leggibilità suggerisce che una colonna ideale dovrebbe contenere da 70 a 80 caratteri per riga(da 8 a 10 parole in inglese).Pertanto, ogni volta che la larghezza di un blocco di testo supera circa 10 parole,considerare l’aggiunta di un punto di interruzione.

Diamo un’occhiata più approfondita all’esempio di post sul blog sopra.Su schermi più piccoli, il carattere Roboto a 1em funziona perfettamente dando 10 parole per riga, ma schermi più grandi richiedono un breakpoint.In in questo caso, se la larghezza del browser è maggiore di 575px, la larghezza del contenuto ideale è 550px.,

Evita semplicemente di nascondere il contenuto #

Fai attenzione quando scegli il contenuto da nascondere o mostrare in base alle dimensioni dello schermo.Non semplicemente nascondere il contenuto solo perché non si può andare bene sullo schermo.Le dimensioni dello schermo non sono un’indicazione definitiva di ciò che un utente potrebbe desiderare.Ad esempio, eliminare il conteggio dei pollini dalle previsioni del tempopotrebbe essere un problema serio per chi soffre di allergie primaverili che hanno bisogno delle informazioniper determinare se possono uscire o meno.,

Visualizza i punti di interruzione delle query multimediali in Chrome DevTools #

Una volta impostati i punti di interruzione delle query multimediali,vorrai vedere come appare il tuo sito con loro.È possibile ridimensionare la finestra del browser per attivare i punti di interruzione,ma Chrome DevTools ha una funzione integrata che rende facile vedere come appare una paginasotto diversi punti di interruzione.

Per visualizzare la pagina sotto diversi punti di interruzione:

Aprire DevToolsand quindi attivare la modalità dispositivo.Questo si apre in modalità reattiva per impostazione predefinita.

Per visualizzare le query multimediali, apri il menu Modalità dispositivo e selezionamostra query multimediali per visualizzare i punti di interruzione come barre colorate sopra la pagina.

Fare clic su una delle barre per visualizzare la pagina mentre la query multimediale è attiva.,Fare clic destro su una barra per passare alla definizione della query multimediale.

---