Améliorer Prestashop sur mobile sans être développeur

Actuellement je reste assez partagé sur les versions mobiles que l’on nous propose (en général). Pourquoi ? Parce qu’il ne suffit pas simplement d’adapter l’interface, il faut aussi adopter un comportement minimaliste.

Prestashop Mobile

Le responsive à l’arrache

Pour une bonne partie des clients, voici la méthode que l’on applique… on achète un thème responsive Prestashop, on le configure et on monte la boutique et toute la configuration qui va avec. Ensuite, on fait les tests sur mobiles / tablettes pour vérifier que ça s’affiche bien… En principe c’est pas trop mal, mais on pourrait faire beaucoup mieux en prenant le temps d’optimiser chaque page de la boutique.

Un thème Prestashop responsive ? Cela fait partie du standard, mais cela ne veut pas dire pour autant que la version mobile est agréable à utiliser.
Un thème Prestashop responsive ? Cela fait partie du standard, mais cela ne veut pas dire pour autant que la version mobile est agréable à utiliser.

Redimensionner le contenu n’est pas toujours la solution !

Il faut être honnête, je vois encore rarement des « bonnes » versions mobiles pour des boutiques e-commerce (hormis peut-être chez des grosses sociétés). Actuellement la stratégie du responsive c’est de créer une multitude de blocs sur mobiles, avec des pages extrêmement longues et des éléments qui s’enchaînent à perte de vue (on scroll encore et encore).

Bien souvent tous les éléments de la version « desktop » sont repris et re-dimensionnés… Il faudrait plutôt se poser la question : « A-t-on vraiment besoin de tout cela ? ». Combien de fois j’ai vu de sliders de page d’accueil illisibles sur mobile ? Et d’ailleurs faut-il un slider ? Combien de fois j’ai vu des blocs à n’en plus finir (colonnes gauches et droite) sur mobile on ne distingue presque plus le contenu central.

Oui c'est compatible mobile, mais est-ce que visuellement c'est pratique et ergonomique pour vos clients ? Niveau affichage, c'est quand même moins bien que la version classique ordinateur c'est certain.
Oui c’est compatible mobile, mais est-ce que visuellement c’est pratique et ergonomique pour vos clients ? Niveau affichage, c’est quand même moins bien que la version classique ordinateur c’est certain.

Améliorez l’expérience mobile en 2 clics

Ce qu’il faut savoir c’est que Prestashop propose une option pour chaque bloc / modules, qui permet d’être affiché ou non sur mobile. Même si la fonctionnalité semble évidente, vous pouvez très facilement désactiver des blocs sur mobiles uniquement ou voir même sur tablette.

Faites cet exercice tout simple, allez sur votre boutique avec votre smartphone et posez vous la question : « Est-ce que mon client a besoin de voir ça ? Est-ce indispensable ? ». Parfois certains éléments ne sont pas assez lisibles sur mobile (sans être retravaillé) et il faut mieux les désactiver qu’encombrer la page et la navigation.

L'option est facile d'accès, un non développeur pourra déjà alléger son Prestashop, en désactivant les modules / blocs superflus sur mobiles.
L’option est facile d’accès, un non développeur pourra déjà alléger son Prestashop, en désactivant les modules / blocs superflus sur mobiles.

L’avantage du thème mono-colone

Certains thèmes ne proposent pas une colonne gauche / droite, le contenu est directement centré avec un seul bloc principal. L’avantage du thème mono-colonne c’est que lorsque vous optimisez la boutique pour la version « classique », vous optimisez en même temps le site pour la version mobile.

Sur Prestashop Addons, vous pouvez filtrer sur les thèmes en fonction de leur nombre de colonnes. Avec une seule colonne on simplifie l’interface, on est donc gagnant forcément sur la partie optimisation mobile.

Tout dépend des  goûts, mais plus vous simplifiez, moins vous aurez de contraintes techniques à gérer.
Tout dépend des goûts, mais plus vous simplifiez, moins vous aurez de contraintes techniques à gérer.

Bilan

Pour faire une bonne version mobile, il faut la travailler… il faudrait passer du temps à étudier chaque page pour que ça soit pratique et ergonomique pour le visiteur. Actuellement on se contente du standard, mais pour ceux qui aimeraient vraiment « mieux vendre » sur mobile, je pense qu’il faut se réserver du temps pour optimiser et alléger l’interface. Et vous ? Avez-vous déjà pris du temps pour optimiser votre version mobile ?

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 ! (5 votes, moyenne : 4,20 sur 5)
Loading...

8 commentaires sur “Améliorer Prestashop sur mobile sans être développeur”

  1. Bonjour,
    Super intéressant et je suis bien d’accord avec vous sur le « responsive à l’arrache » .
    Par contre, j’ai l’impression que depuis la 1.7 on peut désactiver les modules mais on ne peut plus avoir un theme mobile spécifique. Le dossier  » /mobile » à disparu de Presta ?

    1. Bonjour,

      C’est exact cette fonction « mobile » a été retirée, actuellement c’est vraiment la technologie « responsive » sur laquelle il faut miser. Les versions mobiles « dédiées » restent destinées à des grands comptes.

      A bientôt !

  2. Salut
    Tout à fait d’accord, il faut simplifier au maximum l’interface « mobile » sur un PC on arrive plus facilement à s’y retrouver, mais, encore aujourd’hui, tout le monde n’a pas un ordi mais tout le monde a un smartphone.
    Comme bien souvent, la simplicité est souvent plus difficile à obtenir.
    Tel est ma tâche actuel, et grâce à tes tutos cela devient à la portée de tous, merci.

    1. Hello,

      Oui sur les mobiles, le « mono-colonne » reste une valeur « sûre » … il faut se mettre à la place du client et voir si on trouve son propre shop réellement pratique (un sacré challenge d’optimisation).

      A bientôt !

  3. Merci pour cet article. Je connaissais pas l’option pour désactiver des modules sur mobile. Çà m’a permis de multiplier par deux mon score pagespeed en désactivant uniquement le slider.

  4. Bonjour, toujours un plaisir de venir te lire !!

    Mes pages produits sont des « HORREURS » sur mobile, il est temps de s’y mettre! ( Prestashop 1.6 Theme Warehouse)

    Deux questions, restés jusque là sans réponse : ( Et je rame !!)

    – sur mes fiches produits j’ai des images dans le cœur de la description longue
    aux dimensions de 1170*366, que je souhaiterai réduire en largeur pour être plus mobile friendly, car super sur PC, illisible sur mobile.
    1) Est-il possible dans la mise en page de la fiche produit d’avoir une image réduite en largeur et à côté une zone de texte !?
    ( Euh sans connaissance en code ! Oups.)
    2) Quel est la bonne dimension en largeur pour un affichage optimum Pc/mobile ?

    – Le thème est bien responsive, ok, mais impossible de zoomer sur mobile en utilisant la fonction zoomer avec les doigts !! Normal, ou une question de thème, de réglage, de plugin .. !?

    Merci d’avance pour votre aide.
    (Je continue mes lectures webbax .. au top, merci).

    1. Bonjour,

      Il faut idéalement poser la question à l’auteur du thème mais celui-ci doit être très sollicité.

      1) Ce thème est multi-configurable, mais je pense que c’est presque obligé de passer via le code source.
      2) En principe du 1024×1024 est suffisant.

      A mon avis pour le zoom c’est du côté du thème, mais j’ai pas trop d’expérience avec le template « Warehouse » pour te faire un retour.

      A bientôt !

    2. Bonjour .
      Voila une astuce pour tes image description. ..
      Dans ta partie description tu cree un tableau et ensuite tu va dans propriété du tableau et sur largeur tu mets 100% . Ensuite tu place ton image dans le tableau . Elle sera automatiquement redimentionné par ton tableau pour correspondre a 100% de la largeur de l ecran facilement sur n importe quel support ( ordi, tel , tablette … )

Laisser un commentaire

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