Creare un Sito per Mobile

In questo articolo vi mostro come pianificare un sito per adatto alla navigazione su qualsiasi cellulare. Per lo meno in teoria, visto che ogni modello ha le sue piccole differenze e dovreste sempre aggiustare qualcosa, ma questo è proprio il punto: creare un mobile site che sia ottimo su ogni telefono e fantastico sull’iphone.

perchè un sito per la telefonia mobile?

Così come alcuni anni fà tutti si sono resi conto che avere una presenza sul web era importante per il proprio business, oggi sta diventando chiaro che rivolgersi all’audience telefonica è obbligatorio.
Ci sono più di 3 miliardi di cellulari nel mondo, 4 volte il numero dei PCs. Il numero sta crescendo, ma ancora più importante, i telefoni vecchi vengono periodicamente sostituiti con nuovi, il che significa sempre più dispositivi con l’accesso ad internet.
source:BuxUk
I normali siti web sono visualizzati decentemente sugli ultimi dispositivi che dispongono di web browsers simili alle versioni per desktop, ma diventano comunque un incubo in usabilità. Su telefoni più vecchi invece non sono proprio visualizzati.
Fidatevi, un sito specifico per i telefoni cellulari non è uno spreco di tempo.

con cosa abbiamo a che fare

Quando inizialmente i cellulari hanno integrato la tecnologia per accedere ad internet usavano un vecchio sistema di web standards chiamato WAP, che comprendeva il suo linguaggio WML e il protocollo per distribuirlo (WTL, WYPS). WML è basato su XML ed è largamente adottato e sebbene sia superato non è stato deprecato, quindi poteteconsidereare di creare una versione del vostro sito anche con questo markup come “safe mode” per i cellulari più vecchi. L’evoluzione del wap è WAP 2.0 che ha adottato XHTML-BASIC/MP e il famoso protocollo TXP/IP HTTP per la comunicazione. xhtml-mp è molto simile all’ xhtml e viene interpretato dai browser nello stosso modo, ha solamente alcune caratteristiche in più utili ai dispositivi cellulari.
La prima versione del Wap non aveva stili, ma Wap 2.0 ha introdotto i Wireless CSS (WCSS) che sono una versione di CSS 2.1 per integrare gli stili ad xhtml-mp. è simile alla cersione dei fogli di stile css 2.1 ma ha meno attributi e per essere sicuri che funzioni trasversalmente su tutti i browsers è meglio che vi manteniate su cose semplici. Non funzione col Wap 1.0
Oggi molti telefoni come l’iPhone, Android, etc. che hanno lo stesso browser che sui desktops accettano lo stesso mark-up che usate per i siti web. Eccovi un paio di link a una guida sull’xhtml-mp e una sui wcss.

come iniziare

Cosa abbiamo imparato da questo stralcio di storia?
Che non è difficile creare un sito che funzioni su tutti i telefoni con un po’ di tecniche simili al progressive enhancement. Il mio miglior suggerimento è di scrivere il sito in XTML-MP e poi usare diversi fogli di stile. Il WML è in più, dovreste controllare i dati della vostra audience per esserne certi, ,ma generalmente se le persone hanno un telefono talmente vecchio non lo usano per navigare ora che ci sono alternative.
Prima che vi mostri qualsiasi codice consideriamo un po’ di lavoro con carta e penna.

i. web strategy

Perchè vi serve un mobile site? Potete veramente offrire qualcosa di utile a chi usa il cellulare? Offrite un servizio specifico? Aiutate a compiere qualcosa?
Non fraintendetemi, non si basa tutto sull’utilità, non è necessario che creiate un’applicazione per l’iPhone per avere una presenza nel mobile web, internet è anche intrattenimento. Pensate a chi in un bar decide di navigare il vostro blog per passare il tempo. Quello che intendo dire è che dovreste sbarazzarvi di tutto quello che non è utile e specifico per questo mezzo. Molte grafiche e pagine di foto sono una brutta scelta.
Pensate agli obbiettivi del vostro business, perchè è importante per voi essere sui cellulari. Pensate agli obbiettivi dei visitatori, come beneficeranno dal vostro sito? Considerate la tecnologia disponibile e i suoi limiti.
Siccome questo è anche lo stadio in cui si pongono le basi per la pianificazione dell’interaction design, è un buon momento per fare ricerca e capire qual’è la vostra auddience. Vi aiuterà sapere in che circostanze useranno il sito e … molto importante, che tipo di telefono useranno.
Un ultima domanda: pensate di creare un sito apposito o volete semplicemente adattare quello esistente per la visualizzazione su mobile?

ii information architecture:

Semplicità! evitate lunghe catene di pagine, pensate ad “investimenti in click” perchè anche con connessione 3G serve sempre molto tempo per caricare una pagina quindi la pazienza dei visitatori da cellulare è piuttosto corta. Tagliate tutto quello che non è rilevante e usate categorie ben specificate: se il visitatore sa cosa sta aspettando è più probabile che attenda il caricamento. In pratica limitate le scelte e le categorie, non lasciate che il visitatore si perda in un labirinto. Mantenete il minor numero di livelli possibile. Potrebbe esservi d’aiuto creare un “click stream” per visualizzare come vengono navigati i contenuti.

iii. mobile web design:

Ci sono molte cose da tenere in mente realizzando un sito per mobile. Prima di tutto la dimensione degli schermi varia molto ma quello che più c’interessa è la larghezza, quindi il mio consiglio è i creare un layout fluido. Usate percentuali invece dei pixels per le dimensioni. Potete saperne di più su AListApart.Un layout liquido vi aiuta anche sull’iPhone e altri dispositivi con lo schermo orientabile. Comunque, per i cellulari della vecchia generazione che hanno solo l’opzione del layout “portait” è importante cercare di strutturare i contenuti a dovere, per esempio come distribuire le informazioni e tagliare il testo in blocchi più piccoli per aiutarne la leggibilità.

La Navigazione è un altro aspetto che andrebbe riconsiderato.
Anche nei telefoni multi-touch è un po’ impacciata, figuratevi in quelli più vecchi dove si usa il pad.
Una buona idea è usare liste, sempre, e limitare i link ad un massimo di 10, magari aggiungendogli anche degli accesskey (questi ultimi non vi serviranno sui telefoni multi-touch).
Evitate menu a più livelli perchè su piccoli schermi non sarebbero mostrati correttamente.
Mettete Links d’uscita per la home, la sezione precedente e successiva, alla fine di ogni pagina in modi che il visitatore non debba scrollare fino in cima.

Risorse e banda di connessione sono 2 dei maggiori limiti dei telefoni cellulari. Evitate object e javascript quando possibile perchè non sono supportati sui primi telefoni, ma anche ora che lo sono prosciugano la batteria.

Limitate anche l’uso di immagini perchè aggiungono peso alla pagina, inoltre dovete considerare quale sarebbe la dimesione ideale. Se volete andare sul sicuro mantenetevi sulla grandezza minima di 120px in larghezza. Un’altra opzione è usare la grandezza dello schermo più grande che vi aspettate visiterà il sito (diciamo un iPhone orientato a landscape di 480px?) e poi applicate questa tecnica per adattarle allo schermo come il vostro layout liquido. Ovviamente non è la “miglior pratica” siccome al browser toccherebbe comunque scaricare la versione più grande. Il modo corretto di ridimensionare le immagini è farlo su lato server e specificarne la grandezza.
Quando potete usate sempre sprites images (se non sapete a cosa mi riferisco leggete questo articolo su ALA). Come al solito non dimenticate “alt text” nel caso l’immagine non carichi.

Ho nominato il peso della pagina, il mio consiglio è di restare tra i 10kb e i 25kb. Mi riferisco ai telefoni di base, per gli smartphones va bene anche 50kb e per i touch-phones anche 100kb, ma è meglio andare sul sicuro visto che oltretutto dipende sempre dalla qualità della connessione.

Caching è un altro fattore che vi aiuta con la velocità di caricamento, cercate di evitare che le risorse comuni siano sempre scaricate e inserite una stringa per controllare la cache.

Interessante: Safari sull’iPhone registra nella cach solo file di dimensioni minori di 25kb, quindi zippate i vostri fogli esterni come i css e cercate dirimanere in quel limite con le vostre immagini sprites.

Quando applicate gli stili ai font è meglio non specificare la grandezza in pixels, casomai in em o percentuali, ma l’ideale è usare “small/normal/large” perchè ogni dispositivo sa cos’è adatto per sè.

Parliamo dei links: sui telefoni cellulari non c’è il mouse, quindi niente hovering, dimenticate l’attributo hover. Una cosa divertente invece è che se usate “tel:” e “sms:” nei link potete attivare quelle funzioni nel telefono, quindi è utile nella pagina dei contatti aggiungere link che se cliccati lanciano direttamente la chiamata o la messaggistica. Ecco un esempio:

call us
Send SMS to 1(212)555-1212


Entrando un po’ più nel tecnico la prima regola perchè il vostro sito venga visualizzato correttamente sui telefoni è aggiungere il giust Doctype (xhtml-mp), codice di caratteri (utf-8), e il MIME Type (application/html+xml).


"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">



Per quello che concerne la struttura del body cercate di costruire semanticamente (nell’ordine in cui le cose appaiono) ed evitate tabelle e frames. é sempre meglio validare il vostro codice, limitare l’uso di risorse esterne e per favore, non usate popups.

rilevare e rivolgersi a telefoni specifici

Ok, quello che vi ho detto fino ad ora era applicabile ad ogni telefono, ma forse volete aggiungere qualcosa di speciale o concentrarvi su alcuni modelli specifici.
Come potete riconoscere un modello e adattare i contenuti appositamente? Innanzi tutto vi ricordate cosa vi ho chiesto durante la pianificazione: voleter costruire un sito per mobile o adattare il sito web ad essere visualizzato sui cellulari? Se avete deciso di fare tutto quello che vi ho suggerito nel tutorial ne deduco che vogliate creare un sito da zero (bravi ragazzi) ma se per qualsiasi ragione volete solo adattarne uno, il modo migliore è tramite i CSS. Aggiungete un foglio di stile separato per i cellulari.

media="screen" /> media="handheld" />


potete anche aggiungere stili specifici all’interno di un unico foglio css:

@media handheld {#image1 {display: none}}



@media only screen and (max-device-width: 480px) {}


Nel caso vogliate essere più specifici nella personalizzazione avrete bisogno di spare ch modelli di cellulari visitano il vostro sito. Potete identificarli tramite le informazioni che ogni dispositivo include nel proprio http header, lo “user agent. Online ci sono alcuni databases che contengono tutte le informazioni relative ad ogni modello. Per esempio potete usare il WURFL database, oltre ad essere un progetto opensource condivide un API che potete usare nel vostro codice server-side per adattare i contenuti del sito e la loro presentazione a specifici user agents. Un altro database è quello di DeviceAtlas che oltre all’API offre vari tutorials, come questo per includerlo nel vostro codice php.

iphone

Sì, so che c’è molta agitazione attorno all’iPhone e non l’ho dimenticato. Ecco alcuni consigli specifici per questo telefono.
Una buona pratica è mantenere la user experience simile a quella generale dell’iPhone anche attraverso il sito. Questo non significa sacrificare l’originalità. Quello che intendo è piuttosto usare liste per i menu e bottoni molto grandi per poter essere premuti comodamente, questo è un touch-phone. Visto che usa Safari 4 potete usare xhtml e css. La parte divertente è proprio la potenzialità di sfruttare le nuove regole CSS3 che non potete usare sugli altri telefoni. La più comoda e usata ovviamente sono i bordi arrotondati:

div {
color: #bcbcbc;
padding: .5em;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}


Iniziate aggiungendo il viewport all’interno dell’ in modo che la pagina si adatti perfettamente allo schermo:




Il secondo passo è nascondere la barra degli indirizzi visto che abbiamo già così poco spazio. Ci basta una riga di javascript:

window.scrollTo(0, 1);


Create una icona springboard, una specie di enorme favicon per rendere riconoscibile il vostro sito se viene aggiunto ai segnalibri dell’homescreen. Dev’essere di 57×57 px e dovete inserire nell’

Qualcosa che penso potrebbe esservi molto utile è una funzione che una volta rilevato che un iPhone sta visitando il vostro sito web apre una finestrella per chiedere se si preferisce passare alla versione mobile del sito. su iphonemicrosites.com un breve tutorial
Come alternativa, se pensate che questo metodo sia troppo invasivo, potete semplicemente aggiungere dinamicamente sulla pagina un messaggio che avvisa il visitatore della possibilità di passare al sito per iPhone. Un altro tutorial sempre allo stesso indirizzo.

Visti questi primi passi direi che il resto lo lascio alla vostra creatività. Ricordatevi di usare grandi “target areas” nei vostri link e buttons per aiutare i pollicioni, bisogna riuscire a cliccare una cosa alla volta comodamente. Usate liste per menu e links, usate colonne per il testo e dividetelo in paragrafi corti.
A dir il vero tutto quanto detto nella prima parte del tutorial si applica anche su questo telefono, con la differenza che qui potete spingere le prestazioni oltre. Leggete la guida ufficiale di Safari per il web per imparare le tecniche migliori ed i limiti relativi all’iPhone. è breve ed aiuta molto.

Se vi serve un po’ d’aiuto nella creazione delle interfacce potete usare frameworks e strumenti di sviluppo apposta per questo handset. Date un’occhiata a queste risorse:Dashcode
iUI
Yahoo stencils

testing

Per testare il vostro sito la cosa ideale è provarlo sui telefoni veri e propri, ma nel caso non possiate ci sono alcuni strumenti per questo. Per l’iPhone è meglio lavorare sull’SDK offerta dalla Apple se siete su Mac. Se invece lavorate su Windows potete provare il sito con MobiOne, un emulatore molto carino che io stesso uso.
Per altri telefoni dovreste controllare se sono disponibili gli emulatori appositi. Altrimenti dotMobi offre Mobiready un validatore molto comodo che vi mostra come viene visualizzato il sito su alcune classi di dispositivi e che risultati ha in termini di tempi di caricamento, peso, costi, etc.
Però il sito dev’essere online.
Se avete Firefox potete installare l’add-on User Agent Switcher per simulare all’interno del browser come il sito viene visualizzato da altri user agents.

wordpress

Nel caso abbiate un blog costruito su wordpress e vogliate che appaia decentemente sui cellulari ho trovato un paio di plugins interessanti:
iWphone è pensato per l’iphone e praticamente aggiunge un theme che si adatta al dispositivo;
il dotMobi Wordpress Mobile Pack invece è più complesso e completo, converte completamente il sito validandolo per il linguaggio xhtml-mp, aggiungendo temi specifici, integrandolo col database di DeviceAtlas, e così via.

risorse

C’è il solito elenco delle mie fonti nel menu dopo l’articolo, ma ritenevo importante sottolineare alcune risorse in particolare che ho trovato più indispensabili che utili:
la web developers guide di MobiForge che contiene tutto quello che vi serve sapere;
un’altra guida per creare mobile sites, più sintetica e con tanti bei disegnini;
L’intero sito MobiForge, il miglior posto per iniziare;
su iphonemicrosites.com potete trovare alcuni tutorials molto utili per i siti da visualizzare sull’iphone;
Restando sull’oggettino Apple, leggete su Nettuts i 10 consigli di Paolo Ranoso o l’articolo approfondito su Webdesignerdepot

You can leave a response, or trackback from your own site.

---

---

---

---