Come ho reso questo sito compatibile con dispositivi mobile e perché dovresti farlo anche tu!

Una percentuale non trascurabile dei visitatori di questo e degli altri siti che gestisco, statistiche alla mano, naviga con dispositivi mobile. Non occorre essere dei novelli Frate Indovino per capire che con il passare del tempo questa percentuale già rilevante non potrà che crescere ancora!

Per questo è fondamentale essere preparati a gestire il layout del proprio sito in modo da assicurare ai visitatori la migliore esperienza, in quanto a navigabilità e leggibilità, in base al dispositivo che stanno utilizzando.

Spero che sia evidente che questo non può (rassegnati!) avvenire utilizzando un unico layout.

Per quanto si lavori bene è impossibile conciliare le esigenze di chi naviga dal display di un iPhone con quelle di chi sta leggendo il tuo sito da uno schermo da trenta pollici. Con un unico tema o si sacrifica uno, o l’altro.

Sicuro di voler sacrificare dei visitatori?

So cosa stai pensando, ci sono passato anche io. Probabilmente credi che il tuo attuale layout, sebbene non perfetto, sia abbastanza utilizzabile anche sui dispositivi mobile, e che in fondo il tempo che spenderesti per disegnarne uno nuovo, sistemando qualche piccolezza, potrebbe essere meglio occupato scrivendo degli ottimi contenuti.

Non sono d’acccordo.

I contenuti sono la colonna portante del tuo sito, ma renderli disponibili in un formato fruibile per tutti è l’unico modo che hai per sperare che raggiungano tutti.

1. Inquadrare il problema

La prima cosa da fare è capire quali sono le esigenze di chi naviga con i vari dispositivi. Chi si collega da un cellulare ha a disposizione un display che nel migliore dei casi è di quattro pollici o poco più, ma mediamente anche meno; mentre su un tablet ha a disposizione un’area ben più grande, che però varia di proporzioni a seconda dell’orientamento del dispositivo.

Come disegnare un template per questi dispositivi?

Cellulari
Chi naviga da cellulare apprezza la capacità del tuo layout di venire al sodo, senza perdersi in troppi fronzoli e soprattutto senza dover continuamente ingrandire e rimpicciolire la pagina.

Una grafica estremamente semplificata e diretta è quello che ci vuole per rendere il sito fruibile a chi si collega da questi dispositivi, sia in termini di velocità che di leggibilità e navigabilità.

Nella versione mobile per cellulari del tuo sito non deve esserci tutto quello che si trova sul sito desktop, devi riuscire a comunicare gli aspetti più importanti con i giusti rimandi al sito principale.

Meglio fornire meno informazioni fruibili che non scaricare sul display del malcapitato lettore tutti i contenuti che hai a disposizione, ma difficoltosi o impossibili da leggere.

Come si presenta Lomba.biz visto da un cellulare

Tablet
Ai lettori che atterrano sulle mia pagine con un tablet, ho preferito invece proporre una grafica che fosse la più possibile simile a quella della versione desktop del sito.

A mio parere un tablet è sufficientemente grande per godere della piena esperienza di navigazione; personalmente trovo fastidioso accedere a siti che mi propongono sull’iPad interfacce simili a quelle che mi ritrovo col cellulare. Io credo: dispositivi diversi, esigenze diverse.

Attenzione comunque, in generale è necessario adattare la versione desktop ai tablet, a meno che non utilizzi già un tema fluido. Diversamente potresti riscontrare fenomeni poco carini agli estremi laterali della finestra (v. immagine seguente).

Questo sito ad esempio, nella sua versione desktop mostra un layout a larghezza fissa di 960px, mentre sui dispositivi mobile si trasforma in layout fluido, per garantire il riempimento dell’intera pagina e l’eliminazione di quei fastidiosi bordini laterali.

Come si presenta Lomba.biz su iPad, rispettivamente con il template per tablet e con quello per desktop.
Notare gli effetti sgradevoli che si verificano ai bordi di quest’ultimo (frecce rosse)

2. Soluzioni pronte VS implementazione manuale

Se utilizzi un cms come WordPress puoi usare uno tra i tanti plugin che genera in automatico la versione mobile del blog. Tra tutti spicca WPtouch, che nella sua versione Pro -a pagamento, fornisce anche un tema per iPad.

Personalmente ho trovato in WPtouch gratuito un’ottima soluzione per i miei lettori che accedono da cellulare; mettendo un po’ di mano al suo codice sono anche riuscito ad ottenere una discreta personalizzazione. Però attenzione: a meno che non compri la versione Pro, perderai tutte le personalizzazioni ad ogni aggiornamento.

La cosa che trovo importante è lasciare comunque la possibilità agli utenti di visualizzare il sito completo, anche da mobile. Per questo arriva in aiuto il pulsante che WPtouch aggiunge in fondo ad ogni pagina, consentendo di passare dal tema mobile a quello completo, e viceversa.

Per quanto riguarda i tablet invece ho preferito fare tutto a mano, separando le richieste di chi accede con questi da quelle di chi accede con un pc, fornendo di conseguenza differenti css e file di layout.

Mi è bastato mettere mano -nemmeno troppo pesantemente, ai file di Thesis per gestire ottimamente due template: uno fixed e l’altro fluid.

Di seguito ti spiego nel concreto che metodo ho utilizzato per riconoscere i dispositivi usati dai lettori.

3. Gestire gli User Agent con PHP

Ci sono diverse soluzioni per riconoscere lo User Agent, io ho scelto di effettuare il riconoscimento via php, includendo le funzioni direttamente nel codice del mio template.

Questo mi consente di gestire la richiesta lato server senza uso di javascript o altre soluzioni lato client. Nel caso non dovesse essere riconosciuto lo User Agent del lettore, questo verrà comunque indirizzato alla versione completa del sito.

Il codice che ho utilizzato è il seguente:

Il funzionamento è molto semplice: cerca nella stringa $_SERVER['HTTP_USER_AGENT'] la presenza di determinate parole che identificano il dispositivo e a seconda che vengano trovate o meno, l’espressione condizionale successiva esegue una porzione di codice piuttosto che l’altra.

Questo è utile ad esempio per includere un css piuttosto che un’altro, o per dire al tuo tema di comportarsi in un certo modo. Nel mio caso, ad esempio, sfrutto le due strutture disponibili in Thesis, Framework Pagina e  Framework dimensione-intera, che corrispondo rispettivamente a layout di larghezza fissa e layout fluido.

Insieme a due css differenziati, layout.css e layout_mobile.css, questo approccio mi permette di gestire alla perfezione i due template, sdoppiando solo quelle impostazioni che li differenziano effettivamente.

In questo modo non devo praticamente preoccuparmi di riportare su due temi le modifiche che effettuo al custom.css, foglio di stile che hanno in comune e che contiene tutte le impostazioni grafiche che esulano dalle dimensioni e dal tipo di layout.

4. Conclusioni

In definitiva, che si tratti di un blog o di un sito istituzionale, dovresti preoccuparti di quello che vedono i tuoi lettori. La fruibilità dei tuoi contenuti può giocare un ruolo assolutamente determinante per la loro diffusione, ed è complementare alla loro qualità. Questo aspetto non andrebbe mai sottovalutato.

Ti voglio lasciare consigliandoti un plugin favoloso per FireFox che ti consente di cambiare lo User Agent direttamente dal menu del tuo browser. Questo ti sarà utile per testare i temi mobile direttamente dal tuo pc.