Come ottimizzare un sito mobile: esempi e buone pratiche

Questo post è stato aggiornato il 15 marzo 2022.

L'utilizzo di Internet da mobile è in costante crescita e, infatti, il traffico proveniente da dispositivi mobile rappresenta in Italia l'89% del traffico Internet nella fascia di età 18-74 anni. Fornire quindi la migliore esperienza di navigazione possibile per gli utenti di smartphone e tablet è un must assoluto. Creare un sito web mobile friendly è una parte fondamentale nella creazione di un sito web.

Un buona versione mobile del tuo sito può fare molto di più che migliorare l'esperienza dei tuoi utenti quando ci navigano. Può anche avere un impatto positivo sulla performance del tuo sito nei risultati di ricerca, come parte dell'indicizzazione mobile-first di Google.

Per aiutarti a ottimizzare il tuo sito web per mobile, abbiamo raccolto 16 esempi di mobile web design, tutti costruiti su Wix, e abbiamo spiegato alcune delle migliori caratteristiche e buone pratiche da tenere a mente per creare un buon sito mobile friendly.

Parte di un ampio progetto dei famosi designer Stefan Sagmeister e Jessica Walsh, questo sito web è una celebrazione della bellezza e del potere che questa ha su di noi. Il sito attira i visitatori in un mondo dall'estetica ipnotizzante, con tutte le informazioni sulla mostra "Beauty" e sul suo catalogo.

Il sito web di S&W Beauty impiega un linguaggio visivo coeso. L'homepage, dal design abbagliante e ornato, è piena di motivi intricati e dettagli, che sono bilanciati dallo schema colori minimalista del sito, che usa solo bianco e nero. Il design singolare del progetto è evidente in ogni dettaglio, fino al menu mobile personalizzato che presenta una versione adornata di gioelli della classica icona menu a tre linee.

Grazie al design web responsivo, questo sito è perfetto sia su desktop che su mobile.

Il parrucchiere, attivista e personalità televisiva Jonathan Van Ness, conosciuto per il suo ruolo nella serie Netflix Queer Eye, è una forza della natura. Van Ness che usa anche le sue iniziali JVN ha una forte presenza online, con oltre 5 milioni di follower su Instagram e un sito web dal design accattivante.

Il sito mobile di Van Ness è una estensione del suo brand personale, e incarna perfettamente il suo brand personale. La homepage del suo sito mobile è chiara e usa un banner con un carosello per mettere in evidenza tutte le informazioni importanti sul sito: i biglietti per li spettacoli, il suo libro best seller per il New York Times, informazioni sul suo podcast e sul suo nuovo progetto, un libro per bambini.

Il suo sito presenta una struttura tradizionale per essere più chiaro e garantire una buona usabilità. Per questo il menu a tre linee è posizionato in alto a destra della pagina, in modo che i visitatori sappiano immediatamente dove cliccare per trovare più informazioni. Ogni pagina ha il proprio linguaggio visuale, e trasmette un messaggio specifico con una chiara CTA. Quello che colpisce di questo sito è che non importa in quale pagina, Van Ness è sempre in primo piano: che sia una sua foto, una palette colori brillante o il tono del testo usato, l'esperienza complessiva di questo sito mobile è infusa con la persona di Jonathan Van Ness.

Quando si trattda di design di un sito mobile, lo spazio a disposizione è limitato. Gli utenti visualizzeranno il tuo sito mobile in una dimensione molto ridotta e quindi devi usare lo spazio a disposizione in modo strategico. Nel sito mobile di In Print Art Book Fair l'attenzione dei visitatori viene immediatamente catturata da un video che mette in luce l'aspetto artistico di questa fiera. Il video non solo stabilisce il tono dell'evento, ma anche comunica subito ai visitatori di cosa di tratta.

Questo video permette agli utenti di farsi un'idea della fiera di libri d'arte che si tiene a Gerusalemme ogni anno, senza dover usare altro tempo per scorrere in basso cercando di capire di cosa si tratta. Una volta che gli utenti si sono fatti un'idea dell'evento, una CTA chiara e diretta, "Invia la tua candidatura", li invita all'azione. La data dell'evento e la data ultima per inviare le candidature è messa in evidenza e presentata in più lingue, rendendo i contenuti di questo sito mobile accessibili a visitatori che parlano lingue diverse.

Infine, il sito di In Print Art Book Fair, usa con attenzione gli spazi per mettere in evidenza la loro barra dei social, le FAQ e la sezione Contattaci, creando un'esperienza utente semplice ed efficace.

L'azienda di imballaggi ecologici Puffin Packaging vuole condividere la sua mission in modo chiaro: gli imballaggi isolanti dovrebbero essere efficienti, economici e soprattutto sostenibili. Il loro sito, sia per desktop che per mobile, trasmette questo messaggio in modo chiaro con un tono, dei testi e un'identità visuale coerenti. Il loro messaggio su quello che offrono e i loro servizi è chiaro.

La prima CTA, nella parte superiore del sito, invita gli utenti a cliccare sul tasto "Come funziona" per leggere la filosofia di Puffin Packaging prima di procedere con il resto del sito. La seconda CTA consiste in un tasto "Contattaci" dove gli utenti possono contattare l'azienda per avere maggiori informazioni. Puffin Packaging ha deciso, intenzionalmente, di non mettere le proprie informazioni di contatto nella parte inferiore del proprio sito mobile, cambiando la gerarchia delle informazioni per renderelo più diretto e intuitivo.

Il loro sito mobile è ricco di contenuti e offre informazioni sul Puffin Packaging e sui suoi valori, spiegando il tutto chiaramente tramite immagini e testi che supportano il messaggio di sostenibilità del brand. Infine, il brand usa una serie di esempi che mostrano in dettaglio i loro prodotti e lo spirito che rappresentano ad ogni clic.

La fotografa, art director e artista Sharon Radisch, sospende tutte le convenzioni di design per siti mobile, ma in modo strategico e con stile. Radisch ha deciso di spostare la navigazione del suo sito mobile al centro, con un menu sito web centrale per guidare lo sguardo dei visitatori direttamente sulle immagini. Questo aggiustamento della gerarchia degli elementi del sito è una mossa intelligente e non rovina l'esperienza utente, anzi la migliora.

Radisch usa una composizione leggera mettendo in risalto il meglio della propria collezione e lasciando parlare le immagini. Con un'estetica elegante, accostando motivi in bianco e nero con immagini dai toni neutrali, e con una quantità di testo minima, Radisch ha trovato un modo intelligente e accattivante per mettere in risalto il proprio lavoro dandogli lo spazio che merita.

 Il sito web di questo ristorante cinese è completamente brandizzato con il logo in evidenza nella parte superiore del sito, che rimanda alla homepage quando vi si clicca sopra. Collegare il logo del tuo sito alla tua home page è una buona pratica, importante per migliorare l'esperienza di navigazione degli utenti. Questa funzionalità diventa ancora più essenziale quando si decide di ottimizzare un sito per mobile perchè migliora l'esperienza utente in modo significativo.

Questo ristorante a conduzione familiare presenta foto estremamente fotogeniche di ravioli fatti a mano, abbinate a immagini create con arte vettoriale disegnate a mano. Mettendo l'accento sull'attenzione al dettaglio, Yang's Place trasmette un senso di artigianalità e qualità. Il posizionamento dei tasti Menu e Ordina online conducono il visitatore al cuore del sito di Yang's Place: i loro piatti che fanno venire l'acquolina in bocca.

Lo studente di design e fotografia di Tel Aviv Alon Peres ha creato un sito portfolio che rappresenta alla perfezione il suo lavoro e la sua creatività, scoprendo in continuazione nuove tendenze del design. Come spiega nella sua pagina Su di me: "Il mio primo contatto con il design è stato leggendo il giornale a casa dei miei genitori. Sul giornale trovavo sempre qualcosa da osservare ed esaminavo ogni pagina fin nei minimi dettagli."

La palette in bianco e nero scelta da Peres per la sua homepage richiama l'estetica della carta stampata, prestando attenzione anche ai dettagli più piccoli. Peles fa uso della tecnica dello "scrollytelling" (raccontare una storia mentre l'utente fa scorrere la pagina verso il basso) per rendere la navigazione nel suo sito mobile più intuitiva, dando così diversi modi di navigare attraverso il suo sito. L'utente può decidere di usare il menu a tre linee in alto, cliccare su uno dei tasti CTA disposti in parti diverse del sito, o cliccare sui progetti di Peres che appaiono mentre si scorre in basso grazie al parallax scrolling. Viene anche offerta un opzione "Torna in alto" su ogni pagina.

Peres riesce a mantenere con successo l'identità del suo brand, sia su desktop che su mobile.

Adornato con i badge dei numerosi premi cinematografici vinti, il sito mobile del film Balloon mantiene i fan aggiornati su questo cortometraggio. I visitatori del sito possono rimanere informati sulle diverse proiezioni grazie all'app integrata Wix Events, e leggere le ultime notizie sul blog del sito. Ci sono anche link ai canali social rilevanti, compresa la pagina IMDB del film.

Inoltre, il sito presenta il trailer del film, che è incorporato nella pagina usando un Video Box. Mentre gli utenti scorrono la pagina, un breve frammento del trailer viene riprodotto automaticamente, invitandoli a premere il tasto 'Play'.

La designer grafica Sophie Brittain accoglie i visitatori del suo sito mobile con una homepage tanto giocosa quanto minimale. Con uno sfondo bianco e poche immagini, lascia che una concisa frase introduttiva occupi la maggior parte dello spazio.

L'uso unico che Sophie fa del testo è evidente anche nel piè di pagina del sito, dove sceglie delle parole chiave accattivanti al posto delle proprie icone social. Per esempio, etichetta il suo account LinkedIn come "Io, una professionista", e il suo numero di telefono appare sotto "Tu, che forse mi chiami".

Il design del sito mobile friendly Atelier/Blanc di Romain Deligny, wedding planner e stilista, è pieno di toni caldi, squisiti abbinamenti di caratteri e una fotografia perfetta. Mentre la versione desktop del menu di navigazione di questo sito è un classico elenco orizzontale nella parte superiore della pagina, nella versione mobile il menu viene sostituito dal più piccolo menu a tre linee. Quando viene cliccato, si apre in un menu a tutto schermo che è più facile sia da leggere che da cliccare sui piccoli schermi.

Anche il feed di Instagram nel piè di pagina del sito mobile è stato ridimensionato, da una galleria orizzontale di diverse immagini, a uno slideshow di un'unica immagine che può essere esplorato grazie a delle frecce.

L'illustratrice e creatrice britannica Hollie Fuller fa buon uso della Wix Pro Gallery nel suo sito portfolio, mostrando i suoi vari progetti in un layout ordinato e ottimizzato per mobile. Ciascuna delle illustrazioni sulla homepage di questo sito mobile friendly porta a una pagina progetto interna, dove si possono trovare dettagli aggiuntivi e una breve descrizione del suo lavoro.

Nella sua pagina "Su di me", Hollie aggiunge una foto di se stessa accanto all'elenco dei clienti con cui ha lavorato e delle testate dove il suo lavoro è stato pubblicato. Presentare la persona reale dietro alle illustrazioni è una buona pratica per costruire un brand personale, migliorare la propria credibilità e il legame con il proprio pubblico.
 

Noni Ceramica è un business brasiliano a conduzione familiare. Nel loro sito mobile mostrano le loro creazioni in ceramica utilizzando un sottile effetto di scorrimento dell'intestazione che aggiunge un senso di profondità alla homepage. Un tasto con una CTA prominente indirizza i visitatori verso il negozio online, dove possono vedere foto dei prodotti sia nell'ambiente neutro di uno studio, che in uso con del cibo dall'aspetto delizioso.

Il logo del brand è di tipo geometrico e tipografico, in linea con le attuali tendenze di design. Il logo è mostrato con orgoglio nella parte superiore della homepage di questo sito mobile, mentre nelle pagine interne, il logo appare in fondo alla pagina, rimandando alla homepage per facilitare la navigazione.

Il sito mobile dell'artista sudafricana Michelle Carlos si apre con una stupefacente splash page: i suoi lavori dipinti a mano riempiono lo schermo, con il logo posizionato in alto sulla pagina. Questa pagina aiuta a stabilire il tono del resto del sito, indicando ai visitatori il tipo di contenuto che possono aspettarsi di trovare all'interno.

Oltre a mostrare le sue illustrazioni, disegni e dipinti, Michelle ha anche usato il suo sito web per creare un blog. Qui condivide qualsiasi cosa, dai consigli su come usare Photoshop alle sue ricette preferite accompagnate dalle sue opere d'arte. Il logo del suo blog è lo stesso del suo sito web, creando così un design coerente per il suo portfolio.

Il portfolio dello studio inglese di web design Brown Owl Collective ha pochissimo testo sulla homepage del loro sito mobile. Con una breve dichiarazione della loro filosofia e un tasto di chiamata all'azione (CTA) che invita i visitatori a esplorare i loro lavori, la pagina è riempita quasi interamente da immagini.

Usando l'effetto al passaggio del mouse nella galleria, il nome di ogni progetto appare solo quando si passa sull'immagine. Questo riduce al minimo il numero di elementi sullo schermo, pur trasmettendo tutte le informazioni rilevanti fin dall'inizio.

Il portfolio online dell'artista Piergiorgio Del Ben si apre con una schermata che accoglie i visitatori e mette in risalto fin da subito il lavoro dell'artista. Del Ben usa immagini di alta qualità, perfettamente adatte al formato di un sito mobile, che mettono in risalto le pennellate e i più piccoli dettagli del suo lavoro. Il tutto è armoniosamente costruito per mettere in risalto l'artista e il suo lavoro, quasi creando l'illusione di un'esposizione in una galleria.

Con un menu minimalista e semplice questo sito mobile friendly aiuta i visitatori a navigare attraverso il sito, scoprendo la filosofia dell'artista, i suoi lavori, le sue pubblicazioni e le informazioni di contatto. Dal Ben inserisce anche i link ai suoi canali social direttamente nella hompage, dando così agli utenti un altro modo per apprezzare la sua arte.

Creato per un'attività dedicata al movimento, il sito mobile dello studio di danza Studio 19 cattura perfettamente la fluidità che è alla base della danza. Gli utenti sono accolti da video che mettono in risalto i diversi tipi di danza insegnati nello studio: dal balletto alla tap dance, dai musical all'hip hop. Il design di questo sito mobile friendly è dinamico, con video reel e il logo, animato anch'esso, per catturare l'attenzione dei visitatori e trasmettere l'energia del posto.

Con una CTA molto diretta, "Prenota una lezione di prova", Studio 19 rende semplice per i visitatori del loro sito mobile registrarsi. Inoltre, il calendario delle lezioni in programma rende ancora più semplice capire a quale lezione iscriversi.

Il design di un sito web mobile non è semplicemente la versione rimpicciolita del tuo sito su desktop. Creare un sito mobile-first (progettato in primo luogo per dispositivi mobile) è estremamente importante, considerato che sempre più persone accedono ai siti web dal loro dispositivo mobile. Un buon sito web mobile richiede alcuni aggiustamenti, per ottenere un design pulito e preciso che migliorerà l'esperienza dell'utente.

Se stai costruendo il tuo sito su Wix, tutti i template per siti web sono dotati di una versione mobile completamente ottimizzata e integrata, che rende facilissimo ottimizzare un sito web per mobile. Inoltre, il tuo sito sarà automaticamente convertito in una visualizzazione mobile-friendly con dimensione dei caratteri e immagini ottimizzati.

Le seguenti buone pratiche possono aiutarti a ottimizzare il tuo sito web per mobile:

A partire dall'implementazione dell'indicizzazione con priorità ai contenuti per dispositivi mobile di Google nel 2015, la posizione di un sito web nei risultati dei motori di ricerca è determinata principalmente dalla sua versione mobile. Di conseguenza, migliorare la versione mobile del tuo sito web - in termini di prestazioni, design e tempo di caricamento della pagina - è diventata una pratica SEO fondamentale.
 

A causa della quantità limitata di spazio sugli schermi dei cellulari, non tutti i testi e gli elementi visivi del tuo design desktop troveranno spazio nella tua versione mobile. Nascondi gli elementi della pagina che non sono assolutamente necessari a trasmettere il tuo messaggio.

Senza il lusso di un mouse e una tastiera, la navigazione su mobile viene eseguita con le dita. Questo richiede che gli elementi di navigazione siano estremamente prominenti e sempre a portata di mano. Le tue call-to-action e altri tasti dovrebbero risaltare, essere facili da cliccare e posizionati strategicamente.
 

Permetti ai visitatori del tuo sito mobile di tornare rapidamente all'inizio della tua pagina con un tasto 'Torna all'inizio', che può essere completamente personalizzato per adattarsi al tuo brand.

Questa importante pratica di navigazione permette ai visitatori del sito di tornare alla tua homepage con un clic in qualsiasi momento durante la navigazione del tuo sito.
 

Anche se il tuo sito per desktop ha un menu di navigazione classico, assicurati di scegliere un menu mobile per i dispositivi più piccoli. Un buon sostituto ai menu tradizionali è il menu a tre linee. Questa è un'icona composta da tre linee orizzontali che si apre in un menu quando viene cliccata. Un'altra idea da considerare è quella di introdurre una Barra Azioni Rapide, che rende le azioni più importanti facilmente accessibili.
 

L'uso di funzionalità di design uniche per i dispositivi mobile può aiutare a migliorare il tuo sito mobile friendly e dare ai tuoi visitatori un'esperienza più fluida. Alcune idee per farlo: creare una schermata di benvenuto brandizzata per dare ai visitatori un benvenuto professionale; aggiungere animazioni per siti mobile per rendere il tuo sito più dinamico, e aggiungere un menu mobile personalizzato per un design del tutto coerente. Infine, puoi anche usare gallerie dal layout perfetto per il tuo sito, effetti di scorrimento, e la Branded App di Wix per creare un'esperienza mobile di prim'ordine per i tuoi utenti.