Création d’une carte interactive pour Mobilité Pour Tous
Dans le cadre de son engagement en faveur d’une mobilité plus accessible et durable, l’association Agir Pour Tous nous a confié la conception et le développement d’une carte interactive destinée à être intégrée à leur site Mobilité Pour Tous.
L’objectif de ce projet était de proposer une solution ergonomique et intuitive permettant aux usagers d’accéder rapidement aux informations de transport dans leur commune. Cette carte interactive, développée en HTML, CSS et JavaScript, a été intégrée sous la forme d’un plugin WordPress, facilitant ainsi son déploiement et sa gestion au sein du site.
Un outil interactif et fonctionnel
La carte regroupe les 38 communes des Vallons de Haute Bretagne et de Bretagne Port de Loire, chacune étant cliquable et redirigeant vers une page dédiée contenant des informations détaillées sur les solutions de transport disponibles (TER, cars BreizhGo, covoiturage, itinéraires cyclables et piétons, etc.).
Les principaux défis techniques de ce projet ont été :
- L’optimisation de l’affichage : la carte devait être lisible et facilement exploitable, quelles que soient la taille de l’écran et la résolution utilisée.
- L’accessibilité mobile : nous avons mis en place une interface responsive qui s’adapte aussi bien aux ordinateurs de bureau qu’aux smartphones et tablettes, garantissant une navigation fluide.
- L’interactivité : chaque commune est mise en avant au survol et réagit au clic pour rediriger rapidement vers la page correspondante, avec des animations fluides pour une expérience utilisateur agréable.
- La performance et la rapidité de chargement : la carte a été optimisée pour limiter son impact sur les temps de chargement du site, garantissant une utilisation efficace même sur des connexions limitées.
- L’optimisation de l’affichage : la carte devait être lisible et facilement exploitable, quelles que soient la taille de l’écran et la résolution utilisée.
- L’accessibilité mobile : nous avons mis en place une interface responsive qui s’adapte aussi bien aux ordinateurs de bureau qu’aux smartphones et tablettes, garantissant une navigation fluide.
- L’interactivité : chaque commune est mise en avant au survol et réagit au clic pour rediriger rapidement vers la page correspondante, avec des animations fluides pour une expérience utilisateur agréable.
- La performance et la rapidité de chargement : la carte a été optimisée pour limiter son impact sur les temps de chargement du site, garantissant une utilisation efficace même sur des connexions limitées.
Une solution technique adaptée aux besoins
Pour assurer une expérience utilisateur fluide et intuitive, nous avons utilisé plusieurs technologies et bonnes pratiques :
- SVG pour un rendu graphique précis et léger, tout en conservant une grande flexibilité d’affichage.
- JavaScript pour gérer les interactions dynamiques sans alourdir la navigation.
- CSS et Media Queries pour une parfaite adaptation aux différents écrans, du smartphone au grand écran.
- SVG pour un rendu graphique précis et léger, tout en conservant une grande flexibilité d’affichage.
- JavaScript pour gérer les interactions dynamiques sans alourdir la navigation.
- CSS et Media Queries pour une parfaite adaptation aux différents écrans, du smartphone au grand écran.
- Intégration WordPress sous forme de plugin, facilitant l’administration et les mises à jour du projet.
Un projet sur mesure pour une accessibilité optimale
Créer une carte interactive efficace et ergonomique est plus complexe que ça en a l’air et peux parfois représenter un véritable défi technique, surtout lorsqu’il s’agit de garantir une expérience utilisateur homogène sur ordinateurs, tablettes et smartphones. L’équilibre entre design, performance et interactivité est essentiel pour assurer un outil à la fois performant et simple d’utilisation.
Si vous avez besoin d’une solution sur-mesure pour intégrer une carte interactive à votre site web, n’hésitez pas à nous contacter. Nous saurons vous accompagner pour concevoir une solution adaptée à vos besoins et à votre audience !
Le projet en images
Merci beaucoup Ludovic pour la compréhension du besoin et la réalisation rapide !
Pierre Emmanuel Fardin - Agir Pour Tous