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.

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.

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.

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é.

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 ?

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..