fbpx

I 4 principi fondamentali per realizzare un sito web responsive con le media query

I 4 principi fondamentali per realizzare un sito web responsive con le media query

Il Responsive Web Design ha compiuto ben 10 anni! Vi ricordate di quel famoso articolo di Ethan Marcotte chiamato “Responsive Web Design” che ha rivoluzionato il modo di programmare i siti web?

Mi ricordo che in quegli anni tutti hanno dovuto adeguare i siti web alle nuove regole del responsive web design, altrimenti sarebbero stati penalizzati da Google. Tantissimi clienti mi contattavano per adeguare il loro sito web, la gente era frenetica e come me curiosa di capire tutto ciò che circondava il RWD: mediaquery, breakpoint, viewport, tutti elementi chiave del design responsive.  In quel periodo pubblicavo per Webhouse, un articolo chiamato “Come trasformare un layout fisso in un layout Responsive” che ha riscosso molto successo a dimostrazione di come quest’argomento ha destato subito un grosso interesse sin dall’inizio.
Dopo ben 10 anni cosa possiamo rilevare?
Ormai tutti i siti web si sono adeguati al RWD e nell’era degli smartphone ciò è fondamentale perché ormai tutti fanno tutto sui cellulari e sui tablet.  È quindi fondamentale far in modo che i layout dei siti web si adattino a tutte le risoluzioni web.
In tutti questi anni sono cambiate anche le dimensioni degli schermi, sono stati introdotti diversi strumenti tecnologici con i quali interagiamo, sono aumentati i dispositivi touch screen, come gli apple watch, o gli stessi computer utilizzati in macchina, per cui il RWD ha dovuto ottimizzare l’esperienza web per ognuno di questi strumenti.

Proprio per l’importanza di questa tecnica di progettazione dei siti web ritengo sia importante parlarvi dei principi fondamentali per poter realizzare i siti web responsive ed il tutto sarà supportato come al solito da una risorsa da scaricare a da utilizzare a vostro piacimento.

Il mio esempio

#1 – Impostare il viewport
Le pagine Web ottimizzate per una molteplicità di dispositivi devono includere il tag “meta viewport” nell’intestazione del documento della pagina html. Questo tag da al browser le istruzioni per controllare le dimensioni della pagina e il valore del meta viewport di with=device=width dice al browser di impostare la larghezza (width) della viewport in base alla larghezza dello schermo del dispositivo (device-width).
Con questa istruzione, su un iPhone con orientamento “portrait” o ritratto, la larghezza della viewport sarà pari a 320px; 480px se lo smartphone è in orientamento landscape o panorama; sarà di 1024px su un iPad in modalità landscape,  e così via. Saremo poi noi ad adattare il contenuto a queste dimensioni! Inoltre con la proprietà user-scalable possiamo decidere se  consentire o meno all’utente di ridimensionare/zoomare la pagina.
La proprietà “initial-scale” imposta il fattore di zoom iniziale, relativo al momento in cui la pagina viene caricata. Con minimum-scale e maximum-scale possiamo invece stabilire di quanto l’utente può zoomare la pagina, fissando dei limiti (avendo usato user-scalable=no queste ultime istruzioni sono in realtà un di più).  Questi parametri sono sufficienti per poter cominciare. Per assicurare che i vecchi browser possano leggere gli attributi in modo adeguato, è importante utilizzare una virgola per separare gli attributi stessi quindi scriviamo il nostro tag viewport in questo modo:

<meta name=”viewport” content=”width=device-width, user-scalable=no,  initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0″>

#2 – Layout
La chiave fondamentale da cui partire per poter realizzare un layout responsive è l’utilizzo delle misure relative in percentuale che è un’unità proporzionale al valore del genitore di quella proprietà;

con l’utilizzo di percentuali e questo fasi che le colonne siano adattate in percentuale rispetto al contenuto e quindi le colonne diventavano più strette in base alla dimensione del viewport  e anche qui non si formano le barre di scorrimento.

Prima di vedere come funzionano le media query è bene sapere che il Css moderno utilizza tecniche di layout come Flexbox, Grid Layout, and Multicol che creano le griglie flessibili in maniera più semplice ma a mio parere con meno flessibilità e controllo specifico. Invece utilizzando le media query riesci a controllare ogni singolo elemento e certo il tutto diventa più complesso. Ma è anche importante conoscere anche questi strumenti che possono risultare utili.
Tornando alle media query come funzionano?

Le media query ci permettono di inserire uno stile che permette di modificare lo stile generale a determinate dimensioni; nelle media query dobbiamo inserire solo la riga di codice che ci interessa modificare lasciando stare tutte le altre e che quindi non necessitano di cambiamento.  Per esempio abbiamo questo contenitore:
div{
width:20%;
font-size:1em;
margin:0 auto;
overflow:hidden,
……
}
che ad un viewport di massimo 480px deve diventare del 100%; nella media query inseriremo solo questo codice:

@media only screen and (max-width:480px){

div{
width:100%;
}

}
Molto importante è di non dimenticare la chiusura della media query dove la prima parentesi graffa è quella che chiude lo stile e la seconda è quella che chiude la media query. Se vi dimenticaste di inserire quella di chiusura le modifiche potrebbero essere non lette dal browser anzi al 99%.

#2.1 – Testo
Dopo aver costruito il layout e aver reso fluidi tutti i contenitori anche il testo va impostato in che va espresso in un’altra misura relativa ed in tal caso la migliore è la misura espressa in “em” che si basa sulla grandezza dei font presenti nell’elemento root (<html>), che di base corrisponde a 16px per molti browser. Dopo aver fatto questo va valutato se il testo è settato in modo corretto alle varie dimensioni del browser per evitare che il layout scrolli orizzontalmente creando la barra di scorrimento.

#2.2 – Immagini
Spesso può accadere che un’immagine che è visualizzata ad una larghezza più grande del viewport con la sua dimensione fissa che il sito sia scrollato orizzontalmente e ciò succede proprio quando l’ immagine è più larga del viewport. Per evitare ciò questo contenuto va sistemato per adattare l’immagine alla dimensione del viewport e si usa dare all’immagine una dimensione massima: max-width del 100%.
Questo farà restringere l’immagine allo spazio esistente, ma grazie al max-width, l’immagine non si allungherà rispetto alla sua dimensione naturale. Quindi il codice da inserire per le immagini è :

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

#3 – Scegliere i breakpoints
I breakpoint non devono essere definiti in base ai tipi di dispositivi, ma in base al contenuto stesso. Ma cosa sono i breakpoint? Sono i punti di rottura, cioè quei punti in cui il contenuto impostato inizialmente ad una certa risoluzione, man mano che asi restringe o si allarga, si rompe e quindi va sistemato all’interno della media query. I breakpoiint sono espressi in pixel ed inserite nelle media query, stabiliscono quando il browser, raggiunta  quella larghezza attuerà gli stili inseriti nelle media queries. Ma da quale risoluzione e da quale larghezza si deve partire? Il consiglio è quello di partire dagli schermi più piccoli per poi arrivare al più grande.

@media screen{
/* lo stile screen va qui */
}
Come vedete dal codice la media query ha una parentesi di apertura ed una di chiusura. Lo stile a sua volta di un tag da modificare ha anch’esso una parentesi di apertura ed una di chiusura, quindi fare attenzione a non dimenticarne nessuna perchè altrimenti le modifiche non verrebbero attuate. Quindi:

@media screen{
div{
/* lo stile screen va qui */
}
}

#4 – Media queries

Vediamo le caratteristiche principali delle media queries:
• larghezza (min-width, max-width)
• altezza (min-height, max-height)
• orientamento
• aspect-ratio
Tutte queste caratteristiche hanno un’eccellente supporto del browser. Per quanto riguarda la larghezza di solito si inserisce una larghezza minima ed una larghezza massima e quindi un range per far si che le modifiche sia limitate a quel range di dimensioni.  Per quanto riguarda l’altezza è la stessa cosa ma io di solito non utilizzo mai queste caratteristiche.
L’orientamento può essre di tipo “portrait” o ritratto oppure “landscape” o panorama; Nel primo caso l’aktezza è più grande o è uguale alla larghezza, mentre nel secondo caso la larghezza è più grande dell’altezza.

@media (orientation: landscape) {
body {
flex-direction: row;
}
}

@media (orientation: portrait) {
body {
flex-direction: column;
}
}
L’aspect-ratio invece ti permette di specificare un valore minimo ed un valore massimo del rapporto in scala tra la larghezza e l’altezza:
@media (min-aspect-ratio: 8/5) {
div {
background: #9af; /* blue */
}
}

Ma oltre a questi c’è per esempio la possibilità di capire se un utente utilizza lo schermo touchscreen con le seguenti caratteristiche:
• hover
• pointer
• any-hover
• any-pointer
Ma nell’ esempio non utilizzeremo questi elementi. Se volete approfondire di più queste caratteristiche ecco i riferimenti per voi:  hover, any-hover, pointer, any-pointer.

Per verificare il risultato Responsive della pagina basta utilizzare uno degli strumenti online come Responsinator:
Guarda il risultato

— SCARICA LA RISORSA “Layout Responsive con media query” —
Per piacere seguici e metti mi piace:
Nessun Commento

Sorry, the comment form is closed at this time.

Social media & sharing icons powered by UltimatelySocial