L’arrivo degli smartphone ha rappresentato una vera rivoluzione per il mondo del web design. Improvvisamente, tutti volevamo essere i primi a realizzare siti con un design web responsive. Sembrava quasi magia: ridimensionando la finestra del browser, l’intero sito si adattava alla nuova risoluzione, modificando persino la struttura delle pagine.
Quando lo mostravamo ai clienti, per quanto oggi possa sembrare strano, spesso restavano a bocca aperta. Eppure, non parliamo di molti anni fa: oggi è ormai la normalità.
Tuttavia, c’è ancora molto da fare nell’ambito del web design responsive o adattivo. Non basta affidarsi a un framework CSS come Bootstrap e aspettarsi che faccia tutto da solo. Se vogliamo entrare davvero in sintonia con l’utente finale, dobbiamo offrire una user experience pensata per il dispositivo utilizzato. In questo senso, è fondamentale capire come l’utente interagisce con il proprio device e quale filosofia di navigazione si aspetta.
Se l’utente si trova davanti a un computer desktop, il mouse sarà lo strumento principale di navigazione. Se invece sta navigando da smartphone, dobbiamo considerare che l’interazione sarà touch e, di conseguenza, il nostro web design dovrà agevolare questo tipo di esperienza.
Punti chiave per un buon web design responsive
Menu di navigazione
È fondamentale che il menu di navigazione sia semplice e intuitivo per l’utente. Possiamo facilitarne l’uso inserendo un semplice pulsante per aprire il menu del nostro web design, sia a comparsa laterale che a discesa. In questo modo risparmiamo spazio e rendiamo la navigazione più ordinata.
Immagini adattabili e coerenti
Dobbiamo assicurarci che le immagini utilizzate nel nostro design siano realmente adattabili. Devono essere visualizzate correttamente sia su uno schermo da 27″ che su un iPhone.
Anche se questo è un aspetto basilare, spesso si trascura la coerenza delle proporzioni. Le immagini inserite devono essere coerenti con l’orientamento del dispositivo o dello schermo. Se, ad esempio, nella versione desktop inseriamo un’immagine molto panoramica, su smartphone rischiamo di ottenere una fascia sottilissima che occupa tutta la larghezza: una soluzione spesso poco efficace.
La scelta migliore è quindi proporre un formato intermedio o prevedere una sostituzione dell’immagine specifica per la visualizzazione su smartphone.
Ordine e gerarchia
L’ordine delle sezioni all’interno del nostro web design è cruciale. Ridimensionando il sito per smartphone, la maggior parte dei contenuti verrà disposta in una singola colonna, una sezione sotto l’altra. È quindi importante pianificare l’ordine con cui vogliamo che l’utente visualizzi i contenuti, posizionando le sezioni più rilevanti il più in alto possibile.
Less is more
Seguendo la logica appena descritta, quando progettiamo per uno schermo di smartphone, è consigliabile eliminare le sezioni non essenziali per chi naviga da questi dispositivi. Ad esempio, i classici footer possono essere rimossi del tutto, lasciando al massimo una riga con i dati di contatto.
Sfrutta tutte le funzionalità disponibili
Quando progettiamo la navigazione da smartphone, è fondamentale considerare tutte le funzionalità aggiuntive offerte dal dispositivo. Ad esempio, se nella versione desktop inseriamo una mappa di contatto, nella versione mobile potremmo prevedere un tap per aprire il navigatore GPS. Per semplificare ulteriormente l’esperienza, possiamo inserire anche pulsanti per la chiamata diretta.
Altri dati interessanti
Oggi i dati parlano chiaro: gli utenti che navigano da dispositivi mobile sono ormai più numerosi di quelli da desktop. Le statistiche mostrano un 51% di visitatori da mobile contro un 42% da desktop, con il restante 7% che utilizza altri tipi di dispositivi.
- 51% di visitatori da mobile
- 42% di visitatori da desktop
- 7% utilizzano altri dispositivi