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 !
6 mois après sa mise en ligne, les indicateurs de satisfaction du nouveau renault.com (projet de refonte global que j’ai géré pour Renault) sont au vert et en ligne avec les objectifs. Le groupe Renault a émis un communiqué de presse officiel à cette occasion : lire le communiqué de presse sur la satisfaction du renault.com, qui, je l’espère, ne tombe pas trop, justement, dans l’auto-satisfaction.
Pour explication, le renault.com abrite une enquête en ligne permanente partagée avec un grand nombre de grandes entreprises françaises. Cette initiative inédite et riche d’enseignement s’intitule le baromètre e-Corporate et est conduite conjointement par le consultant Bernard Tavernier et la société CRM Metrix. C’est grâce à cet outil que l’on peut mesurer l’évolution de la satisfaction et des critères clés d’usage du site (ergonomie, accès aux contenus, design, etc.).
Extrait du communiqué de presse : « La nouvelle version du site Internet corporate de Renault a été lancée en janvier 2009. Développé par SQLI, le nouveau portail a pour ambition de figurer parmi les meilleurs sites corporate français en qualité, en niveau de fréquentation et en notoriété. »
Pas encore de commentaire pour Retour sur expérience : le nouveau renault.com et la satisfaction : faut s'y mettre !
Un commentaire pour Projet : un blog tout neuf pour le renault.com
Lire les commentaires Ajouter votre commentaire