Mobile First Design: perché è fantastico e perché fa schifo

Storicamente, la maggior parte dei web designer e dei loro clienti si sono avvicinati prima al lato desktop di qualsiasi progetto, lasciando la parte mobile come obiettivo secondario che verrà raggiunto in seguito. Anche con l'ascesa del design reattivo, molti di noi iniziano con il sito "full size" e procedono verso il basso.

C'è una tendenza in crescita nel settore, anche se capovolge questo flusso di lavoro e in realtà inizia con considerazioni mobili e poi passa a una versione desktop più grande.

Perché mai dovresti avvicinarti a un progetto in questo modo? Quali sono alcuni dei pro e dei contro di questa strategia? Continuate a leggere per scoprirlo!

Il Web design mobile non è una nicchia

Se hai ancora nella testa che il web design mobile e lo sviluppo di applicazioni sono un settore di nicchia, devi cambiare il tuo modo di pensare. Il mobile non è una tendenza, né è nemmeno il futuro, è il presente. Non mi credi? Ecco alcune statistiche pazze da considerare da Mobithinking:

• Ci sono oltre 1, 2 miliardi di utenti Web mobili in tutto il mondo
• Negli Stati Uniti, il 25% degli utenti Web mobili è solo mobile (utilizzano raramente un desktop per accedere al Web)
• Le app mobili sono state scaricate 10, 9 miliardi di volte
• Le vendite di dispositivi mobili sono in aumento su tutta la linea con oltre l'85 percento di nuovi portatili in grado di accedere al Web mobile

Uno dei fatti più potenti qui è il secondo elemento, che mette in luce che molti utenti probabilmente vedranno solo la versione mobile del tuo sito. È una rivelazione sorprendente, vero?

Oggi più che mai il web è qualcosa che portiamo nelle nostre tasche, non qualcosa che è semplicemente appeso vicino alla nostra scrivania o persino nelle nostre case. Questa è una tendenza globale che continuerà a crescere solo nei prossimi anni. Sei pronto per questo? Il tuo set di abilità professionali include lo sviluppo web per tutte le piattaforme importanti o solo l'arena desktop?

Perché Mobile First?

Le probabilità sono che nessuna delle persone che leggono questo non abbia imparato nulla di nuovo fino a questo punto. I telefoni da $ 500 + nelle tasche di tutti quelli che conosci sono tutte le indicazioni di cui hai bisogno che il web è uscito dalla sua scatola a forma di computer.

Tuttavia, il fatto che l'accesso al Web mobile sia popolare non fa quasi nulla per convincermi che devo perseguire una strategia che metta al primo posto il mobile. Il rovescio della medaglia del 25% degli utenti di dispositivi mobili che sono solo mobili è che il 75% di loro non lo è! Il desktop è ancora un mezzo importante, da non dimenticare o spingere ancora nel back burner. Quindi, perché stiamo pensando di prendere il primo itinerario mobile?

Uno dei principali catalizzatori per l'ascesa del web design mobile-first è stato l'annuncio da parte di Eric Schmidt nel 2010 che Google avrebbe seguito questo approccio da ora in poi, spingendosi fino a dire "Penso che ora sia il progetto congiunto di tutti noi per rendere mobile la risposta praticamente a tutto "(fonte). Perché questo drastico cambiamento di approccio?

Graceful Degradation vs. Progressive Enhancement

Queste sono alcune importanti parole d'ordine di alcuni anni fa che possono ancora dare molte intuizioni sulla nozione di web design mobile-first e perché è un concetto importante da considerare.

Il degrado aggraziato è nato dall'esigenza di avere una funzione di progettazione sul maggior numero possibile di browser e piattaforme. Progettisti e sviluppatori volevano sfruttare le nuove tecnologie senza escludere gli utenti con configurazioni che non avevano il supporto. La conclusione generale è stata quella di creare e offrire la migliore esperienza possibile, quindi tenere conto di ogni possibile degrado e garantire che, nonostante le carenze, il sito rimanesse funzionale.

In termini di web design mobile, ciò significa che un sito Web standard completo ridimensiona e rimuove gradualmente contenuto e funzionalità man mano che la finestra si riduce e il sistema diventa più semplice (nessun supporto Flash, ecc.).

Da questa tendenza è nata una nuova potente idea: il miglioramento progressivo. In questa versione del racconto, metti il ​​tuo piede in avanti sulla piattaforma mobile, fornendo agli utenti spazio minimo sullo schermo, potenza di elaborazione e plug-in di terze parti un'esperienza straordinaria che ha un bell'aspetto e funziona perfettamente. A seconda delle necessità, il sito può essere gradualmente “migliorato” e persino ripensato completamente per piattaforme più grandi con minori vincoli.

Perché il miglioramento progressivo vince

A prima vista, queste due metodologie sembrano approssimativamente equivalenti. Chi se ne frega da dove inizi il processo di progettazione fintanto che viene eseguito, giusto?

La realtà della situazione è un po 'più complessa. Quando inizi con la piattaforma desktop, tendi a voler sfruttare tutto ciò che la piattaforma ha da offrire. Costruisci un prodotto straordinario che sfrutta molta tecnologia eccezionale, solo per rendersi conto che nessuno di questi si adatta bene al cellulare. Questo può e fa sì che i prodotti mobili siano gravemente annaffiati che sembrano più un ripensamento che un prodotto finito lucido. Questo succede con ogni progetto? Forse no, ma la storia è probabilmente molto più comune di quanto vorresti credere.

Se esaminiamo il flusso di lavoro di miglioramento progressivo, il risultato tende a essere una storia diversa. Qui stiamo iniziando con un progetto che è allo stesso tempo super snello e piuttosto impressionante. Hai preso tutta quell'energia iniziale e l'hai messa nella creazione di un prodotto che sembra e funziona bene nonostante le molte restrizioni che hai dovuto affrontare.

Ancora più importante, hai già affrontato il problema di ridurre il contenuto ai suoi elementi più vitali. Ora, quando è il momento di portare questo design sul desktop, invece di affrontare la decisione su cosa tagliare e come annacquare il tuo prodotto, devi invece decidere come renderlo ancora più robusto!

Contenuto Web: miglior servizio selettivo

L'argomento di cui sopra ti viene da un punto di vista puramente filosofico, con la conclusione ultima che il risultato tende ad essere migliore se viene adottato un approccio mobile-first. Se vuoi una discussione con un po 'più di sostanza osservabile dietro, non cercare oltre come servire i tuoi contenuti.

Se prendiamo il grazioso punto di vista del degrado, tutto il contenuto (testo, immagini, video, audio, ecc.) Viene offerto contemporaneamente a quella che si presume sia la piattaforma più grande. Da qui, vengono considerate le versioni mobili che semplicemente ignorano o rimuovono gran parte di questo contenuto dalla pagina. Il problema però è che era già stato caricato se la piattaforma data ne aveva bisogno o meno. Ci troviamo a pubblicare più contenuti di quanto sia necessario sulla piattaforma che è spesso associata alle velocità di download più lente. Vedi qualcosa di sbagliato in questo?

Con un punto di vista mobile-first, iniziamo caricando gli elementi essenziali nudi assoluti sulle piattaforme più piccole. Questo porta a un'esperienza più scattante che evita ritardi inutili. Le risorse aggiuntive vengono caricate rigorosamente in base alle necessità alle piattaforme in grado di gestirle correttamente.

Che dire di Responsive Design?

In che modo tutto ciò si adatta al design reattivo, l'altra tendenza che sta prendendo il sopravvento sul web? La buona notizia è che queste due strategie non sono competitive. Si potrebbe dire che sono fatti l'uno per l'altro.

Il responsive design si basa sul concetto di media query rivolte a dispositivi specifici e dimensioni delle finestre. Con questo in mente, puoi codificare il tuo CSS iniziale dato una prospettiva mobile e quindi utilizzare le query multimediali per servire in modo selettivo uno stile aggiuntivo all'aumentare della dimensione del viewport.

Questo è probabilmente il contrario del metodo che in genere si utilizza con un design reattivo: iniziare alla grande e poi ridurre. Dati gli argomenti sopra, però, c'è molta logica dietro a strutturare le tue query multimediali da piccole a grandi.

Il lato negativo di Big Fat

Evviva per il web design mobile-first. È la cosa migliore da colpire sul web da The Oatmeal. Allora perché non ne sono entusiasta? Perché, anche se mi diletto nel design reattivo, ho spesso evitato decisamente l'argomento del web design mobile-first?

Immediatamente mi trovo di fronte a uno schermo più piccolo, meno risorse e un sacco di più mal di testa.

La risposta qui è semplice: non è né divertente né facile. Sicuramente il design reattivo è complicato, ma mi consente di flettere i miei muscoli del layout e sfruttare molte funzionalità del browser integrate per eseguire alcune gesta interessanti. Il design reattivo rende la mia scatola dei giocattoli più grande, non più piccola.

Con il design mobile-first, però, sono colpito da sopra la testa con vincoli al primo passaggio. Non è affatto divertente! Immediatamente mi trovo di fronte a uno schermo più piccolo, meno risorse e un sacco di più mal di testa. Inoltre, non è solo il territorio confortevole. Ho trascorso la maggior parte della mia carriera nel web design nello spazio desktop, costruendo esperienze sui passaggi del mouse e sui clic, non sulle punte delle dita. Ho svolto un sacco di lavoro mobile ma non lo definirei il mio punto di forza.

Ancora più importante, dal punto di vista del design rigoroso, trovo molto difficile immergermi in un design se sto iniziando con il mobile e sto salendo. Ne ho parlato in un recente articolo con un sacco di "huzzah" nei commenti e ho persino sentito cantanti professionisti del settore cantare una melodia simile.

Rising To The Challenge

Cerchiamo un secondo sui miei argomenti a favore e contro un approccio di progettazione mobile-first. Nella categoria "per", abbiamo argomenti chiari e logici che sono difficili da minimizzare. Nella categoria "contro" ho un sacco di piagnistei ed esitazioni personali. Quale parte pensi vince questa battaglia?

Devo rinunciare a un po 'di conforto nel nome di essere un designer migliore.

Forse hai alcuni argomenti anti-mobile-first migliori di me, ma se guardo questo da un punto di vista oggettivo, è evidente che l'approccio mobile-first è il contendente più forte.

Ciò significa che probabilmente ho bisogno di superare me stesso e affrontare la sfida di iniziare progetti con un punto di vista mobile. Se non mi sento a mio agio a progettare per dispositivi mobili, per prima cosa, significa che ho spazio per crescere e tecniche per imparare.

In definitiva, se le mie ragioni per adottare un approccio mobile-first sono incentrate sull'utente e le mie ragioni contro di essa sono personali, allora devo rinunciare a un po 'di conforto nel nome di essere un designer migliore.

Cosa ti trattiene?

Ora sai tutto su quanto è grande il web design mobile-first per i tuoi utenti. Sai che le grandi aziende come Google stanno adottando questo approccio e puoi vedere i vantaggi di un flusso di lavoro mobile-first. Allora, cosa ti trattiene?

Condividi la mia prospettiva secondo cui il mobile-first è una strategia difficile da implementare e concorda sul fatto che devi solo fare il salto? O c'è qualcosa di più sostanziale che ti trattiene?