In questo articolo vi guiderò alla creazione sito web iPhone e mobile oriented adattabile tranquillamente per ogni dispositivo senza ricorrere ai triplici salti mortali che si fanno attualmente nel disperato tentativo di omologare pagine web tradizionali per la maggiorparte dei browser.
Innanzitutto perchè creare un sito web per device mobili? Senza dare troppa importanza alle statistiche basta guardare per strada o nei mezzi di trasporto quanta gente utilizza cellulari o i più ben noti “Smart Phone”, dal semplice ragazzo all’impiegato o manager che sistematicamente incontriamo per strada con la testa china verso l’iPhone di ultima generazione, Insomma, questo basta per aprire una piccola finestra su un mondo assolutamente interessante che vede il mercato di questi apparecchi mobili in costante aumento, giorno dopo giorno.
Cambia il concetto di web
Per incominciare è necessario eliminare il concetto di web tradizionale e concentrarsi prettamente sul un’area che tutt’al più misurerà 320×480 pixel. Questo lascia intendere che principalmente (a differenza del sito web standard) viaggeranno informazioni e contenuti brevi, essenziali che non rendano troppo pesante e disordinata la navigazione su uno schermo abbastanza piccolo, inoltre, considerata la più potente delle connessioni che un dispositivo mobile piò avere questa sarà sempre più lenta rispetto quelle dei Pc per cui la pazienza degli utenti sarà nettamente inferiore e questo richiede il caricamento di contenuti leggeri ma di alto impatto comunicativo (alcuni siti inseriscono soltanto il loro logo aziendale accompagnato da testo senza badare troppo all’aspetto estetico, questa scelta li rende veloci e competitivi).
Design ed impaginazione
Mi verrebbe da pensare: ma quante versioni del sito dovrò realizzare? Al mondo esistono centinaia e centinaia di modelli diversi di cellulari. La risposta è: solo uno; la soluzione più accreditata è quella di puntare su un layout liquido in modo tale che esso acquisterà la dimensione massima a seconda della risoluzione del cellulare ottenendo una simile visualizzazione per tutti i browser mobile. Il menu in testata deve essere semplice ed intuitivo, evitate effetti scorrevoli o a tendina anche perchè non tutti supportano JavaScript o suoi derivati.
Ogni pagina interna deve essere ben collegata alle precedenti o alla home page, se è presente molto testo è preferibile inserire tali referenze anche alla fine dello stesso. Pensate ad un cellulare che non è dotato di tecnologia touch-screen, sarebbe fastidioso risalirsi tutta la pagina per poter tornare al menu, alla home page o alle pagine precedenti. A differenza del web è preferibile utilizzare per la grandezza dei font “small, normal, large” o tutt’al più le percentuali poichè ogni browser mobile ha i suoi standard di rendering.
Attributi aggiuntivi
I cellulari non avendo mouse non applicano di conseguenza l’effetto hover per cui dimenticatelo. Tuttavia ci sono attributi interessanti come tel: o sms: da utilizzare nei collegamenti ipertestuali, come da intuito fanno partire rispettivamente la scrittura di un sms ed una chiamata, esempio:
Telefono
Inviami un messaggio
Questa regola vale sia per la creazione siti web iPhone che per qualsiasi altro dispositivo mobile di ultima generazione
L’importanza del doctype
Per garantire una corretta visualizzazione è importante non dimenticare il doctype che deve essere di tipo xhtml-mp, un esempio di testata potrebbe essere il seguente:
in aggiunta a quanto già spiegato c’è un meta tag che lavora sulla cache e riduce i tempi di caricamento di una pagina:
Creazione sito web iPhone
Niente di nuovo rispetto quanto già detto prima, la bellezza e la particolarità di design sta in Safari, questo browser su mobile è un vero e proprio valore aggiunto. Il suo supporto ai CSS3 nella creazione sito web iPhone sarà superiore rispetto qualsiasi altro dispositivo mobile.
Alcune chicche per rendere ancora più piacevole l’esperienza di navigazione su iPhone:
window.scrollTo(0, 1);
Nasconde la barra degli indirizzi aumentando in altezza le dimensioni del layout.
Grazie al tag viewport la pagina si adatterà esattamente alle dimensioni dello schermo.
Come similarmente si fa per le applicazioni createvi un’icona di 57×57 pixel essa comparirà nella barra dei preferiti accanto al link del sito.
Se si desidera realizzare una versione standard ed una per iPhone a livello di design si potrebbe pensare in maniera differente magari immaginando tasti e pulsanti più grandi che permettono facilmente il click a portata di dito.
Plugin mobile per WordPress
Sono tantissimi i plugin per wordpress che trasformano o permettono di gestire un sito web per mobile, tra questi ne lancio uno che è poco segnalato in giro soprattutto nei blogi italiani ma che risulta davvero funzionale, il suo nome è WpTap, fa coesistere due temi (quello di default utilizzato per l’applicazione web principale) e mobile (basta duplicarvi un tema e riportarlo in versione mobile secondo le regole spiegate in questo articolo). La versione per cellulari va caricata via plugin dopodichè sarà compito di WpTap:
- Identificare se dal sito principale si sta navigando da cellulare ed eventualmente effettuare il redirect alla versione mobile da voi realizzata;
- Applicare tutti i settaggi e le preferenze impostate da pannello di controllo.
Ottimo a mio giudizio, su questo probabilmente scriverò una guida a parte.
Rilevare i cellulari
Come i browser web anche i cellulari sono dotati di un USER AGENT che può essere utile per identificare il device di navigazione sul sito web istituzionale ed eventualmente reindirizzarlo alla versione mobile. Ma ricordatevi comunque di inserire link al sito mobile nella versione principale del vostro sito e viceversa. Alcuni utilizzano addirittura la possibilità di visualizzare la pagina web mobile tramite una scelta “Mobile standard o per iPhone”, in realtà si tratta di una scelta puramente di finezza poiché tutto è riconducibile ad un’unica versione, semplicemente con la creazione sito web iPhone avrete un ottimo sito web mentre con un altro dispositivo sarà un normale sito web questo per via del Browser installato sul cellulare e del suo supporto ai CSS3 non disponibile al momento su altri cellulari.
Risorse utili
- WURFL: database che detiene tutti gli USER AGENT per device mobili, fornisce un API da utilizzare nel vostro codice. Utile per riconoscere se si sta navigando da cellulare ed eventualmente reindirizzarlo alla versione mobile;
- MobiOne: emulatore per creazione sito web iphone e iPod touch, utile come piattaforma per testar il vostro sito web;
- Guida ufficiale di Safari per lo sviluppo web su mobile;
- WpTap: Plugin per wordpress di cui sopra descritto;
- Ready Mobile: ottimo tool per la validazione di siti web Mobile;
