template responsive
Mi capita spesso girovagando per il web di imbattermi in siti responsive poco ottimizzati per i dispositivi mobili, a volte non ottimizzati per nulla.
Infatti, in molti casi, il layout ed i moduli presenti nella vista per pc desktop, sono esattamente gli stessi che si ritrovano nella vista per smartphone, slideshow e colonne comprese.
Risulta evidente che in questi casi non è stata eseguita nessuna procedura di ottimizzazione del layout, dove per “ottimizzazione” intendo indicare quel processo di modifica del layout del sito tale da far sì che alcuni moduli non vengano visualizzati ed altri siano posizionati in maniera differente passando dal pc desktop allo smartphone.
Purtroppo è opinione abbastanza diffusa che basti utilizzare un template responsive per risolvere il problema della visibilità sui vari devices, poi qualsiasi cosa ci si mette dentro si ridimensionerà e va bene così.
Niente di più sbagliato.
Ecco qualche consiglio per mettervi al riparo dalle tipologie di errore più comuni.
 

1. Le esigenze degli utenti smartphone non sono le stesse degli utenti desktop.

Immaginate di navigare il sito di una importante testata giornalistica nazionale da pc desktop.
Avete uno schermo grande e potete vedere tutto, dalle pubblicità di sfondo alle notizie principali, dalle rubriche più nascoste ai blog sulla colonna di sinistra, dalle photo gallery alle curiosità. È la situazione ottimale, avete un caffè sulla scrivania e un quarto d’ora di tempo prima di iniziare a lavorare.
Chi sta dietro a quel giornale ed ha realizzato il layout che state guardando, conosce bene queste cose e sa che è il layout giusto per chi come voi ha un po’ di tempo da dedicare alla lettura dei quotidiani ed una macchinetta del caffè in ufficio.
Ora però cambiate scenario.
Siete in macchina e state andando al lavoro, ma siete un po’ in ritardo. Mentre la vostra ansia sale leggermente, perché si fa largo nel vostro cervello la prospettiva di arrivare tardi in ufficio, il bip del vostro smartphone vi segnala un messaggio in arrivo. È il capo.
“Hai visto la notizia bomba di oggi?”
No, maledizione, no che non l’hai vista. E non puoi arrivare in ufficio senza saperla.
Allora apri il browser del tuo smartphone, vai sul sito del giornale e lui questa volta NON ti fa vedere prima un metro lineare di pubblicità che per scorrerla ci vorrebbero dieci minuti, ma magicamente fa comparire sul tuo piccolo schermo la lista ordinata e precisa delle ultime news. E tu, in men che non si dica, hai letto la notizia esplosiva e puoi presentarti in ufficio aggiornato, anche se un po’ in ritardo.
Qual è il significato di tutto questo?
Che le esigenze degli utenti che si collegano via pc desktop sono mediamente diverse da quelli che si connettono via smartphone. I primi hanno tempo da dedicare alla lettura e possono permettersi di visualizzare il sito nella sua interezza, i secondi cercano solo le notizie, possibilmente con una certa velocità.
Ne consegue che i layout caricati dovranno essere diversi ed ottimizzati per i diversi schermi.
Ecco un esempio nelle immagini qui sotto:

viste-desktop
vista desktop


viste-smartphone
vista smartphone


2. Evitate le slideshow sugli smartphone (e anche su desktop!)

 
Le slideshow sono state e sono tuttora molto usate, ma a me, dopo un innamoramento iniziale, non piacciono più. Il perché è presto detto: distraggono, non danno una informazione univoca e precisa, l’utente deve stare 20-30 secondi sulla stessa pagina per scorrerle tutte e quando avrà visto l’ultima, non si ricorderà più qual’era la prima!
Mettere in home page 4-5 slide che spiegano tutto quello che fa la tua azienda è sbagliato, molto meglio fare una pagina per servizio, anche dal punto di vista della SEO.
Ma se proprio non potete farne a meno, abbiate almeno l’accortezza di nasconderla sugli smartphone, e forse anche sui tablet piccoli nella vista portrait (verticale). Non servono, lo schermo è troppo piccolo e il messaggio non rende. Sostituitela con uno sfondo uniforme dove compare lo slogan della società o del servizio che state promuovendo, oppure con una immagine in background.
 

3. Nascondere non vuol dire non caricare

I migliori template framework per Joomla danno la possibilità di scegliere quali posizioni modulo far vedere sui vari dispositivi. La selezione naturalmente non avviene per singolo dispositivo, ma secondo la larghezza dello schermo. Per esempio, il T3 Framework, prevede 4 tipologie di layout nei quali è possibile visualizzare o nascondere le posizioni modulo (vedi immagine qui sotto):
 
  • large
  • medium
  • small
  • extra small
 
Cliccando sull’icona a forma di occhio situata in alto a destra di ogni modulo è possibile nascondere il modulo stesso in quel determinato layout.




Se nascondete una posizione modulo in cui c’è una slideshow per la vista smartphone, succederà che:
  • chi si collega al vostro sito da smartphone non vedrà la slide perché sarà nascosta;
  • la slide e le relative immagini verranno caricate lo stesso, perché l’istruzione agisce solo sulla visualizzazione, non sul caricamento.

Ecco le prove.





slide visibile

Come potete vedere in questa immagine, la slide viene caricata sul dispositivo mobile e tutte le immagini vengono giustamente caricate.
Se la slide viene nascosta, il modulo slide viene caricato lo stesso con tutte le immagini.





slide nascosta

Quindi nascondere un modulo o una posizione modulo non ha nessuna influenza sulla velocità di caricamento del sito, perché i moduli nascosti verranno caricati ugualmente.
 

4. Le immagini, tasto dolente.

 
Come abbiamo visto, anche nascondendo i moduli per determinate dimensioni dello schermo, le immagini presenti nel modulo vengono nascoste ma caricate lo stesso, e questo influisce sulla velocità di caricamento del nostro sito.
Una degli scenari più comuni in cui ci si può trovare si verifica quando utilizziamo un’immagine di dimensioni grandi, per esempio 1200 px di larghezza e con un peso di 80 kb, in un articolo o in un modulo.
Quando l’immagine viene visualizzata su uno schermo grande, nessun problema. Ma cosa succede quando il dispositivo che la deve visualizzare è uno smartphone con una larghezza dello schermo di 320 px? L’immagine verrà ridimensionata alla larghezza giusta, ma sarà sempre la stessa immagine ad essere caricata, quella da 1200 px e da 80 kb, mentre a noi basterebbe caricare un’immagine molto più piccola e molto più leggera in questo caso, facilitando il caricamento più veloce della pagina.
C’è poi un secondo problema: la risoluzione dell’immagine.
Con l’introduzione degli schermi “Retina” a doppia risoluzione sugli smartphone, la vostra immagine creata a risoluzione normale potrebbe venir visualizzata in maniera “sgranata”. Quindi avremmo anche la necessità di poter caricare un’immagine con la giusta risoluzione al posto di quella da 1200 px.
 
Come si risolvono questi problemi?
 

a) Utilizzo di IMG SRCSET

 
Tra le nuove implementazioni dell’HTML5 ce n’è una che fa al caso nostro, l’attributo “srcset”:
 
<img srcset="" src="/" alt="" />
 
 
In questo nuovo tag possiamo notare sia la presenza del nuovo attributo “srcset”, sia quella del classico e conosciutissimo “src”.
Il nuovo attributo srcset, come indicato dalla parola stessa, può indicare un set di immagini, cioè un certo numero di immagini diverse. Il vecchio attributo src viene utilizzato per caricare un'immagine di default oppure se il browser non riconosce srcset. In quest'ultimo caso non viene mostrato nessun messaggio di errore, il browser carica automaticamente l'immagine specificata nell'attributo src.
Vediamo ora come si utilizza srcset.
 
Utilizzare w-descriptor
w-descriptor funziona dicendo al browser quanti pixel ci sono sull'asse x di una determinata immagine (praticamente la larghezza – width). Il browser sceglierà da solo l'immagine che corrisponde alla larghezza ideale dello schermo. Ricordiamo che non stiamo dicendo noi al browser quale immagine utilizzare, ma gli stiamo fornendo solo una serie di immagini tra le quali lui sceglierà la più adatta a seconda della dimensione dello schermo e, badate bene, ne caricherà una soltanto, risolvendo quindi i problemi di caricamento descritti in precedenza.
Si scrive così:
 
<img srcset="/immagine-1600.jpg 1600w, /immagine-320.jpg 320w" src="/immmagine.jpg" alt="la mia immagine" />
 
aggiungendo dopo il nome dell'immagine la larghezza in pixel seguita dalla lettera w (1600w, 320w).
Cosa stiamo dicendo al browser con questo codice?
Gli stiamo dicendo che:
  • abbiamo un'immagine disponibile con larghezza 1600 pixel (srcset 1600w);
  • abbiamo un'immagine disponibile con larghezza 320 pixel (srcset 320w);
  • abbiamo un'immagine disponibile con larghezza non specificata (src).
 
Il browser cosa farà? Sceglierà fra queste 3 immagini quella più adatta alla dimensione dello schermo del dispositivo che la visualizza.

Utilizzare x-descriptor
x-descriptor funziona invece dicendo al browser qual'è la densità di pixel presenti in 'un'immagine, partendo come base da 1. Risulta molto utile quando vogliamo fornire un'immagine da visualizzare sui display “retina”, che hanno un numero di pixel doppio rispetto al normale.
Si scrive così:
 
<img srcset="/retina-2x.jpg 2x" src="/normal.jpg" alt="la mia immagine" />
 
aggiungendo la densità di pixel nel formato 2x, 3x, 3.5x etc. dopo il nome dell'immagine.
In questo caso il browser:
  • caricherà l'immagine retina-2x.jpg se supporta srcset e se ha uno schermo retina;
  • caricherà l'immagine normal.jpg se non supporta srcset;
  • caricherà l'immagine normal.jpg se supporta srcset ma non ha uno schermo retina (non essendo specificata nessuna immagine 1x).
 
Fate attenzione che per scrivere questo codice in Joomla è meglio disabilitare l’editor, perché altrimenti al salvataggio non riconsoce ancora srcset e lo cancella.
Qui potete vedere il supporto per srcset dei vari browser:
Ci sarebbero ancora delle altre cose da dire su srcset ma mi sono già dilungato abbastanza e ne parlerò più in dettaglio in un articolo dedicato solo a questo attributo.


Ciao a tutti.