Cité de la musique

Mon premier gros site en responsive design.

Cite-de-la-musique

Il a été publié en mars 2013 et le graphisme a été réalisé par Inook.com.

J’ai assuré la partie front-end development et mon frère d’arme Xavier Cognard était en charge du back-end et de la base de données.

Gros challenge qui m’a permis d’apprendre énormément sur le sujet.

Quelques détails techniques

Ce site utilise HTML5, CSS3, SASS, COMPASS, Javascript, jQuery, ASP.NET et SQL mais aucun CMS.

Voici une liste de livres qui m’ont aidé à le construire :

Nous avons aussi eu recours à ces plug-ins :

  • Flexslider: pour tous les carrousels (plug-in jQuery)
  • Isotope: pour l’affichage des résultats dans l’agenda (plug-in jQuery)
  • MediaElement.js: pour les éléments HTML5 <video> et <audio>
  • jQuery Countdown Plugin: pour le décompte en page d’accueil annonçant le prochain concert en live

Quelques points intéressants sur ce site

Images

Les images ont bien sûr été problématiques, comme dans chaque projet responsive. Nous avons opté pour la version ASP d’Adaptive images et elle a fini par très bien fonctionner. Ayant en général une douzaine d’événements par jour avec potentiellement plusieurs images pour chacune, il nous fallait une solution robuste.
Autre aspect technique des images, nous avons dû mettre la description et le copyright des images directement dans les meta de celles-ci. C’était la solution la plus simple pour nous afin d’afficher les légendes bien sûr, mais aussi de remplir la balise alt de chaque image. Notre système d’information maison (Euterpe) marche très bien pour décrire les activités mais n’a pas été conçu pour gérer les média et nous n’avons jamais trouvé le temps de concevoir un CMS pour les images, du coup à chaque fois que nous devions réutiliser une image, il fallait la recopier… pas génial génial.
Sur la page d’accueil, j’ai dû recalculer la hauteur du carrousel principal en fonction de la largeur de la page, mais aussi des 3 images de droite qui devaient être alignées avec la colonne correspondante. Et ensuite, il fallait que ça marche avec du texte par-dessus… parfait.

Un player audio

L’autre gros challenge de ce site a été la musique : bien sûr, on s’attend à en avoir sur un site qui vend des concerts et des activités musicales, non ?! Donc, il nous fallait un player en HTML5 qui soit aussi responsive. Mais d’où venait la musique elle-même ? De 3 sources différentes :

  • en interne, la Cité de la musique capte les concerts quand elle en a le droit et les moyens
  • l’Orchestre de Paris, qui était en résidence à la Salle Pleyel, possède son propre fond
  • et pour le reste, nous avons conclu un partenariat avec Apple et iTunes qui fournissaient leur catalogue d’extraits sonores

Là où ça devient intéressant c’est que – en tout cas à l’époque – Apple n’avait pas de widget responsive ! Nous avons donc dû le créer pour jouer leur musique sur notre site. Ah ah ah !
L’autre partie vraiment amusante du problème était le choix des extraits, pas directement de mon ressort mais il nous a fallu trouver la manière la plus efficace de le faire, et vous imaginez la complexité de la tâche. Sans compter que parfois le groupe ou  l’orchestre n’aime pas les extraits choisis et qu’on doit les changer. Et bien sûr que ça arrive !

Une mise à jour rapide

Ce site a plus ou moins fermé en janvier 2015 avec l’arrivée du nouveau projet de la Philharmonie de Paris. C’est un projet de plus de 400 millions d’euros avec notamment une salle symphonique et des espaces d’exposition. Je faisais partie de l’équipe qui a réfléchi aux contours de son projet digital mais ça, c’est une autre histoire…