Come pubblicare un elemento Responsive in una pagina web.

Come modificare i CSS con media query per adattare l'aspetto di una pagina web alle diverse risoluzioni di smartphone, tablet e computer desktop.

Fino a qualche anno fa il problema più snervante per gli webmaster era quello di riuscire a visualizzare il sito in modo omogeneo con tutti i browser. Soprattutto con Internet Explorer si avevano le maggiori difficoltà. Per fortuna le ultime versioni di IE hanno delle rese del codice delle pagine web molto più in sintonia con gli altri browser inoltre si può sempre implementare un codice nel Modello o nel Tema per rendere il sito compatibile con tutti i browser.

Attualmente invece le maggiori problematiche si riscontrano quando il nostro sito viene visualizzato con dispositivi mobili. Alcuni elementi che vengono visualizzati in modo corretto con la versione desktop non sono altrettanto ben mostrati nella versione mobile. L'aspetto del sito visto da mobile è importante anche dal punto di vista SEO dopo che Google ha annunciato di penalizzare i siti non mobile-friendly.

In questo articolo prenderemo in esame una situazione generale mentre nel prossimo mi occuperò più specificatamente del modello di Blogger.

ADATTARE IL CODICE ALLE DIVERSE RISOLUZIONI

Il linguaggio CSS ha messo a disposizione degli sviluppatori dei potentissimi strumenti per risolvere le problematiche dovute alle diverse visualizzazioni. Partiamo da un semplice codice di un rettangolo colorato con una scritta al suo interno con alcuni parametri che ne determinano l'aspetto

<style>
#contenitore {
background: yellow;
width: 500px;
height:200px;
font-size:24px;
text-align:center;
line-height:150px;
color: black;
}
</style>
<div id="contenitore">CONTENITORE</div>

e che si vedrà nello stesso modo nella versione mobile e desktop.

Questo rettangolo colorato avrà quindi la stessa larghezza (500 pixel) nella versione desktop e mobile. Se venisse pubblicato in un post comporterebbe delle difficoltà di visualizzazione con i dispositivi che abbiano una risoluzione più bassa di 500 pixel. Per ovviare si utilizzano i tag media query che possono essere anche personalizzati in funzione dei dispositivi. Il concetto del media query è quello di modificare i CSS in funzione della risoluzione dei dispositivi con cui vengono aperti. Ci sono molte variazioni di media query ma quella base ha un codice come questo

@media screen and (min-width: 320px) and (max-width: 768px) {
/* Qui vanno le regole CSS */
}

con le regole da cambiare quando la risoluzione del dispositivo è compresa tra 320 e 768 pixel. Questo però potrebbe non essere sufficiente visto che c'è grande differenza tra un iPad (768 pixel) e un iPhone 6 Plus (414 pixel) o a maggior ragione con un Blackberry da 320 pixel. Ecco quindi che i tag media query necessari potrebbero essere due, uno per gli smartphone e uno per i tablet.

Se prendiamo in considerazione il codice del rettangolo preso come esempio possiamo modificare la larghezza e, per rendere le cose più chiare, anche i colori del testo e dello sfondo in questo modo

@media screen and (min-width: 320px) and (max-width: 480px) {
#contenitore {
width: 300px;
background: green;
color: blue;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
#contenitore {
width: 400px;
background: gray;
color: red;
}
}

All'interno delle parentesi graffe vanno quindi inseriti dei CSS che a loro volta contengono altre parentesi graffe. Sono stati creati due blocchi di codice. Il primo per gli smartphone che modifica i CSS per i dispositivi con risoluzione da 320 a 480 pixel mentre il secondo è per i tablet con dispositivi che hanno risoluzione da 481 a 768 pixel. Il codice complessivo del rettangolo per adattarlo alle varie risoluzioni può diventare quindi come il seguente 

<style>
#contenitore {
background: yellow;
width: 450px;
height:200px;
font-size:24px;
text-align:center;
line-height:150px;
color: black;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
#contenitore {
width: 250px;
background: #ddd;
color: blue;
}
}
@media screen and (min-width: 481px) and (max-width: 768px) {
#contenitore {
width: 300px;
background: #d2bfff;
color: red;
}
}
</style>
<div align='center'>
<div id="contenitore">
CONTENITORE</div>
</div>

in cui è stato aggiunto anche un tag per centrarlo e sono stati modificati alcuni codici dei colori. Se si incolla questo codice in un post in modalità HTML, si pubblica, si aggiunge ?m=1 al suo URL e si utilizza il tool Screenfly per testare le diverse risoluzioni si avrà questo risultato

Come vedete il rettangolo si sarà perfettamente adattato alle risoluzioni dei dispositivi con cui viene aperto il post in cui è stato pubblicato. Questo esempio naturalmente è il più semplice però tramite il tool Analizza elemento di Firefox e il tool Ispeziona Elemento di Chrome (personalmente preferisco il primo) si può risalire ai selettori univoci per poi creare un CSS che si attivi solo all'interno di determinate risoluzioni in cui ci siano degli inestetismi.

Se consideriamo il caso particolare di Blogger questo sistema di utilizza delle media query funziona benissimo con i CSS che non sono nativi di Blogger mentre ci sono delle difficoltà per i tag specifici di Blogger. La ragione risiede nel fatto che Blogger ha già preimpostati i tag per la versione mobile che infatti può essere attivata da Modello. Se quindi ci sono delle cose che non vanno nell'aspetto del nostro sito aperto da dispositivi mobili dobbiamo innanzitutto vedere se si tratta di elementi esterni a Blogger, come quello mostrato nell'esempio, e quindi in quel caso incollare nel modello i CSS media query subito sopra alla riga ]]></b:skin> per poi salvare il modello. Se invece il problema riguarda i tag specifici di Blogger come potrebbero essere la dimensione dei caratteri del titolo o quella della data o ancora la grandezza del nome del blog allora dovremo procedere in altro modo come vedremo nel prossimo articolo.