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

Laisser un commentaire

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