10 Principi base per il mobile web design

Il web design è ormai una disciplina consolidata, ma quando è necessario adattare un sito per dispositivi mobili, molte delle regole consuete perdono di validità.

Mobile Web DesignIl mobile web design è la disciplina che insegna ad organizzare in maniera efficiente i siti che devono essere fruiti sui dispositivi mobili.

Molte delle regole valide per il web design tradizionale non sono valide nella progettazione per smartphone. Capire come realizare un sito mobile in modo che sia chiaro e coerente con le attese degli utenti non è difficile. Qui di seguito presentiamo le regole d'oro che teniamo presente nella progettazione dei siti mobile con la piattaforma PicoSite.

Non sono verità immutabili, sono solo consigli da tenere a mente mentre si lavora.

1. Poche immagini e/o piccole

Ebbene si, disegnare per dispositivi mobili vuol dire avere ancora a che fare con i problemi di banda limitata. Non è detto che siano disponibili wi-fi o UMTS (siamo sempre in Italia). Se una pagina ci mette più di 5 secondi a caricarsi gli utenti scappano...

E' quindi fondamentale ridurre il numero di elementi pesanti da caricare in una pagina. Vanno quindi anche evitati gli slideshow e tutte le altre soluzioni che fanno ampio uso di grafica.

2. Layout liquidi

Sebbene sia ormai uno standard anche nel mondo del web tradizionale, la progettazione dei layout tramite css è fondamentale nel mondo del mobile web.

HTML 5 offre tutta una serie di nuove possibilità che devono essere sfruttate per rendere i contenuti della pagina (immagini, testo, etc.) autoadattanti rispetto alle risorse disponibili.

3. Sviluppare il sito verticalmente

Il modello di interazione degli smartphone prevede come naturale lo scrilling verticale, ma mai quello orizzontale. Per cui è necessario sviluppare il sito nel senso verticale.

Nell'immagine è evidenziata la differenza tra sito tradizionale (a sviluppo orizzontale) e sito mobile (a sviluppo verticale).

4. Navigazione adatta a touchscreen

I link e tutti gli altri strumenti di navigazione devono essere adatti all'uso con touchscreen, per cui devono avere dimensioni sufficienti e spaziatura adatta all'uso con le dita e non solo del puntatore del mouse.

Prevedere diversi percorsi di navigazione per evitare di ritornare sempre alla home tramite apposti pulsanti e menu a scomparsa.

Un sito con la navigazione compromessa è un sito inutilizzabile!

5. Se non sai come fare qualcosa immagina di fare un'applicazione nativa per iPhone

Spesso, le forme di interazione più complesse tendono a simulare il comportamento di una analoga applicazione nativa per cellulari: quindi liste che aprono altre pagine, elementi draggabili, etc.

6. Non usare flash

Basta pensare che in questo modo vengono esclusi dall'utilizzo del sito tutti i terminali del mondo iOS.

7. Nascondi ciò che non ti serve

Lo spazio è poco per cui è importante ridurre il numero di contenuti di ciascuna pagina eventualmente aumentando la complessità della navigazione.

Quando qualcosa non serve deve semplicemente sparire: o per sempre o dinamicamente al termine del suo utilizzo.

8. Predisponi una funzione di ricerca

Per rendere più immediata la ricerca dei contenuti di interesse, è necessario fornire il sito di funzionalità di ricerca: tipicamente a scomparsa.

9. Ricordati che non tutti i dispositivi hanno le medesime capacità

Anche nel mondo degli smartphone il supporto alle pagine html non è lo stesso: css, javascript, etc. La frammentazione regna sovrana. Per questo è importante predisporre un sistema di erogazione che offra almeno 2 template differenti: smartphone evoluti, smartphone basic.

10. Testa su tutte le principali piattaforme di mercato

E' importante vedere il risultato sulle principali piattaforme. Spesso si scoprono dei problemi assolutamente inaspettati.

 



Tag correlati:

Ti informiamo che, per migliorare la tua esperienza di navigazione su questo sito, sono utilizzati cookie tecnici e cookie di terze parti e non cookie di profilazione.
Alla pagina privacy avere maggiori dettagli ai sensi dell'art. 13 del Codice della privacy.
Cliccando su 'Accetto' i cookie saranno attivati Accetto