Avoir un site mobile-friendly n’est plus une option pour les e-commerçants. Depuis avril 2015, Google oriente les recherches effectuées depuis les mobiles avec la mention « site mobile » pour tous les sites qui proposent un affichage optimisé sur smartphone. Sachant que le m-commerce représente plus de 4 milliards d’euros en France et que seuls 24% des sites marchands disposent d’une version mobile, il est temps de s’y mettre pour gagner des parts de marché. Voici quelques conseils pour mettre en place votre m-commerce.

Selon les chiffres 2015 de la FEVAD plus de 6 millions de français ont déjà acheté depuis leur mobile. Il serait dommage de payer de l’acquisition de trafic à prix d’or et de faire l’impasse sur le trafic naturel sur mobile. D’autant plus que mettre en ligne une version de son site optimisée pour les mobiles est aujourd’hui à la portée de tous. Avant de passer à l’action que faut-il savoir ?

 

Qu’est-ce que le responsive design ?

L’anglicisme « responsive » n’est pas encore entré au petit Robert, mais ça ne saurait tarder. Littéralement cela signifie que votre site est « sensible » à la résolution de l’écran, donc qu’il adapte l’affichage de votre contenu pour un écran d’ordinateur, pour un écran de tablette ou de smartphone.

Cette technique présente l’avantage de mutualiser les coûts puisque vous conservez la même technologie pour le eCommerce et pour le m-commerce. Elle est appliquée avec succès sur le site E-Commerce Nation : si vous diminuez la taille de votre navigateur internet, vous verrez la colonne de gauche se contracter, puis le menu du haut se simplifier. Ainsi sur un smartphone la présentation de l’article reste claire.

 

Qu’est-ce que l’adaptive design ?

Une seconde technique consiste à détecter le device qui souhaite afficher une page avant de retourner le contenu de la page.

Le terme est moins connu, pourtant l’Adaptive Design présente plusieurs avantages par rapport au Responsive Webdesign :

  1. Dans le cas du responsive, l’intégralité du contenu de la page est chargée par le navigateur et c’est ce dernier qui optimise l’affichage. Dans le cas de l’adaptive, ce sont des pages différentes qui sont servies. Cela permet de charger moins de contenu avec des images moins lourdes. Globalement les pages s’affichent plus vite sur mobile et l’expérience de navigation est meilleure.
  2. L’expérience d’achat n’est pas la même lorsque le client est au chaud chez lui avec son ordinateur portable ou lorsqu’il est dans les transports avec son smartphone. Il peut être intéressant de proposer des services propres à la mobilité comme par exemple la possibilité d’être rappelé par le support client, ou de préparer des articles en boutique si le client est en chemin pour les récupérer.
  3. Au-delà de l’acquisition de trafic, le nerf de la guerre reste le taux de transformation. Avec une approche adaptive, vous pouvez concevoir un tunnel d’achat sur mesure (souvent simplifié sur mobile).

Un dernier argument milite en faveur de l’Adaptive Design : si votre site eCommerce n’est pas responsive et si vous souhaitez qu’il le devienne, il faudra reprendre le code avec tous les risques que cela induit. À l’inverse pour mettre en place l’adaptive, vous pouvez conserver la même technologie que pour votre site e-commerce (donc garder le même back office), mais vous allez développer une nouvelle version de votre vitrine e-commerce et l’optimiser pour le m-commerce. L’impact sur votre business historique est circoncis.

 

Et pourquoi ne pas utiliser les deux ?

Pour être complet il faut préciser que ce qu’on appelle Adaptive Design (Design Adaptatif) est un concept plus large que le Responsive Webdesign: le second fait référence à la fluidité de la mise en page du contenu tandis que le premier fournit un cadre pour améliorer petit à petit l’expérience de navigation sur l’audience la plus large possible.

En particulier il est tout à fait possible de mettre en ligne deux versions de son site e-commerce et d’implémenter le responsive sur chacune d’entre elles :

  • Sur la version desktop les médias seront affichés sur une largeur plus ou moins grande selon la largeur affichée par le navigateur.
  • Sur la version mobile le responsive permettra à votre site de s’adapter aux mieux selon le modèle du smartphone.

 

Optimisez le temps de chargement

85% des internautes s’attendent à un chargement aussi rapide voire plus rapide sur mobile que sur le site internet classique. De son côté Google expérimente le « Red Slow Label » et le « Slow to load » pour orienter les internautes vers la meilleure expérience possible sur mobile.

Le temps de chargement devient un critère important pour le référencement, donc il serait dommage d’investir dans le mCommerce sans chercher à l’optimiser.

Le premier axe d’optimisation est certainement le plus simple : pensez avant tout à l’usage sur mobile et à ce que l’internaute s’attend à voir sur votre vitrine m-commerce. Allez à l’essentiel et supprimez tout le contenu qui n’est pas central. Allégez les pages pour guider au mieux vos clients. En particulier reconsidérez l’utilité des fonctionnalités de recommandation, de cross-selling ou de navigation transverse.

Un second axe d’optimisation est le poids des media :

  • Appuyez-vous au maximum sur les typographies standards pour ne pas avoir à charger des fonts.
  • Tirez profit des écrans rétina mais ne chargez pas des images inutilement grosses. Aujourd’hui l’iPhone 6 propose une largeur de 750 pixels (1080 pixels pour la version « plus »). Sur plateforme Android la résolution peut atteindre 1440px.

Le tag HTML <picture> vient en aide aux développeurs puisqu’il permet de charger les images dans leur version optimale selon le device de l’internaute. Malheureusement il faudra attendre quelques années avant que les navigateurs supportent ce nouveau tag. En attendant, la meilleure alternative est probablement d’utiliser une librairie javascript telle que PictureFill pour combler le manque.

Développer son activité pour le m-commerce prend du temps et demande de l’investissement. Mais pour évoluer sur le marché, il faut sauter le pas sans se poser de question.

 

Un nouveau site e-commerce qui cible les plus jeunes aura certainement intérêt à d’abord développer une version optimisée pour le mobile (stratégie mobile first). Pour tous les autres qui ne peuvent pas mettre en risque leur vitrine e-commerce historique, la bonne stratégie est de développer une nouvelle version dédiée au mobile.