Projet : un blog tout neuf pour le renault.com ou La liberté éditoriale comme moteur

par Thomas Fourdin, le 15 mars 2012, 11:27 - Lien permanent

catégorie : Projets - tags :

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.

Bien entendu, ce sont les contenus qui font la différence sur une opération de ce type. Je vous invite donc à visiter dès maintenant le blog et apprécier le boulot formidable effectué par les équipes éditoriales de Renault. Vous pouvez par exemple vivre le salon de Genève en direct, découvrir la candidate française à l’Eurovision ou revivre la rencontre avec David Guetta.

Projet pour Renault, une page simple pour la vente aux entreprises ou la force d'un framework CSS personnalisé

par Thomas Fourdin, le 13 février 2012, 17:43 - Lien permanent

catégorie : Projets - tags :

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.

Résultat : Une simple page, sobre et efficace, en français et en anglais et disposant d’une adresse dédiée : http://www.corporate-sales.renault.com.

Capture d'écran de la page Renault Entreprises

Enjeux du projet

  • délais courts (page réalisée en 2 semaines) ;
  • visibilité maximale donnée aux contacts ;
  • 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 !

Étrennez les commentaires

La difficile collaboration à long-terme entre une PME et son agence Web ou l'amélioration continue survivra-t-elle à la routine ?

par Thomas Fourdin, le 31 janvier 2012, 17:30 - Lien permanent

catégorie : Réflexions - tags :

Dans un précédent billet (Pour une PME, dompter son existence en ligne est pari impossible ?), je notais combien le web s’était complexifié ces dernières années. A quel point il devenait difficile pour une entreprise dont ce n’est pas le métier de penser et d’optimiser sa présence en ligne. Outre la spécialisation grandissante des métiers du web, une dimension supplémentaire, celle du temps projet, vient encore d’avantage « gripper » les relations entre le petit annonceur et ses prestataires Internet.

Dans ses supports de communication du XXe siècle (!), l’entreprise entretenait essentiellement un mode dit « projet » avec ses agences. Les étapes étaient clairement successives depuis la définition jusqu’à la livraison (impression, diffusion) du produit fini. Avant de reprendre un nouveau projet pour la campagne suivante. Et tenter, autant que possible, de tirer les enseignements du bilan précédent.

Avec le web, le schéma d’amélioration continue de sa présence en ligne amène une temporalité bien différente. Il ne s’agit plus de collaborations éphémères et régulières, mais plutôt d’une coopération permanente entre l’annonceur et ses agences. Le passage brutal d’un mode « projet » à un mode « exploitation continue » qu’il s’agit, pour les entreprises, d’apprivoiser.

En effet, ce nouveau mode de collaboration se révèle beaucoup plus complexe à manier. L’entreprise et ses agences se trouvent embarquées ensemble pour une durée conséquente sans réelle possibilité de se séparer. Sur la majorité des projets auxquels il m’a été donné de participer, une agence web a, par exemple, été choisie lors de la création ou refonte d’un site. Bon gré mal gré, l’annonceur continue à la faire intervenir jusqu’à la prochaine refonte mais le cœur n’y est plu. Les tâches d’aménagement ou de corrections sont trop minces et trop peu visibles pour attirer l’enthousiasme de l’agence. L’annonceur, obligé de faire appel à l’agence en charge de la réalisation initiale, se sent pris au piège et trouve tout trop cher. L’urgence est beaucoup moins palpable que lors du projet initial où une date officielle de mise en ligne avait été annoncée en grande pompe. La réactivité s’en ressent et la liste des « petites choses » à faire s’allonge…

C’est pourtant sur cette gestion de la vie du site que les enjeux sont les plus grands. Lors de la création d’un dispositif en ligne, les idées ont fière allure mais ne sont pas passées au crible de leur efficacité réelle. Une fois en ligne, des données beaucoup plus factuelles pointent du doigt les faiblesses qu’il faudrait corriger. Ces « petits aménagements », appuyés sur des chiffres beaucoup plus concrets, font réellement la différence !

Peu de pistes d’amélioration pour faciliter cette collaboration continue entre l’annonceur et ses agences web sinon de compter sur une « éducation » à mener des deux côtés pour aboutir à une meilleure compréhension mutuelle. Pour que les objectifs soient les mêmes et l’amélioration continue une vraie force.

Pas encore de commentaire pour La difficile collaboration à long-terme entre une PME et son agence Web : faut s'y mettre !

Étrennez les commentaires

Pour une PME, dompter son existence en ligne est pari impossible ? ou le web en 2011, une affaire de spécialistes

par Thomas Fourdin, le 19 octobre 2011, 18:41 - Lien permanent

catégorie : Réflexions - tags :

En 2011, la spécialisation de l’Internet pousse dehors les petits et moyens acteurs, difficilement en mesure de tenir le rythme et les budgets.

L’apogée du « 2.0 » signifiait la conquête du web par le grand public. Plus besoin d’être bidouilleur ou d’avoir les moyens d’une grande entreprise pour être enfin visible et diffuser ses contenus et idées en ligne.

Pour les petites et moyennes entreprises, c’était le temps de la facilité. Pour qui avait un peu de jugeote, il devenait possible d’exister à moindres frais en ligne. Une plate-forme de blogs, un CMS gratuit, un compte paypal et l’essentiel était assuré.

les 4 âges de l'Internet

4 âges pour l’Internet ?

Mais avec la professionnalisation galopante d’Internet, ses usages et ses outils deviennent toujours plus complexes à maîtriser. Il faut désormais percer à jour les arcanes des liens Adwords ou des Facebook Ads, tenter de suivre les virages des groupes et pages Facebook, y soigner sa relation, surveiller son « e-réputation », décrypter les API, géolocaliser, doper son SEO, décrypter les règles juridiques, analyser ses statistiques, produire des vidéos, décliner ses services sur mobile, maîtriser des CMS spécialisés. Autant de disciplines différentes impossibles à maîtriser à temps partiel.

Alors que chez les pure players, le nombre de fiches de postes distinctes dédiées à Internet se comptent désormais en dizaines. Alors que les agences se spécialisent qui dans le social CRM, qui dans les web-analytics, qui dans le brand content, etc. Alors que les budgets pour capter l’attention d’un internaute sursollicité augmentent chaque jour. Comment, pour un petit ou moyen acteur sur le web, réussir à maintenir un dispositif digital optimisé et soutenir le rythme des innovations et tendances ?

Maintenir une compétence suffisante en interne est pari impossible ; s’attirer les services d’un expert pour chaque domaine un gouffre financier. Que faire ?

Favoriser les parcours de lecture sur les sites de contenus ou tentative de typologie des liens de rebonds sur les sites de contenu

par Thomas Fourdin, le 29 septembre 2011, 21:52 - Lien permanent

catégorie : Réflexions

Pour les sites dont le contenu est le centre (sites de presse, site thématiques), un des leviers de performance est de multiplier le nombre de contenus vus par un même internaute. Pour cela, il faut constamment lui proposer d’autres contenus susceptibles de l’intéresser. Il s’agit donc d’accompagner efficacement son parcours utilisateur (ou « parcours de lecture ») au sein des contenus.

Plusieurs critères permettent d’optimiser la sélection des autres contenus à proposer. En voici une sélection que j’essaierai de tenir à jour avec les exemples trouvés en ligne. N’hésitez pas à me corriger ou à m’en signaler d’autres dans les commentaires.

Critères d’optimisation des parcours de lecture
selon le contexte du contenu
les étapes de lecture la pagination, « à lire ensuite »

articles paginés sur nytimes.com

du même auteur -
traitant de la même thématique même rubrique, mêmes tags ou mots-clés

mots-clés liés sur 20minutes.fr

dans d’autres formats même sujet mais dans d’autres formats. Ex : info flash, chiffres, vidéo, diaporama, animation, etc. Possible sous forme de « dossier »

contenus sous d’autres formats sur lemonde.fr

partageant une même méta-donneé Ex. : même année, même lieu, même artiste, etc.

autres films partageant des membres du casting sur allocine.fr

de précision d’un élement du contenu glossaire, page « topic »

accès aux pages globales « topic » sur nytimes.com

d’utilisation du contenu par le biais de quizz, jeux, débats
selon le contexte des lecteurs
les contenus plus vus -

contenus les plus lus sur figaro.fr

les contenus les plus partagés envoyés par e-mail, partagés sur les réseaux sociaux

contenus les plus partagés via Facebook sur lemonde.fr

les contenus les plus commentés

contenus les plus commentés sur france24.com

les contenus les mieux notés, les plus recommandés si une évaluation rapide est proposée aux lecteurs
selon le contexte personnel du viseur sur le site
l’historique du lecteur les contenus déja consultés sur le site
le profil du lecteur âge, sexe, adresse, profession, etc.
le statut du lecteur Exemple : nouvel inscrit, abonné, primo-visiteur
les centres d’intérêt du lecteur si déclarés lors de l’inscription
selon le contexte personnel hors site
les centres d’intérêt déclarés ou collectés sur un autre site à partir des données utilisateurs Facebook par exemple
vos amis ont aimé, vous recommandent -

recommandations des contacts Facebook sur nytimes.com

selon le contexte de provenance du visiteur
la requête saisie dans les moteurs de recherche idenfication de l’expressoin de recherche à l’origine de la visite
le site référent site de provenance du visiteur
la campagne ou le support de provenance depuis un réseau social, de la publicité, un e-mailing, etc.
sans contexte
au hasard -

article au hasard sur fr.wikipedia.org

Pas encore de commentaire pour Favoriser les parcours de lecture sur les sites de contenus : faut s'y mettre !

Étrennez les commentaires