Il layout per un sito mobile

In questo articolo parleremo in maniera sintetica ma esauriente, dei principali aspetti relativi alla realizzazione di un sito web ottimizzato per mobile (MOW - mobile optimization website).

In Italia, come nel resto del mondo, la diffusione di smartphone e tablet è in piena espansione e si pensi che sempre più persone che comprano questi supporti mobile sottoscrivono un abbonamento per la navigazione in mobilità. Questo dovrebbe far pensare ad un'azienda, se non lo ha già fatto, di fare un passo avanti verso una versione mobile (un'applicazione o quant'altro) del proprio sito aziendale.

Il pubblico è vasto e in continua crescita! C'è comunque da dire che a non tutti può servire un sito mobile, ad un hotel, azienda, agenzia immobiliare/turistica, ecc... o ad un sito di news si, ad un sito o blog personale o amatoriale non penso sia un'esigenza primaria (comunque mai dire mai).

Con gli anni abbiamo visto come i web designer si sono sbizzariti nella realizzazione di layout sempre più particolari, ora però con gli smartphone bisogna rivedere un po' tutto per agevolare la visualizzazione da mobile, la quale larghezza media dello schermo va da 240 a 480 pixel (per ora è quella a 320 pixel è la più diffusa).

Layout a 2, 3 o 4 colonne... OUT! Dal nostro punto di vista (che può essere giusto o sbagliato), l'unica soluzione possibile è quella a 1 colonna, al fine di dare e garantire buona usabilità e navigabilità tra i contenuti (organizzati a cascata); perchè con schermi piccoli la semplicità è sempre la strada preferibile.

La strutture che secondo noi è la più congeniale attualmente è questa, semplicissima e funzionale:

• Header: la testa della pagina, la porzione superiore che viene destinata a contenere il logo ed eventualmente pochi altri elementi di primo piano;
• Body: è lo spazio per i contenuti effettivi delle pagine, la porzione centrale del sito web;
• Footer: il piè pagina, è la porzione sotto a tutto in fondo alla pagina, dove di solito si inseriscono i credits, riferimenti legali, copyright, contatti, ecc...

La parte centrale della pagina in giallo (il body), sarà destinata ad ospitare altri spazi che variano a seconda delle esigenze strutturali o di contenuti.

Un elemento imprescindibile, com'è ovvio che sia, è il menu di navigazione col quale possiamo aver accesso alle altre pagine o aree del sito web. Se le voci del menù (in arancione) sono poche è possibile creare direttamente una barra con i link necessari alla navigazione (soluzione 1.), nel caso non siano poche, sia per esigenze di spazio sia per una migliore leggibilità, è meglio aggiungere un unico bottone menù che, una volta premuto, apra a tendina o a cascata tutto l'elenco delle pagine o aree disponibili (soluzione 2.). 

Tenendo a mente le dimensioni ridotte dello schermo degli smartphone a parer nostro la semplicità e la linearità restano sempre la scelta migliore.

Quindi anche per venire in aiuto agli utilizzatori di smartphone che hanno canoni a tempo o a KB scaricati, o comunque per la  velocità della banda non sempre ottimali, è bene impaginare i contenuti a cascata dove i vari elementi (testo, immagini, video, ecc...) si susseguono uno sotto all'altro in maniera semplice ed intuitiva.

Questa è anche la soluzione che utilizzano molti social network per la loro versione mobile.