Convertire un sito da desktop a mobile

Da desktop a mobile

Convertire un sito da destop a mobile, cosa bisogna fare? cosa bisogna tenere in considerazione?

Poiché oggi i dispositivi mobile hanno ora superato il desktop in popolarità è necessario che i designer disegnino tenendo conto del mobile.
Mobile first è una tecnica molto popolare e diffusa, perché è più facile scalare da mobile a desktop che viceversa.

Tuttavia, alcune volte la scelta è nelle mani del designer e spesso i progettisti si trovano con disegni desktop esistenti da adattare al mobile.
E poichè alcuni elementi non si adattano bene, è importante capire quali accorgimenti prendere quando si progetta per il piccolo schermo o quali accorgimenti bisogna tenere in considerazione quando si converte un sito da desktop a mobile.
Ecco come …

Minimalismo

Il minimalismo è stato molto popolare nel web design per anni, semplicemente perché è bello e spesso aiuta l’usabilità.
Quando si tratta di mobile, però, il minimalismo non è solo una scelta estetica, in quanto è uno basato esclusivamente sull’usabilità.

Secondo Nielsen Norman Group, tagliare alcune caratteristiche del sito è una necessità nei dispositivi mobile.
Che cosa significa questo per i progettisti nel momento in cui si trovano a costruire un sito mobile partendo da un sito desktop già esistente?

Vuol dire eliminare ciò che non è essenziale per l’esperienza utente mobile.

Ad esempio, se bisogna adattare un negozio di e-commerce dal desktop al mobile,
mantenere la stessa quantità di prodotti esposti nella versione desktop nella versione mobile ha senso,
perché i clienti devono essere in grado di trovare tutto quello che il negozio online ha da offrire, da desktop come da mobile.
Un grande carosello di annunci per le offerte, tuttavia, potrebbe ragionevolmente essere dimezzato un po’.

Nascondere la navigazione

Una delle caratteristiche più comuni sugli schermi mobile è il menu hamburger,
quella piccola icona quasi onnipresente con tre segmenti di linea orizzontali ammucchiati uno sopra l’altro.
Questo è un caso in cui la dimensione dello schermo più piccola del mobile costringe a mostrare gli elementi in modo diverso tra mobile e desktop.

Nonostante i pareri divisi sulla presenza del menù hamburger, è praticamente onnipresente su schermi mobili, semplicemente perché questa è la soluzione migliore che i progettisti hanno trovato per adattare il menu di navigazione dal desktop al dispositivo mobile.

Layout a una colonna

In linea con il fatto che la soluzione più semplice è la più adatta quando si tratta di dispositivi mobili, è bene ricordare che un layout a colonna singola è più pulito e più facile da usare per gli utenti che usano uno schermo più piccolo.

Il grande vantaggio di un layout a colonna singola è che non c’è lo scorrimento orizzontale, e non c’è bisogno dello zoom per poter leggere i contenuti del sito.

Quando si introduce un layout a colonna singola, si snellisce l’esperienza degli utenti, costringendoli solo a scorrere semplicemente verso il basso per leggere o fare clic su un link che vogliono vedere in una nuova pagina.

Per esempio il sito web Geek Journal nella sua versione desktop dispone di più colonne.
Questo layout è facile da usare su un desktop, dove gli utenti possono semplicemente spostare il cursore da sinistra a destra senza problemi con il mouse.

Naturalmente, la versione mobile di Geek Journal mostra in maniera chiara come le cose devono cambiare sugli schermi più piccoli, mostrando un design a colonna singola pulito ed efficiente che migliora l’esperienza degli utenti, infatti i lettori possono solo scorrere verso il basso per leggere i contenuti del sito.

Considerazioni per il mobile

A causa dell’influenza del mobile per gli utenti di oggi, i progettisti devono progettare i siti tenendo sempre in considerazione i cellulari.

Progettare per dispositivi mobile in realtà deve essere una premura tenendo conto degli adeguamenti specifici che si dovranno fare per il sito quando si progetta per il mobile.

Questo include tutto quello di cui abbiamo parlato in precedenza, dal minimalismo nel design, al nascondere la barra di navigazione, al passare a un layout a colonna singola.

Con l’adozione di queste buone pratiche nel vostro lavoro, si creeranno dei buoni siti usufruibili da mobile.