Come adattare i blog su Blogger a smartphone e tablet.

Come personalizzare alcuni elementi di un blog su Blogger quali il Nome del Blog, il Titolo del Post, il Testo dell'articolo, la data del post per adattarli alla visualizzazione con tablet e smartphone.

Nel precedente post abbiamo visto come si possa rendere Responsive un elemento di un sito quando se ne conosca il suo selettore univoco e si abbia la consapevolezza degli attributi che debbono essere adattati alle diverse risoluzioni.  Ricordo che il Disegno Responsive è quella tecnica per adattare il layout di una pagina web alla risoluzione del dispositivo con cui si è aperta. Si tratta di un tema molto importante anche dal punto di vista SEO visto che Google da Aprile sta penalizzando i siti non mobile-friendly.

Se si prova a implementare su Blogger la tecnica della media query che abbiamo visto nel precedente articolo avremo dei buoni risultati quando i selettori siano estranei a Blogger come potrebbe essere quelli di un menù, un widget o un altro elemento che non dipenda dal codice nativo di Blogger. Se però proviamo con i CSS media query a adattare le dimensioni per esempio del nome del blog non si noteranno cambiamenti nelle varie risoluzioni dei dispositivi. La ragione dipende dal fatto che Blogger ha già nel codice i tag per adattare i vari elementi del layout alla versione mobile.

La prima cosa da fare è andare su Modello > Cellulare e cliccare sulla ruota dentata. Va messa la spunta su Sì. Mostra il modello per cellulari nei dispositivi mobili. Per quello che riguarda il Modello per cellulari si sceglie Personalizza perché è l'unico che permette di modificare il codice di Blogger per quello che riguarda la sua versione mobile.

I selettori su cui intervenire vanno cercati direttamente nel template. Se si va su Modello > Modifica HTML in modello Semplice subito sotto a /* Mobile ci sarà un codice come questo

/* Mobile
----------------------------------------------- */
body.mobile  {  
   background-size: $(mobile.background.size);}
.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}
.mobile .body-fauxcolumn-outer .cap-top {
  background-size: 100% auto;
}
.mobile .content-outer {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}
body.mobile .AdSense {
  margin: 0 -$(content.shadow.spread);
}
.mobile .tabs-inner .widget ul {
  margin-left: 0;
  margin-right: 0;
}
.mobile .post {
margin: 0;
}
.mobile .main-inner .column-center-inner .section {
  margin: 0;
}
.mobile .header-outer {
}
.mobile .date-header span {
  padding: 0.1em 10px;
  margin: 0 -10px;
}
.mobile h3.post-title {
  margin: 0;
}
.mobile .blog-pager {
  background: transparent none no-repeat scroll top center;
}
.mobile .footer-outer {
  border-top: none;
}
.mobile .main-inner, .mobile .footer-inner { 
  background-color: $(content.background.color);}
.mobile-index-contents {
  color: $(body.text.color);}
.mobile-link-button {
  background-color: $(link.color);}
.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(mobile.button.color);}
.mobile .tabs-inner .section:first-child {
  border-top: none;
}
.mobile .tabs-inner .PageList .widget-content { 
  background-color: $(tabs.selected.background.color);
  color: $(tabs.selected.text.color);  border-top: $(tabs.border.width) solid $(tabs.border.color);  border-bottom: $(tabs.border.width) solid $(tabs.border.color);}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}

Si tratta del codice che determina l'aspetto del sito quando si apre con i dispositivi mobili. I tag che iniziano con il simbolo del dollaro $ prendono il loro valore dalla prima parte della sezione <b:skin> che inizia con /* Variable definitions . Per esempio i tag

background-size: $(mobile.background.size); e color: $(body.text.color);

che ne determinano il colore di sfondo e il colore del testo possono essere modificati andando appunto nelle Variable definitions cambiando il codice del colore su value.

Va considerato che questi valori sono spesso comuni a quelli desktop quindi bisogna stare attenti alle modifiche ed è assolutamente necessario salvare il template prima di procedere. Molti di questi blocchi di CSS sono mancanti dei parametri. Faccio alcuni esempi di come si possa operare. Modificando alcuni blocchi di codice in questo modo

.mobile .post {
font-size:9px; /* Dimensione font del testo del post */
margin: 0;
}
.mobile .date-header span {
font-size:18px; /* Dimensione font della data */
padding: 0.1em 10px;
  margin: 0 -10px;
}
.mobile h3.post-title {
font-size:12px; /* Dimensione font del titolo post*/
margin: 0;
}

si potranno settare le dimensioni rispettivamente dei caratteri del testo dell'articolo, dei caratteri della data e dei caratteri del titolo del post. Sono state aggiunte le righe evidenziate di giallo.  La dimensione dei caratteri è uno degli aspetti più importanti ma ce ne possono essere altri. Possiamo anche modificare i colori aggiungendo oltre alle righe evidenziate anche i tag color:#f00;, color:#00f;. Il risultato dopo il salvataggio del template visto con Screenfly potrebbe essere così

Volete intervenire anche nelle dimensioni dei caratteri del nome del blog? Non ho trovato il blocco di codice giusto ma si può ovviare incollando questo codice subito sopra al tag </head>

<b:if cond='data:blog.isMobile'>
<style>
#header-inner > div.titlewrapper > h1 {
font-size:18px;  
}
</style>
</b:if>

Il codice utilizza il selettore univoco colorato di viola  e, dopo aver salvato il template, modificherà l'aspetto del nome del blog con una dimensione più piccola dei caratteri.



Con l'altro selettore univoco #header-inner > div.descriptionwrapper > p si può intervenire anche per modificare la dimensione e il colore dei caratteri della descrizione.