Une barre de navigation multi-sites pour les groupes de presse ou restez chez nous, l'info est fraîche

par Thomas Fourdin, le 23 octobre 2012, 15:31 - Lien permanent

catégorie : Réflexions - tags :

Avec la refonte récente des sites France Télévision, on voit apparaître une barre de navigation spécifique, en haut de page, pour naviguer vers les autres sites du groupe :

barre de navigation muti-sites chez France Télévisions

barre de navigation muti-sites chez France Télévisions

Cette approche d’une barre multi-sites est également apparue cette année sur lemonde.fr et certains autres titres du groupe (mais pas tous ?!) :

barre de navigation multi-sites au Monde

barre de navigation muti-sites au Monde

Bien sûr, cette forme de navigation est surtout connue aujourd’hui pour être mise en œuvre sur l’ensemble des services Google, suite à l’arrivée de Google+. Cette intégration allant de pair avec l’uniformisation des designs, des comptes utilisateurs et des conditions générales d’utilisation :

barre de navigation multi-sites sur les services Google

barre de navigation muti-sites chez Google

On la retrouve également sur certains groupes de presse étrangers :

barre de navigation multi-sites chez Fox News

barre de navigation muti-sites chez Fox News

barre de navigation multi-sites chez la BBC

barre de navigation muti-sites à la BBC

En dehors des groupe de presse, beaucoup de grands groupes privés ou d’organismes alimentent un grand nombre de sites Internet et doivent favoriser la navigation à l’intérieur de leur présence en ligne. Cette approche pourrait donc être amenée à faire des petits.

Connaissez-vous d’autres illustrations de cette fonctionnalité ? Pensez-vous que les multinationales vont bientôt s’y mettre ?

Pas encore de commentaire pour Une barre de navigation multi-sites pour les groupes de presse : faut s'y mettre !

Étrennez les commentaires

Retour sur Paris Web : petit guide pour choisir les conférences

par Thomas Fourdin, le , 11:52 - Lien permanent

catégorie : Non classé - tags :

Jeudi et vendredi derniers c’était la conférence Paris Web, repaire incontesté de professionnels du métier (du côté de la réalisation) et grand moment de partage. Celle-ci était la troisième édition à laquelle j’assistais et j’en profite pour vous aider à vous y retrouver si jamais vous y assistez un jour.

Logo de la conférence Paris Web

Petit panorama des conférences

Les conférences « Coup de fouet »

L’orateur scande ses phrases en vous regardant dans les yeux (oui, vous !). La présentation aligne un mot par page, écrit en capitales 100pt. Promotion exceptionnelle sur les points d’exclamation.

Les ustensiles d'Inidiana Jones : fouet et chapeau

» Comportement à adopter : Rugissez, trépignez, tapez du pied, faites un peu de sport en rentrant aussi, ça détend et ça vous évitera de vous en prendre à vos proches. Reprenez-en un peu toute l’année à chaque fois que vous manquez d’énergie, les vidéos servent à ça.

Les conférences « Je le savais »

On parle d’une technologie à la pointe mais, en bon professionnel, vous l’expérimentez déjà depuis un certain temps. Vous en savez donc autant que l’orateur, vous partagez les joies et les peines qu’il expose aujourd’hui en public. Vous n’êtes pas là pour apprendre mais pour partager, vous vous sentez complices.

» Comportement à adopter : Abondez dans son sens, hochez la tête en cœur, osez un « oui oui », « complétement » ou « bien d’accord » discret de temps à autre, applaudissez fortement. Si vraiment vous pensez que vous auriez dû être à la place de l’orateur, prenez le micro pour dire « je n’ai pas vraiment de question mais plutôt une remarque à faire / un complément à apporter ».

Les conférences « Vends-moi du rêve »

L’orateur travaille au web de demain dans une fondation ou entreprise que vous osez à peine épeler. Il est venu vous montrer ce que vous, pauvre suiveur, pourrez envisager en production dans 5 ans. Vous en venez à espérer un monde meilleur où les navigateurs seraient à jour et les clients compréhensifs. Vous vivez dans un rêve, vous en êtes conscient mais ça vous fait planer.

» Comportement à adopter : Laissez-vous porter mais préparez le retour à la réalité.

Les conférences « C’est du chinois »

L’orateur jongle avec les sigles techniques et les abréviations absconses. Sa présentation intègre des morceaux de code. Vous avez visé trop haut et vous êtes trompé de salle. Vous vous sentez petit et incompris. D’autant plus quand le public se met subitement à rire d’un bel ensemble sans que vous n’ayez rien vu de potentiellement drôle.

Schéma d'utilisation d'Appcache pour Lanyrd.com par Jake Archibald

Schéma d’utilisation d’Appcache pour Lanyrd.com par Jake Archibald

» Comportement à adopter : Restez alerte, mimez la compréhension et glanez au moins quelques termes à ressortir en société.

Les conférences « Groupe de paroles »

L’orateur invite immédiatement le public à participer. Tout le monde est invité à partager ses peines. L’ennemi (client, collègue, utilisateur) est dehors mais, là-dedans, entre nous, on est bien, on se comprend.

» Comportement à adopter : Lâchez-vous. Livrez-vous. Si prendre la parole vous rebute, osez une timide larme. Si votre voisin pleure, prêtez-lui votre épaule compatissante.

Recette pour une journée de conférence optimisée

  1. Commencez par une « Vends-moi du rêve » pour émerger en douceur ;
  2. Enchaînez avec une conférence « Groupe de paroles » pour revenir sur terre et vous libérer de vos tracas  ;
  3. Tentez une « C’est du chinois » au cas où ;
  4. Alternez avec une conférence « Je le savais » pour reprendre confiance en vous ;
  5. Finissez par une « Coup de fouet » pour doper votre courage ;
  6. Rentrez chez vous mettre tout ça en pratique !
  7. Revenez surtout l’année prochaine.

Pas encore de commentaire pour Retour sur Paris Web : petit guide pour choisir les conférences : faut s'y mettre !

Étrennez les commentaires

Lancer son service Web ? oui mais… ou les erreurs trop entendues des entrepreneurs Web

par Thomas Fourdin, le 11 juin 2012, 16:14 - Lien permanent

catégorie : Réflexions - tags :

Mon expérience des start-up se résume à une tentative avec bitwiin.com, le côtoiement, par ce biais, de l’incubateur de l’ESSEC et quelques lectures régulières sur les blogs dédiés au sujet. Mais il se trouve qu’on rencontre souvent en ce moment des porteurs de projet qui cherchent autour d’eux des avis et des conseils. Histoire de formaliser ce que j’en pensais, j’écris ce billet.

Je vais commencer par les erreurs classiques mais qui ont le don de me faire bondir à chaque fois :

Accessible n’est pas visible ! ou Le projet ne se termine pas une fois le site en ligne, il y commence
L’erreur classique des créateurs de sites (start-up ou autre d’ailleurs) est de croire que le projet consiste à mettre en ligne un site. Ensuite, ils considèrent que la valeur ajoutée de leur concept se suffisant à lui seul, les internautes vont affluer et garantir le succès des créateurs. En réalité, c’est tout l’inverse et on ne le répétera jamais assez : un site en ligne ne sert à rien si il n’est pas visible et cette visibilité se construit et s’alimente jour après jour. Je veux parler ici de promotion, de référencement, de politique éditoriale, d’animation, de partenariats. Une masse de travail quotidien pour, enfin, parvenir se démarquer dans une concurrence bien plus complexe et dense que sur n’import quel autre support.

Le web c’est automatique ! ou si Mark Zuckerberg travaillait ça se saurait
Plus globalement, je suis intimement persuadé que seul le travail se paye et c’est valable sur Internet comme partout ailleurs. Autrement dit, si vous avez trouvé le concept qui marche tout seul (ou grâce aux gentils internautes qui travaillent gratuitement), vous avez sans doute tout faux. Wikipedia a besoin d’une armée de contributeurs, Meetic a investi dès le début beaucoup d’argent dans la modération, Google doit affiner son algorithme quotidiennement, etc. Pour lancer un service sur le web, il faut anticiper le coût de cette main d’œuvre d’exploitation, celle qui fait la valeur ajoutée et la promesse de rentabilité.

Tiens-toi bien Facebook ! ou Ajoutez-en moi encore un peu
Quand on conçoit un service, on aimerait qu’il soit parfait et complet dès le début. On le compare à des services existants qui ont quelques années derrière eux. La tentation est grande alors de vouloir tout mettre dans son service. La personnalisation, les alertes automatiques, le social, le mobile, la vidéo, le support en ligne, l’apéro. Mais un service ainsi conçu ne sera jamais prêt pour une mise en ligne. De plus, il sera impossible de communiquer simplement sur le lancement d’un service tentaculaire qui se veut remplacer du même coup Facebook, Google et eBay. Au contraire, le web possède cette plasticité qui permet de mettre en ligne très vite un embryon de service, de le confronter aux usages, d’attirer l’attention… et de réorienter le cap si nécessaire.

Demain ? le monde. ou Pourquoi choisir son public quand tout le monde nous voit
Corollaire de l’erreur précédente : le web n’ayant pas de frontière, pourquoi limiter son audience ?! Tout simplement pour mieux la servir. A l’échelle du monde, vous serez toujours un minuscule acteur. Pour votre niche ou dans une échelle locale, vous pouvez devenir légitime voire incontournable. Et bichonner votre cible, l’écouter, échanger, la comprendre. C’est cette proximité là qui fait la différence et votre valeur ajoutée.

Et la technique ? ou La magie d’Internet est cachée entre les 0 et les 1
Vous avez remarqué que je n’ai pas parlé de technique ? D’après moi, les questions de solutions techniques, de développements, de serveur haute capacité sont des questions secondaires. Vous pourrez toujours mettre en œuvre l’architecture parfaite une fois que vous serez convaincu de votre concept et surtout, une fois que vous aurez convaincu d’autres de vous accompagner. D’ici là, foncez, bricolez, testez ! De toute façon, les technologies évoluent tellement vite, qu’à entendre vos futurs développeurs, il faudra tout reprendre à zéro dans deux ans.

Ne soyons pas (que) pessimistes. On peut aussi lancer aujourd’hui un service qui fonctionne, qui fait vivre ses créateurs et qui (soyons fous !) fait avancer le web. Mais dans ce cas, il faut user de bon sens, de bon sens et de bon sens et prendre la démarche par le bon bout :

Se lancer, se lancer, se lancer ou On ne va pas attendre que ça fonctionne pour vérifier si ça marche
Pour ça, pas besoin d’avoir un site fini ou un service complet. Dès que vous pouvez donner de la visibilité sur votre site et commencer à rencontrer vos futurs acteurs (utilisateurs, clients, partenaires, etc.), faites-le ! A coup de prospectus papier si il faut, ou de démarchage téléphonique. Si la sauce prend, vous serez plus motivé et serein pour la suite, mais aussi beaucoup plus crédible et légitime sur le sujet.

Mesurer, mesurer, mesurer ou Compte-là-dessus, tu m’intéresse
Se lancer tôt c’est bien mais autant en tirer toutes les informations concrètes possibles c’est mieux. Histoire de confronter enfin à la réalité tous ces chiffres qu’on serinait dans le business plan. Pour ça, mettez en ligne, branchez un outil statistique, suivez les requêtes dans le moteur de recherche, ouvrez grand la boîte aux retours utilisateurs, soyez accessible et disponible sur les réseaux sociaux. Autant de riches informations sur les usages ou de contacts clés pour la suite.

Trouver du monde ou La sauce est meilleure à plusieurs
Enfin, parlez de votre projet avec tout le monde, tout le temps, partout. Présentez-le, expliquez-le, testez les réactions, cherchez vos futurs utilisateurs, vos futurs investisseurs, vos futurs partenaires partout autour de vous. Vous parvenez à convaincre des gens qui ont le droit de vous fâcher ? Mieux vous parvenez à trouver des associés ou des partenaires qui y croient suffisamment pour y mettre du temps ou de l’argent ? Vous devez tenir quelque chose. Mais, par ailleurs, si votre famille, votre mari ou vos amis proches sont convaincus que vous tenez l’idée du siècle, ça doit plus vous rassurer sur leur attachement que sur votre idée.

Exploitez-vous ! ou Votre valeur est LA valeur
Et si vous cherchez des idées, cherchez proche de vous. Sachez capitaliser sur votre singularité, vos passions, votre réseau, vos compétences spécifiques et, même, vos besoins insatisfaits. Si votre service émane naturellement de votre personne, cela vous donnera un point d’appui fort pour vous lancer et une longueur d’avance appréciable sur la concurrence.

Voilà pour aujourd’hui… Que du bon sens mais quand on se lance dans ce genre de projets, mieux vaut se les répéter encore et encore pour éviter les déconvenues douloureuses. Si vous souhaitez en apprendre plus sur ce domaine, ses pièges et ses joies, je vous invite à lire le blog (et les archives) de Guilhem Bertholet : www.guilhembertholet.com.

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