Description de la mission :

Sous-traitance d’intégration front-end pour une agence web développant un module e-commerce spécialisé dans les Équipements de Protection Individuelle (EPI). Le client de l’agence ayant validé les maquettes Adobe XD, la mission consistait à transformer ces designs en templates HTML/CSS fonctionnels dans un délai court.

Le projet comprenait deux pages distinctes : une page Liste affichant le catalogue des articles EPI, et une page Article présentant le détail d’un produit avec galerie d’images. Les templates devaient s’intégrer dans une architecture HTML existante fournie par l’agence, avec des points d’ancrage spécifiques dans la structure DOM.

Le développement a été réalisé en approche mobile-first, l’utilisation principale se faisant sur smartphone, avec une adaptation complète pour les écrans desktop. Le code a été écrit en HTML5/CSS3 pur sans aucun framework (pas de Bootstrap, Tailwind, etc.) selon les spécifications du client qui souhaitait garder le contrôle total sur les animations futures.

L’intégration a nécessité une attention particulière à la fidélité du design Adobe XD tout en apportant des micro-ajustements UX pour améliorer l’expérience utilisateur. La structure du code a été organisée et commentée pour permettre à l’agence d’ajouter facilement ses animations JavaScript par la suite.

Des révisions ont été effectuées suite aux retours du client : centrage de la galerie d’images sur petits écrans et ajustement du positionnement du compteur de panier pour éviter les chevauchements avec le logo en mode mobile. Le code a été optimisé pour garantir une compatibilité cross-browser et des performances optimales.

Le projet a été livré dans les délais avec un code propre, structuré et documenté. L’agence a pu intégrer directement les templates dans son module et poursuivre le développement avec les animations et la logique métier.