Leggendo in rete qualche articolo o tutorial dedicato al responsive design prima o poi ci imbatteremmo sicuramente nell’espressione “mobile first”. Cerchiamo quindi di capire di che cosa si tratta essendo questo il primo concetto in assoluto da prendere in considerazione nella progettazione di un sito responsivo.

Il Mobile First è un approccio. E’ il workflow progettuale che parte non più dal desktop per poi rimpicciolirsi nel mondo mobile, ma fa completamente l’inverso.

L’approccio classico alla progettazione e alla realizzazione di un sito web mobile molto spesso è subordinato alla progettazione e alla realizzazione del sito stesso in versione desktop.

Generalmente si parte dalla progettazione del sito in ambiente desktop ragionando in profondità sull’aspetto grafico, cercando di occupare tutti gli spazi a disposizione (inserendo in questo senso anche elementi non strettamente necessari) e pensando a quelle che potrebbero essere tutte le funzionalità di cui dotare il sito in queste condizioni.

Dopo aver ragionato per mesi sulla versione desktop del sito (e soprattutto dopo averla implementata) si passa alla progettazione mobile ed è a questo punto che, generalmente, inizia il dramma tentando in ogni modo di incastrare tutta la grafica, i contenuti e le funzionalità pensate per un dispositivo desktop in uno schermo molto più piccolo e su dispositivi che nulla hanno a che vedere con lo schermo di un pc.

Il risultato è un sito web non pensato per gli utenti mobile, che spesso ricalca la stessa struttura e lo stesso approccio del sito per desktop e questo causa spesso inefficienza e una scarsa soddisfazione da parte degli utenti.

Il mobile first è un approccio che ribalta completamente il modo di pensare e progettare un sito web.

Prima viene pensato e progettato il sito su mobile e solo successivamente si lavora alla versione desktop avendo però già come chiaro punto di partenza il sito in versione mobile.

Concepire un sito con l’approccio mobile-first permette di:

• pensare e creare contenuti diretti e semplici da leggere
• creare una grafica minimale, sobria e funzionale
• pensare di più all’interfaccia utente rendendo divertente la navigazione
• creare menù semplici possibilmente senza sotto-menù (o se necessario, senza andare oltre un secondo livello).

Questa semplificazione, che abbraccia la filosofia “less is more”, ci da la possibilità di lavorare meglio, con efficienza e senza le mille distrazioni causate da dibattiti sul pixel in più o in meno o sulle più disparate posizioni degli elementi. Anche se può sembrare limitante lavorare prima su schermi più piccoli, la realtà dei fatti dimostra che concentrarsi di più sui reali bisogni informativi degli utenti permette di creare un sito più leggero, efficiente e divertente da usare. E qui iniziamo ad abbandonare il concetto di GUI (Graphical User Interface) per abbracciare la NUI (Natural User Interface).

Come si fa a rendere naturale l’interfaccia utente? Ponendoci delle domande su alcuni fattori quali:

• il mio menù è facilmente raggiungibile usando una mano sola su uno smartphone di circa 4 o 5 pollici?
• l’utente che ha le cosiddette “manone” è in grado di premere i pulsanti e i link?
• devo scorrere all’infinito lo schermo per arrivare al fondo pagina perché ci sono chilometri di testo descrittivo?
• mi sto perdendo in mezzo a decine di voci di menù?

ATTENZIONE! La progettazione di un sito web e/o del suo layout grafico è un processo indipendente da Passweb e/o da qualsiasi altro strumento utilizzato per realizzare il sito. Ogni sito andrebbe prima pensato e progettato su carta e solo una volta chiaro il progetto si dovrebbe passare poi alla sua implementazione.