Créer un outil en ligne pour refondre la gestion des contenus éditoriaux et la newsletter quotidienne d’un journal en ligne tout en améliorant l’interaction avec les lecteurs et lectrices
- Client : Presselib
- Taille : Association
- Activité : Journal en ligne
Presselib nous a donné pour mission de refondre leur site Internet WordPress pour l’inscrire dans les technologies plus récentes et permettant plus d’interactivité avec leur lectorat. L’équipe du journal en ligne, orienté autour de l’actualité régionale économique et positive, souhaitait également profiter de cette refonte pour améliorer l’expérience utilisateur (aspect visuel) et inscrire l’outil dans les évolutions éditoriales du journal : des rubriques plus dynamiques, un référencement accentué, de la publication d’articles au fil de l’eau, etc.
Nous avons choisi pour cela de réaliser un site web via la technologie PWA (Progressive Web App), qui permet notamment la gestion du mode hors ligne, les notifications, etc. Nous nous sommes également penchés sur le métier de l’éditorial afin de proposer une façon innovante d’organiser les contenus d’actualité à cheval entre les méthodes traditionnelles et la souplesse requise pour les sites Internet modernes, le tout au sein d’un univers visuellement repensé et orienté autour des facilités de lecture multi-supports et de performances techniques fortes.
Développer un CMS sur-mesure autour du métier de l’éditorial pour inscrire un journal en ligne dans un processus de transformation et de performance digitales
Un site internet pour aujourd’hui et demain
- une refonte graphique pour un aspect plus moderne
- une organisation des contenus facilitée
- des contenus éditoriaux très riches
- une newsletter construite sur le site
- une interface d’administration facile à prendre en main
- des performances techniques poussées (SEO)
- Node.JS
- GraphQL
- VueJS
- Docker
- OVHcloud
- Google Analytics
- Kubernetes + Helm
- HTML5 / CSS 3
- JavaScript
- Micro-services
Les contenus au service de la diffusion
Un des enjeux principaux de cette refonte a été pour nous le fait de pouvoir changer assez profondément l’architecture du site au service de l’actualité et des besoins en terme de référencement. La conception de la solution a été fortement orientée pour répondre à cet objectif. Pour cela, nous avons pris à contre-pied l’orientation WordPress en considérant chaque actualité indépendamment de sa diffusion.
En pratique, nous avons mis en place deux concepts bien distincts : d’un côté, les actualités sont rédigées et qualifiées au mieux à travers des systèmes de typage, d’étiquettes, etc. De l’autre, l’arborescence du site, depuis le squelette de pages jusqu’aux contenus de la colonne secondaire, permet d’extraire des actualités en fonction de leur catégorisation et de les afficher. Ainsi, il y a une différence entre les articles et la façon dont ils apparaissent dans le site : sans nécessiter de modification des articles existants, la structure du site peut ainsi être adaptée et ajustée selon les besoins en termes de priorité, de référencement, etc.
Administration sur-mesure et simplifiée
Nous avons construit l’interface d’administration pour être au moins aussi simple à utiliser que WordPress, déjà en œuvre depuis plusieurs années chez notre client, donc habitué à son interface. Nous avons ainsi ré-implémenté les fonctionnalités habituelles de WordPress, avec une touche plus adaptée au métier de notre client et à ses usages.
Afin d’organiser les contenus multimédias, notamment les images entre les articles, le site, les publicités, nous avons implémenté une bibliothèque de médias. Celle-ci permet d’organiser les fichiers envoyés en dossiers, sous-dossiers, etc. Des fonctions de recadrage et de point de focus des images ont été développées sur-mesure pour faciliter le vignettage. Un moteur de recherche a été implémenté pour retrouver des documents ou images. Enfin, chaque image dispose d’un champ permettant de renseigner une fois pour toutes les crédits et la description alternative.
Les pages du site sont structurées en forme d’arborescence, avec pour chaque page la possibilité de paramétrer des options ou renseigner des contenus éditoriaux riches. Cette structure alimente les menus automatiquement, ainsi que le plan du site.
Un email construit sur-mesure via l’interface
Presselib envoie chaque matin à plusieurs milliers d’abonné·e·s un récapitulatif des 9 derniers articles du site. Dans le cadre de la refonte du site, nous avons également été amenés à développer un outil de création d’e-mail sur-mesure.
Cet outil s’appuie sur notre interface de gestion des contenus éditoriaux et propose de paramétrer la newsletter de manière générale (titre, résumé…), puis d’envoyer cette newsletter en 4 étapes :
- une première étape pré-alimente la newsletter avec les contenus du site — ainsi, les 9 derniers articles sont composés automatiquement avec les 9 articles du site ;
- une deuxième étape manuelle permet de réajuster les contenus ainsi pré-remplis pour les réorienter vers le public de la newsletter ;
- lorsque le contenu semble pertinent, la prévisualisation et l’envoi d’un email de test permettent de valider l’email ;
- enfin, l’envoi de la newsletter est effectué auprès des abonné·e·s au service.
La synchronisation des inscrit·e·s à cette newsletter quotidienne et l’envoi à ces personnes se font à l’aide du service Dolist. L’outil a été pensé en relative autonomie, ce qui permet d’envisager tout autre prestataire (ex : SendInBlue, Mailjet…).
Des contenus sémantiquement forts
Déjà habitués à cette approche, nous avons implémenté à nouveau pour le site Presselib des contenus éditoriaux riches sous la forme de tuiles : il s’agit de blocs de données qualifiées, génériques et sur-mesure, dont l’affichage est maîtrisé selon le support.
Concrètement, pour la gestion des articles, des pages, de la newsletter et de la colonne de droite du site, les administrateur·ice·s disposent d’un outil d’administration sur lequel ils peuvent créer une ou plusieurs tuiles pour chaque page. Chaque tuile a un type qui lui est propre : texte, image, vidéo, carrousel, citation, etc. et avec ce type les informations qui sont administrables (contenu textuel, fichier de la médiathèque intégrée, position de l’image par rapport au texte, liens, etc.). Ces tuiles sont ensuite affichées spécifiquement selon l’appareil, mobile, tablette ou écran de bureau, et leur implémentation est adaptée techniquement aux besoins (ex : référencement, interactivité, etc.).
Cette approche permet de se concentrer essentiellement sur le sens de chaque donnée, en ne se préoccupant pas de l’aspect de mise en forme ou de mise en page. Ainsi, les contenus réalisés sont plus durables dans le temps car beaucoup moins dépendants du support d’affichage ou de la technologie.
L’indexation et la recherche intelligente
Un des aspects clés d’un journal en ligne est de pouvoir retrouver des articles en fonction d’une recherche. Cette facette fonctionnelle était défaillante sur l’ancien site en WordPress, limité par les problématiques d’accents, de performance, de fautes de frappe, etc.
Nous avons mis un effort particulier sur cette fonction de recherche sur le nouveau site internet sur-mesure en utilisant notamment l’outil Meilisearch. En indexant chaque article, nous disposons d’une base de données optimisée pour la recherche, insensible aux accents, à la casse et même aux légères variations d’orthographe. Cependant, nous avons dû paramétrer cet outil et travailler spécifiquement la recherche en fonction de cas d’utilisation afin d’offrir des résultats qui sont un bon compromis entre les différentes pertinences : proximité de mots-clés, ancienneté, densité de l’information, etc.
Nous avons également profité de cette indexation pour proposer une fonctionnalité de suggestions d’articles similaires. Pour cela, nous nous basons sur les contenus principaux de chaque article pour proposer des actualités récentes partageant les mots-clés importants.
Le référencement naturel comme priorité
Les journaux en ligne ont tous comme priorité l’optimisation de leur référencement. L’ancien site étant sous technologie WordPress, connu pour avoir de bons résultats techniques sur le sujet du SEO, nous devions être particulièrement vigilants sur la refonte du site.
Nous avons pour cela intégré les problématiques de référencement dans la conception : dans l’organisation de l’arborescence du site, sur les contenus éditoriaux et multimédias, dans les choix techniques (ex : rendu côté serveur), dans nos processus de revue et de recette, etc. Le site Presselib permet de renseigner pour chaque page les méta informations de référencement, avec des aides et conseils à destination des administrateur·ice·s. Il est également optimisé techniquement via des balises structurées, les microformats, etc.
Enfin, pour améliorer la qualité du site auprès des moteurs de recherche, nous avons mis un accent fort sur la vitesse du site. Nous avons pour cela travaillé sur des minifications de vignettes (optimisations de la taille des images), sur une architecture en micro-services pour répartir la charge et sur un cache applicatif à différents niveaux lors du rendu des pages.