Il commercio mobile rappresenta già quasi il 40% delle vendite totali di eCommerce, e si prevede che dominerà con circa il 54% entro il 2021 – il che significa che potresti perdere entrate significative se il tuo sito non è ottimizzato per l'uso mobile!
Oltre al fatto che i dispositivi mobili sono comunemente il primo punto di contatto tra te e i tuoi clienti, considera la popolarità degli smartphone, la crescente presenza di consumatori più giovani e sempre più esperti di mobile, e una cultura frenetica, in movimento e digitalmente focalizzata che richiede ogni minuto più convenienza ed efficienza. È facile vedere la necessità dell'esperienza mobile, ma come si traduce specificamente nei negozi di prodotti digitali?
In questo post, esamineremo alcune delle nostre raccomandazioni per ottimizzare il tuo negozio di prodotti digitali per l'uso mobile, in modo che tu possa tenere il passo con i tempi – *e* con le vendite!
Comprendere il passaggio al minimalismo
Torniamo indietro per un minuto: sono i primi anni 2000 e l'avvento degli smartphone sta mettendo molta pressione sui fornitori di servizi Internet affinché si adattino al crescente consumo di larghezza di banda. I consumatori sono *finalmente* in grado di utilizzare Internet regolarmente mentre si spostano – un enorme cambiamento nello stile di vita che instiga una revisione completa di come vengono presentati i contenuti web.
È ora di cambiare rotta dalle animazioni impressionanti e dai contenuti ricchi di grafica, a pagine web che possono essere caricate ragionevolmente velocemente su reti cellulari meno potenti, e gli sviluppatori web stanno ora ottimizzando per la velocità al fine di tenere il passo. Aggiungi a ciò gli effetti delle piattaforme di social media come Facebook, che devono essere adattate anche per velocità 2G al fine di diventare più *globalmente* accessibili, e puoi immaginare la crescente necessità di un approccio più "semplificato"!
L'ottimizzazione mobile è stata al centro di questa progressione, poiché la società è diventata ancora *più* orientata agli smartphone nel tempo. Ora siamo a un interessante punto di svolta; molte persone utilizzano smartphone e tablet come dispositivi primari per tutti i tipi di scopi, dal lavoro e l'istruzione, allo shopping e all'intrattenimento.
Gli smartphone sono le nostre linee di vita – "sportelli unici" per i nostri orari, contatti, comunicazione e interazione sociale, salute e benessere, shopping, lettura, musica, TV, film, giochi, e chi più ne ha più ne metta. Inutile dire che ottimizzare il tuo negozio di prodotti digitali per l'uso mobile non è solo per divertimento; è sempre più necessario per *qualsiasi* sito web – e non vuoi rimanere indietro! Quindi, da dove si comincia?
Responsive web design
Con così tanti dispositivi diversi in circolazione, come puoi essere sicuro che il tuo sito venga visualizzato correttamente? Il responsive web design è un metodo di progettazione web che adatta automaticamente i tuoi contenuti e il layout a seconda del dispositivo utilizzato. Una componente fondamentale dell'ottimizzazione mobile, il responsive web design consente agli utenti su dispositivi mobili come smartphone e tablet (così come laptop e computer desktop) di visualizzare correttamente e utilizzare efficacemente il tuo sito web in base a diversi standard di visualizzazione.
Quando ottimizzati, i contenuti potrebbero apparire più minimali sui dispositivi mobili per dare priorità alla funzionalità, o più focalizzati visivamente per ridurre il disordine, a seconda del tipo di contenuto.
Esempio di piccolo smartphone (AudioTheme)
Esempio di piccolo tablet (AudioTheme)
Esempio di grande desktop (AudioTheme)
Oltre ai benefici estetici e di guadagno, il design responsive aiuta anche a potenziare la tua SEO. Come? Beh, Google ha recentemente annunciato che inizierà a utilizzare l'indicizzazione mobile-first, il che significa che il motore di ricerca farà principalmente riferimento alle versioni mobili dei siti per il ranking e l'indicizzazione a causa della predominanza degli utenti mobili.
Quindi, cosa devi fare per implementare il responsive web design sul tuo store di prodotti digitali? A seconda del tuo livello di competenza, ci sono alcune opzioni:
- Installa un tema responsive. La maggior parte dei temi contemporanei è progettata per essere responsive, quindi questa è probabilmente l'opzione più semplice, specialmente se gestisci il tuo sito.
- Paga il tuo web designer per modificare il tuo tema esistente o il tuo sito personalizzato per includere il design responsive.
- Modifica tu stesso il tuo tema esistente o il tuo sito personalizzato, se ti occupi del tuo sviluppo web.
Gli strumenti di analisi e di heat mapping possono mostrarti le dimensioni medie dello schermo e i modelli di attività dei visitatori del tuo sito web, permettendoti di personalizzare per il tuo pubblico specifico. Puoi persino segmentare i tuoi utenti per tipo di dispositivo. Prova a utilizzare uno strumento come Responsive Design Checker per vedere come il tuo sito viene attualmente visualizzato su diversi dispositivi.
Prestazioni
Vuoi essere sicuro che il tuo sito funzioni bene quando viene acceduto da diversi dispositivi? La velocità è tutto: infatti, può fare o distruggere l'esperienza utente!
Se un sito carica lentamente, le persone sono molto più propense ad abbandonarlo del tutto. Per minimizzare i tassi di rimbalzo, vuoi che il tuo sito si carichi il più velocemente possibile. È importante ricordare che le reti cellulari tendono ad essere meno stabili delle reti a banda larga, con una connettività volatile che dipende dalla posizione fisica, dall'uso condiviso e da altre variabili. Con questo in mente, più leggero è il tuo sito, meglio è!
“La maggior parte delle persone abbandonerà una visita al sito mobile se la pagina impiega più di qualche secondo per caricarsi.” – Google
Ecco alcuni trucchi per un'esperienza mobile a caricamento rapido:
- Minimizza le dimensioni dei file HTML/CSS. Usa uno strumento come Gzip per comprimerli e cerca di avvicinarti il più possibile a 70KB se desideri velocità di caricamento fulminee.
- Riduci le richieste. Ogni componente del tuo sito (che sia un'immagine, un font, un foglio di stile, ecc.) genera la propria richiesta. Combina gli elementi dove possibile per minimizzare questo effetto.
- Usa un buon hosting. Uno stack server ottimizzato con caching a livello di server è l'ideale.
- Evita plugin non necessari. Mantieni il tuo caricamento il più leggero possibile!
- Considera l'uso di una rete di distribuzione dei contenuti (CDN) per le immagini. Questo è particolarmente rilevante se il tuo sito ha molte immagini. Assicurati anche che le tue immagini siano ottimizzate per il web!
- Disabilita qualsiasi funzionalità di cui non hai assolutamente bisogno.
- Usa HTML5 invece di Flash, se vuoi usare effetti speciali.
- Non usare pop-up. Possono essere ingombranti da gestire sui dispositivi mobili.
- Limita l'uso di reindirizzamenti e accorciatori di link a meno che non siano necessari. Questi aumentano solo il tempo di caricamento!
Google offre questo strumento che ti permette di confrontare le prestazioni mobili del tuo sito con altri siti. Puoi anche usarlo per stimare come i miglioramenti della velocità potrebbero influire sulle tue entrate.
Contenuto
Un altro aspetto dell'ottimizzazione mobile è come presenti i tuoi contenuti. La regola di lunga data fin dall'inizio dei media stampati è stata che vuoi comunicare il succo fondamentale del tuo contenuto "sopra la piega". Nel senso digitale, questo si riferisce all'area immediatamente visibile di una pagina web al suo primo caricamento.
Tuttavia, alcuni esperti dicono che la piega non è più importante; che con le tendenze moderne nell'uso di Internet, è quasi irrilevante. Quando pensi a siti estremamente popolari come Facebook che usano lo scrolling infinito, potresti essere d'accordo! Allora, cosa ci resta?
Bene, anche se è vero che è meno rilevante di prima, posizionare le tue informazioni più importanti sopra la piega garantisce che siano la prima cosa che i visitatori del tuo sito vedranno. Confrontiamo alcuni esempi desktop e mobile:
Barra di ricerca e menu facilmente accessibili, con le ultime promozioni in primo piano (Producer Loops)
È immediatamente ovvio cosa offre il sito, senza dover scorrere (UIdeck)
Un aspetto pulito e minimale con l'intestazione e i prodotti principali, con facile accesso al menu e al database di supporto / FAQ (ThemeBeans)
Navigazione e interattività
La navigazione è un elemento cruciale dell'ottimizzazione mobile, perché i dispositivi più piccoli possono limitare significativamente la funzionalità dell'utente se lasciati soli. Le best practice indicano di consolidare i menu nelle opzioni più semplici e pertinenti, come la home del tuo negozio o la galleria principale dei prodotti (e/o le categorie di prodotti), la pagina di supporto e la pagina di contatto. La buona notizia è che la maggior parte dei temi viene fornita con un'opzione di menu mobile già pronta!
Quando si tratta di interattività, considera le differenze di clic quando si utilizzano dispositivi diversi. Pulsanti più piccoli potrebbero essere facili da cliccare con un mouse, ma possono essere più difficili da toccare su uno smartphone, ad esempio. Qualsiasi cosa tu possa fare per ottimizzare l'interattività mobile del tuo sito è l'ideale!
Molti negozi e servizi digitali offrono supporto tramite live chat o un accesso rapido e semplice alle FAQ, rendendo il più semplice possibile per i clienti porre domande o saperne di più sui prodotti. Potresti installare un plugin di supporto chat, ad esempio, o creare una sezione FAQ o un database di supporto che sia organizzato in modo intuitivo e ricercabile.
Il fattore comodità
È importante ricordare che molti utenti mobili acquistano sui propri telefoni per il solo fattore comodità, quindi i processi di checkout semplici, specialmente quelli con un clic, stanno diventando sempre più popolari. Questo vale anche per altri elementi del tuo sito, come menu, pagine prodotto e supporto. Pensa a cosa puoi fare per consolidare le informazioni in modo che siano concise e richiedano un minimo di clic e navigazione!
Contenuti audio e video
Quando possibile, è sempre preferibile ospitare i tuoi file audio e video su piattaforme di terze parti già ottimizzate specificamente per l'uso mobile. Ad esempio, i video di Vimeo e YouTube possono essere facilmente incorporati nei tuoi post o pagine, riducendo la necessità di codice personalizzato o l'occupazione di ingenti quantità di spazio sul tuo server.
Quando si tratta di audio, WordPress va benissimo, poiché dispone di un lettore audio reattivo integrato, ma puoi anche scegliere di utilizzare servizi come SoundCloud per ospitare i tuoi file audio. Il vantaggio della maggior parte delle piattaforme audio e video come queste è che ogni riproduzione dal tuo sito web contribuisce al conteggio delle riproduzioni sulla piattaforma.
Non dimenticare di testare tutto!
Alcune aziende hanno interi dipartimenti dedicati al test dei dispositivi mobili, ma se la tua è una piccola attività, puoi utilizzare servizi o siti Web di test sui dispositivi (come Responsive Design Checker o Responsinator) che ti consentono di visualizzare in anteprima il tuo sito su diversi dispositivi.
Puoi anche semplicemente regolare la dimensione della finestra del tuo browser per vedere come il tuo design risponde al variare delle dimensioni. Ricorda che non otterrai necessariamente un layout perfetto in *ogni* caso; il design reattivo si concentra tipicamente solo su 3 o 4 risoluzioni diverse, aderendo ai breakpoint di risoluzione più comuni e aggiornati (elementi CSS che determinano come appaiono i layout su diverse dimensioni dello schermo).
I temi/siti eCommerce più popolari sono costruiti utilizzando framework di sviluppo web popolari come Bootstrap 4 (utilizzato da Twitter) e sono costruiti per essere "mobile first", utilizzando un sistema di layout a griglia che si adatta e funziona su ogni dispositivo "out of the box". Ciò consente agli sviluppatori di creare temi accattivanti senza doversi preoccupare che ogni singolo dispositivo sia supportato "out of the box". Se riscontri problemi con determinati dispositivi, di solito puoi segnalare il problema allo sviluppatore del tema e potrebbe rilasciare un aggiornamento.
Preparare il tuo negozio di prodotti digitali per l'uso mobile non è un processo che avviene dall'oggi al domani, ma si spera che questo post ti abbia fornito alcune idee e linee guida utili. L'ottimizzazione mobile continua a crescere in necessità; fortunatamente, ciò *significa anche* che ci sono un numero crescente di strumenti e risorse disponibili per aiutarti a raggiungerla!
Hai qualche consiglio da condividere per quanto riguarda l'ottimizzazione del tuo negozio di prodotti digitali per l'uso mobile? Quali ostacoli hai incontrato e come li hai superati? Cosa hai trovato più utile? Ci piacerebbe sentire cosa hai da dire nei commenti qui sotto!
Illustrazione di Jessica Johnston.
