Comment standardiser les visuels sur PrestaShop avec Canvas ? (ép. 138)

Est-ce que le mot « standardiser » vous fait peur ? À un certain stade avec votre site e-commerce, vous allez commencer à vouloir unifier le contenu pour gagner du temps et proposer la meilleure expérience à vos clients.

Standardiser les visuels ? C’est toujours assez mal vu…

Le cas le plus frappant sur les sites e-commerce c’est souvent sur la page d’accueil, j’ai l’impression que certains e-commerçants cherchent le slider le plus incroyable avec le plus d’effets possibles… Oui, vous voyez de quoi je veux parler, ces sliders « créatifs » qui vous proposent des tas de combinaisons d’effets.

Dans la plupart des cas c’est une mauvaise idée, car créer des effets ça demande des ressources (en ajoutant un surplus de librairies JavaScript)… cela va générer en arrière-plan un empilement de code qui rendra votre page d’accueil plus lourde.

Et vous savez quoi ? Le pire dans tout ça c’est que le rendu sur tous les supports ne sera pas identique, parce qu’une librairie va devoir adapter votre création en fonction des résolutions d’écran, du coup le rendu reste souvent incertain.

Unifier pour les différents formats, ordinateur, tablette et mobile

Dans un autre billet, j’avais expliqué comment optimiser les règles responsives pour PrestaShop, vous devez garder en tête que tout le contenu de votre shop doit pouvoir s’afficher sur n’importe quel support.

En réalité vous savez quoi ? On est souvent dans deux cas de figure… soit une partie des éléments ne s’affichent pas sur certains supports ou alors ils s’affichent, mais de manière non optimisée, à peine lisible… Parfois c’est l’UX du thème qui est désastreux, ce qui représente un frein considérable pour vos réussir vos conversions.

En fait il est important de prendre conscience qu’il faut créer du contenu dans des formats durables et compatibles multiformats. Quand on fait un changement on doit penser vraiment multi-interfaces… il faut adapter nos envies aux exigences techniques du multisupports et non l’inverse.

Le texte dynamique ? À la poubelle…

Voici une stratégie que j’ai abandonnée, c’est l’utilisation de texte dynamique mélangé aux images… C’est vraiment la combinaison la plus incertaine… D’ailleurs vous pouvez le voir dans le slider PrestaShop cela fait différer le rendu en fonction des supports.

Parfois vous avez le texte dynamique qui s’étale sur toute l’image, parfois ce texte est ridiculement petit coincé dans un bord… Et oui, comme l’élément texte doit se greffer dynamiquement sur l’image, il faut gérer le positionnement sur chaque résolution avec une précision d’orfèvre.

Mais qu’en est-il pour le référencement ? On pourrait croire que supprimer les textes dynamiques des sliders et des bannières nuisent à votre référencement. Ce n’est pas le cas, car la valeur ajoutée de ces textes aux yeux de Google est bien souvent faible. Les leviers efficaces SEO reposent sur un travail de fond bien plus dense.

Quels ratio et format d’image utiliser ?

Pour ce qui est des images produits, vous n’avez pas besoin de vous en préoccuper, le format carré standard est très bien. En ce qui concerne les autres visuels à créer, le format 16/9 peut-être une bonne base… on peut même envisager de réduire légèrement la hauteur (comme montré dans la vidéo ci-dessous).

Le format à bannir ce sont les rectangles étroits allongés, car le texte incrusté dans l’image deviendra totalement illisible lorsque celui-ci s’affichera sur un support mobile. Il faut que le texte soit toujours assez grand et court, afin d’assurer une lecture optimale sur tous les supports.

Une autre méthode « old-school », mais utilisée par de grandes entreprises suisses comme Galaxus, c’est de laisser l’image de bannière totalement vierge et sans texte. Le texte dynamique est toujours mis ensuite en dessous de l’image, ce qui permet d’être responsive sans jamais avoir de chevauchement.

Une bannière réussie ? Une belle image et deux lignes de textes suffisent !

Quand on se met à créer une bannière, on a tous envie d’être un Picasso à l’oeuvre, alors que le client va rester 5 à 10 secondes sur la page… Il est fort possible que l’effet « waouw » que vous avez mis 2 heures à trouver ne sera pas perçu par le visiteur.

Il faut donc réduire votre temps de travail, tout en conservant son efficacité… Une belle photo c’est vraiment la base, accompagné d’un texte simple c’est suffisant… pas besoin d’en faire plus. Les grandes marques appliquent très souvent ce genre de pratique.

Dans le tutoriel du jour, j’arrive même à la conclusion qu’un bouton peut-être remplacé par un caractère en forme de flèche. Ce qui est intéressant, c’est que vous pouvez obtenir le 80% d’efficacité tout en réduisant drastiquement votre temps de création de visuels… le tout en étant irréprochable sur la compatibilité multisupport.

Pour ce tutoriel PrestaShop vous avez à disposition :

• 1 x custom.css (pour ajuster le slider sur mobile)

Télécharger

Résumé de la vidéo : Optimiser vos contenus, images, sliders bannières sur PrestaShop

• Il faut d’abord prendre conscience que votre boutique peut s’afficher sur énormément de supports différents et qu’il faut viser une compatibilité optimale avec le moins de code possible (surtout pour la partie visuelle).
• On va regarder comment font une série d’entreprises sur leur site e-commerce et tirer quelques conclusions.
• Le ratio universel de 16/9 est une bonne base de référence pour la création de contenu visuel.
• Sur Canvas, on va créer un exemple de slide qui va à l’essentiel, simple, épuré et surtout compatible avec toutes les interfaces.
• Ensuite sur PrestaShop, on va désactiver le slider et intégrer le contenu directement dans le bloc HTML personnalisé, une bonne pratique… durable, native et facilement maintenable.