Come rendere una pagina web responsive

Hai un sito web ma una delle sue grandi pecche è la fruibilità dai dispositivi mobili? Sapevi che Google ha adottato la filosofia del Mobile First Indexing, cioè la precedenza di visibilità sui motori di ricerca ai siti web mobile-friendly?

Se tra i tuoi obiettivi c’è la SEO mi dispiace, ma non può scappare da questo onere: devi adattare il tuo sito web anche ai dispositivi mobili. La buona notizia è che oggi vedremo come si fa a rendere un sito responsive!

Tuttavia questo è un articolo destinato a chi ha già una conoscenza del linguaggio HTML e CSS, se purtroppo non conosci questi due linguaggi proseguire risulterà difficile. Se sei completamente all’asciutto di questi argomenti, o hai bisogno di qualche rinfrescata ti consigli di utilizzare queste due utilissime risorse:

• Tutorial HTML W3Schools
• Tutorial CSS W3Schools

In tal caso, però, ci tengo a farti sapere che se utilizzi un CMS con un tema, probabilmente la maggior parte (o tutto) il lavoro è stato già fatto dal tema stesso, reso responsive all’origine dagli sviluppatori.

Se invece il tuo sito web è completamente gestito da te, purtroppo, dovrai sporcarti le mani con il CSS e l’HTML. Entriamo subito in azione!

HTML e CSS: Introduzione

Sicuramente conosci già questi due linguaggi, ma ribadire le differenze e gli scopi non fa mai male. Soprattutto per chi ha cominciato da poco a masticare questi linguaggi.

L’HTML (hypertext markup language) è un linguaggio di markup che, preso da solo, consente semplicemente di formattare il testo, assegnare un significato ai nostri testi (se si tratta di un paragrafo, di un sottotitolo o altro) e inserire dei metadati in una pagina.

Una pagina in HTML puro apparirebbe scarna e simile alla pagina di un vecchio libro. La magia avviene quando si unisce al CSS. Questo linguaggio, infatti, consente di personalizzare l’aspetto grafico dei componenti di una pagina html. Può farlo su componenti generali (ad esempio applicare una regola a tutti i paragrafi o a tutta la pagina html) oppure a componenti di classe/specifici (mediante i selettori).

Sebbene nel panorama del web esistano tanti strumenti che ci esonerano dall’usare questi linguaggi, la massima flessibilità e controllo la si può raggiungere solo con loro.

Se non sei neofita di questi linguaggi quello che ho appena detto risulterà inutile e banale, ma adesso passeremo al livello successivo.

Se sei arrivato fin qui, probabilmente, qualche utilizzo di questi due linguaggi lo hai fatto, ma ti manca quel passo in più per avere un pieno controllo della tua pagina web. Dopo aver fatto una bellissima personalizzazione con il CSS, ti sei reso conto che, quando visiti quella pagina da uno smartphone è davvero orribile da vedere. Il testo è grande come lo è sul computer e, per leggere anche brevi testi, devi far scorrere lo schermo. A meno che la tua pagina non contenga l’ingrediente segreto della Coca Cola, alla fine anche il più temerario abbandonerebbe subito la tua pagina. Con conseguenti penalizzazioni da parte di Google e un importante saluto a una consistente fetta di utenti: ricorda che oggi il traffico web è dominato dagli smartphone.

Ricorda bene, come è stato detto in questo articolo relativo alla SEO, che l’abbandono del tuo sito dopo pochi istanti viene letto da Google come “l’utente, pur avendo trovato questa pagina tra i risultati della ricerca, l’ha abbandonata subito; quindi questo risultato potrebbe non essere di qualità e non dovrebbe più apparire tra i risultati”.

Quello che ti sei perso sulla strada, dunque, è la gestione responsive del tuo CSS. E credimi, se sei stato in grado di scrivere del codice CSS per la tua pagina, è molto più facile da fare che da spiegare.

Come scrivere del CSS responsive

La prima cosa da sapere è che non dovrai scrivere codice CSS in modo diverso da come hai fatto finora. Puoi tirare un sospiro di sollievo. Ci sono sostanzialmente due approcci:

• Utilizzo di misure relative (% oppure vh/vw)
• Utilizzo di media query

L’utilizzo di misure relative è quello più semplice e immediato, in quanto consiste nell’allocare in maniera relativa dello spazio. Ad esempio:
.mia_classe {
     width: 100%;
}

È per sua natura responsive, perché si adatterà in base alle dimensioni.

L’unità di misura vh, invece, si riferisce all’altezza della finestra del browser ed è anch’essa una misura relativa. Il valore massimo è 100, quindi si potrebbe vedere come una misura molto simile alla percentuale. Similarmente, la misura vw si riferisce alla larghezza della finestra del browser.

A questo punto sarebbe lecito chiedersi cosa cambia tra vh/vw e la %. La risposta è che vh/vw non dipendono dal contenitore padre, in quanto rappresentano sempre l’altezza o larghezza della finestra. Infatti, se inserissimo un elemento con height 100% in un contenitore che occupa, ad esempio, 300px, allora l’altezza del 100% si adatterebbe a quel contenitore (e quindi sarebbe di 300px). Utilizzando una misura vh o vw l’elemento avrebbe l’altezza o larghezza desiderata (sforando le eventuali dimensioni del contenitore padre).

Un esempio del suo utilizzo è il seguente:
.header {
height: 100vh;
}

Ci sono però circostanze in cui utilizzare le media query diventa utile o necessario. Se ad esempio vogliamo cambiare un elemento grafico al variare delle dimensioni, oppure se vogliamo eliminare degli elementi nel caso di dispositivi mobile/desktop utilizzare le misure relative non ci porterà lontano. Lo stesso discorso si applica al caso della gestione delle dimensioni dei font: in questo caso applicare misure relative potrebbe risultare instabile.

Utilizzare le media query, però, è molto più facile di quello che si possa pensare.

La prima cosa da tenere a mente sono le dimensioni dei differenti dispositivi. Ovviamente non serve conoscerli a memoria, all’occorrenza puoi tornare su questa pagina e vedere i parametri di riferimento.

• Desktop: 1920 x 1080 pixel
• Portatile: 1366 x 768 pixel
• Tablet: 1024 x 768 pixel
• Smartphone: 320 x 480 pixel

Da questi valori dobbiamo prendere il maggiore (quindi, nel caso dello smartphone, tra 320 e 480 dobbiamo considerare il 480) e scrivere la seguente regola CSS:
@media (max-width: 480px) {

}

Attenzione alle parentesi graffe, perché la media query è come “un altro foglio css” al cui interno vanno inserite le regole esattamente come hai sempre fatto. Quindi, ad esempio, una media query per smartphone potrebbe essere questa:
@media (max-width: 480px) {
.sidebar {
display: none;
}

.main {
padding-left: 0;
}

.main p {
font-size: 14px;
}

.main img {
max-width: 100%;
}

}

Come puoi vedere, la prima regola nasconde il menu laterale sul dispositivo mobile. Questo è utile per liberare spazio sullo schermo e rendere più facile la navigazione sulla pagina web. La seconda regola rimuove la barra laterale dal contenuto principale. Questo è utile per rendere il contenuto principale più focalizzato e meno distratto. La terza regola ridimensiona il testo principale in modo che sia più leggibile su un dispositivo mobile. Questo è utile per garantire che i visitatori possano leggere facilmente il testo, anche se stanno usando uno schermo piccolo. La quarta regola ridimensiona le immagini in modo che si adattino alla larghezza del dispositivo mobile. Questo è utile per evitare che le immagini vengano ritagliate o sfocate.

Avrai notato che la scrittura delle regole è uguale a come hai sempre fatto, l’unica differenza è che tutte queste nuove regole sono racchiuse in:
@media (max-width: 480px) {

}

Adesso tutto quello che dovrai fare è dedicare un po’ di tempo a rendere responsive le tue pagine, ma sono sicuro che, dopo un po’, ci proverai anche del gusto a farlo.

Se questa guida ti è stata utile perché non lasci un commento per farcelo sapere?

Vittorio Matranga

In questo blog mi occupo di tematiche legate in diversa forma al tema dell’innovazione e della tecnologia.

Sin da piccolo appassionato di informatica mi divertivo a creare siti web e applicazioni elementari cercando di capire cosa ci fosse sotto il cofano. Questa passione mi ha condotto alla mia professione di informatico dopo aver conseguito una laurea in informatica presso l’Università della Calabria (Unical).

Periodicamente pubblico articoli attinente a questi temi.