Le site Responsive Design du mois : CNRS Le Journal

Exemple de responsive design : CNRS Le Journal Le nouveau site du CNRS sous Drupal 7 utilise un thème sur mesure en HTML5 et CSS3 basé sur les media-queries pour gérer le responsive. 23% des visites vient du mobile.

CNRS Le Journal est un nouveau média d'informations scientifiques à destination du grand public. En projet depuis 2 ans, le premier numéro a été mis en ligne début mars avec un double objectif. Tout d'abord, d'un point de vue éditorial, il s'agit pour le CNRS de répondre à la demande du grand public en matière d'informations scientifiques. Ce à quoi CNRS Le Journal répond en décryptant et contextualisant des résultats de recherche, en provenance aussi bien du CNRS que d'autres sources scientifiques. 

Mais le pari de CNRS Le Journal est également technique, avec l'ambition affichée dès le départ d'en faire un média en ligne en phase avec son temps, et épousant les dernières tendances en matière d'ergonomie et d'interface web. Avec, au centre de ce projet, un gros chantier en matière de responsive design

Une app mobile dans les tuyaux

5
L'interface en responsive design de CNRS Le journal. © Capture JDN

"Concevoir un site en full responsive design est apparu comme une évidence pour s'adapter à tous les supports, aussi bien PC fixes que tablettes, ordinateurs portables et smartphones", fait savoir Marco Cucchi, responsable du pôle web et multimedia à la direction de la communication du CNRS. Au départ pourtant, une app mobile avait été envisagée, mais il a finalement été décidé de faire de la conception d'un site web moderne, correspondant aux attentes des internautes en termes de nouveau standard web, la priorité numéro un. Mais la réalisation d'une app n'est pour autant pas jetée aux oubliettes. Le CNRS envisage d'en lancer une dans les prochains mois.

"Nous avons souhaité mettre en ligne un site moderne qui change des sites habituels, et c'est ce qui nous a conduit à cette interface épurée. Nous n'avons pas calqué un site de recherche scientifique américain en particulier, mais avons plutôt intégré des innovations éditoriales, ergonomiques ou de design issues de multiples sites", explique Matthieu Ravaud, rédacteur en chef du site. 

Réalisé sous Drupal 7, CNRS Le Journal a nécessité de faire appel à trois prestataires web, chacun spécialisé dans un domaine en particulier : Stéphanie &Co (devenue depuis CosaVostra) pour l'AMOA en binôme avec les équipes maîtrise d'ouvrage du CNRS, l'agence Cellules pour le design et l'expérience utilisateur ainsi que Propal pour le développement et l'hébergement du site.

La solution CMS open source choisie par CNRS Le Journal se montre très à l'aise pour gérer les multiples contenus (textes, vidéos, images...) du site. Parmi les développements effectués dessus figure la mise en place d'une gestion de média personnalisée, afin d'offrir à l'équipe du Journal une bibliothèque de médias gérant droits d'auteurs et paramètres d'affichage. 

35% des consultations en provenance des réseaux sociaux 

Autre développement : un thème Drupal sur mesure en HTML5/CSS3 utilisant les media-queries pour la gestion du responsive, sachant que les fonctions de partage sur les réseaux sociaux (Facebook, Twitter, Dailymotion...) sont basées sur le module Drupal Metatag. 

Des fonctions de partage qui n'ont pas mis longtemps à trouver leur public. "Après quelques jours de lancement, on a constaté via notre solution analytique web Piwik que 35% des consultations proviennent des réseaux sociaux et 3 700 partages ont été réalisés sur ces réseaux dès la première semaine", fait savoir Marco Cucchi. A ce jour, le ratio visiteurs par type d'affichage est de l'ordre de 77% pour les postes fixes, et de 23% pour les mobiles. 

Côté infrastructure web, CNRS a fait le choix de faire appel au couple Nginx et PHP-FPM et mis en place un proxy-cache, afin de servir très rapidement les utilisateurs anonymes et les contenus statiques. Le site est aussi déployé sur plusieurs machines virtuelles résidant sur des serveurs physiques ayant des capacités de hot-swap (échangeables à chaud), afin de ne pas rendre le site indisponible en cas de faille d'un serveur physique. 

Drupal / CNRS