Comment tester sa boutique e-commerce en responsive ?

A force de déployer des boutiques Prestashop, je finis par avoir un protocole habituel pour faire mes tests dans le format « responsive ». Avant de se lancer plus loin, il faut déjà faire l’état de la situation pour les mobiles & tablettes.

Le trafic de la version mobile

Le trafic des supports mobiles ne cesse d’augmenter ces dernières années, même si le trafic « destktop » est toujours dominant, la tendance pourrait s’inverser. Il est donc important de pouvoir proposer à vos clients des interfaces qui fonctionnent en responsive, que ça soit sur une tablette ou sur un support mobile.

Pensez Iphone et Ipad

Ce qui est important c’est d’optimiser les supports les plus achetés par le consommateur… et actuellement, il y a pas photo, la règle c’est de faire de l’optimisation pour les Ipad et les Iphones. Vous pouvez voir ci-dessous le rapport de statistique en terme de trafic par type de support. Regardez bien l’écart entre Apple et Samsung… gigantesque ! C’est pour cela qu’il faut éviter de rentrer dans le cerce de la parano et de faire des optimisations pour des supports qui représentent 1 à 2% du trafic….

On dira ce qu’on veut mais Apple reste le leader…

Les résolutions mobiles, quelle tendance ?

Ce qui est important c’est toujours la largeur de l’écran… la hauteur importe beaucoup moins… on scroll vers le bas. Ce qu’on peut constater sur le graphique ci-dessous c’est que la plupart du trafic se fait en 320 pixels de largeur (ce sont les Iphones)… Regardez la courbe orange comme elle se démarque des autres, la deuxième c’est le 360 de largeur, comme sur les mobiles Samsung.

La largeur de 320px reste une référence de base pour le mobile…

Comment je fais mes test ?

Dans le 99% des cas on achète un thème qui est déjà responsive pour le client, au moment de tester celui-ci sur les différents supports je pratique le test avec les résolutions suivantes :

  • Tablette : 768x 1024 (vertical)
  • Tablette : 1024 x 768 (horizontal)
  • Mobile : 320 x Y (vertical)
  • Mobile : 360 x Y (vertical)

Est-ce que c’est suffisant ? Tout dépend du budget du client, mais on va dire que cela répond pour la plupart des cas de figure. Bien sûr il y’a des formats de tablettes dans d’autres résolutions, mais est-ce que le temps à passer en vaut la peine ? Et pourquoi je ne teste pas le mobile à l’horizontal ? Parce que bien souvent les thèmes ne sont pas vraiment « optimisé » pour et que ce comportement est déjà « secondaire » sur un mobile, contrairement à la tablette qui elle se tourne plus facilement à l’utilisation.

Sous Firefox la combinaison « CTRL+SHIFT+M » permet de visualiser d’autres résolutions.

Raisonnez « responsive »

Voilà encore un point important, n’essayez pas de faire ce que vous voulez avec l’affichage de votre thème. Regardez plutôt ce qui est possible de faire avec et adaptez votre contenu. J’ai encore beaucoup de clients qui me demandent des adaptations « hors thème » et qui causent ensuite des problèmes en responsive, car il faut redéfinir des règles + bugs d’affichage récurrents. Essayez de respecter les conventions du thème en faisant quelques sacrifices.

Bilan

En responsive on peut passer ses journées… il faut savoir miser des priorités sur les bonnes résolutions. De mon côté je fais toujours les tests de processus complets, création de compte… commande etc… pour m’assurer que le comportement soit opérationnel (ce travail est assez ingrat, mais fait partie du métier…). Pour le nombre de résolutions à tester je laisse la discussion ouverte, le maximum possible c’est mieux… mais il faut savoir aussi cibler l’essentiel.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *