Pubblicato il 26/04/15e aggiornato il

Come rendere Mobile Friendly un blog su Blogger.

Come modificare il modello per rendere un blog su piattaforma Blogger Mobile Friendly e più usabile se aperto da cellulare, tablet o da altro dispositivo mobile.
A partire dal 21 Aprile scorso Google ha introdotto un nuovo fattore di ranking nel suo algoritmo che già ne contava più di 200. I risultati di ricerca hanno infatti iniziato a penalizzare i siti non mobile friendly a beneficio di quelli che invece abbiano una versione mobile facilmente usabile

Come illustrato nel post appena linkato Google ci offre lo strumento del Test di Compatibilità per verificare che il nostro sito abbia le caratteristiche di essere ben visibile anche da mobile. Gli utenti di Blogger sono favoriti dal fatto che esiste la possibilità di abilitare la versione mobile direttamente da Modello > Cellulare. Questa soluzione non sempre è valida esteticamente e allora si può provare a risolvere convertendo il nostro modello in Responsive

Vediamo come rimanendo nell'ambito di un modello Mobile Friendly per Blogger si possa personalizzare anche la versione mobile con ovvie limitazioni.  

CODICE MODELLO PER MOBILE DI BLOGGER


Il codice del modello per la versione mobile di Blogger è suddiviso almeno in due parti, quella all'interno dei tag <body> e quella invece del CSS che si trova nella sezione <b:skin>. Si possono riconoscere andando su Modello > Modifica HTML e effettuando una ricerca tramite Ctrl+F con la query "mobile". Nella prima parte denominata Variabile definitions ci sono le impostazioni che derivano dal Designer Modelli e che in linea di massima sono ereditate dalla versione desktop.

versione-mobile-blogger

Sempre nella sezione dei CSS andando più in basso si trova il blocco di codice per il mobile

css-mobile-blogger

I CSS per la versione mobile è nei modelli non vecchissimi iniziano dal commento /* Mobile e i vari fogli di stile si differenziano da quelli per il desktop per l'aggiunta di .mobile nel codice. Per esempio si può trovare un codice come questo

.mobile .date-header span {
  padding: 0.1em 10px;
  margin: 0 -10px;
}
.mobile h3.post-title {
  margin: 0;
}
.mobile .footer-outer {
  border-top: none;
}

sono tre blocchi di codice che determinano l'aspetto nella versione mobile rispettivamente della data, del titolo del post e di tutto il footer.  Evidentemente si può intervenire su questi codici aggiungendo una o più righe o modificando quelle presenti per cambiare l'aspetto da mobile lasciando inalterato quello della versione desktop.

Se si va su Modello > Modifica HTML > Vai al widget > Blog1 si visualizzano tutte le sezioni 

versione-mobile-blogger[4]

Quelle che contengono mobile servono specificatamente per la versione del blog visualizzata con cellulari e tablet. Si tratta di tre sezioni il cui codice può essere visualizzato per intero cliccando sulla freccetta nera posta sulla sinistra. Quella più utile inizia con la riga

<b:includable id='mobile-post' var='post'>

e determina l'aspetto dell'area del post nella versione mobile. In sostanza se si vogliono inserire dei bottoni, dei banner o comunque modificare qualcosa bisogna operare all'interno di questa sezione. 

COME FARE PER INSERIRE UN CODICE SOLO NELLA VERSIONE DESIDERATA


Ci sono però dei codici che non possono essere inseriti con le modalità che abbiamo appena visto. Pensiamo per esempio a un menù che vogliamo sia visualizzato solo nella versione desktop. Oppure pensiamo a una personalizzazione particolare con un menù per la versione desktop e un altro menù responsive per quella mobile. Vediamo quali sono i tag condizionali da usare in questi casi

<b:if cond='data:blog.isMobile'>
      <!-- Incollare il contenuto visibile solo da mobile -->
   </b:if>

    <b:if cond='!data:blog.isMobile'>
      <!-- Incollare il contenuto visibile solo da desktop -->
    </b:if>

    <b:if cond='data:blog.isMobile'>
      <!-- Incollare il contenuto visibile solo da mobile -->
  <b:else/>
      <!-- Incollare il contenuto visibile solo da desktop -->
    </b:if>

Con i primi due tag condizionali si inserisce solo il codice che ci serve per quella data versione mentre con il terzo si inseriscono i codici di entrambe le versioni in modo che automaticamente si visualizzi quello che abbiamo previsto per desktop e mobile come nell'esempio fatto dei due menù. Al posto della condizione
   <b:if cond='!data:blog.isMobile'>
si può usare quest'altra condizione
<b:if cond='data:blog.isMobile == "false"'>
che utilizza il valore booleano false e che è logicamente equivalente alla precedente.

COME FARE CON I WIDGET PER MOBILE E DESKTOP


In linea di massima i widget posizionati nella sidebar non vengono visualizzati nella versione mobile. Però ci potrebbero essere anche dei widget nell'area del post come per esempio degli slideshow che per ovvie ragioni non vogliamo mostrare nella versione mobile e che vogliamo sostituire con altri widget meno invasivi. Su Blogger si possono utilizzare i tre tag  

mobile='yes'        -     mobile='no'     -      mobile='only'

con ovvio significato. Si va su Modello > Modifica HTML e si cerca il widget in questione.  Si aggiunge o si modifica uno dei tre tag per mostrare o meno il widget nella versione mobile

versione-mobile

nel campo di azione del tag b:widget e cliccando sulla freccetta nera per visualizzare tutto il codice. I tag mobile='yes' e  mobile='no' funzionano bene mentre il tag mobile='only'  per mostrare un widget solo e unicamente nella versione mobile spesso non porta a dei risultati.

COME MOSTRARE UN WIDGET SOLO NELLA VERSIONE MOBILE


Vediamo una possibile alternativa a  mobile='only' qualora si volesse mostrare un gadget solo nel mobile. Occorre innanzitutto installarlo da Layout > Aggiungi un gadget quindi andare su Modello > Modifica HTML e cercarlo per poi visualizzarne tutto il codice eventualmente cliccando sulla freccetta nera. Si scorre detto codice e si cerca la riga

<b:includable id='main'>

Dopo aver aggiunto il tag mobile='yes',  subito sotto a questa si incollano queste nuove righe

<b:include cond='data:blog.isMobile' name='content'>
</b:include>
<b:includable id='content'>

in questo modo

versione-mobile-blogger[6]

Aggiungere poi la riga </b:includable> prima delle due righe
</b:includable>
  </b:widget>
in questo modo



Si salva il modello. Ricordo che prima di ogni modifica del template è assolutamente necessario salvare una copia dello stesso per un eventuale ripristino. Nella versione mobile sono da evitare widget troppo pesanti o che utilizzano file javascript esterni. È anche consigliabile non mostrare dei gadget che comportino delle difficoltà tattili  come quello delle Etichette o quello dell'Archivio.

COME ADATTARE GLI ELEMENTI TATTILI ALLA VERSIONE MOBILE


Google suggerisce che per la versione mobile gli elementi tattili debbano avere la dimensione di un dito cioè di circa 10mm. Ci sono anche delle misure minime consigliate che sono di 7mm per altezza e larghezza e di 5mm per la distanza tra i vari elementi.

Facciamo un esempio pratico. Per migliorare l'aspetto da mobile di un gadget come quello delle Etichette che magari ci interessa mostrare anche a chi apre il nostro sito con il cellulare possiamo modificare il suo CSS che come abbiamo visto si trova nella sezione <b:skin> dopo il commento  /* Mobile. Cerchiamo con la query .mobile se sia o meno presente un foglio di stile per le Etichette da mobile vale a dire che abbia accanto a .mobile anche il tag Label1. Quasi sicuramente non ci sarà. Possiamo quindi crearlo da soli aggiungendo in tale sezione subito dopo alla chiusura di una parentesi graffa ( } ) un codice come questo

.mobile .Label ul li a {
  display: block;
  font-size: 180%;
  line-height: 200%;
  padding: 10px 20px;
  margin: 5px;
}

per aumentare dell'ottanta per cento le dimensioni dei caratteri, per raddoppiare il valore dell'interlinea e per aumentare gli spazi all'interno e all'esterno del widget.

Se il testo deborda nella versione mobile si può pensare di troncarlo in modo da mostrare solo il suo inizio. Esteticamente non è il massimo ma è da prendere in considerazione per evitare un risultato peggiore. Il codice da incollare sempre subito dopo la chiusura di una parentesi graffa è 

@media screen and (max-width: 600px) {
  body.mobile {
    word-break: break-all;
  }
}

che troncherà le parole per i dispositivi che abbiano una risoluzione inferiore a 600 pixel.

METATAG VIEWPORT


Nei modelli vecchi o scaricati da internet potrebbe non essere presente il metatag viewport. Tale tag serve per una migliore configurazione della versione mobile di Blogger. Nel codice del modello effettuate una ricerca con tale query per vedere se esista o meno tale tag

tag-viewport

Se non ci fosse subito dopo alla riga <head> incollate questo codice

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport'/>

quindi salvate. Concludo ricordando che per quello che riguarda le immagini non occorre fare nulla perché Google ottimizza automaticamente le immagini postate e le mostra con le dimensioni adeguate al dispositivo con cui viene aperta la pagina in cui sono state postate.




11 commenti :

  1. A me il codice da inserire per visualizzare un widget solo nella versione mobile, non va.
    Mi esce: Errore di analisi XML, riga 2242, colonna 5: The element type "b:includable" must be terminated by the matching end-tag ""

    RispondiElimina
    Risposte
    1. C'era un errore. Ho modificato il codice
      @#

      Elimina
    2. Ho testato. Per il widget delle etichette funziona perfettamente
      @#

      Elimina
  2. Buona sera, tentavo di inserire il banner per i cookie nella versione mobile del mio blog su blogger ma il codice HTML nel modello non va oltre la riga2100, credo che la riga che serve sia la 2270...avete qualche consiglio?grazie

    RispondiElimina
    Risposte
    1. Che cosa? Cosa c'entra il numero di riga? Per inserire il banner devi incollare il codice sopra alla riga
      < / body > (senza spazi) che devi cercare con Ctrl+F. Si trova quasi in fondo al modello
      @#

      Elimina
  3. Buongiorno! Grazie dei post utilissimi e delle risposte! sono giorni che cerco di risolvere la questione cookie per il mio blog. Al momento ho eliminato i pulsanti social, in questo modo dovrebbe bastare il banner di blogger. Nella versione mobile il banner non compare. Non ho capito però quale codice devo copiare sopra < / body >, che ho trovato nel widget Blog1. Grazie! :)

    RispondiElimina
    Risposte
    1. Purtroppo il banner non compare nella versione mobile. Puoi però disattivarla e quindi sei a posto anche se ti consiglio di usare un banner come questo
      www.ideepercomputeredinternet.com/2014/09/cookie-consenso-privacy-banner-blogger-wordpress.html
      Per rendere il template Responsive purtroppo non c'è solo d copiare ma da modificare il template come illustrato nel post
      @#

      Elimina
  4. Buongiorno Ernesto,
    sto cercando di rendere visibile un menù etichette a tendina creato con il procedimento che ci indichi al link qui sotto...
    http://www.ideepercomputeredinternet.com/2011/04/menu-tendina-verticale-colorato-con-le.html
    questo menù funziona perfettamente in versione desktop ma non riesco a farlo apparire nella versione mobile...
    ho seguito il procedimento che illustri qui sopra intervenendo sui css ma non appare...
    qualche consiglio?
    Grazie Andrea .

    RispondiElimina
    Risposte
    1. Il consiglio è di inserire nella versione mobile un menù diverso da quello della versione desktop. Prova con uno di questi
      http://www.ideepercomputeredinternet.com/2015/06/blogger-responsive-menu.html
      http://www.ideepercomputeredinternet.com/2015/08/responsive-multilevel-menu-blogger-mobile.html
      @#

      Elimina
  5. Ciao, innanzitutto complimenti per l'articolo.
    Ti volevo chiedere un aiutino.
    Non capisco come modificare la versione mobile del mio blog, almeno per quanto riguarda la navbar.
    Nella versione standard riesco a gestirla, ma in quella mobile mi mette uno spazio vuoto inutile all'inizio della pagina:
    http://oggieunaltropost.blogspot.it/?m=1
    guardando il codice ho visto che mi mette un 30px di altezza sulla navbar, che non riesco proprio a far sparire
    ho provato anche con .mobile .navbar ecc... negli stili, ma niente, non se lo fila, neanche mettendo !important
    sono sicuro di sbagliare qualcosa ma non capisco cosa :)

    Grazie in anticipo!

    RispondiElimina
    Risposte
    1. @# Prova a incollare questo codice
      <b:if cond='data:blog.isMobile'>
      <style>
      .content {
      margin-top:-30px !important;
      }
      </style>
      </b:if>
      subito sopra alla riga </head>

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.