RSS Contattami

un blog adatto ai dispositivi mobili

i segreti del mio template, quarta puntata

La diffusione dell’iPhone e di tutti i suoi simili è oramai una realtà con cui bisogna fare i conti, che lo si voglia o no. Una delle tante indagini che ho letto sull’argomento si sbilanciava nel dire che ad oggi il numero di gadget portatili (cellulari, ipod, e via dicendo) ha già doppiato quello dei normali computer da tavolo in circolazione. Il che vuol dire, almeno in teoria, che per ogni utente che visita il sito tramite computer desktop, ce ne sono due che lo potrebbero fare da un palmare o da un iQualcosa. Molto dipende dal proprio target di utenti, è chiaro, e da altri fattori. Tant’è vero che nel caso del mio blog, i visitatori “mobili” sono circa il cinque percento del totale. Ma visto che le tecnologie ci sono, mi sono detto, perché non sfruttarle per soddisfare un numero ancora più grande di potenziali nuovi lettori? Ti dirò oggi come ho fatto.

In principio fu Google Mobilizer

Fino a qualche tempo fa, per me i visitatori si dividevano in due grandi categorie: fissi o mobili. Ai primi servivo il sito nella sua forma tradizionale, con immagini, javascript ed effetti speciali vari, mentre i secondi si dovevano accontentare di una versione quasi puramente testuale, risultante più o meno dalla linearizzazione dei contenuti della pagina. Perché fino all’avvento dell’iPhone, i browser mobili non è che fossero poi così evoluti. Per trasformare il contenuto ricorrevo (e ricorro ancora oggi, ma di questo parlerò più avanti) al sorprendentemente sconosciuto servizio Google Mobilizer, che data una URL, rimuove tutta la roba inutile, restituendo una versione della pagina sottoposta ad una bella cura dimagrante istantanea. Per far questo, avevo inserito nel file .htaccess del mio dominio, i seguenti comandi

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase / 

 # Mandiamo gli utenti mobili all'altro... sito
 RewriteCond %{REQUEST_URI} !^/mobile
 RewriteCond %{REQUEST_URI} !^/feed
 RewriteCond %{REQUEST_URI} !^/gwt
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{HTTP_HOST} www.duechiacchiere.it [NC]
 RewriteCond %{HTTP_USER_AGENT} acs|alav|avantgo|benq|bird|blac|cldc [NC,OR]
 RewriteCond %{HTTP_USER_AGENT} dang|doco|eric|ipaq|kddi|keji|leno|lg\- [NC,OR]
 RewriteCond %{HTTP_USER_AGENT} maui|midp|mits|mmef|mot|nec|noki|opwv [NC,OR]
 RewriteCond %{HTTP_USER_AGENT} palm|phil|pluc|port|qtek|sage|sams|sany [NC,OR]
 RewriteCond %{HTTP_USER_AGENT} sec\-|send|sgh\-|sie|smal|smar|sony [NC,OR]
 RewriteCond %{HTTP_USER_AGENT} teli|toshi|upg1|upsi|vk\-v|wap|xda [NC,OR]
 RewriteCond %{HTTP_USER_AGENT} up\.link|windows\ ce|mini|mmp [NC]
 RewriteRule (.*) /mobile/index.php?uri=$1 [L]
</IfModule>

Analytics per dispositivi mobili

Si tratta del risultato di un paziente lavoro di ricerca online, e dovrebbe consentire di catturare praticamente tutti i browser mobili esistenti sul mercato attuale, più altri teoricamente estinti. I più smaliziati avranno notato l’ultima riga di questo accrocchio di geroglifici, che non ridirige direttamente verso il servizio di Google, ma chiama un mio script interno. Questo non ha nessuna funzione se non invocare Google Analytics “lato server”, dato che molti browser mobili non dispongono di Javascript. Consentendomi quindi di mantenere traccia di questi speciali visitatori, nelle mie statistiche. A quel punto al visitatore viene mostrata la pagina “sottoposta a cura dimagrante” e tutti vissero felici e contenti.

Wp-Touch, un recente acquisto

Qualche mese fa, mi è stato fatto notare che l’ultima versione di Mobilizer, nello sfoltire la pagina, rimuoveva anche il modulo per lasciare un commento, rendendo di fatto impossibile interagire col blog tramite un iQualcosa. D’altro canto, proprio la diffusione sul mercato di questi dispositivi, m’aveva portato a riflettere: perché non mostrare “a quelli che possono” un contenuto più ricco e interattivo, anziché una scarna versione testuale? Javascript non è più un tabù per molti cellulari intelligenti, quindi perché non sfruttarlo? Una veloce occhiata al catalogo dei plugin di WordPress, m’ha consentito di trovare Wp-Touch, che fa proprio quello che volevo. L’installazione è molto semplice, anche se il tema fornito non è tradotto in Italiano. Così mi sono messo all’opera, ripulendo un po’ di schifezze ed adattando il risultato al mio blog. Ho anche segnalato agli sviluppatori le mie modifiche, ma non m’hanno mai fatto sapere nulla (peggio per loro!).

In conclusione, il meccanismo che ho costruito si basa su una serie di (due) filtri in sequenza. Se sei su un dispositivo di prima generazione, vieni intercettato dalle regole dell’htaccess e spedito verso Google Mobilizer. Se invece usi qualcosa di “evoluto”, l’htaccess ti fa passare, ma ti intercetta wp-touch, che quindi ti mostrerà il tema iQualcosizzato, che alcuni lettori affezionati hanno già testato e gradito. Infine, i normali browser non cascano né nella prima né nella seconda “trappola” e quindi vedono il sito come mamma (o meglio papà) l’ha fatto. Dovresti provare a fare una cosa del genere anche col tuo blog, copriresti fette ben più ampie di potenziali utenti.

[RSS] Commenti

  • Avatar di CyberAngel

    Ciao camu.
    Io utilizzo WP-Touch da diverso tempo e devo dire che mi sono sempre trovato bene ed ogni versione è sempre meglio. Testato più volte su iPhone e altri cellulari. Appena mi alzerò dal divano proverò anche la nuova versione del tuo sito!
    Sarebbero invece disponibili le tue modifiche? ;)

  • Avatar di Andrea Pinti

    Garantisco che il sito di Camu funziona egregiamente su iPhone :P

  • camu

    @CyberAngel: le modifiche sono disponibili su richiesta, ma si riferiscono ad una versione di qualche mese fa. Non ho avuto tempo (e voglia) di scaricare l’ultima versione e riapplicare a manina tutte le personalizzazioni (in pratica la traduzione in Italiano del tema) In fondo anche se è una versione vecchia, non ha problemi di sicurezza (noti) e sul mio blog funziona bene, quindi perché aggiornarla? :) Non so se questo possa esserti utile…
    @Andrea Pinti: grazie per la conferma, in effetti è proprio grazie a te che sono passato a questo plugin!

  • Avatar di larvotto

    Mi tocca comprare un iPhone per provare :)

  • camu

    @larvotto: ma perché, col tuo blackberry non si vede il tema mobile? Fossi in te mi terrei stretto quello che ho ;)

  • Avatar di larvotto

    Lo vedo ma non riesco a commentare :/

  • camu

    @larvotto: dunque, se hai qualche minuto di pazienza (e se non ti costa economicamente eheh), vorrei capire meglio. Ti faccio alcune domande: il tuo blog lo vedi con il tuo tema mobile? Sei in grado di commentare? I plugin che usiamo sono diversi, ma simili. La grafica che vedi sul mio blog è spartana e testuale o carina e con le iconcine? :) Che BlackBerry hai? Perché con il mio emulatore (non ne ho uno in “carne ed ossa” sob) vedo il tema carino qui. Il mistero s’infittisce…

  • Avatar di larvotto

    Prova messaggio via BB!
    Sà! Sà! :F

  • Avatar di larvotto

    Prova via BB! Sà! Sà! :D

  • camu

    @larvotto: t’ho risposto in privato, ma m’hai fatto ricordare le feste di paese quand’ero piccolo ed il cantante a provare i microfoni prima dello spettacolo :)

  • Avatar di Emanuele

    A me piace mostrare il mio template anche agli utenti mobile. Soprattutto con l’iPhone non è che risulti così scomodo navigare anche perché il tema stesso è già abbastanza ordinato: cosa cambia? Che gli articoli sono rinchiusi in un riquadro definito? Avevo installato Wp-Touch tempo fa e l’ho tolto pochissimi giorni dopo.
    Ciao,
    Emanuele

  • camu

    @Emanuele: ma tu l’iphone ce l’hai? ;) Lo so che non è scomodo navigare, ma ti assicuro che dover “zoomare” in continuazione può diventare fastidioso, specialmente se hai dita grosse ed i link sono piiiiiiccoli piccoli :) WP-Touch mette tutto a misura di schermo mobile, e rende l’interfaccia più semplice da navigare con le dita. Rimane comunque il fatto che il mio approccio tiene in considerazione anche i bisogni di chi naviga con dispositivi più “vecchi” che non hanno Javascript e soprattutto non vogliono consumare banda (pagata al mega).

  • Avatar di Emanuele

    No, non l’ho l’iPhone! Potresti mandarmene uno così capisco meglio cosa intendi per “comodità” con WP-Touch… :-P
    Ciao,
    Emanuele

  • camu

    @Emanuele: avoglia, te lo mando senza problemi. Per il pagamento ti mando le coordinate bancarie o preferisci Paypal? :P

  • Avatar di Emanuele

    Solito metodo. Tu manda, pago con assegno post-datato al 22 Dicembre 2012.
    Ciao,
    Emanuele

  • camu

    @Emanuele: LOL :) All’inizio non avevo colto la “finezza” nella data eheh

  • Avatar di Emanuele

    Il successo si misura dai particolari! :-D
    Ciao,
    Emanuele

  • Avatar di palbi

    La versione mobile del mio blog l’ho fatta con un servizio che si chiama MOFUSE
    E’ praticissimo perche’ ci vogliono solo 5 minuti per convertire il tuo blog web, pero’ poi non ci ho mai badato + tanto quindi non so dire molto sulle prestazioni

  • camu

    @palbi: c’ho dato un occhiata con il mio emulatore di iPhone :) Non male, per essere un servizio gratuito…

Modulo per l'invio di un commento

Lascia un commento

, oppure iscrivimi senza commentare.