x.

4 consigli per creare un sito web responsive

Avatar
Pubblicato il 07 Luglio 2020
Momento della lettura: 6 minuti

Con 29 milioni di acquirenti online in 2019, l’e-commerce italiano è in piena ascesa. Il report Audiweb ha dimostrato che il 62% della popolazione adulta naviga utilizzando un dispositivo mobile, per un totale di 28 milioni di italiani connessi con il proprio smartphone!

Per avere successo su Internet è pertanto indispensabile creare un sito e-commerce altamente performante e in grado di adattarsi alle dimensioni del dispositivo utilizzato (PC, smartphone e tablet). È il principio base del responsive web design

Perché è fortemente consigliato? Perché il successo di un sito web dipende prima di tutto dall’UX (user experience). Quanto più questa esperienza è piacevole e senza intoppi, maggiore sarà la probabilità che il visitatore rimanga sul sito e acquisti i tuoi prodotti o servizi.

Si noti che molti CMS permettono di default di creare il proprio sito in modalità responsive: è possibile verificare se il contenuto del sito viene visualizzato correttamente da una schermata all’altra grazie alla modalità test! 

In questo articolo, ti offriamo 4 consigli utili per creare un sito responsivo:

 

1. Vai dritto al punto

Per creare un sito web responsive, bisogna pensare mobile friendly, in altre parole progettarlo per la visualizzazione su dispositivi mobili!

In questa fase, è necessario razionalizzare al meglio gli elementi che desideri pubblicare sul tuo sito: una buona pratica consiste nel definire un obiettivo per ogni pagina. In questo modo potrai selezionare i tuoi contenuti.

Il design minimalista è una delle principali tendenze del webdesign, approfittane! 

Grazie alla Home page gli utenti di Internet avranno una prima impressione del tuo marchio, è quindi fondamentale curarne il layout ed i contenuti. Scegli un font gradevole da leggere e presenta la categoria prodotto più venduta direttamente sulla Home page. Nell’esempio qui sotto, Ceramicstore ha messo ben in evidenza la categoria “Acessi rapidi” per rendere più fluida la navigazione.

Sito web design

Attenzione a non forzare troppo il minimalismo togliendo contenuti o funzioni utili per il tuo sito! Gli utenti di Internet desiderano usufruire di pari opportunità indipendentemente che stiano utilizzando il proprio smartphone o il computer.

 

2. Offri un accesso rapido alle informazioni

In primo luogo, tutto dipende dalla velocità di caricamento delle pagine web!

Google tiene conto del tempo di download delle pagine web come criterio per il posizionamento SEO: più il tuo sito si carica velocemente, maggiori sono le probabilità di essere in cima alla lista dei risultati di ricerca Google. 

Un solo esempio è sufficiente per descrivere questo fenomeno: un utente mobile su due abbandona la pagina se ci vogliono più di 3 secondi per caricarla (Google)! Per aiutarti a testare e migliorare la velocità del tuo sito su tutti i tipi di dispositivi, ci sono strumenti come PageSpeed. Puoi anche consultare il nostro articolo “Sicurezza e performance” per ottenere ulteriori consigli ed ottimizzare il tuo sito web.

Come migliorare la velocità di caricamento? Prima di tutto devi prendere in considerazione la dimensione delle immagini!

  • La tecnica più semplice consiste nel comprimerle per ridurne il peso. Consiglio: utilizza un software DTP, come Photoshop, per convertire l’immagine nel formato JPEG (sarà due volte più leggera di un’immagine .png).
  • È inoltre possibile utilizzare la tecnica del lazy-loading, che consiste nel non caricare immediatamente tutti i contenuti della pagina, ma solo quelli visibili dall’utente di Internet. Gli altri elementi saranno caricati progressivamente mentre l’utente scorre la pagina.

La realizzazione di siti web deve essere appositamente pensata per semplificare l’esperienza di navigazione. Il menu deve includere tutte le categorie del tuo negozio ed essere in grado di adattarsi ai dispositivi mobili (non utilizzare più di 1/5 della pagina). Grazie al posizionamento, sarà possibile mettere in avanti una collezione speciale o dei nuovi prodotti.

Mobile friendlyMenu del sito Ducati Milano

Sui dispositivi mobili, i visitatori hanno bisogno di punti di riferimento. Ti consigliamo quindi di inserire una barra di ricerca sul tuo negozio online e di proporre l’autosuggestione: una funzione che suggerisce la ricerca in base a quanto inserito dall’utente (digitando una lettera o una parola, ad esempio). È inoltre consigliabile lasciare un’icona di contatto sempre visibile per eventuali domande. 

Adottare una strategia mobile first vuol dire offrire contenuti semplici, accessibili e veloci da leggere. Questi contenuti devono essere ben organizzati: poiché un sito web deve essere navigabile con un dispositivo mobile ad orientamento verticale, ti consigliamo quindi di mettere gli elementi più importanti e attraenti nella parte superiore della pagina.

Infine, bisogna evitare i pop-up e, più in generale, i contenuti che si lanciano automaticamente (musica, video, ecc.) perché sono considerati invadenti e possono ostacolare la navigazione dell’utente mobile. I pop-up, in particolare, possono avere un impatto negativo sul posizionamento nei motori di ricerca. 

 

3. Scegli una soluzione di pagamento adatta ai dispositivi mobili

La tappa del pagamento dovrebbe essere la più rapida e semplice possibile. Più il visitatore perde il suo tempo ad inserire i suoi dati, più grande sarà la probabilità che abbandoni il carrello!

Per rendere più fluida la tappa del pagamento sul tuo sito, puoi:

  • Dotarti di una soluzione di pagamento che riconosca il tipo di carta di credito utilizzata durante il checkout: un dettaglio, certo, ma che farà risparmiare del tempo prezioso all’acquirente.
  • Assicurarti che possa attivare automaticamente la tastiera numerica del cellulare al momento dell’inserimento dei dati della carta di credito.
  • Proporre il pagamento con un click ai tuoi clienti: i dati della carta di credito vengono salvati in occasione del primo acquisto sul tuo negozio online, non sarà quindi necessario inserirli nuovamente per gli acquisti a venire. In questo modo il cliente potrà pagare più velocemente.

È essenziale rassicurare i visitatori al momento del pagamento in merito alla sicurezza dei dati bancari.

Pensa anche a personalizzare la tua pagina di pagamento: grazie a Payplug, puoi mettere in evidenza il tuo logo, le diverse modalità di pagamento disponibili, l’icona del “pagamento sicuro”, per infondere fiducia ed evitare l’abbandono del carrello al momento del checkout!

Ricorda, tutte le nostre pagine di pagamento sono responsive. Puoi dare per certo che saranno correttamente visualizzate su qualsiasi dispositivo: smartphone, computer o tablet!

User experience

Pagina di pagamento personalizzata di Autoricambi SanMauro

Consiglio: per sapere se la tua pagina di pagamento è conforme alle esigenze del design responsivo, puoi utilizzare il nostro tool per testarne le performance, in pochi minuti riceverai i risultati tramite e-mail.

 

4. Ricordati di testare regolarmente il tuo sito su dispositivi mobili

Una volta effettuate queste ottimizzazioni, ti consigliamo di testare il tuo sito mobile friendly: prova con diversi smartphone e diverse reti per avere un’idea precisa delle performance del tuo negozio online. A seconda della qualità della connessione Internet, è possibile che alcuni elementi non vengano visualizzati o che interferiscano con la navigazione. 

Puoi anche effettuare dei test A/B con i tuoi utenti. Questa metodologia consiste nel confrontare più versioni della stessa pagina per trovare la più efficiente, quella che ti permetterà di migliorare il tuo tasso di conversione. Verifica elementi diversi come: testi, intestazioni, layout di pagina... perfezionerai gradualmente la tua conoscenza cliente (know-your-customer) per soddisfare al meglio le aspettative dei tuoi visitatori!

 

Come avrai capito, creare siti vuol dire prestare estrema attenzione al comfort degli utenti di smartphone e tablet, adottando i principi del responsive design!

Condividi questo post
TwitterFacebookLinkedInCopy Link

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questi articoli potrebbero interessarti