Mobile web design

Qualche settimana fa è uscita la guida al Mobile Web Design, che introduce il nuovo mondo dei domini .mobi e tutto quanto riguarda la fruizione del web dai cellulari. Di seguito alcuni punti salienti della guida:

La regola fondamentale da rispettare, nella progettazione di interfacce per cellulare, è:

il web design mobile non è la semplice trasposizione dell'interfaccia per pc: occorre pensare l'esperienza mobile, sviluppando interazioni e funzionalità specifiche per il mondo mobile. Ad esempio, fornendo servizi e informazioni che abbiano un senso particolarmente forte per chi si trova in movimento.

A seguire informazioni più dettagliate e specifiche:

-il numero di link in una pagina va contenuto, sarebbe bene limitarlo a 10.

-al termine del contenuto di ogni pagina, è bene inserire dei link che puntino ad altre risorse del sito: questo perché se il menu di navigazione è in testa al contenuto, scrollare nuovamente tutta la pagina all'indietro per ritornare al menu è un'operazione difficile e noiosa su un cellulare.

-è opportuno preferire una struttura semplice del sito: il supporto per i CSS dei dispositivi mobili è scarso, meglio quindi preferire elementi basilari del codice XHTML, come ad esempio le liste di definizione (dl).

-le dimensioni dei display da considerare nella progettazione sono, sostanzialmente, queste:

. 128 per 160 pixel
. 176 per 220 pixel
. 240 per 320 pixel
. 320 per 240 pixel

. occorre considerare comunque una dimensione massima di 200 per 250 pixel.

-tutti i contenuti codificati in XHTML-MP o XHTML Basic, le versioni di XHTML per il design mobile, devono essere codificati con MIME type="application/xhtml+xml": questo non sempre è automaticamente possibile su tutti i server. Quindi, prima di registrare un dominio .mobi, assicuratevi che il server possa essere configurato in questo modo.

-un utile attributo del tag a è l'attributo tel, ad esempio: +1 206 545-0210. Questo rende possibile, cliccando sul link, avviare direttamente la chiamata al numero specificato nell'attributo.

-le dimensioni delle immagini vanno sempre specificate in modo da facilitare il compito del browser nel ridimensionarle: a questo proposito è bene limitare le immagini ad una larghezza di 120 pixel, per evitare lunghi tempi di caricamento dovuti al download dell'immagine nelle sue dimensioni originali e poi al ridimensionamento.

-attenzione al numero di risorse collegate alla pagina: immagini, script, css, link esterni, etc. Sono tutte richieste http che hanno un peso nel rendering della pagina, perciò evitare il superfluo è giusto e doveroso.

-i sistemi operativi per cui progettare o, meglio, le tipologie di cellulari sono infinite, quindi tanto vale concentrarsi su alcune macro classi di cellulari che ricoprono buona parte del mercato:

. nokia serie 40
. nokia serie 60
. motorola serie V
. un qualsiasi dispositivo samsung/lg di fascia medio-alta
. i dispositivi che montano Windows Mobile