Creare un sito web in versione mobile usando jQuery Mobile

Oggi vediamo come creare una versione mobile “ad hoc” del nostro sito web usando jQuery Mobile. Consigli, how-to ed errori pratici da non commettere.

Sviluppare una versione mobile “su misura” per il proprio sito/progetto può risultare molto dura le prime volte e l’utilizzo di un  framework “solido” come jQuery Mobile in questi casi può risultare davvero utile. I vantaggi sono molteplici:

• Avere un ambiente di sviluppo aggiornabile e solido/testato
• Usufruire in pochi click di moltissime feature pre-impostate
• Avere a disposizione un vasto docs e api per estendere le funzionalità a nostro piacimento.

Setting up del progetto

Per prima cosa dobbiamo ovviamente collegare le librerie di JQuery Mobile in questo modo:

Css

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />

Javascript

<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

Ovviamente i vostri fogli di stile e file js di vostra creazione vanno messi sotto le seguenti librerie. Piccola nota, anche se non ha propriamente un senso (ma in certi casi può servire) ricordatevi che potete collegare nel documento anche eventuali framework responsive (Foundation, Bootstrap et simila).

Ora che abbiamo collegato jQuery Mobile possiamo iniziare la programmazione della nostra prima app/mobile. Il framework per snellire l’applicazione usa un listener specifico per gli url, pertanto il mio consiglio è di settare le pagine del sito in questo modo:

<ul data-role="listview" data-inset="true" data-filter="false">
   <li><a href="#Home">Home</a></li>
   <li><a href="#ChiSiamo">Chi Siamo</a></li>
   <li><a href="#DoveSiamo">Dove Siamo</a></li>
   <li><a href="#Prezzi">Prezzi</a></li>
   <li><a href="#Gallery">Gallery</a></li>
</ul>

Di fatto grazie a queste poche righe di codice abbiamo creato il nostro primo menu di navigazione principale che in “tastoni” in perfetto stile mobile. Se volete integrare sopra il menu un comodo filtro di ricerca potete settare da false a true la relativa opzione all’interno dell’html.

Come vedete per collegare le pagine non ho diviso il sito in: home.html – chisiamo.html etc bensì ho linkato specifici ID della pagina, il “motore” di jQuery Mobile farà il resto rendendo il caricamento delle varie sezioni veloci e mobile-oriented.

Per definire una “sezione” del sito dobbiamo però usare la seguente sintassi:

<div data-role="page" id="Home">

	<div data-role="header">

		<h1>Titolo</h1>

	</div><!-- /header -->

	<div data-role="content" id="content-app" class="content-app">	

		<p>Testo , menu o altro</p>

	</div><!--Content -->

</div><!--data role page HOME-->

Ovviamente nel caso di esempio oltre al “blocco” home dovremo specificare anche #ChiSiamo #DoveSiamo #Prezzi #Gallery. A loro volta potete creare le vostre “pagine” con il relativo contenuto come siete abituati a fare. Testando il tutto su uno smartphone noterete come jQuery Mobile carica agevolmente le varie sezioni del progetto ottimizzando tutto il progetto.

Vantaggi sui form e UX

Uno degli aspetti più interessanti che ho trovato è sicuramente la formattazione dei form. Grazie al framework possiamo rendere la compilazione del form più veloce, rapida e precisa. C’è da tenere conto infatti che scrivere e compilare form (talvolta complessi) tramite cellulare o tablet non è proprio il massimo della vita. Grazie ad alcuni accorgimenti possiamo rendere i nostri form più user friendly per i nostri clienti.

Usando alcuni dei nuovi standard HTML5 come ad esempio type=”tel” (o type=”number”) possiamo dire all’applicazione che quando l’utente va in quel campo vuole inserire di fatto un telefono o un numero, pertanto la tastiera sul proprio smartphone verrà quindi automaticamente settata in “solo numeri” per facilitare e rendere la digitazione più rapida. Stessa cosa per type=”email” (il layout della tastiera cambia e compare la @ e .com per agevolare la digitazione della mail). Per le date (input=”date”) quando l’utente va per inserirla jQuery Mobile si preoccuperà di creare un overlay con appositi slider per la selezione della data rendendo l’esperienza più “curata”.

Consigli utili per sviluppare versioni mobile

In generale se volete sviluppare per il mobile dovrete tenere sempre sott’occhio alcune “linee guida” che vi guideranno verso lo sviluppo della vostra applicazione.

1. Per le immagini (loghi,pattern etc) cercate sempre una compressione elevata, le immagini devono essere snelle e super ottimizzate rispetto alla versione desktop.
2. Grazie al Download Builder di jQuery potete personalizzare il vostro framework “tagliando” dal caricamento le feature che non vi servono.
3. Cercate di curare molto la UX del vostro progetto, dovete cercare di rendere la navigazione semplice  e intuitiva. Un esempio? Leggi questo articolo.

Un libro molto utile sull’argomento

Se volete approfondire le vostre conoscenze “jQuery Mobile Up and Running” vi aiuterà ad estendere facilmente le funzionalità del framework e a capirne le dinamiche.

[button link=”http://shop.oreilly.com/product/0636920014607.do” color=”blue” target=”blank”]Acquista libro[/button]

Conclusioni e documentazione

[button link=”http://view.jquerymobile.com/1.3.1/dist/demos/” color=”blue” target=”blank”]Demo[/button] [button link=”http://jquerymobile.com/demos/1.2.0/docs/” color=”blue” target=”blank”]Docs[/button] [button link=”http://jquerymobile.com/download-builder/” color=”blue” target=”blank”]Builder[/button] [button link=”http://www.jqmgallery.com/” color=”blue” target=”blank”]Gallery JQ Mobile[/button]

Rispetto alla versione responsive, una struttura personalizzata per il mobile porta sicuramente innumerevoli vantaggi (ad esempio i form e la User Experience), e grazie a framework come questo possiamo limitare anche i tempi/costi di sviluppo fornendo ai nostri clienti un prodotto solido, personalizzato e potente che possa realmente  accogliere nel modo corretto il bacino di utenza mobile che è in continua espansione.

Voi cosa ne pensate? cosa proponete ai vostri clienti responsive o versione mobile?