Media Queries Prestashop

Prestashop 1.7 – Optimiser la tablette & le mobile en CSS (ép. 57)

Comme on le sait tous, les mobiles et les tablettes sont fréquemment utilisées par vos clients… Il est donc important que votre boutique Prestashop s’affiche au mieux sur tous les supports (cela peut se gérer directement via le CSS).

Mon thème est déjà responsive !

Voilà une phrase qui revient très souvent des clients, « Mon thème est reponsive et il marche très bien ». En fait trop souvent on fait confiance à la structure technique du thème et pourtant il ne faut ne pas oublier de « TESTER » son thème sur mobile et tablette, car il y a bien souvent des éléments à ajuster.

Les Media Queries en CSS

En fait les Media Queries permettent de définir les règles plus précisément en fonction des différents types de supports. Sur le principe on va demander au fichier CSS d’exécuter des règles sur la base d’une largeur spécifique indiquée en pixels. Il faut donc créer plusieurs sections de règles en code CSS pour gérer séparément le format ordinateur, tablette et smartphone.

Quoi optimiser ?

En fait le plus important est d’être objectif quand on navigue sur son propre shop, il y’a parfois des éléments qu’il faudrait masquer sur les supports du type smartphone ou par exemple ajuster des tailles de polices ou largeur des éléments. Dans un précédent tutoriel on avait par exemple vu comment mieux présenter les produits sur mobile. Si votre shop semble irréprochable demandez à un ami d’aller sur votre boutique et regardez comment il navigue… soyez attentifs aux problèmes d’ergonomie qu’il rencontre.

Révisez chaque page type

L’optimisation d’une boutique et ses différentes pages demandera du temps, pour y parvenir je conseille d’y aller de manière progressive. Par exemple, en définissant un objectif hebdomadaire, afin que le rendu général de votre shop puisse s’améliorer au fil des semaines. N’essayez pas de faire tout en 1 jour, car sinon c’est l’overdose… et cela demande de la patience de mettre ces règles en place et de les tester.

  • la semaine 1 : optimiser la page d’accueil
  • la semaine 2 : optimiser les catégories,
  • la semaine 3 : optimiser la fiche produit
  • la semaine 4 : optimiser le processus de commande
  • etc…

Regardez dans Google Analytics le trafic mobile

C’est certainement là le plus important « le trafic sur mobile »… regardez dans votre console Google Analytics le trafic que cela représente sur votre shop. Si vous avez 50% et +, de trafic smartphone et que votre boutique semble négligée sur ce support, vous aurez de la peine à convertir en commandes. Pour commencer une optimisation intelligente, je recommande d’utiliser la méthode DESAKTIVTOUT qui va déjà réduire une charge de votre travail. Le mobile ça devient la source de trafic n°1… alors il faut absolument soigner ce canal.

Pour ce tutoriel vous aurez à disposition :

  • 1 x fichier « custom.css » avec les règles de base Media Queries

Télécharger

Résumé de la vidéo : améliorer l’ergonomie Prestashop sur mobile, tablette et ordinateur via CSS

    • Utilisation de la console Google Chrome pour tester les différentes résolutions et voir les différents types de supports.
    • Les Media Queries aident à améliorer le rendu de votre boutique, il est conseillé de les intégrer en fin de fichier « custom.css » afin qu’elles aient la priorité sur les règles CSS précédentes.
    • Ordonnancement de la feuille de style pour les différents supports avec découpage des résolutions et application d’un fond de couleur pour le contrôle de la règle.
    • Il est important que les règles CSS ne se chevauchent pas afin d’éviter les conflits. En utilisant 1 pixel d’écart cela permet de palier à cette problématique.
    • Ne mettez pas en place des règles génériques, soyez précis sur chacune de vos règles afin de ne pas déformer le shop sur une autre page.
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 ! (9 votes, moyenne : 5,00 sur 5)
Loading...

5 commentaires sur “Prestashop 1.7 – Optimiser la tablette & le mobile en CSS (ép. 57)”

  1. Bonjour,
    avant tout, je voudrais vous remercier pour le travail que vous faite et l’aide que vous apportez au jeune padawan que nous sommes.
    j’ai suivi pas mal de vos tutoriels mais il y a un bug que je n’arrive pas a résoudre et qui touche je penses beaucoup de personnes mais je n’ai trouvé aucun forum la dessus. Vous faites les test d’affichage sur google (pour mobile et tablette), et effectivement cela fonctionne, mais quand on fait le test sur le matériel en réel il y un bug d’affichage sur les tablette et certain mobile. Tous les produit sont affiché sur 1 seule ligne.
    J’ai longtemps cru que c’était mon site mais en prenant la tablette et en allant sur prestashop demo c’est pareil. (test et bug trouvé avec ipad et iphone 4, fonctionne sur iphone 7…) sur iphone 4 ca me pose pas vraiment probleme mais un peu plus sur tablette. Et c’est je pense que c’est la raison pour laquelle google search console me trouve comme erreur : Contenu plus large que l’écran.
    Y a t’il une solution pour ca?
    mon site est monster-pieces.com

    1. Bonjour,

      Sur quelle page cela fait le problème ? Je viens de faire un test et cela semble correct… à tester aussi avec la gestion des caches « totalement » désactivé (compression JS / CSS). Par contre, il est vrai qu’il y’a des différences parfois entre le support « réel » et la simulation et c’est pas toujours évident à trouver la cause.

      A bientôt !

      1. Bonjour,
        excusez moi pour la réponse tardive. Je n’avais pas vu que vous aviez répondu.
        Le probleme est sur toutes les pages. Cela fonctionne très bien en simulation. Mais sur un support réel ça coince. J’ai déjà essayé en désactivant les caches et même chose..
        Je n’ai plus d’idées et personne n’en parle nul part c’est étonnant quand même.. Et ce n’est pas comme si j’avais pris un thème c’est celui de base..
        Auriez vous d’autres pistes pour que je puisse creuser dans ce sens?

        1. Bonjour,

          Ce que j’essaierai de faire c’est de re-télécharger une version complète de Prestashop et de mettre juste le dossier thème original à la place pour voir si cela provoque une différence (afin de voir si c’est les changements ajoutés qui causent problèmes).

          A bientôt !

  2. Bonjour,
    Merci pour votre travail complet!
    Selon moi, il faut énormément insister sur le fait que le trafic mobile devient la source de trafic numéro 1 donc il est primordial de travailler sérieusement sur l’affichage du site en responsive !
    A bientôt !

Laisser un commentaire

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