18 Avril 2017

Mise en production Drupal 8 - Un site corporate multilingue

Commentaires

Nous sommes heureux de célébrer la mise en production d'un de nos tous premiers projets Drupal 8 : le site corporate www.acensi.fr. Retour sur le périmètre du projet, les principaux modules utilisés et les difficultés rencontrées...

La société de conseil et services numériques Acensi a confié à l’agence Drupal bluedrop.fr le projet de refonte ergonomique, graphique et technique de son site. Voici le résultat de quelques mois de labeur !

Un projet Drupal 8

L’agence bluedrop.fr a entrepris la refonte du site corporate de la société Acensi. C’est naturellement que nous avons choisi la version 8 pour réaliser le projet en raison de la robustesse et de la performance de cette version. La refonte a été intégrale : un nouveau socle technique, des fonctionnalités plus intuitives, un effort graphique important sur l'expérience utilisateur.

UX design et interface

Le design du site était l’une des priorités du projet. Il s’agissait ici de mettre en valeur les informations les plus importantes pour que la recherche soit la plus rapide et la plus efficace possible. La page d’accueil repose sur l’effet parallaxe pour accéder aux ressources les plus importantes. Le site a été pensé 100% responsive design, par l'intermédiaire d'un blank theme reposant sur Foundation 6, pour accéder à l’interface aussi bien sur desktop, tablettes ou mobiles.

Toujours dans le souci d’alléger la page d’accueil, le site propose le menu principal sous forme de colonne déroulante, un menu que l’on retrouve généralement sur les applications mobiles.

Un site multilingue

Le nouveau site d’Acensi permet de choisir sa langue en fonction de son pays, soit au total six langues : France (FR/EN), Belgique (FR/EN) et Canada (FR/EN). Certains contenus, notamment les offres d'emploi, sont directement liés à la langue et la locale des préférences du navigateur de l'utilisateur.

Quelques modules Drupal 8…

Voici quelques modules qui nous ont servis pour ce projet, de quoi vous donner des idées si vous souhaitez réaliser un projet Drupal 8 :

  • Views Infinite Scroll : ce module permet de charger et de diffuser des views sur une même page, pour disposer d'un scrolling infini. 
  • Yaml Form : il s'agit du module redevenu, entre-temps, le Webform !... Qui n'était pas porté en Drupal 8 au moment de la conception et du développement. 
  • Paragraphs : un de nos modules favoris,  il permet de structurer le contenu avec robustesse en créant des bundles de paragraphes plus variés. Ce module s'est avéré très utile au projet, qui demandait une dizaine de type de paragraphes différents selon le design de la page.
  • Styled Google Map : ce module permet de créer une carte Google et offre des options de personnalisation du style, des points d’intérêts et de leur icône.

Et côté Front-end ?

Comme pour de nombreux projets Drupal 8, nos développeurs front-end restent fideles à Foundation 6 pour la réalisation du projet. Nous avons utilisé : 

  • Des librairies JavaScript comme Drop Down pour le menu langue et Accordion ;
  • Le module Drupal  Slick Carousel : celui-ci permet de mettre en place des puissants carrousels responsive et flexibles en proposant de créer des breakpoints pour spécifier le nombre d’éléments visibles pour chaque breakpoint. Le module permet de changer de slides avec le doigt. D’ailleurs, nous l’avons utilisé pour le carrousel d’images en arrière plan dans la page d’accueil et pour certaines pages internes. 

Les difficultés de ce projet

Le lead développeur de ce projet confie que : « Le design a occupé une place prépondérante dans ce projet, chaque page demandait un design avancé et donc forcément beaucoup de customisations. De plus, on a encore rencontré quelques problèmes concernant le fil d’Ariane, dans certaines pages le fil d’Ariane s’affichait en fonction du menu mais dans d’autres en fonction du type de contenu ».

Pour aller plus loin : www.acensi.fr

Crédit photo : Acensi SA.