La société Cisbio Assays SA a confié le projet de refonte du theming actuel de son site : cisbio.com et de son blog corporate, à l’agence experte Drupal bluedrop.fr. Le projet consistait en la refonte intégrale du site pour disposer d'un niveau de responsivité élevé...
La société Cisbio Assays SA a confié le projet de refonte du theming actuel de son site : cisbio.com et de son blog corporate, à l’agence experte Drupal bluedrop.fr. Le projet consistait en la refonte intégrale du site pour disposer d'un niveau de responsivité élevé. Les équipes de Cisbio et de bluedrop.fr en ont profité pour proposer une refonte graphique et ergonomique du site, dans un esprit de collaboration et d'agilité élevé.
La refonte graphique et ergonomique
Propulsé par Drupal 7, le core du site n'a pas été modifié. Il convenait également de ne pas modifier les flux d'import de contenus issus du système d'information concernant les produits et leurs documentations. Les travaux menés en graphisme et UX design ont par contre contraints les équipes à proposer de nombreuses modifications à la structure des données pour proposer une adminsitration plus simple, rapide et normée des contenus proposés sur le site. L'adaptation "responsive et adaptative" des interfaces, motivée par les contraintes en SEO et structure de l'audience, doit permettre en outre :
- Une amélioration des conversions et des leads ;
- Une facilitation d'administration - et du temps de traitement des contenus à diffuser sur le site.
Un thème de Foundation 6
L’équipe de bluedrop.fr a proposé un blank thème motorisé par Foundation 6. Après une longue expérience avec Oméga4, Foundation 6 a séduit notre équipe front-end pour garantir un design fluide, une responsivité de qualité, ainsi qu’une compatibilité navigateurs optimisée. La méthode pour réaliser le projet a été la suivante :
- Etape 1 : Découpe statique des principaux gabarits avec Foundation 6 et Gulp ;
- Etape 2 : Theming Drupal - reprise du code statique HTML compatible avec Drupal et ajout des fonctions Drupal.
Certains types de contenus peuvent être difficiles à organiser pour un thème responsive efficace. C'est pourquoi nous avons utilisé le module Paragraphs pour les pages produits. Ce module a permis d’ajuster les types de contenus dans le respect des standards du Responsive Web Design et à assoupli les règles de traitement de contenu.
Le retour d’expérience des développeurs bluedrop.fr
« En ce qui concerne l’intégration Front-end du site cisbio.com, nous avons utilisé Foundation 6. Pour répondre aux besoins du projet, nous avons opté pour plusieurs plugins dont : Magellan, Sticky top bar, Accordeon, Reveal, Sticky Nav, Responsive Navigation, Tabs et Orbit pour les sliders. Cet outil est génial pour un Front-end responsive mais nous avons rencontré un léger problème avec les plugins Magellan et Sticky top bar, que nous avons résolu grâce à un changement de version. […] La difficulté de ce projet ne résidait pas vraiment dans l’intégration Front-end mais plutôt dans l’adaptation des templates du site surtout lorsque le site est sous une version ancienne de CMS. Toute notre attention était concentrée dans le respect du nouveau layout des pages » Rouaida, Responsable Front-end chez Bluedrop.fr.
« Les points forts de ce projet sont bien entendu les plugins de Foundation 6 mais surtout l’utilisation du module Paragraphs de Drupal ! Nous avons fait en sorte d’avoir deux types de paragraphes : le Row et le Bloc. Grâce à ces deux types de paragraphes, nous avions la liberté de réaliser le design que l’on souhaitait ! Paragraphs est un module qui a su montrer tout sa pertinence pour réaliser un Responsive Design de haut niveau. […] D'un autre côté, nous devons reconnaître que nous avons un peu souffert sur l'intégration de pages statiques recettées dans Drupal 7. Personnellement, je doute de l'efficacité de cette méthode sur tous les projets, et nous devons mesurer à chaque fois sa pertinence, en fonction de la structure de chaque projet. » Joseph, Lead Développeur chez Bluedrop.fr.
Vister le site : cisbio.com
