Refonte d’un site institutionnel asserac.fr
On vous présente Assérac
Assérac est une ville située entre la mer et les marais salants en Loire-Atlantique, au nord de Guérande. Elle compte un peu plus de 1 800 habitants. Commune traditionnellement bretonne, son littoral est prisé par les touristes l’été ; c’est une véritable destination estivale pour ceux qui souhaitent passer des vacances au bord de la mer.
L’élément déclencheur
Le site asserac.fr avait un CMS devenu obsolète en 2021. La mairie a donc fait appel à Astraga pour la refonte de son site web !
Véritable vitrine de la Ville d’Assérac, le site doit mettre en avant les informations essentielles à la vie de chaque citoyen. De plus, le site doit être facilement administrable afin que chaque employé concerné par l’agrégation de contenu puisse l’utiliser facilement et intuitivement.
Notre agence web a été chargée de la refonte du site de la ville d’Assérac.
En amont : établissement des objectifs du site web
Cette refonte avait trois principaux objectifs. Le premier était de présenter les informations essentielles de la ville de manière claire et fluide. Ensuite, moderniser l’image en ligne de la ville d’Assérac. Pour finir, Astraga avait pour objectif de fournir un site web administrable et durable, pour éviter l’obsolescence. De ces objectifs, nous avons pu déterminer les publics cibles : les habitants de la ville, les élus et employés municipaux et les touristes.
En plus de la refonte du site, Astraga a proposé à la mairie d’Assérac l’hébergement et un nouveau nom de domaine en plus d’une assistance et une maintenance du site à long terme.
La co-conception
Mise en place de l’arborescence
Lors de la réunion de démarrage, la question de l’arborescence a été soulevée. Effectivement, la définition de l’arborescence d’un site est l’une des étapes cruciales avant de commencer la réflexion autour du design, du développement et de la navigation dans le site !
Vue avec le client, elle nous a permis de spécifier et d’éclaircir certains éléments et de donner des entrées claires et optimisées pour l’utilisateur final.
L’ergonomie du site web optimisée pour une meilleure expérience utilisateur
Après avoir retravaillé l’arborescence du site, le menu de navigation est passé de six catégories à quatre catégories, avec deux niveaux de profondeur en accès direct, ce qui rend la navigation à la fois plus claire et plus rapide. La sitemap (l’arborescence du site) est également présente dans le footer, ainsi qu’un bouton “retour en haut de la page”.
Un fil d’ariane à été ajouté aux pages, pour que l’utilisateur puisse se repérer plus facilement. Un moteur de recherche intuitif est maintenant présent sur toutes les pages, basé sur un système de mots clés.
Le design d’interface revisité
Le Design System entièrement retravaillé reprend les couleurs de la mairie d’Assérac et met l’accent sur la lisibilité de l’information.
Désormais responsive, le site s’adapte aux écrans desktop (ordinateur), tablette et mobile. Poppins remplace Arial en font principale du site : plus moderne et impactante, la police d’écriture Poppins habille maintenant toutes les pages du site.
Astraga, n’a pas qu’un pôle digital, elle possède également un pôle branding. Nous pouvons créer votre logo et votre nouvelle identité visuelle !
Un développement qui facilite l’administration du site web
Notre choix s’est porté sur le CMS WordPress : open source, il bénéficie d’un back office (c’est à dire d’une interface où il est possible de modifier et d’ajouter / de publier du contenu en autonomie), d’un grand nombre de fonctionnalités et plugins, d’une communauté active et de mises à jour régulières.
L’administration du site a la possibilité de gérer facilement les droits et les accès au back office du site d’Assérac, ainsi qu’un module pour la gestion des contenus du site qui permet de voir en direct l’apparence de votre page finale.
Les fonctionnalités
Notre agence web à pu mettre en place deux fonctionnalités intéressantes pour le site web de la ville d’Assérac : un agenda des évènements et une carte interactive.
Pour commencer, l’agenda des évènements communiqués par la Mairie d’Assérac a été développé avec :
- la création du type de contenu Evénement et l’utilisation de la taxonomie (noyau) pour la catégorisation ;
- l’utilisation des modules Calendar et Views pour l’affichage des événements selon l’année, le mois, la semaine et le jour. L’internaute a également la possibilité de filtrer par catégories ;
- la mise en place d’un bouton de partage avec la création d’un flux de syndication.
La carte interactive quant à elle est un plan dynamique intégré au site, administrable depuis le back office. Celui-ci permet de localiser les structures, informations d’ordre économique, sécuritaire, touristique, événementiel, avec un système de filtre pour un accès plus rapide à l’information.
Optimisation du site web avant sa mise en ligne
Recettage : Zoom sur les potentielles anomalies du site et s’il fonctionne bien !
Lorsque le développement du site a été achevé, une personne de notre équipe qui n’avait pas participé au développement à procédé au recettage. Il s’agit de la vérification du bon fonctionnement des pages du site, leur respect de la sémantique pour les titrages, les survols des éléments cliquables, les liens, etc.
Référencement du site
Astraga a optimisé le référencement du site de la ville d’Assérac grâce à l’outil Yoast SEO qui permet de remplacer les balises Title et de renseigner les meta descriptions des pages du site.
Vous souhaitez le constater de vos propres yeux ? Rendez-vous sur le site asserac.fr !
Le suivi du site web
Pour un suivi des performances du site, Astraga a opté pour Google Analytics. Cet outil permet d’obtenir les données des utilisateurs consultant le site. Grâce à Google Analytics, nous pouvons maintenant faire des rapports de statistiques et formuler des recommandations pour le bon référencement du site de la ville.
Asserac nous confiance pour la suite : nous nous chargeons de la maintenance du site. Nous effectuons les mises à jour du CMS et des différents modules et corrigeons les erreurs liées au site.
