Mobile-First Design: cos’è e perché è importante

L’autunno del 2018 è stato un periodo difficile per esperti di marketing online, blogger, agenzie digitali… fondamentalmente per tutti coloro il cui pane quotidiano proviene dal regno online. Come mai? Perché è allora che il gigante dei motori di ricerca, Google, ha iniziato a lanciare la sua indicizzazione mobile first. Questo di certo non è stato una sorpresa dal momento che il "Mobilegeddon" nel 2015 ha già introdotto la priorità dei siti Web che vengono visualizzati bene sui dispositivi mobili. Il design mobile first era già una cosa, ma Google è comunque riuscito a causare un po’ di panico.

Ma facciamo un passo indietro per un momento ed esaminiamo cosa significa effettivamente "mobile-first".

Spiegazione del design Mobile-First

In breve, il design mobile first è il tipo di design che dà priorità ai dispositivi mobili. In generale, questo include smartphone e tablet o qualsiasi dispositivo con uno schermo più piccolo. Per comprendere correttamente questo concetto, dobbiamo prima parlare di responsive web design o RWB. In RWB, fondamentalmente consentiamo al Web e a tutte le sue forme e contenuti di adattarsi a schermi più piccoli senza perdere qualità. Deve anche essere fatto in un modo che le persone trovino comodo o comodo. Se eseguito correttamente, il design reattivo significa che l’utente non deve ingrandire, scorrere o eseguire una panoramica dello schermo per visualizzare tutto il contenuto del sito.

Ovviamente, con il grado in cui le ricerche mobili hanno superato quelle desktop, è naturale che un sito Web sia reattivo. Non è nemmeno una questione di sopravvivenza del più adatto. È più semplice di così. Se il tuo sito web non è reattivo, potrebbe anche essere inesistente. Le persone non hanno il tempo o la pazienza per i siti Web che non rispondono.

Ma qui c’è di più della semplice reattività. Durante lo sviluppo di un prodotto, i designer prendevano la versione desktop come punto di partenza. Quindi, dopo aver finalizzato quella particolare versione, hanno sostanzialmente abbandonato alcuni elementi per ottimizzare il prodotto per dispositivi mobili.

Oggi il processo è diverso. "Avanzamento progressivo" è un principio ampiamente utilizzato nel design, che prende come punto di partenza la versione mobile. Ed è esattamente ciò che significa "mobile-first". Il design parte dall’estremità mobile, per poi espandersi gradualmente a versioni più avanzate.

Indicizzazione mobile-first

Come accennato in precedenza, nel 2018 Google ha avviato un nuovo modo di indicizzare i siti. L’indicizzazione è importante perché è uno dei meccanismi utilizzati da Google per decidere quanto in alto il tuo sito web si classificherà nelle pagine dei risultati dei motori di ricerca.

Quindi, in pratica, l’indicizzazione mobile-first significa che quando Google distribuisce i suoi crawlbot, cercherà prima la versione mobile del tuo sito e poi quella desktop. Tieni presente che la versione mobile non è l’unica a essere indicizzata e classificata. Viene presa in considerazione anche la tua versione desktop, ma solo dopo quella mobile. Se il tuo sito web non ha una versione mobile, avrà un impatto negativo significativo sul ranking del tuo sito web. Non solo quello. Anche la qualità dell’esperienza mobile offerta dal tuo sito web è un fattore determinante.

Ed è per questo che il mobile-first dovrebbe essere preso molto, molto sul serio da qualsiasi proprietario di un sito web.

Come ottimizzare per Mobile-First

Quindi ti sei procurato un fantastico tema reattivo? Bene. La reattività è estremamente importante. Ma non pensare per un secondo che il tuo lavoro di ottimizzazione per i dispositivi mobili finisca qui. È più complicato di così.

Sia che tu stia facendo le pulizie di primavera al tuo vecchio sito WordPress o ne stia costruendo uno nuovo di zecca, ci sono cose che puoi fare per renderlo più attraente per i crawler di Google e l’indicizzazione mobile-first.

• Ottimizza la velocità del tuo sito web

Google odia i siti Web lenti. No davvero. Ha una particolare propensione verso i siti Web che sono lenti da caricare. Dall’estate del 2018, Google sta ufficialmente dando la priorità ai siti Web veloci, quindi è sicuramente qualcosa a cui pensare.

Anche se il tuo sito web è un po’ lento, non preoccuparti. Ci sono molte cose che puoi fare per velocizzarlo. Ad esempio, puoi utilizzare uno degli eccellenti plug-in di memorizzazione nella cache che creano una versione pronta per HTML del tuo sito in modo che si carichi più velocemente. Puoi anche comprimere tutti i tuoi file in modo che vengano caricati nella dimensione più bassa e leggera possibile. Infine, prenditi del tempo per esplorare il tuo sito Web e cercare eventuali errori tecnici, come collegamenti interrotti, pagine eccessivamente saturate e così via.

Quando si tratta di ottimizzazione per i motori di ricerca (SEO), supponendo che tu stia già applicando tutte le migliori pratiche sul campo, ci sono un paio di cose aggiuntive da tenere a mente.

Per uno, devi garantire la parità di contenuto tra le versioni del tuo sito. Ciò vale in particolare per link interni, dati strutturati, tag e simili. Inoltre, assicurati che i tuoi server siano in grado di gestire la velocità di scansione. Questo era un problema quando è stata lanciata per la prima volta l’indicizzazione mobile-first, ma un numero sorprendente di siti Web non si è ancora adattato alla nuova attività di scansione.

Infine, monitora regolarmente lo stato dell’indicizzazione e assicurati che robots.txt sia convalidato e che i file di registro del tuo server siano in ordine.

• Optare per un framework reattivo

Sì, abbiamo detto in precedenza che l’utilizzo di un tema reattivo, basato su un framework reattivo, non è sufficiente per una corretta ottimizzazione mobile first. Ma rimane uno dei fattori essenziali, quindi abbiamo pensato di ribadirlo.

Bootstrap e Foundation sono attualmente i framework più popolari e probabilmente i migliori reattivi, quindi opta per un tema utilizzando uno di essi. Sono ideali per tradurre il design del tuo sito Web su schermi più piccoli con un rischio minimo di problemi e bug. Inoltre, lo fanno sia a livello di front-end che di back-end, quindi riducono notevolmente il carico di lavoro degli sviluppatori.

• Ottimizza la navigazione, i contenuti e l’interazione

Trovare quel perfetto equilibrio tra contenuti insufficienti e troppi contenuti è il disturbo comune di tutti i siti Web mobili. Eppure, è una battaglia che dobbiamo solo continuare a combattere. I visitatori hanno bisogno di informazioni e hanno bisogno che siano presentate in modo chiaro e semplice. Il disordine è inaccettabile. Organizza i tuoi contenuti in modo da poter dire ciò che hai da dire, definire strategie per i tuoi inviti all’azione e nient’altro.

Inoltre, considera la navigazione del tuo sito web. Se è troppo complicato, semplicemente non funzionerà per i dispositivi mobili.

Successivamente, se la barra di navigazione sul desktop è lunga, è necessario accorciarla nella versione mobile. Prendi in considerazione l’idea di ingrandire il testo e trasformare i tuoi collegamenti in pulsanti facili da toccare.

Infine, verifica se i tuoi layout sono ottimizzati correttamente per le comuni azioni manuali, come toccare e scorrere.

Questo è un passaggio abbastanza logico, ma non farà male sottolinearlo ancora una volta. Devi sempre controllare e testare tutto sul tuo sito. Anche se non hai apportato modifiche di recente, considera di fare un test occasionale solo per vedere se tutto funziona correttamente.

La maggior parte delle persone oggigiorno utilizza browser moderni o browser ottimizzati per dispositivi mobili. Tuttavia, una percentuale sorprendente di utenti Internet utilizza ancora versioni precedenti del browser e devi pensarci anche tu. Vuoi che il tuo sito web abbia lo stesso aspetto su un vecchio iPhone 4s come sul nuovo Huawei P20.

Testa semplicemente il design del tuo sito web per la reattività e non dimenticare il test di divisione A/B, in particolare per le tue pagine di destinazione. Naturalmente, prima di tutto, personalizza la versione mobile del tuo sito e preparalo per gli utenti.

Il mobile-first è una tendenza che durerà per un po’, ed è la realtà che tutti dobbiamo accettare. Con "noi" intendiamo tutti coloro che sono coinvolti nella creazione e nella gestione di un sito web. Designer, sviluppatori, amministratori, esperti SEO, editori, copywriter: tutti devono ricordarsi di dare la priorità al cellulare. Ovviamente, questo non vuol dire che dovremmo trascurare le versioni desktop. È solo che il design mobile first deve essere preso sul serio.

Ci auguriamo che questo articolo ti sia stato utile. Se ti è piaciuto, non esitare a dare un’occhiata anche ad alcuni di questi articoli!