Mobile Joomla - come rendere il nostro sito web responsive

Mobile JoomlaRendere il proprio sito web accessibile e visibile da ogni tipo di dispositivo, soprattutto quelli mobile è diventato un requisito fondamentale con l'avvento del web 2.0, ancora di più lo è diventato personalizzare gli stili e i contenuti in base al dispositivo con cui li stiamo visualizzando; spesso infatti chi guarda un sito nella versione mobile ha necessità di reperire le informazioni che cerca in modo rapido ed efficace e non avrà di certo la possibilità di interagire con un astruso sistema di menu come può fare solitamente dal pc di casa. Oggi cercheremo di capire come rendere il nostro sito web responsive e poterlo quindi visualizzare anche in versione mobile utilizzando un componente che si basa sul famigerato user-agent teraWURFL e la cui particolarità è quella di NON richiedere la duplicazione delle voci di menu. Il componente in questione è Mobile Joomla giunto alla versione 1.0.3.1 e compatibile con joomla 2.5 ci consentirà in pochi e semplici passaggi di fare tutto ciò, vediamo come!



Installazione:

Andate a scaricare il pacchetto dalla Jed, sarà necessaria una registrazione per poter procedere al download. Una volta completato entrate nella gestione estensioni e installate il pacchetto selezionando il file con estensione .tar.gz. All'interno del pacchetto sono presenti il componente, alcuni plugins che andranno attivati (lo sono di default ma meglio controllare) da gestione plugins di Joomla e una serie di template di base. una volta effettuato l'operazione passiamo alla configurazione del componente.

 

 

Plugin Mobile Joomla!

 

 

 

Configurazione Mobile Joomla!


pannello JoomlaIniziamo con la configurazione di base, quella che ci permetterà di visualizzare l'intero sito web con tutte le voci di menu in versione mobile: dal pannello Mobile Joomla su General possiamo decidere la qualità con cui viene fatto lo scaling delle immagini. Su Advanced Settings possiamo settare la compressione gzip e la cache (io la tengo disabilitata, fra l'altro mi ha dato un sacco di problemi!!). Nella parte destra del menu troviamo tutte le impostazioni relative al dominio e eventuali sottodomini (comodi se per ogni dispositivo volete creare un sottodominio come ad esempio iphone.nomesito.it).

 

 

Advanced Settings

 

 

 


Configurazione layout dispositivi

Assegnazione moduli mobileEntrando nelle varie schede dei dispositivi potete configurare approfonditamente le posizioni dei moduli da visualizzare nella versione mobile e personalizzarvi tutti i campi. Qualora decidiate di visualizzare di alcuni menu solamente nella versione mobile non dovrete fare altro che creare le voci di menu e selezionare  come posizione il template mobile preinstallato (mobile_iphone nel caso della versione iphone).


Prova sul campo:

Una volta terminata la breve configurazione il nostro sito web è pronto per essere visualizzato sui dispositivi mobile; se state sviluppando in locale vi consiglio di scaricarvi un emulatore che vi permetta di verificare il vostro risultato, nel mio caso ho scelto Opera Mobile Emulator disponibile gratuitamente. Nella fase di test mi sono reso conto che per valutare il risultato la cache va svuotata continuamente, pena la mancata visualizzazione in real time dei nostri sforzi. Pulite sempre la cache del browser (sia desktop che mobile) e pure quella di joomla (anche se ce l'avete disattivata, alcuni provider la attivano comunque!!).

 

 

 

Ecco a voi il risultato finale del nostro lavoro, il nostro sito web in perfetta visualizzazione mobile, il tutto senza duplicare i menu! Un'ultima annotazione, ho notato che sulla jed un'utente segnalava l'aumento spropositato delle dimensioni del database dopo l'installazione di mobile Joomla, in tal senso confermo che il database aumenta di circa 40 Mb in seguito all'installazione del componente!

 

 

 

Visualizzazione su SmartphoneVisualizzazione desktop



Ricordo che sul sito dello sviluppatore potete trovare (a pagamento) template aggiuntivi e plugins per migliorare la compatibilità di Mobile Joomla con altri componenti (kunena ad esempio).

un saluto a tutti e buon test!

Massimo Lazzeri


Siti web Trento - Maxwebtrento


CommentaCommenta questo articolo sul forum
Commenta su G+Oppure commenta e condividi questo articolo sulla nuova pagina ufficiale di Joomla.it su Google+