Le problème identifié concernait une présentation non optimale des banners et des product cards en page liste à 3 colonnes sur différents écrans, avec des dimensions variables entraînant des contenus tronqués et difficilement lisibles, notamment sur petits écrans.
Objectifs et solutions mises en place :
- Fixer la hauteur des product cards à 490 px, basée sur le cas maximal d’affichage de trois options produits. Puis, fixer la largeur des Product Cards à 320 px, correspondant à la taille d’une colonne mobile.
- Maintenir des dimensions constantes des cards quel que soit l’appareil utilisé.
- Revoir la taille des banners pour qu’elles s’adaptent aux dimensions fixes des product cards.
- Appliquer des breakpoints cohérents (1400 px, 1200 px, 767 px, 575 px) pour garantir un affichage stable et lisible, en reprenant les standards web.
- Itération étroite avec les développeurs via JIRA pour ajuster les implémentations et garantir un résultat final conforme et satisfaisant.
Résultat : Cette refonte a permis une meilleure uniformité visuelle, une meilleure lisibilité des contenus marketing et une expérience utilisateur optimisée sur tous les appareils.
