Come mostrare un contenuto di Blogger solo su mobile, solo su desktop o solo per certe risoluzioni.

Come creare un vincolo utilizzando un CSS per mostrare un contenuto solo per determinate risoluzioni o mostrarlo solo su desktop o solo su mobile con i tag condizionali.

Mentre qualche anno fa il problema maggiore degli webmaster era quello di mostrare lo stesso layout in funzione dei diversi browser ora la maggiore preoccupazione riguarda come viene visto il blog quando si apre con i diversi dispositivi da mobile o da desktop.

In un futuro neppure troppo lontano l'apertura di pagine web con il computer risulterà minoritaria rispetto all'utilizzo di smartphone o addirittura di Smart TV. Se i contenuti testuali sono visibili in modo ottimale con tutti i dispositivi ma non è così per tutti gli oggetti HTML.

Mentre per le immagini lo stesso Blogger ha risolto la questione ridimensionandole automaticamente quando sia stata attivata la versione mobile del sito non è così per i video, per le tabelle, ecc

Ho mostrato in altri post come rendere Responsive i video di Youtube e le tabelle personalizzate. In questo articolo vedremo invece come selezionare i contenuti da mostrare in un sito. Ci potrebbero essere degli oggetti HTML che non è possibile rendere Responsive e quindi da mostrare solo nella versione desktop e magari sostituirli con altri oggetti HTML nella versione mobile.

Un'altra discriminante è quella della risoluzione. Si può avere l'esigenza di mostrare un dato oggetto solo quando la risoluzione del dispositivo sia maggiore di un certo valore, quando sia inferiore a un certo valore o quando sia compresa in un certo intervallo di valori.

COME MOSTRARE UN OGGETTO HTML SOLO SU MOBILE O SOLO SU DESKTOP

Per questa personalizzazione bisogna creare delle classi di stile apposite che potremo chiamare rispettivamente .solodesktop e .solomobile. Nella piattaforma Blogger esistono i tag condizionali che permettono di selezionare la versione in cui mostrare un contenuto. 

Si va su Modello -> Modifica HTML, si cerca la riga </head> quindi subito sopra si incolla il codice

<b:if cond='data:blog.isMobile'>
<style>
.solodesktop {display:none;}
</style>
</b:if>
<b:if cond='!data:blog.isMobile'>
<style>
.solomobile {display:none;}
</style>
</b:if>

Si salva il modello. Quando si vogliono pubblicare dei contenuti visibili solo nella versione desktop o nella versione mobile dobbiamo incollare nell'Editor del post questo codice

<div class="solodesktop">
... Il codice inserito in questo punto creerà un contenuto visibile solo nella versione desktop del blog ...
</div>

oppure quest'altro

<div class="solomobile">
... Il codice inserito in questo punto creerà un contenuto visibile solo nella versione mobile del blog ...
</div>

Con questa personalizzazione i rispettivi contenuti saranno mostrati solo nei dispositivi mobili e solo in quelli desktop indipendentemente dalla loro risoluzione. Per esempio un netbook visualizzerà i contenuti della classe "solodesktop" anche se ha una risoluzione più bassa di un tablet in cui invece non si vedranno. La differenza tra versione mobile e desktop su Blogger è data dagli URL che per la versione mobile vengono addizionati della stringa ?m=1.

COME MOSTRARE UN OGGETTO HTML IN FUNZIONE DELLA RISOLUZIONE

Vediamo adesso come creare dei vincoli per mostrare alcuni contenuti solo quando la risoluzione del dispositivo con cui viene aperta la pagina sia inferiore a un certo valore, sia superiore a un dato valore o sia compresa in un intervallo di valori.

Per questa personalizzazione si utilizzano gli attributi di Media Query. Si va su Modello -> Modifica HTML e, subito sopra alla riga </head>, e si incolla un codice come il seguente

<style>
@media screen and (min-width: 800px) {
.onlysmartphone {display:none;}
}
@media screen and (max-width: 1280px) {
.onlydesktop {display:none;}
}
@media screen and (max-width: 1000px) {
.desktoptablet {display:none;}
}
</style>

Se adesso nell'Editor di Blogger incolliamo un codice come questo

<div class="onlysmartphone">
  ...Il codice inserito in questo punto sarà visibile solo nei dispositivi con risoluzione inferiore agli 800 pixel ...
</div>

l'oggetto HTML inserito tra apertura e chiusura del tag div sarà visibile solo con dispositivi con risoluzione inferiore a 800 pixel. Se utilizziamo la classe onlydesktop il contenuto sarà invece visibile solo con dispositivi aventi risoluzione superiore ai 1280 pixel. Infine con la classe desktoptablet sarà visibile solo per dispositivi con risoluzione superiore a 1000 pixel.

I valori dei breakpoint delle risoluzioni (800, 1000 e 1280) sono assolutamente arbitrari.

 

Si può testare il funzionamento di questi codici con il tool Screenfly.

CONTENUTI IN FUNZIONE DI RISOLUZIONE E DISPOSITIVO

È possibile unificare i due codici e imporre due vincoli, uno per il dispositivo e uno per la risoluzione. Per esempio se si incolla subito sopra a </head> questo codice

<b:if cond='!data:blog.isMobile'>
<style>
.onlysmartphone {display:none;}
</style>
</b:if>
<style>
@media screen and (min-width: 800px) {
.onlysmartphone {display:none;}
}
</style>

si creeranno due vincoli. Il contenuto compreso all'interno di un div di questo genere

<div class="onlysmartphone">
... Il contenuto incollato qui si visualizzerà solo da dispositivi mobili e solo se hanno una risoluzione inferiore a 800 pixel ...
</div>

inserito in Modalità HTML in un post di Blogger sarà visualizzato solo se aperto con un dispositivo mobile che abbia una risoluzione inferiore agli 800 pixel. Utilizzando queste personalizzazioni si possono per esempio mostrare dei banner pubblicitari solo su mobile o solo su desktop incollandone il codice direttamente all'interno di un post.