Mise en production du nouveau site Drupal de l’émission de TV Stars Of Science !

L’agence bluedrop.fr a conçu, réalisé et développé le site Drupal 7 de l'émission de télé-réalité Stars Of Science, organisée par la Qatar Foundation : www.starsofscience.com. Cette émission a pour but d' encourager les innovateurs en stimulant leur intérêt pour les sciences et la technologie. 

L’expérience utilisateur au cœur des priorités 

Ce projet Drupal a placé l’optimisation de l’expérience utilisateur comme objectif principal pour une expérience de navigation intuitive en proposant l’effet parallaxe et un scroll dès la page d’accueil. Le visiteur, en un défilement de souris, accède aux principales rubriques dont les blocs de vidéos et de photos. Pour plus d’animation, le « background » de la page d’accueil est une vidéo en full height qui se lance automatiquement. Le menu principal et le sous menu sont déroulants, avec une particularité pour le dernier qui permet de visualiser en un passage de souris les dates les plus importantes telles que la date de casting, la date de validation des clients, la date de la finale, et bien d’autres : pratique !  

Galerie photos full height et vidéos full width

En scrollant la page d’accueil, le site propose de visualiser les photos et vidéos des émissions. La galerie s’affiche en pop-up plein écran et permet le défilement des autres photos. Tout comme la vidéo en background de la page d’accueil, la galerie pop-up est en full height, tandis que les vidéos sont en full width en respectant les ratios pour un visuel en plein écran.  De plus, le site propose également la recherche par filtre pour visualiser les photos d’une saison en particulier.

Responsive Design au point !

Tout a été pensé pour offrir des conditions de navigation optimales sur les différents terminaux : PC, tablettes et mobiles. Le responsive design du site permet de disposer d’un menu latéral droit lorsque la taille de l’écran est plus restreinte.

Les fonctionnalités de partage pour les réseaux sociaux

Parce que quand on voit du contenu pertinent on a envie de le partager, le site propose des boutons de partage vers les réseaux sociaux tels que Facebook, Twitter et Linkedin et même un bouton pour directement copier le lien de la page, en dessous du contenu ! De plus, le footer propose également des boutons pour suivre l’émission Stars of Science sur les réseaux sociaux.

Une meilleure visibilité des dates de diffusion : le calendrier

Le site propose un calendrier pour consulter les dates des prochains castings, des prochaines diffusions d’émissions et la finale : vous ne raterez aucune émission ! 

FAQ

Pour apporter une aide à la recherche d’information, le site dispense également d’une FAQ pour trouver les réponses aux questions susceptibles d’apparaître et d’accéder rapidement à des informations plus précises concernant l’émission avec un simple déroulement de la réponse en cliquant sur une question.

Un site bilingue !

Pas de panique, le site est bilingue vous pouvez switcher entre l’anglais et l’arabe en un clic ! Que ce soit le menu ou le contenu : tout est traduit !

Un site Drupal 7

Pour la création de ce site nous avons utilisé le socle Drupal 7 et des modules contribués dont : 

• NodeQueue : il permet de créer et d’ordonner une liste de nœuds en configurant une liste d’attente selon des spécifications. Ce module est pertinent, si vous voulez mettre en évidence certains éléments d’une section.
• Focal Point : module utile pour choisir la partie la plus importante d’une image en ne sélectionnant qu’un seul point sur l’image.
• YouTube Field : il propose un champ pour insérer une vidéo YouTube dans n’importe quelle entité. Les vidéos sont responsive et peuvent jouer sur la taille de l’écran. 
• Custom Breadcrumbs : il permet de configurer le fil d’Ariane page par page en fonction de son URL.
• Conditonal fields : un module sympa pour gérer un ensemble de dépendance entre les champs, selon la spécification de conditions.

Le front-end a été réalisé avec Foundation 6 et les librairies JavaScripts suivantes :

• Foundation 6 : le projet a demandé l’utilisation des librairies comme Dropdown, Reveal, Off-Canvas, Accordion Menu et Sticky ;
• Jquery.youtube Background.js : pour la vidéo en background de la page d’accueil ;
• Lightgallery.js : pour réaliser le pop-up de la galerie photos.

Le lead développeur Joseph témoigne sur les difficultés de ce projet Drupal :

«  En plus d’une dead-line serrée, les difficultés de ce projet ont résidé dans les conditions d’affichage des blocs suivant les phases de l’émission puisque le tout doit être administrable par le client. En plus, la traduction de l’anglais vers l’arabe n’a pas été évidente niveau Front-end à cause du RTL (right to left de la version arabe) - nous devions adapter le menu et le contenu pour tout inverser grâce à des variables dans Sass ! Enfin, on a également rencontré des limites concernant le fil d’Ariane puisque le projet demandait une configuration très fine en utilisant des termes spécifiques demandés par le client. Cette difficulté a été contournée grâce au module Custom Breadcrumbs qui permet de couvrir le plus de cas d’usages comme les views, les panels, les termes de taxonomy, les chemins et les types de contenus.»

Le site : starsofscience.com