Google sites - come ottimizzare il sito e i contenuti per il mobile

di Maria Silvana Radice





Come tutti, ormai, sappiamo, dal 20 aprile 2015 Google ha dato il suo ultimatum: "chi non ottimizza il proprio sito per i dispositivi mobili sara` gravemente penalizzato nell'indicizzazione". Tutti sono corsi ai ripari, quindi, affrettandosi a ristrutturare il proprio sito per ubbidire alle nuove direttive.
Avere un sito costruito con Google sites e` un vantaggio anche in questo caso, perche` ottimizzare il layout e` molto semplice.
Basta mettere una spunta, seguendo il percorso: menu`->gestisci sito->generale.
Scorrendo la pagina, trovate la voce "Adatta automaticamente il sito ai cellulari", spuntate e sarete certi che tutto si sistemera` nel modo migliore, dato che e` Google stesso a farlo.
Il grosso del lavoro, quindi, e` fatto, ma non e` finita, perche` dobbiamo fare i conti con i nostri contenuti non sempre correttamente costruiti per essere "responsive" ed adattare le proprie dimensioni a quelle di un cellulare.

In questa guida, vi suggeriro` alcuni trucchi per ottimizzare i contenuti del sito ed ottenere una buona visualizazione sui dispositivi mobili.

Prima di tutto va detto che Google sites offre uno strumento integrato, molto comodo, per controllare se la visualizzazione sul cellulare e` ottimale. Per utilizzare questo strumento, dovete cliccare sul menu` e poi su "Visualizza la pagina in anteprima come visitatore". Nella schermata successiva, in alto, dovete cliccare su "Mobile".



In questo modo potrete verificare cosa ci sia da correggere in ogni pagina.

Ricordatevi di effettuare il rientro della barra laterale (se presente), per avere la giusta visualizzazione:





In ultimo, comunque, e` sempre meglio verificare la reale visualizzazione direttamente su un dispositivo mobile.


Procediamo....

Per quanto riguarda le dimensioni del sito, ci sono due possibilita`. Si puo` decidere di impostare tutto il sito per una larghezza del 100% dello schermo, considerando, pero`, che puo` essere un problema gestire i contenuti. La seconda soluzione e` dare al sito una dimensione fissa. Google sites ottimizza il sito anche con dimensione fissa.

Parlando dei contenuti, il primo concetto da comprendere e` che per rendere un elemento responsive, bisogna impostarne la  larghezza in percentuale rispetto al suo contenitore. Puo` essere il 100% o meno, a seconda dei casi.
Il primo contenitore, ovviamente, e` la pagina stessa.
Nella pagina puo` essere inserito direttamente l'elemento, oppure un altro contenitore che contiene l'elemento. Ogni larghezza deve essere messa in percentuale rispetto alla larghezza del suo contenitore.

Per capirci:



Il contenitore puo` essere un div, oppure un gadget, o una tabella ecc. Se il contenitore e` un gadget, dovete, anche in questo caso, impostare la larghezza in percentuale. Nei gadget e` obbligatorio indicare anche l'altezza, sempre in pixel. Dovrete, quindi, impostare l'altezza minima per contenere l'elemento in visualizzazione desktop. Quando la pagina verra` vista tramite un dispositivo mobile, sotto all'elemento potrebbe rimanere un po' di spazio vuoto. C'è un modo per superare questo inconveniente e potete scoprirlo più sotto, leggendo l'argomento: "Come ottimizzare i gadget per i dispositivi mobili".




Il testo:

Introduco subito il discorso del testo, riferendomi al tipo di font utilizzato, perchè è importante sapere che non tutti i tipi di font sono supportati dai dispositivi mobili. In particolare, i dispositivi Apple non supportano molti dei font normalmente usati. Il risultato è che il sistema utilizzerà un font di default.
Per scavalcare il problema, è possibile aggiungere uno o più font alternativi, in modo che il dispositivo, se non supporta il font principale, utilizzi gli altri font di nostra scelta.
Il codice da utilizzare, pertendo da quello di default di Google sites, è questo:

<font size="4"><span style="font-family:apple chancery,noteworthy"><font color="#ffffff">testo</font></span></font>

Come vedete, ho indicato due font differenti, separati da una virgola. Il primo è quello principale (apple chancery) e il secondo (noteworthy) è un font alternativo scelto dall'elenco di quelli supportati dai dispositivi mobili di Apple.

Questi sono i font supportati dai dispositivi mobili di Apple:

http://iosfonts.com/

Come vedete non sono i font comunemente usati e non è garantito che siano supportati anche sugli altri dispositivi.

Se proprio volete che una frase particolare sia vista con il carattere corretto su tutti dispositivi, vi conviene convertirla in immagine.

Il logo:

Il logo fa parte del sistema e viene ottimizzato in automatico. Unico accorgimento, nelle impostazioni di configurazione dell'intestazione, per quanto riguarda l'altezza, lasciate la spunta su "Usa dimensione logo". Se impostate un'altezza definita in pixel, infatti, questa non verra` scalata e, nella visualizzazione su dispositivi mobili, potrebbe rimanere un antiestetico spazio vuoto tra il logo e i contenuti sottostanti.

L'immagine di sfondo:

Prima di tutto, e` bene sapere che le immagini di sfondo, sia del sito, che dell'intestazione, non vengono ottimizzate e questo non su Google sites, ma su qualsiasi sito web.
Se utilizzate un'immagine di sfondo, inoltre, dovete sapere che, nella versione mobile, potrebbe non venir visualizzata, perche` la larghezza della zona contenuti occupera` tutto lo spazio disponibile. Ciononostante, questa immagine influenzera` la visualizzazione del sito. Un'immagine troppo grande e pesante, su alcuni dispositivi e con determinati browser di default, potrebbe sovrastare la visualizzazione del sito stesso, nascondendolo.
Come regola generale, la larghezza dell'immagine di sfondo del sito non deve superare i 2500 px, l'altezza non deve superare i 2000 px e il peso non deve superare i 20 MB.
Comunque, non e` affatto necessario utilizzare immagini di tali dimensioni. Uno sfondo di ~1900 x 1200/1400 pixel e` piu` che sufficiente, anche utilizzando l'opzione "Adatta alla pagina".

Il layout:

Come sapete, Google sites offre la possibilita` di scegliere tra diversi tipi di layout e di impostare un diverso layout per ogni singola pagina. Questa funzionalita` e` molto importante per stabilire la visualizzazione preferita sui dispositivi mobili.
I tipi di layout sono questi:



Google sites incolonna i contenuti seguendo uno schema fisso e cioe` dall'alto verso il basso e da sinistra a destra.
Facciamo un esempio. Mettiamo di aver scelto il layout a tre colonne....




Come vedete, ho inserito dei numeri progressivi nelle colonne per indicarvi la sequenza secondo la quale il sistema incolonnera` i relativi contenuti. Vale a dire cosi`:


1
2
3
4
5



Conoscendo questo schema e impostando il layout opportuno, sara` molto semplice stabilire la visualizzazione del sito sui dispositivi mobili secondo le proprie esigenze.
L'impostazione di un nuovo layout, sara` molto semplice su una nuova pagina e un po' piu` laboriosa su una pagina che ha gia` dei contenuti, ma il risultato vale la fatica.

Le immagini:

Se le immagini sono nella loro dimensione originale e non riportano dimensioni diverse nel codice, o se la loro larghezza e` impostata al 100%, vengono ridimensionate dal sistema senza problemi, con qualche problema su iPhone e iPad che vedremo piu` sotto.

Es:  <img src="URL immagine" alt="" />

Se le immagini hanno le dimensioni impostate nel codice....

Es: <img src="URL immagine" height="213" width="320" />

....come capita, ad esempio, se si utilizza lo strumento di ridimensionamento quando si caricano nel sito, allora le regole sono queste:
  • Le immagini con larghezza uguale, o inferiore a 400px vengono visualizzate correttamente anche in versione mobile.
  • Per le immagini di larghezza superiore, e` necessario togliere l'altezza e lasciare solo la larghezza. In questo modo, il sistema adatta automaticamente la loro larghezza alle dimensioni dello schermo.
Se all'immagine e` affiancato il testo, pero`, e` indispensabile indicare la larghezza dell'immagine in percentuale, altrimenti non verra` ridimensionata.

Problema con iPhone e iPad:

I dispositivi della Apple si comportano in modo differente dagli altri dispositivi e spesso non adattano i contenuti. Questo comporta dei problemi per le immagini con larghezza maggiore di 400 px.
Il codice corretto per visualizzare bene le immagini, di qualunque dimensione, su tutti i dispositivi mobili, e` questo:

<a href="URLcollegamento"><img src="URLimmagine" style="display:block;margin-right:auto;margin-left:auto;text-align:center;width:100%" border="0"></a>

Da sostituire, naturalmente, a quello creato di default dal sistema al caricamento delle immagini.

Le immagini affiancate:

Le immagini affiancate vengono allineate automaticamente per la visualizzazione su mobile e disposte su piu` file se necessario. Naturalmente devono essere caricate come detto nel paragrafo precedente.
Per centrarle nella pagina, leggi:
Come centrare due o piu` immagini affiancate

Le tabelle:

Google sites ottimizza le tabelle, ma non se contengono le immagini.
Se utilizzate le tabelle per allineare delle immagini, magari in colonne di tre, o piu`, la cosa migliore, per ottenere un buon risultato, e` usare il codice che vi propongo.
Se vi limitate a togliere l'altezza delle immagini, come detto prima, il sistema ridimensionera` le tabelle e anche le immagini, ma annullando qualunque spazio tra le immagini, che risulteranno incollate le une alle altre.




Naturalmente, potete cambiare le percentuali in base alle vostre necessita` e aggiungere colonne.
Non si possono, invece, aggiungere righe, per un buon risultato. Meglio aggiungere altre tabelle una sopra l'altra.

Le mie impostazioni creano una tabella che occupa il 100% della pagina, con tre celle e tre immagini equamente distanziate tra loro.

Se volete togliere il bordo alla tabella, impostate border="0".

Il player Youtube:

Per rendere responsive il player di Youtube, potete usare questo strumento: "iFrame-responsive tool".
Una volta ottenuto il codice, dovete caricarlo come indicato nella guida Come inserire codici e scripts in Google sites e impostare la larghezza del gadget in percentuale.
Per le prove che ho fatto, su un sito di larghezza standard (1024px), il risultato migliore l'ho ottenuto impostando la larghezza del gadget al 60% e l'altezza a 276px. Per un sito più largo, naturalmente, dovrete regolarvi in proporzione.

Un'altra soluzione, veramente ottima, che ho scoperto da poco, consiste nell'utilizzo di questo gadget:

https://sites.google.com/site/scriptsexamples/tools-for-google-sites/video-player.xml

che potete inserire seguendo il solito percorso inserisci -> altri gadget -> gadget in base a URL. Il grande vantaggio sta nel fatto che il video risulterà responsive sia in larghezza che in altezza, quindi, nessun antiestetico spazio bianco sotto.

AGGIORNAMENTO:
Per adeguarsi alle nuove normative per la tutela della privacy relativamente ai cookie, Youtube ha implementato una funzionalita` che permette di bloccare i cookie finche` l'utente non avvia la riproduzione del video.
La procedura per attivare questa funzionalita` e` descritta nella guida: Come adeguare il sito alle normative di "Cookie policy".

Dopo l'attivazione, bastera` aggiungere la voce "nocookie" come nell'esempio sottostante.

https://www.youtube-nocookie.com/embed/4ttPXXGhMjM' frameborder='0' allowfullscreen

Le mappe:

Le mappe caricate utilizzando la funzione di default di Google sites (inserisci -> mappa) possono essere impostate per avere una larghezza del 100%. Possono essere impostate anche larghezze inferiori, sempre in percentuale, ma la mappa non sara` centrata correttamente nella pagina. In questo caso, per avere una centratura perfetta, e` necessario intervenire sul codice.
Dopo aver caricato la mappa con larghezza 100%, cliccate su "HTML" nella barra degli strumenti e individuate il codice della mappa che sara` simile a questo....

<div><img src="https://www.google.com/chart?chc=sites&amp;cht=d&amp;chdp=sites&amp;chl=%5B%5BGoogle+Maps%27%3D20%27f%5Cv%27a%5C%3D0%2710%27%3D499%270%27dim%27%5Cbox1%27b%5CF6F6F6%27fC%5CF6F6F6%27eC%5C0%27sk%27%5C%5B%22Google+Milan%22%27%5D%27a%5CV%5C%3D12%27f%5C%5DV%5Cta%5C%3D10%27%3D0%27%3D500%27%3D497%27dim%27%5C%3D10%27%3D10%27%3D500%27%3D497%27vdim%27%5Cbox1%27b%5Cva%5CF6F6F6%27fC%5CC8C8C8%27eC%5C%27a%5C%5Do%5CLauto%27f%5C&amp;sig=1Kc9nE76ojnZVHFctZIiFy0LoX4" data-origsrc="?ll=45.486153%2C9.189582&amp;spn=0.060656%2C0.240326&amp;ie=UTF8&amp;z=12&amp;t=roadmap&amp;sll=45.486153%2C9.189582&amp;sspn=0.060656%2C0.240326&amp;q=Via%20Federico%20Confalonieri%2C%204%2C%2020124%20Milano%2C%20Italia%20(Google%20Milan)" data-type="map" data-props="align:center;borderTitle:Google Milan;height:500;objectTitle:Google Milan;showBorder:false;showBorderTitle:false;wrap:false;" style="display:block;margin:5px auto;text-align:center;" height="500" width="500"></div>

....e dovrebbe essere gia` racchiusa tra i tag di un "div" (contenitore), come ho segnato in rosso. Se cosi` non fosse, dovrete aggiungerli voi.
Al tag "div" di apertura va, pero` aggiunto uno stile, in questo modo:

<div style="width:60%;margin:0 auto">

Al posto di 60% potete mettere la larghezza, in percentuale, che preferite. Il comando margin:0 auto serve a centrare il div nella pagina.
In pratica funziona cosi`:
  • La mappa e` posta in un contenitore che occupa una certa percentuale di spazio nella pagina.
  • La mappa occupa il 100% del suo contenitore.
  • Il contenitore e` centrato nella pagina.

Se non fosse chiaro, sapete dove trovarmi :-))

P.S. Questo metodo puo` essere utile anche per altri tipi di gadget.

Le presentazioni di Google Drive:

Anche le presentazioni create con Google Drive non sono responsive di default e bisogna, quindi, adottare una piccola strategia per renderle tali.
Dopo aver creato la presentazione, prelevate il codice iFrame di incorporamento e usate lo stesso tool (iFrame-responsive tool) indicato per il player di Youtube, ma, questa volta, scegliete la voce: "Generic iFrame".
Incollate il codice iFrame della presentazione al posto del codice d'esempio gia` presente e cliccate su "embed".
Il nuovo codice ottenuto andra` incapsulato e poi caricato in Google sites seguendo la guida: Come caricare codici e scripts in Google sites.
Naturalmente, la larghezza del gadget andra` impostata in percentuale (in questo caso consiglio il 100%) e l'altezza secondo necessita` ( per l'altezza, leggi anche l'argomento che segue sui gadget).

I documenti di Google Drive:

Per questo vi rimando alla guida: Come caricare PDF e DOCX in Google sites

Come ottimizzare i gadget per i dispositivi mobili:

Per rendere responsive qualunque gadget, che abbia un contenuto gia` impostato per essere tale, la sua larghezza deve essere sempre espressa in percentuale (100% / 80% / 60%....). 
La cosa migliore sarebbe quella di impostare la larghezza del gadget al 100%, perche`, in questo modo, occupera` sempre tutto lo spazio disponibile, a seconda della dimensione dello schermo. In questo caso, il contenuto del gadget deve sempre essere impostato per stare al centro del contenitore, parametro che va regolato all'interno del suo stesso codice. Se non riuscite ad ottenere questo e il contenuto (per esempio uno slideshow) si trova posizionato a sinistra rispetto al gadget contenitore, allora la soluzione e` quella di impostare la larghezza del gadget contenitore (sempre in percentuale) nella misura che, in visualizzazione desktop, possa ospitare il contenuto senza spazi vuoti. E` evidente che, in questo caso, tale percentuale sara` rispettata anche nella visualizzazione su mobile e il gadget non occupera` tutto lo spazio disponibile.

Per quanto riguarda l'altezza del gadget, questa "era" un problema, perche` non c'e` un modo automatico per ottimizzarla. Cosa succedeva? Che quando il gadget si strigeva e con esso il suo contenuto, l'altezza restava fissa, lasciando un antiestetico spazio bianco al di sotto. Questo, ora, non e` piu` un problema, perche`, cerca e cerca, ho scoperto il modo per rendere l'altezza elastica. Seguitemi bene....
Se avete letto la guida: Come caricare codici e scripts in Google sites, allora gia` sapete come creare un gadget, incapsulando un codice in un file xml. Per forzare il gadget ad aggiustare la sua altezza quando la larghezza si adatta ad una diversa dimensione dello schermo, bisogna aggiungere uno script. La "scatola" del gadget, quindi, diventa questa:


 <?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs >
    <Require feature="dynamic-height" />
  </ModulePrefs>
  <Content type="html">
 <![CDATA[



Hello, world!



<script type="text/javascript" charset="utf-8">
    function resize(){
        gadgets.window.adjustHeight();
    }
    window.onload=resize;
</script>


]]>
  </Content>
</Module>


Le parti in azzurro sono quelle che servono ad "aggiustare" l'altezza del gadget quando cambia la sua larghezza. Come sempre, al posto di "Hello, world!" va incollato il codice dell'applicazione che volete caricare (slideshow ecc.).



NOTA: A volte è necessario impostare un timeout per dare il tempo al gadget di adattarsi. In questo caso lo script diventa questo:

<script type="text/javascript" charset="utf-8">
    function resize(){
        gadgets.window.adjustHeight();
    }
    window.onload = setTimeout(resize,50);
</script>

Il tempo di timeout (in rosso), può essere variato secondo la necessità (anche fino a 2000 e più).




I gadget cosi` configurati vengono contrassegnati dal sistema in questo modo:



NOTA: il gadget "aggiusta" la sua altezza quando la pagina viene caricata, quindi, se, per esempio, ruotate il cellulare, o il tablet dalla posizione verticale a quella orizzontale e viceversa, ovviamente il gadget risulterà accorciato o allungato, perchè mantiene l'altezza della posizione precedente. Per "riaggiustare" l'altezza basta aggiornare la pagina.




Questa guida sara` aggiornata, col tempo, con altre indicazioni e soluzioni utili