Nel momento in cui il mercato dei cellulari è esploso siamo arrivati ad un punto in cui tutti ormai tutti utilizziamo i cellulari per navigare o i tablet e da un po’ di tempo anche in misura molto più maggiore rispetto a chi lo fa con i computer. In un articolo pubblicato dalla CNN lo scorso anno è stata pubblicata la percentuale dei visitatori di Facebook che dal cellulare è il doppio rispetto all’accesso via desktop. Nella progettazione del Responsive Web design ci sono due approcci diversi che si differenziano tra di loro perché il primo da importanza al dispositivo, il secondo ai contenuti: Mobile First e Device agnostic.
MOBILE-FIRST
Il principio Mobile-first è stato coniato da Luke Wrobwlesky successivamente all’articolo di Ethan Marcotte sul Responsive Web Design. Mobile first è il concetto secondo cui nella progettazione del RWD diamo importanza maggiore ai dispositivi mobili ( tablet e cellulari ) e quindi partiamo dalla progettazione per cellulari e man mano aggiungiamo i contenuti progressivamente ( progressive enhancement ) per terminare con la progettazione desktop. In questo modo siamo in grado di tener conto delle peculiarità dei cellulari che hanno uno spazio a disposizione molto meno importante e molto più limitata dei computer desktop. Al contrario ci sarebbero tanti effetti negativi per questi utenti se usiamo un tipo di progettazione opposta, cioè cominciamo dal desktop e poi sottraiamo elementi per adattare il contenuto ai dispositivi più piccoli.
Questi effetti negativi in particolare riguardano:
1) Il contenuto e la sua importanza. Nelle versioni cellulari e tablet c’è una mancanza oggettiva di spazio per lo meno in orizzontale. Tutto il contenuto viene disposto su una colonna unica o 2 in versione tablet a seconda del contenuto. Spesso qualcosa va sacrificato ed è proprio nella fase di progettazione che è importante stabilire la gerarchia dei contenuti e quelli che eventualmente vanno nascosti nelle versioni più piccole se considerati meno importanti.
2) Il menù di navigazione. Nelle versioni cellulari ma anche tablet è fondamentale implementare la versione responsive del menù di navigazione. Il menù è un altro elemento che risente della mancanza di spazio e per questo va affrontato in modo molto attento. Di solito è utilizzata la tecnica di una icona che al click fa apparire il menù dall’alto verso il basso alla larghezza del 100% del dispositivo con una lista di voci una sotto l’altra oppure lateralmente. Ci vuole un po’ di jquery per permettere di creare una classe che permette di visualizzare il menù con un click e di nasconderlo con un altro click.
3) Le immagini. Nei dispositivi mobili, proprio per la inferiorità della banda larga è importante caricare immagini adeguate al tipo di dispositivo usato. Ciò significa che un display pari a 320px non può evidentemente caricare e visualizzare un’immagine pari a 1200px ma è sufficiente che visualizzi un’immagine pari a 320px. Ci sono diverse soluzioni a tal merito. Una di queste è quella di creare due versione di immagine una scaricabile sui dispositivi più piccoli e l’altra su quelli più grandi.Oppure possiamo sfruttare il plugin jQuery Lazy Load che ci permette di realizzare un caricamento lento e condizionale delle immagini in base al tipo di dispositivo che stiamo utilizzando per visualizzare il sito web. Questo fa si che le immagini non sono caricate automaticamente al caricamento della pagina ma di volta in volta quando l’utente scorre la pagina sfruttando uno script che evita al browser di caricare le immagini poste al di là dello scrolling del browser caricando solo le immagini necessarie nella parte di pagina che il layout sta visualizzando consentendo un notevole risparmio di banda e migliorando i tempi di caricamento della pagina.
4) Il font. Non possiamo inserire un font uguale per tutti i dispositivi ma un font che deve adattarsi alla grandezza del browser. In tal caso è buona prassi partire dalla base ed impostare nel body il font al 100%. Secondo luogo lavoriamo con le unità relative ed è importante anche stabilire la distanza tra le righe del font (line-height) per mantenere un buon ritmo verticale tra i caratteri nel design della pagina. Per una maggiore performance nel caricamento del font potremmo utilizzare il plugin Enhance js.
Se quindi gli utenti che utilizzano i cellulari per navigare hanno superato quelli desktop perché devono usufruire di un’esperienza inferiore rispetto agli utenti desktop solo perché utilizza uno schermo di dimensioni più piccole ed una connessione più lenta? L’approccio Mobile first tiene proprio conto di questi utenti e delle loro esigenza e cerca di interpretare e focalizzare la progettazione su cosa è realmente importante per loro. Inoltre i sostenitori di questo approccio asseriscono che, se il tutto funziona bene per gli utenti mobile, sicuramente funzionerà per gli utenti desktop che avranno a disposizione uno schermo ed uno spazio maggiore ed una banda-larga migliore.
Dubbi e reticenze
Molte agenzie con cui collaboro, non hanno ancora capito l’importanza del Responsive Web design e come deve essere affrontata la progettazione di un sito web responsive, tendendo sempre a lasciare per ultima la progettazione per cellulari e tablet quasi fosse una cosa meno importante.
Tempo fa ho collaborato con un’agenzia web che per motivi di tempo voleva assolutamente che io sviluppassi un sito web in versione desktop e solo dopo voleva implementare la versione responsive.
Questo ha comportato una serie di difficoltà che non erano state considerate in fase di progettazione e che hanno reso la implementazione successiva della versione responsive per cellulari solo una soluzione accomodante ma non la migliore soluzione. Ci sono stati evidenti problemi di posizionamento del menù, delle immagini non perfettamente allineate ecc ecc. per non parlare poi del tempo sprecato a cancellare e modificare codice per adattarlo ai dispositivi più piccoli. Questo diventa ancora più complicato in un sito più complesso che gioca sulle linee e sulle geometrie del menù e delle immagini.
Questa difficoltà di alcune agenzie rimaste indietro sul processo del Rwd dipende dal forte cambiamento che questo approccio comporta e dalla difficoltà di dover rivoluzionare il modo di progettare un sito web utilizzato per tantissimi anni e che tra l’altro richiede più attenzione, più lavoro e più tempo.
DEVICE-AGNOSTIC
Un approccio alternativo a quello mobile first è l’approccio Device-agnostic, approccio che io utilizzo e prediligo nello sviluppo responsive di un sito web.
Cosa vuol dire “device-agnostic”?
Avendo la consapevolezza della quantità di tutti i dispositivi esistenti non si da più importanza al dispositivo ma al contenuto, cercando di realizzare un design responsive che vada bene per qualsiasi dispositivo indipendentemente dal tipo, dalla connessione e dalla dimensione. Questo approccio si distingue dall’approccio mobile first proprio perché il dispositivo viene messo in secondo piano e si da importanza al contenuto cercando di offrire un’esperienza simile ed ottimale per tutti i dispositivi.
Come attuo l’approccio Device-agnostic?
Partendo da un layout fluido cerco di capire dove il sito web si “rompe” ( punto di rottura o break point ) cioè dove non mantiene più le sue caratteristiche originale di design con lo stile di default. In quel punto inserisco la media query che con un stile aggiuntivo farà si che il design si adatti perfettamente allo schermo e procedo sempre in questo modo fino ad ottenere un buon risultato per qualsiasi dispositivo.
Ci sono tantissimi strumenti che ti danno la possibilità di verificare come il tuo sito web appare a diverse risoluzioni ( io per esempio utilizzo Responsinator ) Oppure puoi semplicemente restringere il browser e verificare dove il tuo sito web presenta i cosiddetti break-point e dove è necessario intervenire.
In questo caso il tuo approccio è quello di far si che il sito web abbia un buon aspetto sulla maggior parte dei dispositivi. Non è un lavoro semplice ma con il tempo e con la pratica diventa quasi una procedura automatica soprattutto se si hanno le nozioni giuste.
Del resto lo sappiamo che sviluppare siti web Responsive è diventato più complicato e ciò richiede più tempo e più progettazione per realizzare un lavoro di qualità. Non si può più prescindere dal responsive web design questo è evidente.
Tu quale approccio utilizzi? Il mobile-first o device-agnostic ? Dillo nei commenti.
