Site de la ville de Roubaix

Le site propose une mine d'informations pratiques accessible au choix via une via une navigation innovante ou un puissant moteur de recherche.

On vous raconte l'aventure de ce projet atypique en 3 défis.

Défi #1 : Repenser le site autour de l’expérience des Roubaisiens

Premier défi pour nos équipes : concevoir un site en phase avec les besoins des utilisateurs et avec les nouveaux standards ergonomiques de navigation de sites et d’applications dont les visiteurs se servent au quotidien.

Résolument tourné vers les démarches et les moments de vie des usagers, la conception du site de la ville de Roubaix s’est cristallisée autour d’intitulés de pages explicites, d’actions claires, et de contenus didactiques et pédagogiques.

Avec plus de 400 pages de contenus et plus de 1000 articles disponibles, l’exercice fut un peu plus compliqué que sur le papier. Le challenge affiché était de révéler la richesse des contenus sans pour autant perdre les visiteurs. Pour ce faire, Inouit a choisi d’exposer l’arborescence directement dans les pages du site en mettant en place une navigation en entonnoir. Exit donc les pages-carrefours et les menus géants sans grande valeur ajoutée.

Pour parvenir à ce niveau de fluidité et de réactivité, Inouit a choisi de faire appel à une PWA (Progressive Web Application) reposant sur le générateur Gatsby et l’API Wordpress. Venant s’intercaler entre le Back-end et le Front-end, Gatsby permet au site d’être régénéré automatiquement dans un laps de temps défini. Associée à la technologie React, la navigation gagne ainsi en rapidité de chargements de pages et en sécurité par rapport à un éventuel effondrement du back-office.

Par ailleurs, la PWA offre un avantage non négligeable : celle de proposer un site “mobile first” avec application mobile directement téléchargeable depuis l’interface. S’affranchir de coûts de développement d’une application dédiée n’aura jamais été aussi facile pour la ville de Roubaix !

Défi #2 : Faciliter la mise en page et le développement avec Gutenberg

Afin de structurer l’ensemble des contenus du site pensé comme un centre de support, les équipes d’Inouit se sont penchées sur les différentes solutions d’éditeur de page sous Wordpress. Alors en développement à l’époque, Gutenberg s’est avéré être une vraie évolution par rapport à d’autres “page builder” permettant une mise en page simple, flexible et plus rapide. Proposant une vue dans le back-office quasi-identique à celle du front, l’intégration de contenus n’en fut que mieux cadrée, laissant davantage de liberté dans l’agencement des pages.

Autre avantage : l’utilisation de blocs réutilisables. Gutenberg offre en effet la possibilité de créer des espaces réemployables à divers endroits du site. Ces blocs, liés entre eux (mais parfaitement détachables au besoin), se révèlent vraiment pratiques lorsqu’on souhaite éviter de passer du temps à éditer du contenu spécifique ou que l’on doit opérer un même changement dans différentes parties de l’interface.

Défi #3: Réenchanter l’expérience de la recherche

Pour booster l’ensemble, le site de la ville de Roubaix s’est vu outillé d’un moteur de recherche ultra-performant. Par rapport à d’autres solutions existantes, ElasticSearch a été très facilement paramétrable, et n’a présenté aucune restriction en matière de formats à traiter. Indexé à de multiples sources, et allié à React, l’outil a su montrer des prouesses impressionnantes vis-à-vis de la pertinence et de l’instantanéité des résultats de recherche.