Dispositions des colonnes sur votre Prestashop en format mobile

Actuellement la plupart des thèmes pour Prestashop sont optimisés pour le responsive design, pour les tablettes et les mobiles (pour que cela soit pratique et ergonomique), mais tous les thèmes ne réagissent pas la même chose.

Themes responsives Prestashop

L’interface sur mobile

Le plus compliqué c’est bien sûr les mobiles je trouve, car l’espace est extrêmement réduit et pour être honnête, même si on surf sur l’ère du mobile… la plupart des boutiques sont bien trop compliquées à naviguer sur un mobile, il faut trop scroller… les blocs s’affichent bien oui… mais l’information n’est pas hiérarchisée logiquement.

Le problème des colonnes

Actuellement dans la plupart des thèmes Prestashop on a une colonne à gauche qui permet d’afficher différents blocs, cela est très pratique sur la version « desktop », mais sur mobile elle nuit plus facilement à l’utilisation du site. Cela est par exemple le cas avec le thème par défaut, vous allez le comprendre pourquoi.

Sur le format classique, la colonne de gauche est bien pratique pour la navigation.
Sur le format classique, la colonne de gauche est bien pratique pour la navigation.
En revanche sur mobile, même en faisant un scroll énorme on ne voit toujours pas un seul produit, tellement il y' a de blocs... la colonne de gauche domine le contenu.
En revanche, sur mobile, même en faisant un scroll énorme on ne voit toujours pas un seul produit, tellement il y’ a de blocs… la colonne de gauche domine le contenu.
Voilà un autre thème de Template Monster disposant de la même structure que le thème par défaut de Prestashop.
Voilà un autre thème de Template Monster disposant de la même structure que le thème par défaut de Prestashop.
Quand on scroll sur ce thème, on constate que l'information livrée en priorité est plus intéressante... avec pour commencer du texte... puis ensuite les images des catégories et enfin les produits, la page est moins encombrée.
Quand on scroll sur ce thème, on constate que l’information livrée en priorité est plus intéressante… avec pour commencer du texte… puis ensuite les images des catégories et enfin les produits, la page est moins encombrée.

Essayons de faire mieux…

Dans le cas présent j’ai juste retouché quelques CSS via Firebug sur le theme proposé par Template Monster pour voir ce que ça pourrait donner en enlevant le superflu. On se rend compte qu’on peut déjà voir directement le produit qui commence à s’afficher en bas, la longueur du scroll est considérablement raccourcie. Cela peut-être un début de piste d’optimisation pour le mobile.

Pour une boutique e-commerce, il n'est pas vraiment pratique de devoir scroller un maximum pour commencer à voir des produits. Il faut se poser des questions sur l'agencement de l'interface et mettre vos produits en avants, notez aussi que le retrait des images des catégories en gardant uniquement le texte, permet de raccourcir le scroll.
Pour une boutique e-commerce, il n’est pas vraiment pratique de devoir scroller un maximum pour commencer à voir des produits. Il faut se poser des questions sur l’agencement de l’interface et mettre vos produits en avant, notez aussi que le retrait des images des catégories en gardant uniquement le texte, permet de raccourcir le scroll.

Bilan

Le comportement des thèmes reponsives ne sont pas tous identiques d’où l’intérêt de les tester sur mobile avant de les acheter. Même si tous sont compatibles pour mobiles, je trouve que la plupart ne sont pas vraiment ergonomiques, ils sont encombrés et la navigation n’est pas de tout confort. Pour faire bien, il faudrait revoir les règles CSS pour la partie mobile (résolutions inférieures à 414 pixels) en ajoutant des classes « hidden-xs » sur les éléments concernés ou en faisant des « display:none; » via CSS. C’est une étape quasiment obligatoire, pour avoir un thème mobile apprécié des acheteurs.

Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (Soyez le premier à noter ce billet)
Loading...

2 commentaires sur “Dispositions des colonnes sur votre Prestashop en format mobile”

  1. Bonjour Germain,
    Tout d’abort, merci pour tous les articles des conseils et les vidéos.
    D’autre part dans ton article tu pointes du doigt la colonne de gauche et je te rejoins cela est un peu embêtant de devoir scroller pour commencer à apercevoir les articles.
    Est-ce que par hasard tu comptes faire un tutto sur cette thématique « je vais vous expliquer comment supprimer la colonne de gauche sur la version mobile de Prestashop, car je cherche un peu partout sur le web , mais je ne trouve pas cette info, par avance merci signé un « néophyte »

    1. Bonjour,

      Je pense que c’est une optimisation assez rapide à faire, pour cela il faut en fait ajouter une règle CSS dans le thème qui va masquer la colonne de gauche si on est sur un support mobile (la règle peut varier légèrement selon le thème).

      Dans fichier global.css de votre thème ajoutez ceci… cela devrait faire l’affaire :

      /* Mobile */
      @media(max-width:500px){
      	#left_column{display:none!important;}
      }
      

      A bientôt !

Laisser un commentaire

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