Le commerce mobile représente déjà près de 40 % des ventes totales du commerce électronique et devrait dominer à environ 54 % d'ici 2021 – ce qui signifie que vous pourriez passer à côté de revenus importants si votre site n’est pas optimisé pour une utilisation mobile !
En plus des appareils mobiles qui sont souvent le premier point de contact entre vous et vos clients, considérez la popularité des smartphones, la présence croissante de consommateurs plus jeunes et de plus en plus avertis du mobile, ainsi qu'une culture rapide, nomade et axée sur le numérique qui exige de plus en plus de commodité et d'efficacité chaque minute. Il est facile de comprendre le besoin de l'expérience mobile, mais comment cela se traduit-il spécifiquement pour les boutiques de produits numériques ?
Dans cet article, nous vous présentons quelques-unes de nos recommandations pour optimiser votre boutique de produits numériques pour une utilisation mobile, afin que vous puissiez suivre le rythme – et les ventes !
Comprendre le passage au minimalisme
Remontons un peu le temps : nous sommes au début des années 2000, et l'avènement des smartphones met beaucoup de pression sur les fournisseurs d'accès à Internet pour qu'ils s'adaptent à la consommation croissante de bande passante. Les consommateurs sont enfin capables d'utiliser Internet régulièrement en se déplaçant – un énorme changement de style de vie qui entraîne une refonte complète de la présentation du contenu Web.
Il est temps de passer des animations impressionnantes et du contenu riche en graphiques à des pages Web qui peuvent être chargées raisonnablement vite sur des réseaux cellulaires moins puissants, et les développeurs Web optimisent désormais pour la vitesse afin de suivre. Ajoutez à cela les effets des plateformes de médias sociaux comme Facebook, qui doivent être adaptées pour des vitesses aussi basses que la 2G afin de devenir plus accessibles mondialement, et vous pouvez imaginer le besoin croissant d'une approche plus « épurée » !
L'optimisation mobile a été au cœur de cette progression, car la société est devenue encore plus orientée vers les smartphones au fil du temps. Nous sommes maintenant à un point d'inflexion intéressant ; de nombreuses personnes utilisent des smartphones et des tablettes comme appareils principaux pour toutes sortes d'activités, du travail et de l'éducation au shopping et au divertissement.
Les smartphones sont nos bouées de sauvetage – des guichets uniques pour nos emplois du temps, nos contacts, notre communication et nos interactions sociales, notre santé et notre bien-être, nos achats, notre lecture, notre musique, notre télévision, nos films, nos jeux, etc. Inutile de dire qu'optimiser votre boutique de produits numériques pour une utilisation mobile n'est pas seulement pour le plaisir ; c'est de plus en plus nécessaire pour tout site Web – et vous ne voulez pas être laissé pour compte ! Alors, par où commencer ?
Conception Web réactive
Avec autant d'appareils différents, comment être sûr que votre site s'affiche correctement ? La conception web adaptative est une méthode de conception web qui ajuste automatiquement votre contenu et votre mise en page en fonction de l'appareil utilisé. Composant fondamental de l'optimisation mobile, la conception web adaptative permet aux utilisateurs d'appareils mobiles comme les smartphones et les tablettes (ainsi que les ordinateurs portables et de bureau) de visualiser correctement et d'utiliser efficacement votre site web selon différentes normes d'affichage.
Lorsqu'il est optimisé, le contenu peut apparaître plus minimal sur les appareils mobiles afin de privilégier la fonctionnalité – ou, plus axé sur le visuel pour réduire l'encombrement, en fonction du type de contenu.
Exemple de petit smartphone (AudioTheme)
Exemple de petite tablette (AudioTheme)
Exemple de grand ordinateur de bureau (AudioTheme)
Outre les avantages esthétiques et de revenus, la conception adaptative contribue également à améliorer votre référencement. Comment ? Eh bien, Google a récemment annoncé qu'il commencerait à utiliser l'indexation axée sur le mobile, ce qui signifie que le moteur de recherche se référera largement aux versions mobiles des sites pour le classement et l'indexation en raison de la prédominance des utilisateurs mobiles.
Alors, que devez-vous faire pour implémenter la conception web adaptative sur votre propre boutique de produits numériques ? Selon votre niveau d'expertise, il existe quelques options :
- Installer un thème adaptatif. La plupart des thèmes contemporains sont conçus pour être adaptatifs, c'est donc probablement l'option la plus simple, surtout si vous gérez votre propre site.
- Demander à votre concepteur web de modifier votre thème existant ou votre site personnalisé pour inclure la conception adaptative.
- Modifier vous-même votre thème existant ou votre site personnalisé, si vous faites votre propre développement web.
Les outils d'analyse et de cartographie thermique peuvent vous montrer les dimensions moyennes de l'écran et les modèles d'activité de vos visiteurs, vous permettant de personnaliser pour votre public spécifique. Vous pouvez même segmenter vos utilisateurs par type d'appareil. Essayez d'utiliser un outil comme Responsive Design Checker pour voir comment votre site s'affiche actuellement sur différents appareils.
Performance
Vous voulez être sûr que votre site fonctionne bien lorsqu'il est accédé sur différents appareils ? La vitesse est primordiale – en fait, elle peut faire ou défaire l'expérience utilisateur !
Si un site se charge lentement, les gens sont beaucoup plus susceptibles de l'abandonner complètement. Afin de minimiser les taux de rebond, vous voulez que votre site se charge aussi rapidement que possible. Il est important de se rappeler que les réseaux cellulaires ont tendance à être moins stables que les réseaux haut débit, avec une connectivité volatile qui dépend de l'emplacement physique, de l'utilisation partagée et d'autres variables. Dans cet esprit, plus votre site est léger, mieux c'est !
« La plupart des gens abandonneront une visite sur un site mobile si la page met plus de quelques secondes à se charger. » – Google
Voici quelques astuces pour une expérience mobile à chargement rapide :
- Minimiser la taille des fichiers HTML/CSS. Utilisez un outil comme Gzip pour les compresser, et essayez de vous rapprocher de 70 Ko si vous voulez des vitesses de chargement ultra-rapides.
- Réduisez les requêtes. Chaque composant de votre site (qu'il s'agisse d'une image, d'une police, d'une feuille de style, etc.) génère sa propre requête. Combinez les éléments lorsque cela est possible pour minimiser cet effet.
- Utilisez un bon hébergeur. Une pile de serveur optimisée avec une mise en cache au niveau du serveur est idéale.
- Évitez les plugins inutiles. Gardez votre charge aussi légère que possible !
- Envisagez d'utiliser un réseau de diffusion de contenu (CDN) pour les images. Ceci est particulièrement pertinent si votre site contient beaucoup d'images. Assurez-vous également que vos images sont optimisées pour le web !
- Désactivez toute fonctionnalité dont vous n'avez pas absolument besoin.
- Utilisez HTML5 au lieu de Flash, si vous souhaitez utiliser des effets spéciaux.
- N'utilisez pas de pop-ups. Ils peuvent être difficiles à gérer sur les appareils mobiles.
- Limitez l'utilisation des redirections et des raccourcisseurs de liens, sauf s'ils sont nécessaires. Ceux-ci ne font qu'augmenter votre temps de chargement !
Google propose cet outil qui vous permet de comparer les performances mobiles de votre site avec celles d'autres sites. Vous pouvez également l'utiliser pour estimer l'impact des améliorations de vitesse sur vos revenus.
Contenu
Un autre aspect de l'optimisation mobile est la façon dont vous présentez votre contenu. La règle de longue date, depuis le début des médias imprimés, est que vous voulez communiquer l'essentiel de votre contenu « au-dessus de la ligne de flottaison ». Dans le sens numérique, cela fait référence à la zone immédiatement visible d'une page Web lors de son premier chargement.
Cependant, certains experts disent que la ligne de flottaison n'a plus d'importance ; qu'avec les tendances modernes d'utilisation d'Internet, elle est presque sans importance. Lorsque vous pensez à des sites extrêmement populaires comme Facebook qui utilisent le défilement infini, vous pourriez être d'accord ! Alors, où cela nous mène-t-il ?
Eh bien, même s'il est vrai que c'est moins pertinent qu'avant, placer vos informations les plus importantes au-dessus de la ligne de flottaison garantit qu'elles sont la première chose que vos visiteurs verront. Comparons quelques exemples sur ordinateur et sur mobile :
Barre de recherche et menus facilement accessibles, avec les dernières promotions au premier plan (Producer Loops)
Il est immédiatement évident ce que le site propose, sans avoir à faire défiler (UIdeck)
Un look épuré et minimaliste présentant le titre et les produits principaux, avec un accès facile au menu et à la base de données de support / FAQ (ThemeBeans)
Navigation et interactivité
La navigation est un élément crucial de l'optimisation mobile, car les appareils plus petits *peuvent* limiter considérablement les fonctionnalités de l'utilisateur s'ils sont laissés seuls. Les meilleures pratiques suggèrent de consolider les menus dans les options les plus simples et les plus pertinentes, telles que votre page d'accueil de magasin ou galerie de produits principale (et/ou catégories de produits), votre page de support et votre page de contact. La bonne nouvelle est que la plupart des thèmes sont livrés avec une option de menu mobile dès le départ !
En ce qui concerne l'interactivité, tenez compte des différences de cliquabilité lors de l'utilisation de différents appareils. Les petits boutons peuvent être faciles à cliquer avec une souris, mais ils peuvent être plus difficiles à toucher sur un smartphone, par exemple. Tout ce que vous pouvez faire pour optimiser l'interactivité mobile de votre site est idéal !
De nombreuses boutiques et services numériques proposent une assistance par chat en direct ou un accès rapide et facile aux FAQ, ce qui permet aux clients de poser des questions ou d'en savoir plus sur les produits aussi simplement que possible. Vous pourriez installer un plugin d'assistance par chat, par exemple, ou créer une section FAQ ou une base de données de support organisée de manière intuitive et consultable.
Le facteur de commodité
Il est important de se rappeler que de nombreux utilisateurs de mobiles achètent sur leur téléphone pour le facteur de commodité seul, donc des processus de paiement simples – en particulier les paiements en un clic – deviennent de plus en plus populaires. Cela s'applique également à d'autres éléments de votre site, tels que les menus, les pages produits et le support. Pensez à ce que vous pouvez faire pour consolider les informations afin qu'elles soient concises et nécessitent un minimum de clics et de navigation !
Contenu audio et vidéo
Lorsque c'est possible, il est toujours préférable d'héberger vos fichiers audio et vidéo sur des plateformes tierces déjà spécifiquement optimisées pour une utilisation mobile. Par exemple, les vidéos Vimeo et YouTube peuvent être facilement intégrées dans vos articles ou pages, réduisant ainsi le besoin de code personnalisé ou l'occupation d'un espace de stockage important sur votre propre serveur.
En ce qui concerne l'audio, WordPress convient parfaitement, car il dispose d'un lecteur audio réactif intégré, mais vous pouvez également choisir d'utiliser des services comme SoundCloud pour héberger vos fichiers audio. L'avantage avec la plupart des plateformes audio et vidéo comme celles-ci est que chaque lecture depuis votre site web compte pour votre nombre de lectures sur la plateforme.
N'oubliez pas de tout tester !
Certaines entreprises ont des départements entiers dédiés aux tests sur appareils mobiles, mais si vous êtes une petite structure, vous pouvez utiliser des services ou des sites web de test d'appareils (tels que Responsive Design Checker ou Responsinator) qui vous permettent de prévisualiser votre site sur différents appareils.
Vous pouvez également simplement ajuster la taille de la fenêtre de votre navigateur pour voir comment votre conception réagit lorsque les dimensions changent. N'oubliez pas que vous n'obtiendrez pas nécessairement une mise en page parfaite dans tous les cas ; la conception réactive se concentre généralement sur 3 ou 4 résolutions différentes, en adhérant aux points de rupture de résolution les plus courants et les plus à jour (éléments CSS qui dictent l'apparence des mises en page sur différentes tailles d'écran).
La plupart des thèmes/sites eCommerce populaires sont construits à l'aide de frameworks de développement web populaires tels que Bootstrap 4 (utilisé par Twitter) et sont conçus pour être « mobile first », en utilisant un système de mise en page en grille qui s'adaptera et fonctionnera sur tous les appareils dès la sortie de la boîte. Cela permet aux développeurs de créer des thèmes attrayants sans se soucier de la prise en charge de tous les appareils dès la sortie de la boîte. Si vous rencontrez des problèmes avec certains appareils, vous pouvez généralement signaler le problème au développeur du thème et il pourrait publier une mise à jour.
Préparer votre boutique de produits numériques pour une utilisation mobile n'est pas un processus du jour au lendemain, mais nous espérons que cet article vous a donné quelques idées et directives utiles. L'optimisation mobile continue de croître en nécessité ; heureusement, cela signifie également qu'il existe un nombre croissant d'outils et de ressources disponibles pour vous aider à y parvenir !
Avez-vous des conseils à partager concernant l'optimisation de votre propre boutique de produits numériques pour une utilisation mobile ? Quels obstacles avez-vous rencontrés et comment les avez-vous surmontés ? Qu'avez-vous trouvé le plus utile ? Nous aimerions beaucoup connaître votre avis dans les commentaires ci-dessous !
Illustration par Jessica Johnston.
