Mobile First: una moda? una tendenza? una nuova tecnologia?
No. 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.
Perchè adottare questo approccio?
Innanzitutto i dati statistici: +20% ogni anno di traffico web da mobile. Questo fenomeno non può essere nascosto sotto il tappeto. Un Web Designer professionista deve creare siti responsive. A mio avviso, non può più essere considerato un optional. Perciò, visto e considerato che i nostri siti ormai sono tutti responsive, potrebbe valer la pena adottare un metodo creativo nuovo, proprio come il Mobile First.
Il primo a battezzare questa metodologia con questo nome, fu Luke Wroblewski il quale intitolò il suo libro proprio “Mobile First”.
Luke illustra i vantaggi e le opportunità offerte dal Mobile First. Come per tutti i metodi, se seguiti, vengono offerte logiche operative volte a snellire il lavoro e mai a complicarlo. Cosa che, invece, col metodo tradizionale, non sempre succede. Ad esempio nel creare in passato un sito in formato desktop, la tendenza di solito era quella di cercare di occupare gli spazi, lasciarsi andare troppo con la creatività grafica o usare molte righe di testo. Poi però, il dramma: generare da tutto ciò una versione mobile! E allora tutti alla carica con l’utilizzo di “display:none” sul nostro CSS che sappiamo molto bene non essere molto amico della SEO.
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ù?
La tecnologia a disposizione
Dopo questi concetti di analisi pre-codice, vediamo quali sono le tecnologie create con in mente il Mobile First.
Come sapete sono un fan dei pre-processori CSS, in particolare di SASS, potenziato dalle librerie Compass che a sua volta sono servite per creare alcune delle griglie semantiche Mobile First. Tra queste troviamo Susy e Singularity alle quali abbiniamo l’ottimo Breakpoint. Il trucco sta innanzi tutto nell’uso delle media query. I breakpoints utilizzati faranno tutti riferimento alla proprietà min-width. Perciò il nostro breakpoint sarà la dimensione minima del desktop e non più la dimensione massima del mobile. Tutto questo viene fatto “automagicamente” da queste griglie SASS. Come? nel caso di Singularity con pochissime righe di codice:
@import ‘compass’; @import ‘breakpoint’; @import ‘singularitygs’; $mobile-first: true; $desk: 768px; $grids: 6; $gutters: 1/3; $grids: add-grid(12 at $desk);
Cosa abbiamo scritto in queste righe? abbiamo subito importato le librerie che ci servono e detto a Singualarity di attivarsi in modalità mobile-first, in questo modo tutti i media query fanno riferimento alla proprietà min-width. Poi ho stabilito il punto di rottura che è il a 768px. Ho quindi scritto che la mia griglia deve avere 6 colonne in formato mobile dopo di che, in formato desktop, dovrà averne 12 per una maggiore flessibilità nel disporre gli elementi nel grande schermo.
Ecco fatto. Ora dobbiamo fare ancora una cosa: switchare il nostro cervello in modalità Mobile First ed iniziare a scrivere codice seguendo questo approccio, disponendo gli elementi in formato mobile e poi in desktop, così:
header {
clear: both; //necessario a singularity per il float degli elementi
@include grid-span(6);
@include breakpoint($desk) {
@include grid-span(12); }
}
nav {
clear: both;
@include grid-span(6);
@include breakpoint($desk) {
@include grid-span(12); }
}
main {
clear: both;
@include clearfix; //necessario per non accavallare gli elementi
@include grid-span(6);
@include breakpoint($desk) {
@include grid-span(8, 1); }
}
aside {
@include grid-span(6);
@include breakpoint($desk) {
@include grid-span(4, 9); }
}
footer {
clear: both;
@include grid-span(6);
@include breakpoint($desk) {
@include grid-span(12); }
}
in questo modo abbiamo ottenuto un semplicissimo layout che dispone tutti gli elementi uno in pila all’altro in formato mobile e che, superato il breakpoint, si dispongano in maniera classica a due colonne.
Rimando all’ottima documentazione di Singularity per approfondire quanto scritto e a visionare il reference di Compass e altre guide per capire come utilizzare le immagini sui dispositivi retina e snellire il caricamento di queste con il metodo sprite.
Conclusioni
L’approccio mobile first non è detto che sia sempre il migliore da utilizzare, ma può essere utile soprattutto per siti web dove il mobile è effettivamente un fulcro importante per il business. Pensiamo ad esempio a sistemi di prenotazione on line, acquisti, mappe e tanti altri servizi utili quando siamo in movimento. Chiaramente per siti istituzionali molto complessi dove è richiesto un certo numero di elementi e di menù e testi descrittivi molto lunghi forse è meglio adottare il metodo classico puntando più che altro alla realizzazione di un App su misura rivolta al mondo mobile.
E voi, avete già adottato questo approccio? lo adotterete? Discutiamone nei commenti.
