Mobile First: la nuova tendenza
Che il futuro, ma anche il presente, sia ormai rappresentato dal mobile è un qualcosa di ormai completamente assodato.
Ogni giorno infatti nuovi studi e ricerche ci forniscono dati sui dispositivi mobili che ci fanno comprendere quanto sia ormai fondamentale rivolgere agli utenti mobile la stessa cura e attenzione ai particolari che fino a qualche anno fa potevamo limitarci a dedicare solo alla versione desktop dei nostri siti.
Per renderci conto di quale sia effettivamente la mole di utenti possessori di smartphone e tablet, possiamo prendere in considerazione alcuni dati del 2013.
Oggi infatti sono più di 1,2 miliardi gli utenti che si connettono ad Internet con i propri mobile device.
Sicuramente una bella cifra, soprattutto se consideriamo la velocità con la quale questa nicchia si è espansa negli ultimi anni; abbiamo potuto notare infatti anche un veloce sviluppo di altri campi affini collegati all’evoluzione di questo settore “mobile”, come quello delle app ma anche dello stesso web, sempre più concepito per gli user mobili.
Si è diffusa infatti la tendenza del responsive design, ovvero dello sviluppo di siti che si adattano alle dimensioni dei dispositivi in cui sono visualizzati e di cui abbiamo già parlato ampiamente in articoli come questo.
Oggi però alcuni web designer si sono spinti oltre il semplice sviluppo di una versione mobile del proprio sito, prendendo in considerazione quest’ultima come punto di inizio dello sviluppo del sito stesso. Stiamo parlando della tecnica Mobile First, pratica divenuta famosa anche grazie al libro di Luke Wroblews.
Come si è giunti al Mobile First ?
Per comprendere meglio questa tecnica, sarebbe opportuno avere una panoramica di quella che è stata l’evoluzione del web design e i passi che hanno portato a questa fase.
Fino a circa 10 anni fa, un sito veniva prima di tutto sviluppato nella sua forma principale e successivamente si andavano ad eliminare, ove possibile, le incongruenze tra i diversi browser.
Con l’avvento delle nuove versioni di Google Chrome, Mozilla Firefox, Safari e company, si sono sempre più affievolite le distanze e le incongruenze tra i sistemi utilizzati per visualizzare un sito. Il web designer, però, ha incontrato una nuovo ostacolo che si è trasformato in un nuovo obbiettivo: creare dei layout che si presentassero bene in ogni situazione di visualizzazione.
Come? Tramite la pratica del responsive design.
Giunti a questa nuova frontiera del web design, sorge spontanea una considerazione: ora che il mobile è diventato così importante, la versione per smartphone e tablet di un determinato sito può essere ancora considerata come “secondaria”?
O dovrebbe essere, al contrario, considerata come base ed elemento portante del sito stesso?
Per molti web designer questa è la nuova frontiera che porterebbe diversi vantaggi, non solo al prodotto finale, ma anche al processo di sviluppo tramite cui viene progettato il sito.
I vantaggi
Prendiamo ora in considerazione quelli che sono i vantaggi del Mobile First.
Come abbiamo detto, i due vantaggi principali si hanno sul processo di sviluppo e sul prodotto finale.
Se consideriamo il processo di sviluppo, notiamo come ci sia stato un “semplice” rovesciamento del modo in cui si agiva per pervenire al sito finale.
Come ci suggerisce infatti il titolo dell’articolo, al primo posto c’è l’esperienza Mobile e ciò ha sicuramente dei vantaggi che possono essere riassunti come segue:
– Innanzitutto avremo un prodotto che sarà sicuramente visualizzabile in ogni dispositivo, dagli smartphone ai desktop di grandi dimensioni, mentre applicando il metodo tradizionale non è possibile avere questa certezza, soprattutto quando si tratta di immagini e video.
– Utilizzando questo metodo, è possibile fin da subito considerare gli elementi fondamentali, quelli imprescindibili per il sito in questione, sia da un punto di vista grafico che di contenuto, per poi aggiungere elementi secondari nella versione desktop.
In questo modo si ha fin da subito una visione chiara di ciò che è fondamentale per lo sviluppo del sito e di ciò che invece rappresenta un qualcosa di minore importanza.
Al contrario, con il metodo tradizionale spesso si ha la tendenza ad aggiungere elementi a dismisura, non considerando che in ambiente desktop abbiamo a che fare con potenze di caricamento e soprattutto con dimensioni di schermo nettamente superiori rispetto a quelle di un dispositivo mobile.
Quando dalla fase di sviluppo desktop si passa a quella di sviluppo per tablet e smartphone, ci si potrebbe quindi trovare con un sito carico di contenuti che talvolta risulterebbe troppo pesante per poter essere caricato in mobile.
Una situazione del genere, soprattutto per un sito ecommerce, potrebbe rivelarsi un grosso problema se consideriamo che un solo secondo di ritardo nel caricamento della pagina, potrebbe far diminuire del 7% le conversioni.
(L’infografica completa è visualizzabile a questo link)
La tecnica Mobile First potrebbe ovviare a tutti questi problemi, permettendo non solo un’organizzazione migliore della fase di sviluppo, ma soprattutto rilasciando un prodotto finale sicuramente di qualità maggiore per gli utenti mobili e in alcuni casi anche per le versioni desktop.
Gli svantaggi
Come in qualsiasi situazione, però, va considerato anche il rovescio della medaglia.
Abbiamo infatti considerato i grandi numeri riguardanti i mobile users, come il fatto che il 25% del commercio online ormai è effettuato da smartphone e tablet.
Bisogna però riflettere sul fatto che il restante 75% degli utenti utilizza ancora il PC, ed è ancora questa la percentuale più elevata da dover tenere necessariamente ancora in maggiore considerazione.
I principi su cui si basa il Mobile First potrebbero portare infatti, soprattutto inizialmente, a far concentare i web designer troppo sugli schermi di piccola dimensione, spingendoli a considerare come secondaria la versione desktop.
Si ripresenterebbe dunque il problema iniziale, ovvero una considerazione maggiore in fase di progettazione di una versione rispetto a un’altra.
Oltretutto, utilizzando questa modalità di lavoro, il processo di sviluppo “classico” sarebbe completamente rivoluzionato anche e soprattutto da un punto di vista di design del sito stesso: nel momento in cui lo sviluppo di un sito parte dai piccoli schermi, il prodotto finale sarà molto probabilmente privo di quegli elementi aggiuntivi che molto spesso, sui desktop, fanno la differenza.
Prendere in considerazione i “grandi schermi” solo nella fase finale di sviluppo potrebbe comportare una perdita di innovazione e fantasia nel design, di cui attualmente nella fase iniziale del processo si può godere maggiormente.
Conclusioni
Siamo dunque di fronte a un bivio: continuare con il vecchio tipo di progettazione o abbandonarlo completamente affidandoci al Mobile First?
Se consideriamo che anche l’ultima versione di Bootstrap è stata sviluppata per favorire questa nuova tecnica, ci possiamo rendere conto di quanto essa possa rappresentare il futuro.
E tu cosa ne pensi?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
12 commenti
Trackback e pingback
-
La serietà del Web Designer: 5 Cose da sapere per essere un buon professionista | Your Inspiration Web
[…] già ribadivo nell’ articolo sul Mobile First, il responsive design è ormai una tendenza che abbraccia quasi tutti i… -
La serietà del webdesigner | Arkys | Web & ICT Solutions
[…] già ribadivo nell’ articolo sul Mobile First, il responsive design è ormai una tendenza che abbraccia quasi tutti i… -
Mobile First: la nuova tendenza | Web Design | ...
[…] Che il futuro, ma anche il presente, sia ormai rappresentato dal mobile è un qualcosa di ormai completamente assodato.Ogni… -
Impaginiamo i contenuti in maniera intelligente con Bootstrap 3 | Your Inspiration Web
[…] offre un sistema di griglie mobile first, suddiviso su 12 colonne che cambiano di dimensione in basa alla grandezza… -
Piano Giovani Lecco - The Francio Effect
[…] creato per il sito un template da zero utilizzando l’approccio “Mobile First” e WordPress per la gestione dei contenuti,… -
Come creare un app mobile: HTML5 o linguaggio nativo? | upCreative
[…] app. In rete si possono inoltre trovare sempre più framework che adottano la filosofia del “mobile first“, e velocizzano ulteriormente…
Ottimo articolo Marco. Secondo me, il punto principale rimane sempre il target cui è riferito il sito web. Non si deve standardizzare un processo di lavoro, ma adattarlo alle singole esigenze. Per una questione di retrocompatibilità sui browser, l’adozione del Mobile First è ancora prematura, a meno che non si vuole far fuori chi utilizza IE8 e precedenti. Purtroppo IE8 è ancora molto diffuso, e una piccolissima fetta di mercato utilizza ancora IE7 e IE6, per la ‘gioia’ di noi web developer. L’utilizzo del Mobile First porta quindi a tagliare dal mercato queste versioni oppure a creare file css separati. Il tutto porta ad allungare i tempi di sviluppo e di conseguenza i costi finali.
Per il resto comunque c’è da dire che grazie alla combinazione di varie tecniche programmative, il problema del Mobile First e della pesantezza delle immagini (nodo cruciale) non si pone.
Ripeto però che occorre imboccare la strategia che si ritiene più utile per il bene del progetto, senza dover seguire una tendenza. Mobile First e Desktop First, oppure Only Mobile e Only Desktop, sono tutte e quattro valide. Ciascuna di esse è adatta a determinati progetti.
Gran bel commento Davide, e in effetti hai pienamente ragione.
Bisogna prima di tutto individuare quello che è il target del sito che si sta costruendo e lo scopo del sito stesso.
Solo considerando attentamente questi due fattori avremo una risposta alla domanda ” desktop o mobile first ?” .
“Per una questione di retrocompatibilità sui browser, l’adozione del Mobile First è ancora prematura, a meno che non si vuole far fuori chi utilizza IE8 e precedenti.”
Mi trovo in discaccordo con questa frase. La retrocompatibilità dei browser è un argomento differente dalla modalità di sviluppo del sito. Avere un sito Mobile First non significa che non sia visualizzabile sui vari IE.
E’ necessario applicare quello che viene chiamato “progressive enhancement” (http://alistapart.com/article/understandingprogressiveenhancement).
Partendo da un’esperienza che tutti gli utenti possono fruire andiamo ad aggiungere vari livelli di interattività in base alle capacità dei device o dei browser nel nostro caso.
Le tecnologie e i modi ci sono per adottare questa modalità, anzi, essa ci aiuta proprio ad allargare il nostro possibile bacino di utenti.
L’articolo mi è piaciuto molto e sono sicuro che l’inversione dello sviluppo sia oltremodo necessaria, oramai noto sempre più amici e conoscenti che non hanno un computer o un tablet, essere conquistati dalla “facitlità” dello smartphone, tuttavia lavorando a contatto con pubbliche amministrazioni e piccole imprese in genere vedo ancora moltissimi windows xp con IE6, moltissime applicazioni legate indissolubilmente a quel tipo di prodotto o nessuna voglia di migliorare le proprie esperienze con gli strumenti.
Purtroppo a questo punto lo sviluppo non si ferma solo al bivio Mobile / Desktop ma è veramente più radicale.
Si purtroppo quello dell’ arretratezza di alcuni clienti e soprattutto di alcune fasce di utenti è ancora un problema che in molti casi può risultare non banale.
Ormai però bisogna considerare che i possessori di XP e soprattutto coloro che utilizzano ie6 sono sempre meno, dunque è arrivato il momento un pò per tutti di muoversi verso tecniche e strumenti moderni.
Ciao, a distanza di tempo, spero di ricevere comunque una risposta. Sto cercando di capire meglio il design responsivo, e riguardo al “mobile first” non ho ancora compreso un punto: se nel “desktop first”, uno dei metodi per togliere contenuti da non visualizzare sul mobile è quello di applicare un “display: none” tramite CSS, nel mobile first si fa lo stesso in modo inverso, con un “display: block”? sono ben consapevole che così facendo, i tempi di caricamento dei contenuti rimangono invariati, dunque con spreco di risorse… meglio privilegiare alternative non CSS, lato server? Grazie mille.