Come creare un sito web mobile friendly: 12 esempi


Mobile web design su sfondo azzurro con una donna che fa la spesa


Creare un sito web mobile friendly è una parte fondamentale nella creazione di un sito web. 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.


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 (di cui parleremo più avanti).


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



I migliori mobile web design



1. S&W Beauty


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 Beauty impiega un linguaggio visivo coeso. La sua 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 hamburger.


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



Sito web mobile di S&W Beauty


2. Piboco


Il sito web multilingue di Piboco si apre su mobile con una schermata di benvenuto animata per accogliere i visitatori mentre la pagina viene caricata sullo sfondo. Essendo il sito web di un'applicazione di lettura per bambini, questa introduzione animata è più che appropriata, perfettamente in linea con l'animazione nell'applicazione stessa.


Animazioni simili, con simpatiche forme geometriche personificate, si possono trovare anche sulla pagina 'Collection', ribadendo i valori di divertimento e interattività che stanno dietro l'identità del brand Piboco.


Ogni libro della collezione di Piboco è presentato utilizzando uno slideshow di foto, che permette di dare una sbirciatina alle pagine illustrate all'interno. Accanto alle immagini c'è una breve descrizione testuale del libro per spiegarne il tema principale e la trama.



Gif di sito web mobile di Piboco


3. AutoFleet


Il design web mobile di AutoFleet è ricco di contenuti, a partire da elementi di arte vettoriale animata che spiegano la loro soluzione di business e una galleria di immagini che scorrono presentando le funzionalità del loro prodotto. In tutti i loro contenuti, il sito web mantiene un uso coerente dei colori del brand, con la loro firma in blu chiaro e verde come colori primari, e due tonalità di rosa come colori secondari.


Il tasto di chiamata all'azione nella parte superiore del sito spicca per la sfumatura di colori a gradiente. Una volta cliccato, porta a una finestra popup dove i visitatori possono esprimere il loro interesse nel prodotto compilando un rapido modulo online.



Sito web mobile AutoFleet


4. SomiSomi


Il sito web di questo ristorante che serve un dessert coreano chiamato “Ah-Boong” è completamente brandizzato con un design del loro logo prominente nella parte superiore del sito, che riporta anche alla homepage quando viene cliccato. Collegare il tuo logo alla tua homepage è un'importante pratica per semplificare la navigazione in un sito web. Questa caratteristica diventa ancora più vitale su mobile, in quanto può migliorare drasticamente l'esperienza dell'utente.


Vantandosi del loro gelato altamente fotogenico servito in un cono a forma di pesce rosso, SomiSomi ha incorporato il suo feed Instagram nel suo sito web. Direttamente sopra il feed c'è l'hashtag del loro brand, in modo che condividere le foto del loro prodotto diventi ancora più facile.



Sito web mobile di SomiSomi


5. Balloon Movie


Adornato con i badge di molti premi cinematografici, questo sito web mobile mantiene i fan aggiornati su questo cortometraggio. I visitatori del sito possono rimanere informati sulle diverse proiezioni con l'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 Video Box. Mentre gli utenti scorrono la pagina, un breve frammento del trailer viene riprodotto automaticamente, invitandoli a premere il pulsante 'Play'.


Sito web mobile di Balloon Movie


6. Sophie Brittain


La designer grafica Sophie Brittain accoglie i visitatori del suo sito con una homepage che è 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, optando per una scelta intelligente di parole chiave al posto delle icone ai suoi social. Etichetta il suo account LinkedIn come "Io, una professionista", e il suo numero di telefono appare sotto "Tu, che forse mi chiami".



Sito web mobile di Sophie Brittain


7. Atelier/Blanc


Il design mobile friendly del sito di Romain Deligny, wedding planner e stilista, è pieno di toni caldi, squisiti abbinamenti di caratteri e una fotografia immacolata. 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 hamburger. 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 è stato ridimensionato, da una galleria orizzontale di diverse immagini, a uno slideshow di un'unica immagine che può essere esplorato grazie alle frecce.



Sito mobile Atelier/Blanc


8. Hollie Fuller


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


Nella sua pagina "About", 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 e migliorare la propria credibilità e il legame con il proprio pubblico.


Sito web mobile di Hollie Fuller


9. Noni Ceramica


Operando dal Brasile, questo sito di eCommerce a conduzione familiare mostra i suoi piatti in ceramica utilizzando un sottile effetto di scorrimento dell'intestazione che aggiunge un senso di profondità alla homepage. Un tasto di chiamata all'azione prominente indirizza i visitatori al negozio online, dove possono vedere foto dei prodotti sia nell'ambiente neutro di uno studio, che messi in uso con del cibo dall'aspetto delizioso.


Il logo del brand è 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 friendly. Nelle pagine interne, il logo appare in fondo alla pagina, rimandando alla homepage per facilitare la navigazione.



Sito mobile di Noni Ceramica


10. Michelle Carlos


Il sito mobile dell'artista sudafricana Michelle Carlos si apre con una stupefacente splash page: il suo lavoro dipinto a mano riempie lo schermo, con il logo posizionato sopra di esso. 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 aspetto coerente per questo portfolio di arte e design.



Sito web mobile di Michelle Carlos


11. Sunny


I girasoli sul sito web per cellulare di questo brand di meditazione e well being sono pieni di colore e di luce. Il design della homepage di Sunny è perfettamente in linea con le attuali tendenze del web design, con una grande foto abbinata al logo del marchio.


Il logo è situato nell'intestazione del sito web accanto a un menu hamburger. Una volta che i visitatori iniziano a scorrere la pagina, l'intestazione inizia a svanire fino a scomparire dalla vista, permettendo una maggiore leggibilità del contenuto. Scorrendo di nuovo verso l'alto, tuttavia, l'intestazione riappare prontamente per una navigazione facile e veloce. Questa funzione "a dissolvenza" è una delle quattro diverse impostazioni di scorrimento dell'intestazione disponibili su mobile.



Sito web mobile Sunny


12. Brown Owl Collective


Il portfolio di questo studio inglese di web design ha pochissimo testo sulla pagina. Con solo una breve dichiarazione della loro missione e un tasto di chiamata all'azione (CTA) che invita i visitatori a esplorare i loro lavori, la pagina è riempita quasi interamente di immagini.


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



Sito web mobile di Brown Owl Collective


Consigli per un sito mobile friendly


Il mobile web design non è solo una versione rimpicciolita del tuo sito su desktop. Un buon sito web per cellulari richiede alcuni aggiustamenti, per ottenere un design pulito e preciso, che migliorerà l'esperienza dell'utente.


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


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


  • Indicizzazione mobile-first: dall'implementazione dell'indice mobile-first di Google nel 2015, il ranking dei risultati di ricerca di un sito web è determinato principalmente in base alla 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

  • Ridurre al minimo gli elementi della pagina: 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

  • Utilizza le CTA: 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

  • Usa un tasto "Torna all'inizio": permetti ai visitatori del sito di tornare rapidamente all'inizio della tua pagina con un tasto 'Torna all'inizio', che può essere completamente personalizzato

  • Collega il logo alla homepage: 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

  • Riduci il menu: anche se il tuo sito desktop ha un menu di navigazione classico, assicurati di optare per un menu mobile per i dispositivi più piccoli. Un buon modo di procedere è di usare il menu hamburger. 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 chiaramente accessibili

  • Sfrutta le funzionalità dei dispositivi mobile: l'uso di funzionalità uniche per i cellulari può aiutare a migliorare il tuo sito mobile e dare ai tuoi visitatori un'esperienza più fluida. Alcune idee includono: una schermata di benvenuto brandizzata per dare ai visitatori un benvenuto professionale; animazioni per il sito mobile per ravvivare il tuo sito, e un menu mobile personalizzato per un design del tutto coerente

Caratteristiche del design per un sito mobile friendly



Il team di Wix

Immagine per mobile

Questo blog è stato creato con Wix Blog