WordPress Mobile
Best Practices
WebFest 2012 - Pescara, 10 maggio 2012

alcuni suggerimenti per realizzare una versione mobile di un sito WordPress

Il traffico mobile oggi

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

Il traffico mobile domani

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

Trovarsi pronti

Forse è il caso di iniziare a valutare se sia conveniente portare il proprio sito anche su dispositivi mobile.

Conviene andare su 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.

In particolare:

  1. i miei contenuti devono essere facilmente navigabili;

  2. devono essere leggibili anche su display più piccoli di un monitor;

  3. il caricamento delle pagine deve essere il più veloce possibile.

Cosa ci guadagno?

Se riesco a raggiungere questi obiettivi, in cambio posso ragionevolmente aspettarmi un ritorno in termini di aumento di visite.

più visite = più opportunità per un ritorno economico

Linee guida per lo sviluppo mobile

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.

La soluzione ottimale: una sola versione per tutti!

Una per tutti

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.

Tutto questo ha un nome

Responsive
Web Design

Il Responsive Web Design

È 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 Responsive Web Design

Il concetto è stato introdotto da Ethan Marcotte e si basa essenzialmente su 3 tecniche:

Alcuni esempi di Media queries


<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)

Che tradotto in pratica vuol dire:

Fonte: Mediaqueri.es

Bene, come posso rendere responsive il mio sito WordPress?

E' facile!

WordPress supporta nativamente i dispositivi mobili: Twenty Eleven, il tema distribuito nel pacchetto di installazione, è già responsive!

Twenty Eleven e i suoi fratelli

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.

Usare un tema responsive

Vantaggi

Svantaggi

Perché usare un tema responsive?

Ci sono altri modi per portare WordPress su mobile?

WordPress mobile tramite Plugin

È una soluzione alternativa al tema responsive e anche questa è veloce: basta installare e configurare il Plugin.
I principali sono:

Come funziona un Plugin mobile

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.3

Il 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.

Usare un Plugin mobile

Vantaggi

Svantaggi

Perché usare un Plugin mobile?

In ogni caso...

...meglio evitare situazioni come questa ;-)

Fonte: xkcd, Server Attention Span

Approfondimenti

Per approfondimenti e commenti puoi visitare il post

WordPress Mobile Best Practices, la presentazione del WebFest

Grazie!

Claudio Simeone

claudio.simeone@gmail.com

LinkedIn
www.studio404.it
www.wordpress-it.it

Licenza Creative Commons
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.

/