Le groupe chimiste français Arkema a décidé en 2012 de céder une partie de ses activités et ainsi donner naissance à une nouvelle société indépendante KEM ONE, spécialiste des solutions vinyliques intégrées, filiale du groupe Klesch.
La Direction de la Communication de cette société en gestation a fait appel à mes services pour piloter le double projet de mise en place du site Internet (www.kemone.com) et de son pendant Intranet (à accès réservé naturellement)
Enjeux du projet
Délais courts : trois mois de délais entre la validation officielle de création de la société et son lancement ;
Organisation naissante : des équipes en cours de nomination et de mise en place, une identité en cours de formalisation ;
Solution complète : La volonté de la communication KEM ONE de mettre en place dès le lancement une plate-forme complète comprenant un site Internet et un site Intranet ;
Périmètre de mon intervention
Analyse des besoins (via des ateliers animés en interne) et rédaction du cahier des charges ;
Pilotage de l’appel d’offre et sélection de l’agence Web (ici l’agence Smile, spécialiste de l’open-source) ;
Encadrement de la réalisation : relecture des livrables, ateliers fonctionnels et techniques, validations, recettes ;
Accompagnement éditorial : rencontre avec les métiers contributeurs, formation ;
Questions / Réponses avec la Direction de la Communication KEM ONE
Pourquoi un dispositif Internet et Intranet en ligne dès le lancement de la société ?
Nous avions besoin d’un support de communication interne et d’un support externe dès le lancement. A la création, nous avons eu beaucoup de communication et de pédagogie à faire sur la nouvelle structure, son fonctionnement, ses objectifs, et le dispositif web a été un outil indispensable.
Pourquoi utiliser les services d’un consultant Assistant à Maîtrise d’Ouvrage ?
Nous n’avions pas les compétences techniques ni assez de temps disponible en interne pour assurer la réalisation du projet dans les temps impartis. Il nous fallait quelqu’un pour « compléter » les équipes pendant la durée du projet.
Thomas a été l’interface entre l’agence web et nous. Il a permis, dans un premier temps, de choisir un prestataire fiable, puis de faire comprendre notre besoin et nos enjeux à ce prestataire. Il a également été l’interlocuteur des différents contributeurs internes. Nous n’aurions pas eu le temps de réaliser tout ce travail de qualité sans un consultant compétent.
Que retenir du projet et de la collaboration ?
Le web est un domaine qui nécessite de réelles compétences, et surtout une rigueur dans la gestion de projet. Faire appel à un consultant nous a permis de mener à bien un projet qui n’était pas gagné d’avance. Notre collaboration a été une réussite car complémentaire. Nous connaissions le projet, l’entreprise, et les objectifs de communication. Thomas nous a apporté les connaissances techniques et la rigueur. Nous avons également beaucoup appris de sa méthode et des spécificités du web.
Pas encore de commentaire pour Projet KEM ONE : Internet & Intranet : faut s'y mettre !
Quand j’étais encore salarié Renault, j’avais eu pour stimulante mission de refondre le site renault.com. L’ambition était de valoriser des contenus variés et séduisants et de tenter quelques approches sociales. Le site seul ne suffit plus aujourd’hui à porter ces deux dimensions qui sont, entre temps, devenues essentielles. L’équipe Renault en charge a donc décidé aujourd’hui d’y associer un blog officiel Renault au ton plus libres et aux contenus plus ouverts. J’ai été mandaté (merci à eux) pour réaliser ce tout nouveau blog : http://blog.renault.com.
Pour Renault, l’envie était donc de proposer un contenu au ton moins officiel que sur le site corporate Renault.com. Une façon d’inviter l’internaute à decouvrir l’envers du décor et à le convier à une conversation plus libre. L’idée était aussi de relayer les grands événements de l’entreprise (le blog à été lancé au moment du salon automobile de Genève) sous forme de journal de bord. Le format « blog » était donc naturellement indiqué.
Propulsé par WordPress
Côté technique, le choix s’est porté très rapidement sur WordPress pour sa simplicité d’utilisation et puisque Renault avait déjà déployé cette solution pour d’autres projets. Un thème dédié multilingue (français, anglais) a été développé pour l’occasion. Parmi ses spécificités :
un billet en une de page d’accueil mis en valeur graphiquement ;
une vidéo YouTube embarquée et visible dès le résumé du billet sur la page d’accueil ;
une palette de couleurs appliquée par catégorie de billets.
La solution WordPress est particulièrement adaptée à ce genre de personnalisation. Son code reste, en effet, simple à manipuler pour déployer des petites fonctionnalités originales sur un socle technique qui a fait ses preuves.
La deuxième force de WordPress est son éventail d’extensions existantes, prêtes à combler (presque) tous les besoins. Ceux-ci ont complété le dispositif :
SI CAPTCHA Anti-Spam pour contrer le spam ;
Simple Social Buttons pour le partage sur les réseaux sociaux ;
Related Thumbnails pour proposer dès billets relatifs< ;
WP-Polls pour intégrer des sondages dans la colonne laterale.
Une vigilance particulère est tout de même de mise pour ne déployer que des plugins testés et recommandés par la communauté. Il entre aussi dans le cadre de ma prestation de tenir les version de WordPress à jour.
Graphisme et contenus inédits
Graphiquement, le blog s’appuie sur la structure proposée par la charte graphique du groupe Renault. Le webdesign mis en place se ménage aussi quelques écarts dans son application : une manière d’incarner sa liberté de ton. En particulier, une trame grise basée sur le fameux losange de la marque remplace le fond blanc habituel, trop institutionnel pour l’approche choisie ici.
Un effort particulier a été mené pour veiller à la lisibilité des contenus et à une intégration facile et esthétique des médias dans le corps de page (photos, vidéos). Dans cette approche, les choix ont été vers le plus simple en matière de polices, de couleurs et de rendu graphique.
Renault Entreprises est la division du constructeur automobile Renault spécialisée dans la vente de véhicules à destination professionnelle. Sa présence en ligne était jusqu’à peu appuyée par des contenus dédiés en marge des sites pays grand public. Renault a aujourd’hui souhaité mettre en ligne un accès plus global à cette activité sans développer pour autant un site complexe.
facilité de maintenance du fond et de la forme pour Renault en proposant un modèle HTML et CSS modulable et personnalisé (voir ci-dessous).
Périmètre de mon intervention
proposition graphique à partir des modèles donnés par la charte graphique Renault ;
découpage HTML / CSS ;
rédaction de la documentation d’accompagnement pour la mise à jour du HTML.
Solution adoptée : un framework CSS personnalisé
Les framework CSS sont constitués d’un ensemble de règles de styles déjà paramétrés. Ils permettent de construire une grille modulable et esthétiquement rythmée. Même si décriés par les puristes car mélangeant parfois fond et forme, ils facilitent énormément le travail de démarrage sur un projet de découpage HTML/CSS. Ici, une fois de plus, j’ai opté pour le framework BluePrint CSS mais d’autres existent.
Le framework CSS instaure une structure et une nomenclature formalisée des feuilles de styles et facilite d’autant la collaboration entre les différents intervenants. En particulier ici, le framework déployé permet aux équipes Renault Entreprise de s’appuyer sur un ensemble de règles CSS déjà établies pour organiser la forme et le fond à leur convenance dans le respect des règles de la charte graphique Renault.
Mon travail a donc consisté à faire se rejoindre la philosophie du framework CSS BluePrint (gestion des colonnes et gouttières, choix typographiques, éléments de navigation) avec la charte commune à l’ensemble des sites Internet Renault.
A l’arrivée, Renault dispose donc maintenant d’un kit de découpage contenant un fichier de base HTML (bandeau et pied de page prévus par la charte) et d’un jeu de fichiers CSS à appeler pour construire une grille modulaire et y intégrer des éléments déjà « habillés » (titres, liens à chevrons, boutons, etc.).
Un design « dans le navigateur »
L’utilisation d’un framework CSS peut, dans certains cas, brider la créativité de l’infographiste en le maintenant dans une structure trop précise. Mais dans le cas de Renault, la charte graphique est déjà très précise sur la structure de la page et la mise en forme des éléments. L’usage d’un kit de découpage dédié est donc naturellement adapté.
Ici, le travail a permis dans un premier temps de définir les éléments génériques des pages web Renault puis, à l’aide de ce template générique, de proposer des mises en œuvres abouties du contenu Renault Entreprises. Les échanges avec les équipes Renault ont donc été facilités par une vision partagée du résultat des différentes pistes graphiques directement dans le navigateur.
A retenir
Les enjeux de communication en ligne des entreprises militent pour la mise en œuvre d’un kit de découpage HTML / CSS modulaire et cohérent avec la charte web. Cela revient à déployer un framework CSS personnalisé.
Pour des sites ou pages Internet de taille réduite, une mise en application des différentes options graphique directement dans le navigateur facilite les échanges.
Pas encore de commentaire pour Projet pour Renault, une page simple pour la vente aux entreprises : faut s'y mettre !
La Charte des Bonnes Pratiques d’Élevage est une démarche qualité du métier d’éleveur bovin en France. La Charte existe depuis 10 ans mais ne s’était pas encore dotée d’un site Internet dédié. C’est désormais chose faite depuis septembre 2011 : www.charte-elevage.fr.
Mon travail sur ce site a été réalisé dans un mode très ouvert et collaboratif puisque le client était representé par mon propre frère, Simon Fourdin, Chef de projet à l’Institut de l’Élevage. Cela nous a aidé pour itérer rapidement ensemble sur les choix de design et d’ergonomie.
Enjeux du projet
délais courts (site réalisé en un mois) ;
cible grand public et volonté de contenus pédagogiques servis par un design attrayant ;
interactivité pour aider la pédagogie ;
contenu administrable via l’outil de gestion de contenus préconisé : Drupal ;
Périmètre de mon intervention
découpage html / css à partir des pistes graphiques fournies par Simon ;
ajout d’une couche interactive pour mettre en scène les grands points de la Charte et proposer des quizz (à l’aide de la librairie JavaScript JQuery et des plugins PopIn et QTip) ;
paramétrage de l’outil de gestion de contenus Drupal (types de contenus et vues, extensions nécessaires à son usage) ;
intégration des maquettes sous Drupal et saisie du jeu de contenus initial ;
Rédaction du manuel utilisateur et de la documentation technique ;
Questions / Reponses avec Simon Fourdin, Chef de projet en charge du projet Charte des Bonnes Pratiques d’Élevage
Pourquoi un site web pour la Charte ?
Comme vous l’avez dit, la Charte des Bonnes Pratiques d’Elevage est une démarche qui met en avant les bonnes pratiques des éleveurs de bovins en France.
Elle a deux missions principales : faire progresser les éleveurs sur leurs pratiques et communiquer auprès du grand public sur le travail réalisé.
Le premier point est celui sur lequel on travaille surtout depuis la création de la Charte il y a 10 ans. Il y a eu des avancées remarquables.
Avec la dernière version qui vient d’être lancée, on a voulu se donner les moyens de travailler davantage sur le deuxième point, celui de la communication.
Un site web à destination du grand public et des éleveurs est l’un des premiers gros chantiers sur ces aspects « com ». Maintenant, il faut qu’on continue sur cette lancée !
Pourquoi passer par un indépendant ?
La décision de créer ce site a été prise tardivement, mais une fois la décision arrêtée nous voulions que le site soit opérationnel pour septembre, au moment du lancement de la dernière version de la Charte. Il nous fallait quelqu’un de disponible rapidement –ce qui n’est pas aisé l’été ! – et dans un budget raisonnable. Nous avons de plus l’habitude de travailler avec des indépendants (notamment pour les créations de documents).
Que retenir du projet et de la collaboration ?
Le fait d’avoir un seul intermédiaire est quelque chose d’appréciable. Un simple binôme maître d’œuvre/maître d’ouvrage permet d’avancer vite et bien, on perd le moins de temps possible sur la partie « gestion du projet » pour se concentrer sur le contenu et la forme. Cette efficacité a d’ailleurs été appréciée par l’ensemble des collaborateurs et des financeurs.
De notre côté, nous avons particulièrement apprécié la disponibilité du chef de projet, qui a toujours répondu dans les plus brefs délais.
Enfin, avec l’outil de gestion utilisé Drupal, nous avons un site extrêmement simple à utiliser ce qui va nous faciliter la vie pour les mois et années à venir !
A retenir
la collaboration rapprochée avec le client du site permet de « monter » ensemble le site, de tester rapidement plusieurs pistes et de les ajuster en direct ;
Drupal est un outil de gestion de contenu incroyablement souple dans les types de contenus possibles. Il est un peu surdimensionné pour un site comme celui de la Charte mais se prêtera très bien aux importants sites de communication ;
Pas encore de commentaire pour Projet charte-elevage.fr : La Charte des Bonnes Pratiques d’Élevage : faut s'y mettre !
Pour remettre les mains dans le cambouis et faire mentir l’adage des cordonniers mal chaussés, j’ai entamé mes nouvelles activités en refondant mon site vitrine thomas-fourdin.net. Je vais décortiquer un peu ici les enjeux et les choix faits.
Le but de thomas-fourdin.net est de présenter mes activités, de faciliter le contact et de relayer mes contenus et mes actualités. La structure typique d’un blog est donc toute trouvée :
une page d’accueil statique pour la présentation ;
une autre page pour les options de contact ;
les billets pour les nouvelles.
Propulsé par, devinez quoi, WordPress..
Ça tombe bien, les sites de type « blog » sont les plus courants et l’outil tout désigné de gestion de contenus, WordPress, le CMS le plus utilisé au monde. J’ai donc abandonné l’ancien outil qui propulsait ce blog depuis 7 ans (Dotclear), avec les raisons suivantes en tête :
la communauté DotClear semble être bien moins nombreuse et avancer moins vite que celle de WordPress ;
avec le nombre d’utilisateurs qu’on lui connait, WordPress est entouré d’une ménagerie d’extensions qui permettent de faire un peu tout (souvent n’importe quoi) et toujours beaucoup plus qu’un simple blog ;
dans le même temps, la souplesse de l’outil et la possibilité dé bricoler facilement par dessus m’est très sympathique ;
enfin, et c’est sans doute la principale raison, l’interface de gestion de WordPress a toujours été plébiscitée par mes précédents clients, plus simple et conviviale à leurs yeux. Autant déployer pour soi même les solutions qu’on propose, non ?
Design et structure de page quand on n’est pas webdesigner
Pour le design, j’ai fait le pari de partir de la page blanche. Comme le webdesign n’est pas ma spécialité, j’ai principalement misé sur le contenu et les typographies pour un résultat très sobre (trop diront certains, je les connais) qui me plait bien et qui, d’après moi, me ressemble assez.
Côté structure de page, j’ai choisi un format plutôt étroit (720 pixels de large) pour, encore une fois, centrer la structure sur les contenus. Cette unique colonne centrale permet aussi de libérer de l’espace sur les côtés pour y glisser des informations de second rang. Enfin, ainsi conçue, la structure s’adapte ainsi tout naturellement pour proposer une expérience similaire sur mobile.
Pour la page d’accueil, je me suis très fortement inspiré de la page de présentation du produit BaseCamp[1] de l’agence 37Signals dont le travail et la philosophie m’attirent beaucoup. On peut même sans-doute parler de plagiat, je le reconnais bien volontiers et j’espère qu’ils ne m’en tiendront pas rigueur. Cette mise en page très longue qui présente les différentes promesses et les témoignages, appellée « long sale letter » leur avait elle-même été inspirée par un billet du site visualwebsiteoptimizer.com[2].
Ma page de présentation au format long sale letter
Pour la police, j’ai utilisé uniquement Georgia, parce que je la trouve esthétique et lisible à la fois en titre et en corps de texte. Je m’en lasserai peut-être bientôt et ce sera alors l’occasion de tester les nouvelles possibilités @font-face en matière de police de caractères.
La découpe (HTML5 / CSS3)
Côté intégration HTML / CSS, le site est développé en HTML5 même si cela se limite ici aux nouvelles balises sémantiques de structure.
Pour les CSS, je suis parti du framework CSS blueprint[3] pour ses fonctions de reset et de typographie. Cela permet en effet d’instaurer très facilement un rythme vertical agréable à l’œil. Pas de grille, en revanche, sur ce site puisque toujours une seule colonne. Pour le style des différents élements HTML et notamment pour certains éléments récurents comme les blocs d’infos, les citations, les messagesd’avertissements, les formulaires , j’ai beaucoup puisé sur le BootStrap[4] fourni par l’équipe Twitter.
Lancement (sans fanfare)
Pour la mise en ligne, j’ai du procéder à la migration des anciens contenus DotClear (100 billets). Pour cela, j’ai passé le flux RSS sous dotclear à 100 éléments et utilisé l’option d’import depuis un RSS dans WordPress (barbare mais efficace en l’absence de solution éprouvée pour une telle migration). J’ai aussi transféré tout le jeu d’images de contenus dans un dossier dédié WordPress puis remplacer les urls absolues des images directement dans la base de données avec une requête MySQL adaptée. Seul regret : les quelques commentaires esseulés sur l’ancien blog ont été malheureusement perdus dans la bataille.
La structure de permaliens étant différente entre l’ancienne version et la nouvelle, j’ai rapidement bricolé de faux templates pour récupérer la liste des urls des 100 billets originaux sous DotClear et celles des billets migrés sous WordPress. J’ai ensuite intégré l’ensemble des redirections, billet à billet, dans le .htaccess et ajouté les redirections nécessaires pour les flux RSS et les catégories principales.
C’est pas fini !
Me reste encore quelques manquements à corriger :
Pour coller à ma mise en page avancée des billets (et notamment les encarts débordants à droite), je suis toujours obligé d’éditer mes billets en HTML. Il faut que je creuse sur les options des éditeurs WYSIWYG disponibles dans WordPress ;
De la même manière, je fais toujours actuellement les « gestes typographiques qui sauvent » (espace insécable devant la ponctuation essentiellement) manuellement en HTML. Là aussi, il faut que je cherche une extension efficace pour cela ;
Pas encore intégré le moteur de recherche natif de WordPres ;
Allez, je m’y remets..
2 commentaires pour Projet : refonte de mon site thomas-fourdin.net
Pas encore de commentaire pour Projet KEM ONE : Internet & Intranet : faut s'y mettre !
Étrennez les commentaires