Trovarsi pronti
Forse è il caso di iniziare a valutare se sia conveniente portare il proprio sito anche su dispositivi mobile.
A livello mondiale, l'utilizzo di Internet tramite dispositivi mobili è cresciuto dal 4,3% di gennaio 2011 all'8,5% di gennaio 2012.
In Italia, nello stesso periodo, è passato dall'1.3% al 2.64%.
Fonti: StatCounter Global Stats, Mobile internet usage is doubling year on year
Si stima che dal 2011 al 2016 il traffico mondiale mobile avrà un tasso di crescita annuo composto del 78%.
In Italia questo tasso sarà del 76%.
Fonte: Visual Networking Index Mobile Forecast Highlights, 2011 - 2016
Forse è il caso di iniziare a valutare se sia conveniente portare il proprio sito anche su dispositivi mobile.
Dal momento che ci saranno sempre più persone che useranno Internet da mobile, posso sfruttare questa opportunità per incrementare la visibilità del mio sito cercando di attrarre quelle persone.
Per raggiungere questo obiettivo devo fare in modo che:
i miei visitatori possano utilizzare pienamente il mio sito anche quando usano uno smartphone o un tablet.
Se riesco a raggiungere questi obiettivi, in cambio posso ragionevolmente aspettarmi un ritorno in termini di aumento di visite.
Non sempre un sito è usabile anche su mobile, per cui la pratica più comune è quella di sviluppare versioni alternative per cellulari e tablet.
Lo svantaggio principale di questa soluzione in termini di costi e tempi di sviluppo è che bisogna gestire più di una versione del sito: ogni modifica sul sito principale va replicata su tutte le altre versioni.
Anche se impegnativa in fase di progettazione, ripaga in termini di gestione del sito e soprattutto di maggiore facilità di utilizzo da parte degli utenti.
È un modo nuovo di progettare i siti web che permette di presentare i contenuti in modo tale che, indipendentemente dal dispositivo utilizzato, l'utente possa usare il sito senza difficoltà.
Il concetto è stato introdotto da Ethan Marcotte e si basa essenzialmente su 3 tecniche:
Le dimensioni degli elementi del tema grafico non sono fisse (in pixel), ma vengono fissate in percentuale, in modo da adattarsi automaticamente alla finestra del browser
Le immagini (che di per sé hanno dimensioni fisse) vengono ridimensionate proporzionalmente in modo da adattarsi al layout
Permettono di caricare degli stili CSS selettivamente, in base al tipo, alle dimensioni dello schermo e all'orientamento del dispositivo che sta visualizzando la pagina web
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="other-1025.css">
device-width: larghezza massima dell'intero schermo del dispositivo, accetta i prefissi -min e -max
orientation: orientamento del dispositivo (landscape vs. portrait)
Fonte: Mediaqueri.es
WordPress supporta nativamente i dispositivi mobili: Twenty Eleven, il tema distribuito nel pacchetto di installazione, è già responsive!
Se il tema predefinito non ci piace o non è adatto alle nostre necessità, nel repository ufficiale di WordPress ci sono molti altri temi gratuiti già pronti e personalizzabili.
Se non si hanno particolari esigenze di branding, si può utilizzare un tema già pronto, che comunque è personalizzabile.
Si mantiene un solo tema: ogni modifica non va replicata su altre versioni del sito.
A differenza di altre soluzioni, il tema limita eventuali problemi di incompatibilità.
È una soluzione alternativa al tema responsive e anche questa è veloce: basta installare e configurare il Plugin.
I principali sono:
Ogni volta che viene richiamata una pagina, prima che WordPress carichi il tema grafico, il Plugin controlla la stringa dello user-agent, nel nostro caso il browser. Questa stringa di testo contiene varie informazioni: nome del browser, sistema operativo usato etc…
Ad esempio, Safari su iPhone ha una stringa simile:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3Il Plugin esamina questa stringa e "capisce" che c'è di mezzo un iPhone e che quindi deve far caricare a WordPress il tema mobile incluso nel Plugin, invece di quello desktop.
Allo stesso modo, il Plugin è addestrato per riconoscere le stringhe dei browser di altri smartphone o tablet.
user-agent non è affidabile al 100%;Usare un Plugin piuttosto che un tema responsive è una soluzione che può andare bene per siti piccoli o blog personali: con pochi click si porta il proprio blog anche su cellulari e tablet.
È una soluzione poco impegnativa anche in un contesto aziendale: non si hanno risorse per rendere responsive il tema principale del sito o svilupparne uno da zero, ma si vuole comunque dare un minimo di supporto ai dispositivi mobile.
in attesa di trovare una soluzione ottimale, per esempio in vista di una riprogettazione del sito.
...meglio evitare situazioni come questa ;-)
Fonte: xkcd, Server Attention Span
Per approfondimenti e commenti puoi visitare il post
LinkedIn
www.studio404.it
www.wordpress-it.it
WordPress Mobile Best Practices by Claudio Simeone is licensed under a Creative Commons Attribuzione - Condividi allo stesso modo 3.0 Unported License.
Based on a work at www.studio404.it.
Permissions beyond the scope of this license may be available at http://www.studio404.it.
/