Mise en production du nouveau site d'ebizproduction - Drupal 8

Cette fois-ci, notre équipe Drupal a pris en charge un projet qui nous concerne de près et pour cause, il s’agit de la refonte intégrale du site Drupal 8 d’ebizproduction, positionnée comme agence digitale à Marseille.

La précédente version nous avait servi de "laboratoire" puisqu'il s'agissait de notre premier site Drupal 8, avant la libération définitive, propulsé par une version bêta du core. Nous avons profité de la mise à jour pour reprendre l'UX, l'UI et la structuration des contenus.

Rafraîchissement de l’identité graphique

En plus d’une optimisation UX, cette refonte a fait l’objet d’une réflexion sur l’évolution de la charte graphique pour apporter un vent de fraîcheur à l’identité d’ebizproduction. Ryad Karar, responsable des interface et Directeur Artistique digital, a proposé un dégradé (le retour des dégradés !) fin de couleurs - tendance graphique 2017 - partant d’un violet vibrant vers un bleu indigo. Ce style bicolore rappelle le bleu historique d’ebizproduction pour son dynamisme et un violet qui vient « réchauffer » le visuel, tout en gardant un style flat design. Par ailleurs, le logo a également subi un léger relooking pour donner un coup de modernité au design. Nous avons choisi d’adopter une nouvelle police - Metropolis - pour sa clarté et sa lisibilité. En somme, un site simple où le design sait mettre en valeur chaque partie du site.

Un site Drupal 8 simple mais efficace

La question du CMS pour la refonte ne s’est pas posée, le site ebizproduction.com a été réalisé avec Drupal 8. Nous avons repris le socle de base Drupal 8 en évitant les modules superflus pour une maintenabilité optimale.

Quelques modules Drupal 8

Dans ce projet, nous avons utilisé plusieurs modules contribués dont :

• Paragraphs : il nous a permis de proposer des bundles de paragraphes variés.
• Superfish : un module qui intègre les plugins Superfish jQuery et nous a servi pour le menu.
• Webform : le module historique pour réaliser des formulaires complets et intuitifs.
• Retina Images : ce module nous a permis de traiter les images avec les effets, en haute résolution. 
• Geolocation Field : ce module a été utile pour l’intégration des données sur la carte GoogleMap. 
• Facebook_Page, Instagram Block, Twitter : ces modules ont permis de faire le lien avec les derniers posts publiés et de rejoindre ebizproduction sur les réseaux sociaux.

Un peu de développement custom pour personnaliser certains éléments… dont :

• Le système de réservation pour les formations : le site propose de réserver sa session de formation. Un développement sur-mesure a permis de mettre à jour dynamiquement le nombre de places disponibles en fonction des réservations effectuées.
• L’intégration des derniers post de Linkedin : un développement sur-mesure a été nécessaire pour faire remonter automatiquement les derniers statuts publiés sur le réseau social professionnel. 

Spécifications côté front-end

Nous avons utilisé Foundation 6.1 pour le front-end. Le site est fluide et occupe toute la largeur de l’écran. Entre autres, nous avons mis en place :

• Le plugin Tabs de Foundation : il a permis de réaliser plusieurs onglets sur une même page pour mieux organiser l’information et faciliter la navigation (ex : page formation développeur Drupal). 
• Un effet « slick » comme dans les galeries photos, pour faire défiler « l’aperçu » des différents contenus (cf. bloc 4 de la page d’accueil).
• Le sticky menu dans la colonne de gauche des pages grâce à du développement JavaScript sur-mesure (ex : page Open Source).

Et vous, qu’en pensez-vous ?