Questa pagina è un completamento della guida Come creare un sito da zero


Tutti sapete che, nell'era di dispositivi mobili, un sito web deve imprescindibilmente essere responsive e soddisfare il test di verifica di Google Search Console: https://search.google.com/test/mobile-friendly.

Differenza tra "mobile responsive" e "mobile friendly":
Un sito mobile responsive è un sito con un contenuto dinamico che modifica dimensioni e ordinamento secondo la larghezza dello schermo, in modo da adattarsi a tutti i dispositivi.
Un sito mobile friendly è un sito che possiede una seconda versione di se stesso semplificata per i dispositivi mobili. Non si adatta, quindi, allo schermo come il sito responsive e sacrifica, nella versione mobile, funzionalità e contenuti.

È evidente che la soluzione migliore per la navigazione sia creare un template mobile responsive.

Nel corso della guida "Come creare un sito da zero" vi ho offerto dei layout responsive già predisposti per essere tali, ma credo sia importante, per un webmaster, approfondire il discorso e capire quali siano le caratteristiche e le regole che possono trasformare un sito web formato desktop in un sito web che si adatta a tutte le dimensioni dei vari schermi su cui può essere visualizzato.
Per godere di queste caratteristiche, un sito deve poter mantenere un layout corretto e stabile quale che sia il dispositivo utilizzato dal visitatore e deve anche poter modificare alcune caratteristiche del layout qualora la dimensione del dispositivo non permetta di mantenerle.

La larghezza del sito

La larghezza del sito deve, come abbiamo detto, adattarsi a tutti gli schermi. Un errore che fanno tanti webmaster è quello di costruire il sito basandosi sulle dimensioni dello schermo del proprio computer, dando per scontato che appaia allo stesso modo anche sugli altri schermi. Ovviamente non è così. Un altro errore è quello di preoccuparsi unicamente della visualizzazione sugli schermi più piccoli e sui dispositivi mobili.
Vero che la visualizzazione su mobile è la cosa più importante, attualmente, ma non dimentichiamo che esistono anche schermi molto grandi, per i quali si pone il problema inverso.

I monitor Full HD, in genere, possono raggiungere una risoluzione di 1920 px in larghezza. Il mio consiglio è quello di impostare la stessa larghezza massima per il sito. Per le risoluzione maggiori, potete aggiungere uno sfondo fisso che riempia gli spazi laterali vuoti che verrebbero a formarsi. Personalmente, non consiglio di avventurarsi nell'ottimizzazione del sito per risoluzioni maggiori. Oltre che complicato, risulterebbe addirittura impossibile in certi aspetti.

Le media queries

Un grande aiuto per creare un sito responsive ci viene dato dalle "media queries", quindi, cerchiamo subito di capire:
Cosa sono le media queries?
In coerenza con lo spirito di questo sito, cercherò di spiegarlo in modo semplice e comprensibile.
Le media queries sono delle regole uguali alle altre che si trovano nel foglio di stile, ma che vengono applicate solo e unicamente a determinate condizioni specificatamente indicate.
Facciamo subito un esempio:

Mettiamo di avere questa regola nel foglio di stile....

.box {
width: 600px;
}

..che determina che tutti gli elementi a cui viene applicata la classe box debbano avere la larghezza di 600px..
..e mettiamo di avere l'esigenza, per motivi di visualizzazione, che tale larghezza diminuisca quando lo schermo del dispositivo in uso è inferiore ad una certa dimensione.
Per esempio, potremmo scrivere cosí:

Cosa abbiamo stabilito?
Che tutti gli elementi con classe "box", se la pagina viene visualizzata su un dispositivo che ha lo schermo di larghezza che va da 0 a 800px al massimo, dovranno avere la larghezza di 400px.
Questa regola sovrascriverà quella primaria indicata nel foglio di stile solo e se le caratteristiche di larghezza dello schermo saranno quelle indicate dalla media query.

Spero che questo primo esempio vi abbia cominciato a chiarire un pochino le idee.
Sfruttando questa proprietà del foglio di stile, possiamo determinare la larghezza sia dell'intero sito, sia degli elementi in esso contenuti e/o contenuti nelle singole pagine, adattandoli alla visualizzazione per qualunque dimensione dello schermo.

Mica male eh?

Le regole che si possono stabilire tramite le media queries, naturalmente, non sono limitate alle dimensioni degli elementi, ma possono essere applicate per modificare ogni regola del foglio di stile che sia applicata ad un qualunque elemento del sito o della pagina (color, font, border, shadow, background, ecc..). Non ci sono limiti.

È possibile indicare non solo la largezza massima dello schermo, ma anche la larghezza minima, oppure entrambe qualora si volesse definire un intervallo:

@media screen and (min-width: 600px)
@media screen and (min-width: 600px) and (max-width: 900px)

La sintassi che ho usato negli esempi è quella più comunemente utilizzata, ma ci sono altri tipi di sintassi, riassumendo:

• @media                             (in genere utilizzato per indicare schermi piccoli)
• @media screen and          (per tutti gli schermi con la specifica che si sta parlando di screen e non di altri media, es: print)
• @media only screen and  (la keyword "only" indica che la regola deve essere ignorata se si tratta di vecchi browser)

È possibile aggiungere un numero indefinito di media queries, facendo attenzione, sempre, alla chiusura delle parentesi graffe e ordinandole secondo l'indicazione della larghezza, in calando. Oltre a questi tipi, ce ne sono altri molto più specifici che, se siete interessati, potrete trovare nelle guide in rete espressamente dedicate.
Voglio, però, parlarvi di..

@media print

..che serve a configurare la pagina per renderla idonea alla stampa.
Anche in questo caso, credo che un esempio chiarisca meglio delle parole:

In questo modo, dico al browser che, quando l'utente clicca per avviare la stampa di una pagina (in qualunque modo lo faccia), l'anteprima di stampa dovrà soddisfare le regole inserite. Vale a dire, per l'esempio, che il body dovrà avere un margine di 10px, che la colonna centrale dovrà avere una larghezza del 100% e che le sezioni nav, sidebar e footer non dovranno essere visibili.

NOTA: affinchè le media queries funzionino correttamente, non dovete dimenticare di inserire questo metatag nella zona head:

<meta name="viewport" content="width=device-width, initial-scale=1">

Questo metatag serve per comunicare al browser in che modo deve gestire la "viewport" (area di visualizzazione). In pratica, diciamo al browser di impostare la larghezza della viewport in base alla larghezza del dispositivo utilizzato dall'utente.

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Torna alla pagina principale:Creare un sito da zero ->>