Come usare i tool Ispeziona Elemento e Analizza Elemento per personalizzare la versione mobile di Blogger.

Come usare Analizza Elemento e Ispeziona Elemento per personalizzare l'aspetto della versione mobile di Blogger indipendentemente da quella desktop.

I browser più usati hanno già configurati degli strumenti per gli sviluppatori in grado di aiutare gli webmaster a personalizzare il layout dei loro siti. Il tool di Chrome si chiama Ispeziona Elemento mentre quello di Firefox è denominato Analizza Elemento.

Per accedere a questi strumenti bisogna aprire la pagina da investigare quindi cliccare con il destro del cursore e scegliere appunto Ispeziona Elemento in Chrome e Analizza Elemento in Firefox. In questo articolo vediamo come sia possibile personalizzare la versione mobile di un blog su piattaforma Blogger. Innanzitutto bisogna già aver attivato la versione mobile andando su Modello > Cellulare per poi cliccare sulla icona della ruota dentata, mettere la spunta a Sì. Mostra il modello per cellulari nei dispositivi mobili e selezionare Personalizza tra tutti i modelli disponibili.

Accedendo a Modello > Modifica HTML si possono trovare le righe di CSS che impostano le regole per l'aspetto del sito nella versione mobile. Tali CSS nei modelli ufficiali di Blogger si trovano solitamente sotto la riga

/* Mobile
----------------------------------------------- */

con blocchi che determinano sfondo, dimensione dei caratteri, colori ecc

La maggior parte di questi blocchi di codice per mobile però non contengono delle impostazioni diverse da quelle desktop. Possiamo aggiungere delle apposite righe di CSS per modificare l'aspetto della versione mobile. Questo però non sempre è possibile come per esempio quando non sia presente il necessario selettore univoco.

COME USARE ISPEZIONA ELEMENTO DA MOBILE

Il tool Ispeziona Elemento di Chrome serve appunto per scoprire i selettori univoci in modo da impostare un adeguato foglio di stile. Per investigare il layout della versione mobile dobbiamo però utilizzare un altro tool come Screenfly che mostrerà l'aspetto di una pagina quando è aperta con cellulare o tablet. All'URL della pagina web di Blogger che vogliamo investigare dobbiamo aggiungere ?m=1 per poi incollarlo nel campo del tool Screenfly e andare su GO

Nel menù in alto si sceglie il dispositivo tra Televisione, Computer, Tablet e Cellulare con la relativa risoluzione. In questo modo si avrà una idea molto precisa anche da computer come si vede una particolare pagina con un dato tablet o una certa marca di smartphone. Quando si è scelta la risoluzione si clicca con il destro del cursore sulla pagina e si sceglie Ispeziona Elemento

Si visualizzerà un riquadro nella parte bassa della pagina che potrà anche essere spostato a destra

Si clicca sulla icona della freccia dentro un riquadro in alto a sinistra che diventerà di colore blu. Con tale icona di colore blu potremo cliccare sull'elemento della pagina da investigare

Come test ho cliccato sulla data che è molto vicina al titolo del post come mostrato qui sotto

Dopo averlo fatto si torna nel riquadro dello strumento, si clicca con il destro del cursore sulla riga che è stata evidenziata quindi nel menù contestuale che si apre si va su Copy CSS Path

In questo modo si potrà copiare il percorso CSS dell'elemento che in questo test è

#Blog1 > div.blog-posts.hfeed > div > h2

Poniamo si voglia solo distanziare maggiormente il titolo del post dalla data. Dovremo quindi creare un CSS specifico che abbia questa struttura

#Blog1 > div.blog-posts.hfeed > div > h2 {margin-bottom:25px;}

Tale codice va incollato su Modello > Modifica HTML subito sopra alla riga ]]></b:skin> per poi salvare il modello. Su Screenfly clicchiamo sulla icona del refresh per verificare le modifiche

Il CSS inserito potrebbe però aver modificato anche l'aspetto della versione desktop. Se verifichiamo che questo è accaduto dovremo utilizzare i tag condizionali specifici per la versione mobile. Mantenendo il CSS di esempio appena usato dovremo ricavarne un codice come questo

<b:if cond='data:blog.isMobile'>
<style>
#Blog1 > div.blog-posts.hfeed > div > h2 {margin-bottom:25px;}
</style>
</b:if>

che va incollato subito sopra alla riga </head>. Si rinfresca nuovamente Screenfly dopo aver salvato il template per verificare che sia tutto a posto nella versione mobile e desktop.

 

COME USARE ANALIZZA ELEMENTO DI FIREFOX

Personalmente preferisco usare Analizza Elemento di Firefox al posto di Ispeziona Elemento di Chrome perché lo trovo più efficace. Bisogna sempre aprire la pagina da investigare su Screenfly e selezionare la risoluzione desiderata quindi si clicca sulla pagina con il destro del mouse e si seleziona Analizza Elemento dal menù contestuale

Stavolta come esempio proviamo a cambiare aspetto del titolo del post quindi clicchiamo sulla icona posta in alto a sinistra come nello strumento di Chrome. Questa diventerà blu. Dovremo poi cliccare con il mouse sull'elemento di cui scoprire il selettore,  in questo caso il titolo del post

Verrà evidenziata la riga dell'HTML di quel dato elemento. Ci cliccheremo sopra con il destro del cursore e sceglieremo dal menù contestuale Copia selettore univoco. Nel test preso in esame il selettore univoco del titolo del post nella versione mobile è

.post-title

che poi è lo stesso anche per la versione desktop. Dovremo quindi utilizzare i tag condizionali per modificare solo la versione mobile creando un codice come questo

<b:if cond='data:blog.isMobile'>
<style>
.post-title {font-size:20px; color:#036; background-color:yellow;}
</style>
</b:if>

da incollare sempre sopra alla riga </head>. È stata modificata la dimensione dei caratteri e cambiato il colore quindi aggiunto anche uno sfondo. Dopo aver salvato il modello si rinfresca il tool Screenfly per verificare che si sia modificato solo da mobile e non da desktop.

Con Ispeziona Elemento di Chrome e ancora di più con Analizza Elemento di Firefox unitamente ai tag condizionali possiamo aggiungere al modello dei CSS per modificare alcuni elementi del layout del nostro sito limitatamente alla versione mobile. Si può fare anche di più e si possono personalizzare gli elementi in funzione della risoluzione del dispositivo con cui si apre. Insieme ai tool mostrati in questo articolo va utilizzato il tag @media screen come mostrato in questo post

Come mostrare un contenuto in funzione della risoluzione del dispositivo con cui è aperto