Oltre il "Mobile First"

Per troppo tempo si è sentito parlare di sito desktop, sito mobile e sito tablet.

Solitamente queste etichette definiscono tre diverse “versioni” del sito web che vengono servite in funzione del dispositivo utilizzato dall’utente.

La realtà è ben diversa: il sito è uno e uno solo.

Il brand che parla è sempre lo stesso, non cambia voce a prescindere dal dispositivo utilizzato dagli utenti.

Il prezzo di un prodotto è sempre lo stesso, non cambia se navighi con PC o smartphone.

La data di un concerto o il costo di un biglietto per parteciparvi è sempre lo stesso, non cambia di certo se navighi con MAC o smartphone.

Progettare per specifici dispositivi o addirittura considerare “prioritaria” la “versione desktop”, costituisce il vero limite per una progettazione corretta e coerente con i bisogni degli utenti.

Da qualche anno è stato introdotto il principio del Mobile First.

Mobile First

Questo principio è tanto semplice quanto rivoluzionario: cambiare il workflow di progettazione partendo dal dispositivo Mobile per poi arrivare alla progettazione dell’esperienza utente per desktop.

L’idea è che se riusciamo a progettare bene l’esperienza dell’utente partendo da un dispositivo smartphone, sarà molto più semplice assicurasi la corretta esperienza su tutti i dispositivi più grandi.

Mobile first è corretta fruizione dei contenuti prima ancora dell’aspetto grafico.

Nel corso del tempo, da un punto di vista strettamente progettuale, si sono viste delle storpiature e delle interpretazioni errate.

Per spiegare ciò dobbiamo aprire una breve parentesi e spiegare quali sono i tre tipi di tecniche principali per costruire un sito mobile-friendly:

• Responsive Design;
• Dynamic Serving;
• Sito mobile separato (ad esempio: m.example.com)

#1 Responsive Design

La particolarità del responsive design consiste nel avere un codice HTML unico e uguale per tutti i dispositivi. Avremo quindi dei Breakpoint (che si traducono in media query nei file CSS) che gestiscono i vari range di viewport in px.

Pro

• URL univoca per tutti i contenuti (soluzione SEO friendly);
• Fluidità e velocità di navigazione (assenza di redirect);
• Funziona egregiamente sia in modalità Landscape che Portrait.

Contro

• È necessaria un’approfondita progettazione per definire la migliore esperienza utente per ogni singolo Breakpoint;
• Sono necessari accorgimenti tecnici per prevenire che immagini di grandi dimensioni vengano servite all’utenza mobile.

#2 Dynamic Serving

Con questo sistema è il server che si occupa di intercettare il dispositivo e presentare una pagina customizzata per lo stesso. Queste pagine, se necessario, possono essere disegnate espressamente per uno specifico dispositivo.

Pro

• UX personalizzata per ogni device;
• Semplicità nell’effettuare modifiche specifiche per un determinato dispositivo;
• Tempi di caricamento veloci;
• URL univoca per tutti i contenuti (soluzione SEO friendly);

Contro

• Lentezza e complessità nell’aggiornamento. Una modifica ad un widget potrebbe richiedere la modifica di tanti file quanti sono i diversi dispositivi gestiti.
• Errata interpretazione del dispositivo (più avanti vedremo che gli script vanno aggiornati)
• Rischio di un’esperienza utente confusionaria.

#3 Sito Mobile Separato

Soluzione più complessa da gestire in termini SEO. Si tratta a tutti gli effetti di un sito differente, su un dominio differente. Il sistema tramite delle librerie riconosce il dispositivo reindirizzandolo verso il “sito corretto”.

Pro

• Esperienza utente personalizzata;
• Le modifiche alla versione mobile non incidono sulle altre versioni per gli altri device.

Contro

• URL multiple con conseguenti reindirizzamenti in caso di condivisione sui Social Network che rallentano il caricamento delle pagine;
• Difficoltà nella gestione dei reindirizzamenti. L’utente mobile che atterra ad una pagina desktop deve essere reindirizzato allo stesso contenuto per la versione mobile. Il tutto va ovviamente gestito dinamicamente in maniera molto precisa.
• Necessità di inserire particolari annotazioni per la corretta indicizzazione ed evitare problemi di Duplicate Content.  

Fà la cosa giusta

Capiamo bene le difficoltà di chi si trova a progettare e sviluppare siti web fruibili e funzionali che siano compatibili con la stragrande maggioranza dei dispositivi, ma avere un approccio dove serve tenere costantemente aggiornati gli script per intercettare i dispositivi (soluzione #2 e #3) o gestire un sito separato (soluzione #3), porta a una sola tragica conseguenza: una rincorsa contro il tempo e il progresso tecnologico. 

Oggi troviamo dispositivi per tutti i gusti: Smart TV, console, smartphone che sembrano tablet, PC che sembrano smartphone, tablet che sembrano laptop (si ok, forse è un po’ esagerato…).

È insostenibile aggiornare le librerie in uso sui siti web ad ogni uscita di un nuovo dispositivo.

Ovviamente non è tutto bianco o nero. Ci sono casi in cui avere un sito separato può addirittura fare la differenza. Prendiamo ad esempio gli e-commerce dove avere maggiore “margine di manovra” consente di sviluppare al meglio nuove funzionalità o anche semplicemente fare una buon Conversion Rate Optimization.

Ma allora qual è la logica migliore? Focalizzarsi sul contenuto.

I contenuti prima dei contenitori

Spesso per ragioni di varia natura si tende a considerare il problema dal punto di vista della corretta visualizzazione, dimenticando la corretta fruizione del messaggio, ed è così che comincia un carosello assurdo di Epic Fail:

• Siti che funzionano solamente in modalità portrait;
• Intere sezioni non disponibili su mobile;
• Script obsoleti che reindirizzano gli utenti su Tablet in versioni mobile;

Al giorno d’oggi è necessaria un’ulteriore inversione di rotta. Il pensiero Mobile First ha portato grossi vantaggi nello sviluppo e nella progettazione di piattaforme web. Ha evitato che ci si “dimenticasse” di alcuni contenuti e funzionalità perché magari il sito veniva progettato per risoluzioni ampie. Ma il rischio è sempre dietro l’angolo: grande attenzione al design (sacrosanta!) a scapito dei contenuti.

Ogni progettazione che si rispetti deve cominciare dai contenuti!

Basta Lorem Ipsum e placeholder.

I contenuti sono l’anima di un sito web. Il motivo per cui una pagina si trova on line.

Senza definire prima i contenuti è difficile progettare con cura un progetto di successo.