Toute L’Europe : une stratégie de navigation au service de la richesse de leurs contenus

Publié le 03 novembre 2017

Toute L’Europe dispose d’une grande richesse de typologies de contenus mis à jour quotidiennement : un historique de plus de 7500 contenus est disponible au public.

Considéré comme le média de référence sur les questions européennes, Toute L’Europe s’est toujours attachée à offrir une information pédagogique fouillée sur le fonctionnement et les politiques de l’Union européenne.

Pour cette troisième refonte, Toute L’Europe a fait appel aux compétences d’Atol CD qui s’était déjà chargée de la précédente. Ce projet a été l’occasion pour Atol CD de compter sur de nombreuses compétences de ses collaborateurs : design, ergonomie, technique, réseau, hébergement, supervision, gestion de projets. 

Pour ces travaux, des points de vigilance ont été traités en priorité : 

  • De par sa connaissance du fonctionnement du moteur de recherche Solr, Atol CD a apporté sa contribution pour la mise en place d’une stratégie de navigation facilitant l’accès à l’information pour les internautes. 
  • La reprise de contenus a été conséquente (plus de 7500).
  • L’ergonomie générale et l’expérience utilisateur sont issues des réflexions, de nos équipes UX-design et fonctionnelles et bien entendu, de nos nombreux échanges avec Toute L’Europe pour répondre à leurs besoins. Une attention toute particulière a été portée sur l’adaptation du design aux terminaux mobiles, près de 50% des consultations étant effectuées via ces appareils.

La navigation sur Toute L’Europe

A la différence de nombreux sites fonctionnant sur une navigation classique de type Menu/Sous-Menu, le site est basé sur un système de tags (thèmes, termes descriptifs, pays) qui s’adaptent dynamiquement en fonction du contexte d’affichage (mode liste, page de détail d’un contenu). Les tags permettent ainsi aisément de rebondir sur d’autres listes de contenus ayant une proximité avec celui en cours de lecture par exemple.

Le menu principal lui même est généré grâce à des associations de contenus à des thèmes spécifiques

 

Une fonctionnalité importante a été intégrée, c’est la présence d’un « Menu du thème » sur chaque contenu. L’écran ci-dessous montre ce menu déroulé. Ce dernier présente à l’internaute une liste de contenus, classés, portant le même thème que celui en cours de lecture. 

 

Enfin, des bandeaux présentant des publications récentes et / ou en rapport avec le thème sont systématiquement suggérés en bas des pages de détail ou dans les listes de résultats : 

La recherche sur Toute L’Europe

Le moteur de recherche présente deux niveaux d’auto-suggestion : 

  • D’une part, une autocomplétion sur le mot saisi, 
  • et d’autre part, sur des suggestions de contenus en fonction du mot saisi avec remontée des images. 

 

Le partage social sur Toute L’Europe

Toutes les publications peuvent être facilement partagées sur les réseaux sociaux types Twitter, Facebook, … Les internautes peuvent également commenter les articles. 

Caractéristiques techniques

Les technologies suivantes ont été utilisées pour ce projet : 

  • Version 7.6 de TYPO3 apportant un confort d’utilisation aux administrateurs (back-office remanié, optimisation des performances).
  • Solr pour la recherche.
  • MySQL pour la base de données.

Hébergement

Atol CD est aussi l’hébergeur du site. Notre pôle Système et Réseau assure la maintenance et la supervision des serveurs dont la disponibilité de service doit être de 99,5%.

L'architecture du site touteleurope.eu est découpée en trois couches : 

  • la couche Sécurité, 
  • la couche Frontend
  • la couche Backend.

La première couche est dédiée à la sécurité. La connexion est d'abord analysée par un Firewall puis transmise au Load-Balancer qui va terminer la connexion SSL (HTTPS) et créer une nouvelle connexion (HTTP) vers la prochaine couche. Cette nouvelle connexion est transmise à deux serveurs de cache « Varnish »  qui ont pour but de délivrer les pages Web aux internautes, c'est ce que l'on appelle le Frontend. 

Les « Entrées / Sorties » (IO) disques impactant les performances d'un site Web ont été réduites au maximum :

Les serveurs Varnish ne se contentent pas de mettre les images ou les feuilles de style (CSS) en cache, les pages complètes le sont également. Ainsi, ne sont relayées, à la couche backend, que les pages n’ayant encore jamais été affichées par l’utilisateur. Les pages affichées par les utilisateurs sont ainsi fournies à 95% par les serveurs de cache, les accès au serveur applicatif ou à la base de données sont donc limités au maximum, offrant ainsi un confort de navigation grâce à une livraison très rapide des contenus.

Ce que l’on appelle « la couche Backend »  regroupe les composants les plus bas niveau de l'architecture. 

Les performances générales s’appuient aussi sur une séparation des principaux composants :

Le CMS TYPO3 partage un serveur dédié avec le serveur d'indexation Solr, la base de données Mysql est déportée sur un autre serveur.

Il est à noter, que pour des raisons de sécurité, l'accès au back-office (console d’administration) de TYPO3 est interdit depuis l’extérieur. Le seul moyen de pouvoir générer du contenu TYPO3 est l'utilisation d'un VPN dont les accès sont nominatifs.

Conclusion

Cette nouvelle mouture a été particulièrement pensée et orientée utilisateur pour faciliter la recherche d’informations et favoriser une expérience de navigation optimisée.

Atol CD remercie beaucoup Toute L’Europe pour son implication, son écoute attentive et son pragmatisme sans lesquels ce projet n’aurait pas pu être aussi abouti. 

D’autres fonctionnalités sont en cours de spécification mais ceci fera l’objet d’une autre publication ... 

Visiter le site

Autres cas d'utilisation

MonProjetAgricole : l’ambition au service de l’installation

MonProjetAgricole : l’ambition au service [...]

Lire la suite
Atol CD au cœur de votre facture d’eau - Le projet "Aqua-sise Décisionnel"

Atol CD au cœur de votre facture d’eau - [...]

Lire la suite
VizAgreste : Il était une fois le recensement agricole

VizAgreste : Il était une fois le [...]

Lire la suite