fbpx

BLOG

Responsive design per e-commerce: alcuni consigli pratici

Responsive design per e-commerce
Condividi su facebook
Condividi su twitter
Condividi su linkedin

Ciao. Siediti. Ti dobbiamo parlare. Si, riguarda il tuo e-commerce. No, non è il design, quello va bene; no, neanche il content marketing. Allora? Non fare finta di niente: prendi il tuo smartphone e prova ad accedere al tuo sito web. Un po’ difficilino muoversi da una pagina all’altra, non trovi? Se proviamo poi ad acquistare un prodotto… beh, meglio non affrontare questo argomento.

Il tuo e-commerce non ha una versione mobile friendly. Sai che significa? Che ti stai perdendo un bel po’ di clienti.

Non ti preoccupare, oggi ci trovi di buonumore, perciò ti vogliamo dare un’altra possibilità: ecco i nostri consigli pratici per realizzare un design responsive per il tuo e-commerce

Responsive design per e-commerce: i nostri consigli

Un e-commerce responsive è un sito che si adatta a differenti supporti, sia mobili che fissi, e permette di visualizzare correttamente ogni porzione di pagina senza scorrere con le dita da una parte all’altra del touchscreen o zoomare allargando pollice e indice sullo schermo o facendo altre acrobazie per leggere, navigare e acquistare.

Se vuoi conoscere la differenza tra sito responsivo e adattivo ti consigliamo di leggere un precedente articolo del nostro blog.

Se invece la conosci benissimo ma hai fatto lo gnorri fino a questo momento è ora di cambiare rotta e conquistare tutti quei potenziali clienti che fino ad ora erano tagliati fuori, a causa della loro “brutta” abitudine di navigare da smartphone.

Parliamo nello specifico del design da adottare in modo che le tue pagine appaiano facili da usare, accattivanti e moderne: insomma vogliamo concentrarci sull’interfaccia del tuo sito responsive, tenendo conto anche delle tendenze di web design del 2016.

Sviluppo di un sito responsive
Sviluppo di un sito responsive

Come ci mostra questa infografica, ci sono 3 ingredienti che dal punto di vista dello sviluppo permettono di realizzare una versione responsive di un sito e-commerce:

  1. Griglie fluide: permettono agli elementi della pagina di disporsi in modo diverso a seconda delle dimensioni del dispositivo su cui vengono visualizzati.
  2. Immagini flessibili: anche in questo caso le immagini cambiano la loro dimensione adattandosi allo allo schermo.
  3. Media Queries: sono moduli CSS3 che consentono di sviluppare stili diversi in grado di adattarsi a diversi schermi, superando le regole dei CSS di default.

Questi tre fattori che intervengono nel momento in cui lo sviluppatore mette mano al sito web permettono alle pagine web di adattarsi ed essere visualizzate correttamente sia da fisso che da mobile.

Anche la velocità di caricamento è fondamentale quando si parla di navigazione da mobile. Dato che i tuoi potenziali clienti non sempre sono connessi a una wi-fi ma magari usano il 3G o similari, la connessione potrebbe essere lenta e le pagine impiegherebbero così più tempo a caricarsi. Per ovviare in parte questo problema e permettere al sito di caricarsi più velocemente ti consigliamo di consentire alle pagine di fare il pre-load, una direttiva – anche questa da affidare ad un bravo sviluppatore – che permette di pre-caricare le pagine del sito che l’utente visiterà. Questo permette di velocizzare la navigazione.

Ora parliamo degli elementi grafici da usare in un sito responsive, dandoti piccoli tips che possono ispirare lo sviluppo delle tue pagine!

  • Il burger menu, ovvero le tre linee orizzontali che oggi sono universalmente associate al menu principale: permettono di risparmiare spazio e comprimere tutte le categorie del menu dentro un’icona. Ti consigliamo di mantenere fisso nell’header questo punto di riferimento importantissimo per chi entra nel tuo sito web.

    Burger Menu
    Burger Menu
  • I bottoni che contengono una call to action importante devono essere ben visibili e larghi. Per esempio, nel sito mobile friendly di un Hotel non potrà mancare il grande tasto per chiamare o prenotare la stanza con un touch.
    Call to Action per l'Hotel
  • Se poi vuoi aggiungere un calendario usabile anche da mobile, semplicemente scrollando a sinistra e a destra le date puoi adottare una soluzione di questo tipo. Qui puoi inserire la data di inizio dei saldi nel tuo e-commerce, gli eventi a cui partecipi, i compleanni e altre iniziative che potrebbero interessare ai tuoi clienti.
Calendario mobile friendly Style.com
Calendario mobile friendly Style.com
  • Un altro elemento che deve essere sempre presente sotto gli occhi degli utenti è il logo su cui cliccare per tornare in Home Page!

Parliamo ora della descrizione dei prodotti: quali sono le novità nel campo del web design e come si possono raggiungere al meglio i clienti usando piccoli stratagemmi grafici? 🙂

Le schede prodotto responsive:  elementi su cui puntare

La descrizione degli articoli in vendita è un elemento molto importante per il tuo e-commerce, ecco perché anche nella versione responsive devi fare attenzione alle schede-prodotto.

Tutte le informazioni devono essere trasmesse in modo veloce e sintetico, puntando soprattutto sulla comunicazione visiva, cioè sulla fotografia di riferimento.

Anche in questo caso puoi prendere spunto da Style.com che permette di zoomare la fotografia della scheda prodotto in modo da osservare ogni dettaglio.

fotografia del prodotto
fotografia del prodotto

Inoltre, anche se stai lavorando ad una versione ridotta, non dimenticare di dedicare uno spazio alle recensioni e le stelline, queste sono in grado di influenzare le decisioni d’acquisto degli utenti.

Infine, anche in questo caso il bottone con la call to action principale (quello in cui c’è scritto COMPRA o AGGIUNGI AL CARRELLO) deve essere ben visibile e attrarre l’utente.

Per ottimizzare la tua scheda prodotto ti invitiamo a leggere un nostro precedente articolo.

Quando avrai realizzato la versione responsive del tuo sito e-commerce non ti resterà che testarlo. A tal proposito Google considera il mobile friendly un fattore di ranking e ha elaborato uno strumento appositamente per questo scopo: ti basta inserire la URL del tuo sito web e attendere che Mister G. dia il suo verdetto!

Google Responsive
Google Responsive

Se Google ti ha bocciato non ti resta che affidarti a dei professionisti: non solo ti facciamo recuperare, ma portiamo il tuo e-commerce dritto al successo.

Scopri subito i nostri servizi!

Vuoi migliorare il tuo business online?
Luigi Vargiu

Luigi Vargiu

Curioso. Tanto. Forse anche per questo ho scelto di essere imprenditore in un settore in continua evoluzione, sono infatti il CEO di Strogoff ed E-Commerce Strategist. Ho formazione liceale, una laurea in Economia e Commercio, vari corsi di alta formazione in campi trasversali e tanta voglia di imparare da chiunque io incontri. Amo il bello, canto, suono la chitarra e sto imparando a suonare il pianoforte. Ho una famiglia fantastica, che è la mia più grande fonte di consapevolezza e crescita.

Lascia un commento

IL METODO STROGOFF

Avviare un e-commerce richiede il coraggio e l’intraprendenza dell’imprenditore, ma anche la competenza e la professionalità di chi dovrà trasformare l’idea in realtà.

Per questo motivo abbiamo ideato un METODO che ci consente di analizzare la tua idea di business e di fornirti tutti gli strumenti per affrontare lo sviluppo digitale della tua azienda.

Chiudi il menu

Il Commercio è 4.0!

Grazie per aver letto in nostri contenuti, speriamo che ti siano piaciuti e soprattutto che ti siano utili!

Non perdiamoci di vista: iscriviti alla nostra newsletter, e riceverai novità e appunti sul commercio elettronico direttamente sulla tua e-mail preferita.