Hola
Dato che molti me l'hanno domandato, vi spiegherò a grandi tratti le linee che ho seguito per adattare la visibilità di due miei siti Joomla a cellulari, smartphone, iPhone e cia mantenendo lo stesso stile grafico, non tratto di scrivere un manuale, semplicemente passo a condividere la mia corta esperienza.
Secondo me, la prima cosa da fare è cambiare la propia mentalità di progettista web, nel senso che siamo abituati a fare delle web ottimizzate per larghi di 1024 e passa pixel e senza limite di peso e adesso ci troviamo a che fare con schermi intorno i 200 pixel e anche minori e con pagine che, secondo il w3c, non devono superare i 20 kb e con una cache inesistente o quasi.
Per aiutarvi a cambiare chip mentale, vi consiglio di aprire i seguenti siti con celulare (o emulatore) e anche con il browser Pc, vedrete che differenza di concezione e visualizzazione a seconda dell’user agent:
http://www.google.it/m?http://it.m.yahoo.com/http://mobile.gazzetta.it/dati/Homepage.xhtmle adesso i miei due siti, tanto per avere una referenza di siti fatti con joomla:
diseño web joomlarestaurante casa antonioTornando all’argomento del post, in principio partiamo da un nostro sito fatto in Joomla, con pagine che pesano oltre 150 kb, per convertirlo a telefonino friendly dobbiamo:
- trovare un modo di redirigere le chiamate dei cellulari al template mobile
- eliminare dal nostro sito script, flash, popup, iframe, table e altre soluzioni che i cellulari digeriscono male o non digeriscono affatto
- ridurre le dimensioni della pagina, soprattutto il weight e il size delle immagini
- trovare degli emulatori per poter vedere il nostro lavoro in locale
Nel Jed sezione mobile troverete diverse estensioni che faranno al caso vostro, la piu semplice e effettiva che ho trovato, si chiama plugin mobilebot che redirige le chiamate dell’user agent in entrata al template o sottodominio adatto, per ulteriori informazioni su installazione e configurazione potete leggere la guida che ho scritto sul
mobilebot pluginPer fare la nuova pagina mobile io ho creato un nuovo menu usando il mainmenu di base di Joomla in sostituzione del swmenu (free se no i mod si arrabbiano
) o qualsiasi altro menu che funzioni con js e css. Gli item del menu li faccio puntare alla home e articoli che mi interessano mostrare nella versione mobile, e vanno assegnati al template per cellulare. Facendo cosí, quando entra una richiesta (sia da browser pc che mobile), viene diretto allo stesso content ma con decorazione diversa (altro menu, template, posizioni...)
Adesso passiamo al template, ho creato un nuovo template copiando e rinominando quello che ho per browser Pc, poi l’ho modificato: nell’index.php ho messo un div in alto per il menu principale (o menu piu foto), poi il div del componente e (in una delle due web) un’altra posizione inferiore per il footer, tutto il resto cancellato
Nel css bisogna lavorare abbastanza, e qui si va abbastanza a naso dato che, da quanto ho capito, i fabbricanti di telefonini il css lo usano come e quando gli pare (e come sempre windows piu degli altri), comunque in principio vi consiglio sicuro: cambiate i font in pixel per font em o tipo di lettera (small, medium, ...), i weight meglio in percentuale e niente propietà hover, active, fixed, focus, child, opacity e multiple background-image, la maggioranza o tutti non le interpretano.
Per vedere l’operato e controllare le modifiche, bisogna scaricare e instalare nel Pc degli emulatori di telefonini che ci mostreranno i risultati sia in locale che in remoto, esistono diversi ma vi consiglio due che uso io:
Simulatore per Opera mobile e
Simulatore per iPhone e iPad Bene, credo che dopo questo, avete una base per fare la prova in locale, buona fortuna
