Quando si parla di web mobile si pensa essenzialmente a una serie di soluzioni che consentano agli utenti – dotati di strumenti quali Smartphone, telefoni di ultima generazione e palmari/iPad – di poter interagire con i contenuti presenti in rete.

Il fatto che il tuo sito web per computer desktop sia visibile sui telefoni cellulari non significa che sia ottimizzato per cellulari.

Gli utenti dei dispositivi mobili di fascia alta, quali telefoni iPhone o Android, sono in grado di visualizzare i siti web standard realizzati seguendo le raccomandazioni del W3C e una buona ottimizzazione dei fogli di stile CSS. Altri possibili utenti utilizzano invece telefoni cellulari WAP in grado di visualizzare solo siti web per cellulari specificamente progettati.

Va innanzitutto chiarito che, nonostante le svariate tipologie di periferiche, risoluzioni video e ambienti operativi, non esistono linee guida specifiche per l’accessibilità del web mobile.
Il W3C ha emanato una serie di indicazioni, le Mobile Best Practices, che forniscono generiche indicazioni per migliorare la fruibilità dei contenuti tramite web mobile, riferendosi in particolare alle seguenti problematiche:

• Rappresentazione dei contenuti. Differenti tipologie di browser, risoluzioni video e tecnologie richiedono di implementare soluzioni adattabili, identificando caratteristiche comuni di rappresentazione dei contenuti (convenzioni).
• Modalità di input. Le periferiche mobile possono consentire input diretti tramite tastiera, tramite interfaccia di emulazione tastiera, tramite “touch” o comandi vocali. Gli sviluppatori devono pertanto garantire interoperabilità delle interfacce (sia web-based che delle cosiddette “app”).
• Banda e costi. Sviluppare siti web e testarli con linee ADSL o similari può non far comprendere i reali tempi di caricamento dei contenuti. Gli sviluppatori dovranno quindi valutare la riduzione del carico di byte per contenuti “decorativi” (immagini, filmati, loghi, ecc.).
• Advertising. La pubblicità è l’anima del commercio e quotidianamente si riscontrano nuove forme di promozione, tra cui fastidiosi pop-up. Tali soluzioni vanno testate anche con tecnologie mobile per valutare se impediscono la fruibilità dei contenuti.
• Limiti delle periferiche. Non tutti gli utenti sono dotati dell’ultima versione del prodotto mobile XYZ. Gli sviluppatori dovranno pertanto garantire una retrocompatibilità delle loro creazioni, onde evitare la perdita di utenza.

Negli anni precedenti, a causa degli elevati costi di connessione e della dimensione ridotta degli schermi le versioni mobile per i servizi web si basavano essenzialmente in un foglio di stile personalizzato con rimozione della grafica oppure – caso sempre più diffuso – con la realizzazione di una versione specifica (mobile.nomesito.it oppure m.nomesito.it). Esempi in tal senso sono il servizio mobile viaggiatreno di Trenitalia o il sito mobile di Tutto Città.

Attualmente la panoramica è cambiata. Per molti siti è ancora preferibile mantenere una versione parallela al sito web per computer desktop con la dicitura mobile.nomesito.it, ma è cambiata la tecnologia relizzativa per adeguare il sito mobile ai nuovi strumenti forniti dalla tecnologia Touchscreen. In altri casi si preferisce lo sviluppo di applicazioni specifiche (le cosiddette “app”) per differenti tipologie di sistemi operativi.

In questo articolo mi concentro sulle innovazioni realizzative per i siti mobile.nomesito.it, per le “app” …aspettate il prossimo post 😉

In questi ultimi anni si è passati dal sito mobile come servizio mobile viaggiatreno a siti del tipo http://mobile.whygroup.it (per visualizzare una preview del sito si può utilizzare il browser Safari ridimensionato 300×500 px ca. oppure utilizzando dei tools che si trovano sul web, ad esempio: iphone4simulator.com) che utilizzano JQtouch un plugin per jQuery nato dai laboratori Sencha, ottimizzato per WebKit. Questo plugin permette di far diventare il sito mobile totalmente interattivo con il Touchscreen utilizzato in svariati Smartphone, iPhone e Android.

I siti mobile si possono realizzare in molti modi: una pagina introduttiva con una raffinata impostazione grafica, per siti multilingua si può accedere alla propria lingua o quella gradita, oppure con una grafica più intuitiva, leggera e di rapida navigazione. Possono contenere pagine statiche con contenuti interattivi, come per esempio il collegamento su Google Maps per individuare con il proprio smartphone il punto di interesse e il più rapido percorso per raggiungerlo, oppure pagine dinamiche che si aggiornano man mano che si caricano contenuti da un’interfaccia di amministrazione (news, eveneti, blog, ecc..).

Infine il nostro sito mobile.miosito.it è facilmente raggiungibile anche attraverso il link del sito originale, o cercandolo tramite motore di ricerca, semplicemente apportando la seguente modifica alla pagina principale del nostro sito

<script type=”text/javascript”>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/android/i)) || (navigator.userAgent.match(/symbian/i)))
{
location.replace(“http://mobile.whygroup.it”);
}
</script>

Quindi è lo stesso userAgent del browser che identifica su quale piattaforma stiamo navigando e decide quale sito caricare!