Cité de la musique
Project management — Design — Front-end development
My first large-scale responsive website.
The site was released in March 2013 and the visual design was from Inook.com. My team and I worked with them very closely for months so we would be happy with both the result in terms of interactions with the user and the look of the site, as it was their first large-scale responsive website as well.
I personally believe that the best ideas can be found when mixing a team that worked for years in the field with new-comers with fresh ideas, which is what we did.
I was responsible for the front-end development while my pal Xavier Cognard was in charge of the back-end and the information system (we called it Euterpe).
That was a big challenge and I learned a lot while doing it.
Technical references
It uses HTML5, CSS3, SASS, COMPASS, Javascript, jQuery, ASP.NET and of course SQL but no CMS.
Here’s a list of books that I referenced while building it:
- CSS maintenables avec Sass et Compass (Eyrolles)
- Intégration web — les bonnes pratiques (Eyrolles)
- Scalable and Modular Architecture for CSS (Smashing)
I also used some plug-ins:
- Flexslider: for all the carousels (jQuery plug-in)
- Isotope: for the result in the agenda (jQuery plug-in)
- MediaElement.js: for HTML5 video and audio elements
- jQuery Countdown Plugin: for the countdown on the home page to the next live broadcast
Interesting things about this site
Images
The images were particularly a pain of course, as in every responsive website. We used an ASP version of Adaptive images and it finally worked like a charm. Having an average of a dozen activities a day with potentially several pictures for each, we needed something robust. Another technical aspect for images is that we had to put legends and copyrights of images in the meta of each file. It was the simplest thing to do for us to display legends of course but also alt property. Our home-made internal information system (Euterpe) works very well for activities but we never had the time to implement some kind of CMS for the images so it meant that every time we used the same image for another activity, we had to duplicate it… oh well.
On the home page, I had to recalculate the height of the main carousel depending on the width of the page because the 3 images on the right had to be aligned with their column but ending at the right side of the viewport. And then you had text on it… perfect.
An audio player
We also had a major challenge with music: of course, you expect music on a website that sells concerts and music activities right?! So, we had to have an HTML5 responsive player. But where is the music coming from? We had 3 different sources:
- internally, the Cité de la musique is recording some of the events, when it has the rights and money to do so
- the Orchestre de Paris has its own recordings
- and for the rest, we made a partnership with Apple and iTunes to provide their catalog of extracts
And that’s where it gets better: at that time anyway, Apple didn’t have a widget that was responsive! We had to build one to play their music on our website. Ah!
So, this audio player is based on MediaElement.js and shows you:
- Which extract you are listening to
- Title and composers of the extract
- A cover image if it exists
- its origin: iTunes/Cité de la musique/others
- a link to buy the song if it is from the iTunes catalog
- plus everything you would expect from an audio player
The other really funny part was to pick extracts for every concert, not really my problem but we had to find an effective way to do it in our information system as you can imagine the complexity of it. And what if a band/orchestra didn’t like the extracts chosen? Oh yes this happens…
…and a video player
Finally, the last thing I’ll talk about is the video player. It is also based on MediaElement.js. The problem here was to find an elegant solution to display internal videos from our own archive but also YouTube videos, without compromising the look of the website and, even more so, the user experience by having the same player for both.
The solution was to combine the use of two plug-ins: fancyBox and MediaElement.js. The first one would open a centered splash screen on every device with an HTML5 video tag rendered by MediaElement.js. Luckily, the YouTube API allows you to play their videos with just a discreet logo in the right bottom of the video for the first couple seconds. Hooray!
A quick update
This website had to be put down as the new project Philharmonie de Paris opened in January 2015. It’s a €400+ million project, including a philharmonic concert hall and exhibition spaces, and I was part of the team that designed its digital presence, but that’s a different story…
Originally published at www.ventrebleu.com on March 7, 2014.
