Perchè è importante avere un sito web mobile-first?
Il telefonino mobile ha cambiato il modo in cui funziona il mondo compreso il web design. Tocca ogni aspetto della nostra vita. La maggior parte delle persone la prima cosa che guarda quando si sveglia è lo schermo del cellulare e l’ultima cosa che vede prima di addormentarsi è sempre il medesimo schermo. Quindi dire che è importante per gli affari sarebbe un eufemismo. Ma anche se è un fatto ben noto, molti imprenditori stanno ancora progettando e sviluppando siti web per desktop e poi cercano di farli funzionare bene su mobile. Mentre in realtà dovrebbe essere il contrario.
Tutto è cambiato nel 2007, quando Apple ha rilasciato il suo primo iPhone. Improvvisamente, potevamo accedere a siti completi dai nostri computer tascabili con un livello di connettività mai visto prima.
Oggi, più del 50% delle ricerche organiche su Google proviene da un dispositivo mobile. Il mobile ha superato il personal computer come modalità principale di interazione online.
Quanto spesso usi il tuo telefono per cercare un ristorante nelle vicinanze quando sei in giro, o per cercare quell’attore mentre guardi la televisione? Ma c’è una disconnessione tra il modo in cui progettiamo i siti web e il modo in cui li usiamo.
Di solito progettiamo siti web su un computer desktop o portatile. E anche alcuni web designer professionisti possono dimenticare di ottimizzare i siti per i cellulari mentre sono seduti davanti allo schermo di un computer a grandezza naturale.
Quando non riusciamo a mettere l’esperienza mobile al primo posto, il risultato può essere un’esperienza utente frustrante, con pop-up che coprono l’intero schermo, moduli che sono troppo piccoli da leggere, e grafica con contrasto che si perde nella forma rimpicciolita.
Inoltre, Google è passato a un sistema di “indicizzazione mobile-first”. Questo significa che non scansiona il tuo sito desktop quando indicizza e classifica le pagine. Scansionano invece il tuo sito mobile. Se il tuo sito desktop è veloce come un fulmine ma il tuo sito mobile striscia, potresti essere penalizzato nel ranking di ricerca.
Perché?
Perché la verità è che il mobile non è più una tendenza, piuttosto è diventato uno stile di vita per la nostra generazione.
Nel giugno 2019, il mobile ha rappresentato il 50,71% di tutte le ricerche, mentre il desktop è sceso al 45,53%. Quindi se non vuoi dire addio alle tue conversioni, assicurati di investire il tuo tempo e impegno nella creazione di siti web mobile-first.
Non sei ancora sicuro di dover progettare un sito web mobile-first? Considera questo: secondo le ultime statistiche della CNBC, oltre due miliardi di persone accedono a internet SOLO attraverso i loro dispositivi mobili. Questo è il 51% del totale degli utenti di telefonia mobile a livello globale. E, entro il 2025, si prevede che questo numero salirà al 72,5%. Questo significa che in questo momento ci sono milioni di utenti che hanno abbandonato i loro desktop/portatili in favore di un dispositivo mobile. Con così tanti occhi che arrivano al tuo sito web da dispositivi mobili, è ancora più importante assicurarsi che il tuo sito sia compatibile con i dispositivi mobili.
Ora, non fraintendetemi, non sto suggerendo di ignorare i desktop. Tuttavia dovreste sicuramente crearlo per il dispositivo su cui la maggior parte delle persone lo visualizza, e allo stesso tempo assicurarvi che funzioni anche sui desktop.
Quindi, è il momento di lasciarsi il passato alle spalle perché il traffico mobile è in crescita, e questa tendenza è qui per rimanere.
Cos'è il Mobile-first Design?
In primo luogo, penso che sia una buona idea sottolineare rapidamente cosa sia esattamente il mobile-first design per essere sicuri di essere sulla stessa pagina.
Il concetto di design mobile-first è venuto alla ribalta per la prima volta nel 2010 quando Eric Schmidt, CEO di Google a quel tempo, ha annunciato in una conferenza che l’azienda avrebbe adottato pratiche di design che si concentrano maggiormente sugli utenti mobili.
Egli disse:
Ciò che è veramente importante in questo momento è ottenere la giusta architettura mobile. Il mobile sarà alla fine il modo in cui fornirete la maggior parte dei vostri servizi. Il modo in cui mi piace dirlo è che la risposta dovrebbe essere sempre mobile-first.
Il ragionamento dietro l’affermazione era abbastanza semplice: I piccoli schermi hanno uno spazio limitato. Quindi, quando progettate per loro, scegliete gli elementi cruciali, quelli di cui i vostri utenti hanno più bisogno.
Quando espandete il vostro design per lo schermo più grande, cioè per i desktop o i laptop, potete fornire ai vostri utenti elementi avanzati che renderanno la vita di un tale utente più facile.
In altre parole, il Mobile-first design è una strategia di sviluppo web che considera prima le esigenze dell’utente mobile. Crea un’esperienza migliore per questi utenti iniziando il processo di progettazione dai piccoli schermi invece che il contrario. Quindi, invece di creare un sito web desktop e poi forzarlo per adattarlo a un telefono cellulare, si inizia con un piccolo schermo. Inoltre, vi assicuro che è molto più facile scalare verso le grandi dimensioni che scalare verso il basso da grandi elementi di design a quelli piccoli, assicurando che l’esperienza del vostro utente sia senza soluzione di continuità attraverso i dispositivi.
In altre parole, il design del sito web mobile-first mira a creare un sito web che non è solo utilizzabile sui dispositivi mobili, ma è ottimizzato per loro.
In che modo il Mobile-First Design è diverso dal Responsive Design?
Molte persone pensano che il mobile-first design e il responsive design siano la stessa cosa. Anche se sono simili, c’è una grande differenza. I webmaster prima creano il sito web poi lo ottimizzano per il mobile.
Per entrare nei dettagli tecnici, in un approccio di sviluppo web responsive, tutte le decisioni di design, a partire dalle grandi decisioni come il tipo di griglia fino a cose importanti come la dimensione dei caratteri, gli spazi bianchi, i moduli, i pulsanti, gli elementi multimediali, le schede, i caroselli, la navigazione, ecc, tutto è creato prima tenendo presente il desktop. Gli sviluppatori poi lavorano passo dopo passo nel rimpicciolire e riorganizzare questo design per adattarlo al piccolo schermo. Quindi, piuttosto che essere solo responsive progettando siti web che si muovono fluidamente per adattarsi ai dispositivi come nel caso del design responsive, nell’approccio mobile-first, il team di sviluppo prende tutte queste decisioni di design prima per le dimensioni mobili, poi si sposta verso l’alto per le dimensioni desktop.
Ci sono 5,2 miliardi di utenti di smartphone in tutto il mondo.
Quattro semplici consigli per creare siti web Mobile-first
Progettare il tuo sito web per mobile non sarà impegnativo e complicato, purché tu tenga a mente questi suggerimenti.
-
Mantienilo semplice
La semplicità otterrà sempre risultati migliori della complessità nella maggior parte delle cose della vita, e il design del tuo sito web non fa eccezione. Ma è ancora più importante mantenere la semplicità quando si progetta per i dispositivi mobili, perché questi dispositivi hanno schermi minuscoli, e gli utenti che navigano su questi dispositivi sono di solito abbastanza orientati all’obiettivo. Vogliono raggiungere e visualizzare facilmente e rapidamente ciò che stanno cercando, e un design del sito web semplice e chiaro può aiutarli a farlo.
Mantieni solo l’elemento essenziale e non appesantire mai i tuoi utenti mobili con elementi come pop-up, pubblicità e altri contenuti che non vogliono vedere. Usa il tuo spazio visivo limitato per includere solo le cose per cui sono sul sito web.
2. Progetta e posiziona strategicamente la tua call to action (CTA)
Quando progetti il tuo sito web per mobile, tieni presente che i tuoi utenti usano le dita, non il mouse. Quindi assicurati che le tue CTA possano essere facilmente lette e cliccate utilizzando caratteri più grandi per le tue CTA.
Ricorda: pulsanti grandi e CTA chiare possono rendere il tuo sito web una gioia da usare su mobile.
3. Presta particolare attenzione alla tua barra di navigazione
La navigazione gioca un ruolo cruciale nel successo di qualsiasi sito web; permette ai visitatori di passare facilmente da una pagina all’altra. Ma può ostacolare il successo del tuo sito web, e puoi perdere un gran numero di visitatori se fornisci una cattiva navigazione.
Non importa se stai progettando un sito web per utenti desktop o mobili, dovrebbe offrire una navigazione facile e conveniente per gli utenti. Ma nel caso del mobile, è necessario ridurre la barra di navigazione al minor numero possibile di opzioni e condensare gli elementi secondari in pulsanti di navigazione facili da raggiungere. Vi state chiedendo come farlo? Bene, il metodo più semplice per farlo è usare un menu hamburger.
4. Rendere Mobile First una parte del processo di test
Sappiamo tutti che testare i nostri siti web su diverse dimensioni mobili è importante. Ma questo test non è un’attività una tantum; è necessario continuare a testare e ritestare il tuo sito web su più dispositivi mobili regolarmente.
Perché? Perché decine di nuovi telefoni continuano a uscire ogni anno, e solo perché il tuo sito web appare bene su un dispositivo non significa che sarà bello anche sugli altri.
Ti stai chiedendo come testare la reattività del tuo sito web su una vasta gamma di dimensioni dello schermo, porte di visualizzazione e risoluzioni? Bene, il modo più semplice per farlo è quello di utilizzare uno strumento come LT Browser – con esso, è possibile controllare rapidamente la visualizzazione mobile del tuo sito web su diverse dimensioni dello schermo e risoluzioni. Che si tratti di un iPhone, iPad, Samsung, o anche un MacBook, si ottengono tutte le risoluzioni nel browser LT!
Dovresti anche considerare i diversi browser, poiché non tutti i visitatori usano gli stessi browser sul loro dispositivo mobile. Per esempio, chi usa Chrome su iPhone potrebbe comportarsi diversamente da chi usa Safari su iPhone.
Quali sono le statistiche del tuo sito mobile?
Prima di sapere cosa cambiare, devi conoscere lo stato attuale del tuo sito. Solo perché la maggior parte del traffico web proviene da mobile, non significa che lo faccia anche il tuo. Per scoprirlo, visita il tuo Google Analytics.
Sulla tua home dashboard, scorri verso il basso fino a vedere un grafico circolare chiamato Sessioni per dispositivo. Questo ti mostrerà la ripartizione dei dispositivi per gli ultimi sette giorni. Puoi cambiare la tua vista per guardare un periodo di tempo più lungo per ottenere una media più accurata. Potresti scoprire che la tua fascia demografica è in realtà più propensa a usare un computer che uno smartphone, soprattutto se i tuoi clienti sono più anziani.
Il design mobile-first è ancora importante, anche se i tuoi clienti sono più propensi a visitare il tuo sito su desktop, a causa dell’indicizzazione di Google. Ma potresti essere in grado di avere un sito leggermente più complesso se la maggior parte dei tuoi clienti lo visita da desktop.
Un altro fattore importante da considerare è la velocità del sito. Usando lo strumento PageSpeed Insights di Google, puoi testare il tuo sito per vedere quanto velocemente si carica sia su desktop che su mobile. Se il tuo sito è come molti altri, sarà molto veloce su desktop – e frustrante come una tartaruga su mobile. Quando progetti mobile-first, ti concentri sulla velocità del tuo sito su uno smartphone, invece di trattarlo come un ripensamento.
Come approcciare il Mobile First Web Design
Il vecchio modo di approcciare il web design era quello di pianificare il sito per il desktop, e poi rimuovere alcune caratteristiche per il mobile. Invece, progetteremo per il mobile e forse aggiungeremo alcune caratteristiche per il desktop.
I siti web sono diventati più semplici. Potresti ricordare i siti dei primi tempi di Internet, che travolgevano il visitatore con animazioni, banner pubblicitari, colori lampeggianti e testo piccolo su uno sfondo al neon. Il web design è maturato da allora, con un nuovo minimalismo che sta prendendo piede. Questa è una buona cosa per il design mobile!
Tieni a mente la semplicità quando pianifichi il tuo sito. Sarà più facile da navigare per l’utente mobile e si caricherà più velocemente. Con la velocità della pagina un importante fattore di ranking di Google, mantenere il tuo sito leggero e veloce migliorerà la tua posizione nei risultati dei motori di ricerca.
Poi, considera la tua gerarchia di informazioni. Su mobile, tutti i contenuti saranno presentati verticalmente. Quindi devi dare priorità al tuo contenuto, mettendo le informazioni più importanti in cima. I titoli dei blog e i contenuti principali dovrebbero essere visibili prima che l’utente debba mettere il dito sullo schermo e iniziare a scorrere.
Non è necessario sapere come programmare per creare un sito web mobile-first. Anche i creatori di siti web responsive come WordPress e Squarespace ti permettono di alternare le viste mobile, tablet e desktop. Pianifica il tuo sito dalla vista mobile e controllalo con la vista desktop prima di pubblicarlo.
Caratteristiche essenziali del sito per cellulari
Sia che tu stia lavorando con un sito responsive o che tu stia iniziando da zero con un nuovo design mobile, ecco gli elementi che il tuo sito mobile dovrebbe avere.
Menu hamburger
Un menu hamburger è un simbolo con tre linee orizzontali sovrapposte. È un’icona universale per un menu di navigazione su mobile, e dirà immediatamente all’utente dove cliccare per ulteriori opzioni.
Immagini compresse
Le immagini di grandi dimensioni sono uno dei principali killer della velocità del sito. Le immagini dovrebbero essere compresse per ridurre la loro dimensione complessiva e migliorare la velocità di caricamento del sito e della pagina.
Layout semplice
Un layout semplice e facile da navigare renderà il tuo sito mobile user friendly.
CTA cliccabili
La tua call to action (o CTA) dice all’utente cosa fare quando si trova sul tuo sito. “Acquista ora”, “Per saperne di più” e “Scarica” sono tutte CTA che chiedono all’utente di compiere un’azione.
Le CTA dovrebbero sempre essere facili da cliccare, preferibilmente in un box o un pulsante dai colori vivaci. Questo è particolarmente importante su mobile, dove cliccare su un piccolo link di testo può essere difficile.
Concentrati sull’utente
Che tu stia progettando il tuo sito o affidando il progetto a uno sviluppatore web, assicurati che il mobile sia nella tua mente. Scorri i siti web più visitati sul tuo smartphone e prendi nota di ciò che rende l’esperienza facile e di ciò che è frustrante.
Tieni a mente l’utente quando progetti il tuo sito mobile. Sono loro che stai cercando di impressionare!
I siti web che non riescono a fornire una strategia decente per un’esperienza mobile di alta qualità rischiano di rimanere indietro rispetto ai loro concorrenti. Non preoccuparti, abbiamo messo insieme 4 consigli su come creare un sito web mobile-friendly.
1. Ottimizza il tuo sito web anche per i pollici più grossi.
Specialmente sugli smartphone, la maggior parte degli utenti usa i pollici per navigare nel tuo sito web. Queste interazioni includono lo scorrimento, il clic o l’inserimento di testo. Poiché il touchscreen non risponde se parti del pollice non toccano il pulsante, i web designer dovrebbero usare forme molto grandi quando creano i pulsanti. Anche la posizione di tutti gli elementi interattivi è molto importante. Tipicamente, gli smartphone sono tenuti nella zona inferiore mentre il pollice è posizionato da qualche parte nel mezzo. Ecco perché la zona di interazione ideale è all’incirca al centro dello schermo.
2. Mantenere le navigazioni brevi e semplici.
Mentre la maggior parte dei siti web desktop hanno una barra di navigazione completa con più menu principali e secondari nell’intestazione, è diventato uno standard comune per i siti web mobili includerli tutti in un’icona riconoscibile. A seconda di quanto sia complesso un menu, ogni menu può avere ulteriori sottomenu. Se un utente clicca su uno di questi sottomenu, è meglio sostituire il menu esistente con il nuovo elenco per mantenerlo breve e chiaro. Le barre laterali sono di solito usate per i menu mobili, che scorrono e si sovrappongono a parti dello schermo.
3. Ottimizza il tuo sito web per una visualizzazione verticale.
La maggior parte degli utenti preferisce tenere il proprio smartphone o tablet in posizione verticale mentre naviga in Internet. La larghezza limitata dello schermo è perfetta per i layout a colonna singola, il che significa: la maggior parte degli elementi del sito web sono posizionati in sequenza dall’alto verso il basso. Elementi più piccoli come icone, grafici o foto possono essere presentati in una griglia. Soprattutto i caroselli di immagini possono allentare lo scorrimento verticale passando in orizzontale. Inoltre, dovresti usare sezioni visive per raggruppare insieme informazioni simili in modo che l’utente possa capire immediatamente lo scopo di ogni sezione. Diversi colori di sfondo aiutano a separare queste sezioni l’una dall’altra.
4. La dimensione del carattere è assolutamente importante.
Assicurati che la dimensione del carattere sia adeguata. Google raccomanda una dimensione del carattere di 16 come base, che è definita in pixel CSS. Se usi un sito responsive mobile, hai un grande vantaggio: con il tag viewport, i pixel vengono visualizzati indipendentemente dal rispettivo dispositivo di output. Inoltre, è importante che tu non usi troppi font diversi. Più un carattere è uniforme, più è facile per gli utenti leggere i testi su piccoli schermi.
Questi erano i miei consigli per un web design mobile-friendly. Naturalmente non è tutto quello che devi considerare, ma questi consigli dovrebbero essere almeno un buon inizio.
Per coloro che sono alla ricerca di altre ispirazioni per un sito web, potete trovare tutti gli articoli nella categoria Web Design sul mio sito irbox.it.
Spero di esserti stata d’aiuto con questo articolo, se hai bisogno di un consiglio non esitare a contattarmi qui.
Lasciami Il tuo feedback su questo articolo nei commenti, la tua opinione è sempre importante per me.
Un saluto
Irina
