Mobile First Design Perché è fantastico e perché succhia

Storicamente, la maggior parte dei web designer e dei loro clienti si sono avvicinati al lato desktop di qualsiasi progetto per primi, lasciando la parte mobile come un obiettivo secondario che viene realizzato in seguito. Anche con l'ascesa del design reattivo, molti di noi iniziano con la "full size"? sito e lavorare fino in fondo.

Tuttavia, c'è una tendenza crescente nel settore a capovolgere questo flusso di lavoro e in realtà iniziare con considerazioni sui dispositivi mobili e quindi passare a una versione desktop più ampia. Perché mai dovresti affrontare un progetto in questo modo? Quali sono alcuni dei pro e contro di questa strategia? Continuate a leggere per scoprirlo!

Questo articolo fa parte delle nostre serie su "guardare oltre il design del desktop", offerto in collaborazione con Heart Internet VPS.

Mobile Web Design non è una nicchia

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

  • Ci sono oltre 1,2 miliardi utenti di Internet mobile in tutto il mondo
  • Negli Stati Uniti, il 25% degli utenti di Web mobile utilizza solo dispositivi mobili (raramente utilizzano un desktop per accedere al Web)
  • Le app mobili sono state scaricate 10,9 miliardi di volte
  • Le vendite di dispositivi mobili stanno aumentando a tutti i livelli con oltre l'85% di nuovi telefoni 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 stupefacente no?

Più che mai il web è qualcosa che portiamo in tasca, non qualcosa che si blocca semplicemente vicino alla nostra scrivania o persino nelle nostre case. Questa è una tendenza globale che continuerà a vedere solo la crescita nei prossimi anni. Sei pronto per questo? Le tue competenze professionali comprendono lo sviluppo web per tutte le piattaforme importanti o solo per l'arena desktop?

Perché prima il cellulare?

Le probabilità sono che nessuno di coloro che leggono questo abbia imparato qualcosa di nuovo fino a questo punto. I telefoni da $ 200 + nelle tasche di tutti quelli che conosci sono tutte le indicazioni di cui hai bisogno che il web sia 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 in effetti metta il cellulare al primo posto. Il rovescio della medaglia del 25% degli utenti mobili è solo il 75% di questi non lo sono! Ovviamente, il desktop è ancora un mezzo importante, non deve essere dimenticato o spinto fino in fondo ancora. Quindi, perché stiamo prendendo in considerazione l'idea di adottare la prima via mobile?

Uno dei principali catalizzatori per l'ascesa del primo web design mobile è stato l'annuncio di Eric Schmidt nel 2010 secondo cui Google avrebbe adottato questo approccio da quel momento in poi, arrivando a dire, penso che sia ora il progetto comune di tutti di noi per rendere mobile la risposta a praticamente tutto? (fonte). Perché questo drastico cambiamento di approccio?

Grazia degradante vs. miglioramento progressivo

Queste sono alcune delle parole chiave di alcuni anni fa che possono ancora dare un grande contributo alla nozione di primo web design mobile e perché è un concetto importante da considerare.

Il degrado aggraziato nasce dall'esigenza di avere una funzione di progettazione su quanti più browser e piattaforme possibile. I progettisti e gli sviluppatori volevano sfruttare la nuova tecnologia senza escludere gli utenti con configurazioni che non avevano supporto. La conclusione generale è stata quella di creare e offrire la migliore esperienza possibile, e quindi tenere conto di ogni possibile degrado e garantire che, nonostante eventuali carenze, il sito rimanga funzionale.

In termini di design del Web mobile, ciò significa che un sito Web completo e standard ridimensionerà e rimuoverà gradualmente contenuti e funzionalità man mano che il viewport diventerà più piccolo e il sistema più semplice (nessun supporto Flash, ecc.).

Da questa tendenza nacque una potente nuova idea: il miglioramento progressivo. In questa versione del racconto, hai fatto il tuo miglior passo avanti sulla piattaforma mobile, fornendo agli utenti un minimo di spazio sullo schermo, potenza di elaborazione e plug-in di terze parti, un'esperienza incredibile che sembra ottima e funziona perfettamente. A seconda delle necessità, il sito può essere gradualmente potenziato? e persino completamente ripensato per piattaforme più grandi con meno vincoli.

Perché il miglioramento progressivo vince

A colpo d'occhio, queste due metodologie sembrano approssimativamente equivalenti. A chi importa dove inizi il processo di progettazione finché viene eseguito, giusto?

La realtà della situazione è un po 'più complessa però. Quando si inizia con la piattaforma desktop, si tende a sfruttare tutto ciò che la piattaforma ha da offrire. Costruisci un prodotto straordinario che sfrutta molta della grande tecnologia, solo per rendersi conto che nessuno di questi si adatta bene al cellulare. Ciò può portare a risultati degni di nota di prodotti mobili che sembrano più un ripensamento che un prodotto finito lucido. Succede con ogni progetto? Forse no, ma la storia è probabilmente molto più comune di quanto ti piacerebbe credere.

Se esaminiamo il flusso di lavoro di miglioramento progressivo, il risultato tende ad essere una storia diversa. Qui iniziamo con un progetto che è al contempo 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 limitazioni che hai dovuto affrontare.

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

Contenuto Web: migliore servito in modo selettivo

L'argomento di cui sopra arriva da un punto di vista puramente filosofico con la conclusione finale che è il risultato finale tende per essere migliore se viene adottato un primo approccio mobile. Se vuoi una discussione con una sostanza un po 'più osservabile dietro, guarda come pubblichi i tuoi contenuti.

Se consideriamo il grazioso punto di vista della degradazione, tutto il contenuto (testo, immagini, video, audio, ecc.) Viene pubblicato contemporaneamente a quella che si presume essere la più grande piattaforma. Da qui, le versioni per dispositivi mobili sono considerate semplicemente ignorando o rimuovendo gran parte di questo contenuto dalla pagina. Il problema però è che era già stato caricato nel caso in cui la data piattaforma lo richiedesse o meno. Ci ritroviamo a pubblicare più contenuti di quanto sia necessario sulla piattaforma che è spesso associato alle più lente velocità di download. Vedi qualcosa di sbagliato in questo?

Con un primo punto di vista mobile, iniziamo caricando gli elementi essenziali essenziali sulle piattaforme più piccole. Ciò porta a un'esperienza più snella che evita ritardi non necessari. Le risorse aggiuntive vengono caricate rigorosamente in base alle piattaforme che possono gestirle correttamente.

Che dire del design reattivo?

In che modo tutto questo si adatta al design reattivo, l'altra tendenza che sta prendendo il controllo del web? La buona notizia è che queste due strategie non sono competitive. In realtà, si potrebbe dire che erano fatti l'uno per l'altro.

Il design reattivo si basa sul concetto di media query che mirano a dispositivi specifici e dimensioni di viewport. Con questo in mente, è possibile codificare il CSS iniziale dato un punto di vista mobile e quindi utilizzare le query multimediali per servire selettivamente uno stile aggiuntivo al crescere delle dimensioni del viewport.

Questo è probabilmente l'opposto del metodo che di solito utilizzi con il responsive design: inizia in grande e poi riduci. Considerati gli argomenti sopra, ovviamente c'è molta logica dietro la strutturazione delle query multimediali da piccole a grandi.

The Big Fat Downside

Urrà per il primo web design mobile. Ovviamente è la cosa più bella da fare sul web da The Oatmeal. Allora perché non ne sono entusiasta? Perché, anche se mi preoccupo del design reattivo, ho spesso evitato il tema del primo web design mobile?

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

Con il primo design mobile, però, mi viene un problema in testa con i limiti del primo passo. Non è affatto divertente! Subito mi trovo di fronte a uno schermo più piccolo, meno risorse e un sacco di mal di testa. Inoltre, non è solo un territorio confortevole. Ho trascorso gran parte della mia carriera nel web design nello spazio desktop, costruendo esperienze intorno al mouse al passaggio del mouse e ai clic, non al tocco delle dita. Ho fatto un sacco di lavoro mobile ma non lo chiamerei il mio forte seme.

Soprattutto, da un punto di vista del design rigoroso, trovo molto difficile immergersi davvero in un design se comincio con il mobile e sto lavorando su. Ne ho parlato in un recente articolo in abbondanza? Huzzahs? nei commenti e hanno persino ascoltato i principali professionisti del settore cantare un brano simile.

Rising To The Challenge

Cerchiamo un secondo ai miei argomenti a favore e contro un approccio mobile al primo design. Nel? Per? categoria, abbiamo argomenti semplici e logici che sono difficili da minimizzare. Nel? Contro? categoria ho un sacco di lamentele e di esitazioni personali. Da che parte pensi vince questa battaglia?

Forse avete alcuni migliori argomenti anti-mobile di me, ma se guardo questo da un punto di vista oggettivo, è evidente che il primo approccio mobile è il concorrente più forte.

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

In definitiva, se le mie ragioni per adottare un primo approccio mobile sono incentrate sull'utente e le mie ragioni contrarie 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 sia grande il primo web design mobile per i tuoi utenti. Sai che le grandi aziende come Google adottano questo approccio e puoi vedere chiaramente i vantaggi di un primo flusso di lavoro mobile. Quindi cosa ti trattiene?

Condividete la mia prospettiva personale sul fatto che il mobile sia innanzitutto una strategia difficile da implementare e concordi sul fatto che devi solo metterlo a punto (o essere una donna se preferisci) e fare il salto? O c'è qualcosa di più sostanziale che ti trattiene? Lascia un commento qui sotto e facci sapere!

Immagini via BigStock: Reno Martin, Yellowj e PixelsAway.