HTeuMeuLeu

This week, I encountered a nice brain teaser in front end development. After 2 hours of brainstorming, I finally found a solution that pleased me. I posted the problem on Twitter, then on my blog. To my surprise, I had a lot of answers, and some of them were actually pretty ingenious. So I decided to translate it in english so you english folks can enjoy it too.

So here it is :

It’s a pretty common visual effect, especially in print magazines. However, I found out that it was not that intuitive to reproduce this effect simply in CSS.

Here are the rules :

1. The text must not be divided by any tags (so no span for each lines, no br)
2. You can use as many tags as you want around the text
3. No JavaScript, only HTML and CSS
4. The white background must follow around the text
5. There is a margin inside the white background around the text of 20px on the left and right, and about 10px on top and bottom
6. The text is dynamic, so we must be able to easily change it and still have the visual effect
7. The solution must work on modern browsers (IE9, Firefox 13, Chrome 19, …)

To help you get started, I created a sample code on jsFiddle. You’re free to edit the HTML and CSS, as long as you respect the rules above.

I invite you to share your realisations on the comments below. I’ll publish the solution I came up with later this week. Have fun, and good luck to all !

Cet après-midi, j’ai rencontré un joli casse-tête en intégration. Après 2 heures de remue-méninges, j’ai fini par trouver une solution qui me convenait. J’ai posté le problème sur Twitter, et à ma grande surprise j’ai eu beaucoup de réponses, dont certaines assez astucieuses, mais ne collant pas tout à fait à ce que je souhaitais faire. Alors avant de donner la solution que j’ai trouvé, j’ai décidé de faire durer le suspens un peu plus longtemps et de poster le problème ici.

Voici le casse-tête en question :

C’est un effet graphique assez classique, en particulier dans la presse papier. Pourtant, il se trouve que ça reste relativement complexe à reproduire de manière simple en CSS.

Voici les règles à respecter :

1. Le texte ne doit contenir aucune balises (donc pas de span pour chaque ligne, pas de br)
2. Vous pouvez utiliser autant de balises que vous voulez autour du texte
3. Pas de JavaScript, que du HTML et CSS
4. Le fond blanc doit suivre le contour du texte
5. Il y a une marge à l’intérieur du fond blanc autour du texte de 20px à gauche et à droite de chaque ligne, et d’environ 10px en haut et en bas
6. Le texte est dynamique, et on doit donc pouvoir le modifier en conservant l’effet
7. La solution doit fonctionner sur les navigateurs modernes (IE9, Firefox 13, Chrome 19, …)

Pour vous aider à démarrer, j’ai mis à votre disposition sur jsFiddle un exemple de code HTML et CSS. Vous êtes libres de modifier le code HTML et CSS, tant que vous respectez les règles ci-dessus.

Je vous invite à partager vos réalisations dans les commentaires. Mercredi soir, je publierais la solution que j’ai trouvé, et je sélectionnerais mes solutions préférées parmi les commentaires. Amusez-vous bien, et bonne chance à tous !

Hier soir, le journal de 20H de France 2 a diffusé un reportage sur Woody Allen avec en fond, une citation qui lui était attribuée sur sa vision de la mort et « la vie à l’envers ». Je connaissais cette citation et je l’adorais, mais j’étais convaincu qu’elle était de l’excellent George Carlin. Après une recherche sur Google, il s’avère que cette citation vient en fait du comédien Sean Morey lors d’un passage au Tonight Show dans les années 1980.

Voici la citation en question :

La chose la plus injuste avec la vie, c’est la façon dont elle se termine. La vie est dure. Elle prends beaucoup de temps. Et qu’est-ce que vous avez à la fin ? La mort ! Qu’est-ce que c’est que ça, une récompense ? Je pense que le cycle de la vie est à l’envers.

Vous devriez mourir en premier, comme ça, c’est fait. Ensuite vous vivez dans une maison de retraite. Vous vous faites expluser quand vous êtes trop jeune. Vous récupérez une montre en or. Vous allez au travail. Vous travaillez quarante ans jusqu’à ce que vous soyez suffisamment jeune pour apprécier votre retraite. Vous vous droguez, vous buvez de l’alcool, vous faites la fête, et vous vous préparez pour aller au lycée. Vous allez au collège. Vous devenez un enfant, vous jouez, vous n’avez aucune responsabilités. Vous devenez un petit bébé, vous retournez dans l’utérus. Vous passez neuf mois à flotter dedans.

Et vous finissez en un orgasme !

J’ai toujours eu le sentiment que c’était un peu la même chose pour les sites web. Chaque mise en ligne, c’est un peu comme la mort du projet. Tout le monde a passé des mois et des mois à travailler d’arrache-pieds sur le projet. Six mois se sont écoulés. Et puis une fois en ligne, c’est terminé. On croise les doigts pour que tout ce qu’on a conçu fonctionne comme on l’espérait. On regarde un peu les statistiques les premiers jours. Et puis plus rien.

« Qu’est-ce que c’est que ça, une récompense ? » Je pense que le cycle de vie d’un projet web est à l’envers.

D’abord vous devriez commencer par mettre votre site en ligne, comme ça, c’est fait. Débrouillez vous pour installer un WordPress ou un Magento avec un thème par défaut, et insérez quelques contenus que vous aviez déjà rédigé sur un coin de table. Voilà. Nous sommes au premier jour de votre projet, et vous pouvez déjà commencer à gagner de l’argent avec votre site en ligne.

Maintenant que votre site est en ligne, vous allez pouvoir commencer à le concevoir. Mais pas en  regardant votre boule de cristal ou en déballant vos 5 ans d’études et tous les bouquins que vous avez lu sur la conception web (ça revient au même). Non, vous allez pouvoir concevoir votre site à partir de vraies données, celles de vos visiteurs. Est-ce que les visiteurs trouvent facilement mes coordonnées ? Est-ce que les visiteurs arrivent facilement à ajouter un produit au panier ? Non ? Et bien commençons par travailler sur ces points.

Petit à petit, vous allez pouvoir améliorer la structure et le contenu de votre site. Vous pouvez en profiter pour améliorer le référencement naturel de votre site en affinant vos résultats jour après jour. Vous allez pouvoir retravailler l’intégration de votre site et sa charte graphique, toujours en vous basant sur les statistiques des premières visites et les axes à améliorer. Vous allez même découvrir des besoins de nouveaux modules à développer que vous n’auriez jamais imaginé au départ. Et tout cela en continuant à gagner de l’argent.

Six mois se sont écoulés. Votre site est en ligne depuis le premier jour. Vous avez déjà des clients, des visiteurs fidèles, et vous savez que votre site réponds à leurs besoins. Vous avez déjà gagné pas mal d’argent, et vous avez presque déjà rentabilisé votre investissement initial. Vous pouvez désormais sereinement envisager la suite et sabrer le champagne !

Alors, bien sûr, tout ceci est un peu tiré par les cheveux. Peu de projets sont adaptés pour travailler ainsi, et peu de clients seraient prêts à prendre le risque d’avoir un site en ligne au premier jour qui ne colle pas à leur idéal. Mais pourtant, je suis persuadé que cette méthodologie serait parfaitement adaptée au web.

La semaine dernière, Alex Limi et Trond Werner Lansen, de la toute nouvelle équipe Design et Stratégie Produit chez Mozilla, ont présenté dans une conférence interne un prototype de Firefox sur iPad.

Surnommée Junior, cette version se veut plus ergonomique et totalement adaptée au support. Le constat de départ d’Alex Limi est que la version de Safari sur iPad est une simple copie de la version bureau, et qu’elle est souvent pénible à utiliser et peu adaptée au support.

L’interface de Junior est minimaliste : les sites sont affichés en plein écran, avec uniquement deux boutons en surimpression vers le bas de l’écran. A gauche, un bouton précédent. A droite, un bouton « Plus » pour accéder à une page d’option (avec les onglets ouverts, les favoris, la saisie d’une URL). En restant le doigt appuyé quelques secondes sur ces boutons, d’autres icône apparaissent (page suivante, bouton rafraîchir).

La page d’option est découpée en trois parties : l’historique et les onglets ouverts, les favoris, et un champs de saisie d’une URL. Voici quelques remarques intéressantes concernant ces 3 fonctionnalités :

• L’historique et les onglets ouverts sont fusionnés. En fait, il n’y a pas vraiment de notion d’onglets ouverts, et on trouve simplement un aperçu de tous les onglets de navigation préalablement ouverts. Dans le prototype actuel, on ne trouve pas par contre d’historique de navigation au sein d’un même onglet.
• Les favoris sont affichés sous forme d’icônes rectangulaires. Alex Limi préférait éviter d’avoir une simple liste de texte, ou les icônes carrées déjà présentées pour les sites adaptés à iOS. Il faudra donc créer un nouveau format d’icône (avec très certainement une balise meta correspondante).
• Le champs texte en bas de l’écran sert à la fois pour la saisie d’une URL ou la recherche. Curieusement, le prototype actuel utilise Bing pour l’auto-complétion.

Junior permets également de gérer facilement une utilisation multi-utilisateurs, avec un écran dédié au choix d’un profil (avec un mode invité qui fonctionne comme un mode « navigation privée »).

La nouvelle est particulièrement importante, puisqu’elle marque un changement stratégique chez Mozilla. Pour rappel, Apple interdit l’exécution de code non-natif au sein d’une application iOS. Il est donc interdit pour un navigateur d’utiliser son propre moteur de rendu. Les fabricants peuvent alors soit utiliser une vue WebKit d’iOS, ou générer le rendu d’un site à distance (comme le fait Opera Mini). Contre toute attente, Mozilla a choisi d’opter pour WebKit. Il y a à peine 18 mois, Matt Brubeck de Mozilla était plus catégorique sur l’intérêt de Mozilla pour iOS :

A moins qu’Apple ne supprime ces restrictions, Mozilla ne dépensera pas de temps et d’argent sur ce projet.

Hier, mes collègues et moi avons eu un débat virulent sur les magiciens et nos tours de magie préférés (oui, ce sont des choses qui arrivent dans un bureau rempli de développeurs). Ce qui a démarré tout ça, c’est ce tour où le magicien Cyril Takayama fait sortir des burgers d’une affiche :

Je déteste ce genre de tours. Ce n’est pas de la magie. C’est prendre vos spectateurs pour des idiots et des imbéciles. Ce tour ne demande aucune intelligence ni aucune dextérité. Tout ce qu’il demande, c’est une fausse affiche avec un faux fond et avec un vrai ami chinois derrière qui vous glisse des burgers (démonstration).

Ainsi, je me rends compte de ce qui me plaît vraiment dans la magie : le storytelling, et l’absence de préparatifs.

Ce que j’appelle le storytelling, c’est la narration, la mise en scène, la façon dont le tour est amené. J’aime beaucoup Éric Antoine pour ça. Je déteste cet autre tour de Cyril Takayma où il passe 2 minutes à faire joujou avec sa cigarette. Maintenant pour être honnête, le tour du burger était plutôt pas mal dans se sens là.

Par contre, il était mauvais pour le deuxième point : l’absence de préparatifs. Son tour ne fonctionne qu’avec son matériel, son assistant, et sous un certain angle de vue. C’est la même chose pour les magiciens qui découpent leur assistante dans une boîte à double fond. Ce qui me plaît dans la magie, c’est la spontanéité, et la capacité de réaliser un tour à partir d’un jeu de cartes classique ou d’objets du quotidien non truqués.

Vous voulez des exemples ? Je vous avais déjà parlé de Penn Jillette, et son tour « cups and balls » reste pour moi absolument fabuleux. Et puis ce tour de James Galea (à 2min30) est vraiment parfaitement exécuté :

Si je vous parle de tout ça, c’est parce que je pense que les bons intégrateurs sont des magiciens. En fait, Harry Roberts de CSS Wizardry tenait le même propos l’année dernière :

Un bon moyen d’être efficace est à travers l’illusion. Un bon exemple de ça sont les fausses colonnes en CSS; surmontant un problème complexe avec un code minimal et une illusion intelligente. Les fausses colonnes sont, encore aujourd’hui, un des meilleurs petits bouts d’illusion du développement web qui résolvent rapidement un problème qui autrement demanderait beaucoup de temps et de code.

Ça m’arrive souvent de tomber sur quelque chose de surprenant sur le web, de regarder comment ça a été fait, et d’être déçu parce que les développeurs ont simplement triché en utilisant du code supplémentaire, parfois très sale.

Pour reprendre l’exemple des colonnes de hauteurs égales en CSS, certaines solutions consistent à utiliser du JavaScript pour générer dynamiquement la bonne hauteur. Mais cette solution ne demande aucune intelligence ni aucune dextérité. Tout ce que ça demande, c’est de rajouter une plâtrée de code qui sera téléchargé en plus et exécuté après le chargement de la page.

Je suis bien plus impressionné par un code CSS simple, qui peut s’appliquer partout, avec le strict minimum de code HTML, que par des démonstrations poussives de code qui demandent une structure HTML bien spécifique.

Si votre code ne provoque pas chez vos collègues un « attends, la vache, comment t’as fait ça là », c’est que vous n’êtes probablement pas un très bon magicien.

Il y a quelques mois, un tweet anglophone avait fait le tour du web déclarant quelque chose comme ça :

Google est le nouveau Microsoft. Microsoft est le nouveau Apple. Apple est le nouveau messie.

La semaine dernière, dans le podcast The Talk Show, John Gruber et MG Siegler discutaient de cette idée :

John Gruber : Dans une vue d’ensemble, à la table de poker de la Silicon Valley, l’état d’esprit « l’ennemi de mon ennemi est mon ami » fait de Google le nouveau Microsoft. Ce sont les seuls à mettre leurs doigts dans les tartes de tout le monde, à ne se faire aucun ami, et à détruire les amitiés qu’ils avaient.

C’est toujours difficile de s’imaginer jusqu’où cette industrie peut aller en à peine 5 ans. Mais quand l’iPhone a été présenté en 2007, il y avait Eric Schmidt, invité sur scène, à faire des accolades avec Steve Jobs, et à expliquer à quel point Google et Apple sont de supers entreprises, presque frère et soeur. Apple font leur truc, Google fait son truc, c’est complètement dissocié, on s’aime, et on est très heureux d’avoir quelques uns de nos services sur iPhone. Et maintenant regardez où ils en sont.

Google se fait des ennemis de tout le monde.

MG Siegler : Exactement. Et quand vous leur en parlez, ils n’ont pas l’air d’en être conscients. Ce n’est même pas vraiment un secret, et tout le monde le voit. Et si vous n’êtes pas l’ennemi de Google maintenant, vous avez peur que Google vienne sur votre terrain parce que c’est ce que Google fait tout le temps. Je dirais que la meilleure relation qu’ils ont, c’est avec Samsung, parce que Samsung est la seule société à bien s’en sortir avec Android, mais… on verra bien ce qui va se passer avec le rachat de Motorola.

John Gruber : En effet, ils ont vraiment l’air de ne pas être conscients de ça. Et pour moi c’est la différence avec l’époque où Microsoft était l’ennemi de tout le monde. Microsoft avait bien conscience de leur rôle, et qu’ils se faisaient des ennemis de tout le monde. Qui que ce soit qui faisait des bénéfices, Microsoft voulait leur voler leur marché.  Google n’a pas conscience de ça. Google pense qu’ils sont encore les amis de tout le monde, alors que tout le monde les déteste.

C’était vraiment marquant hier, lors de la keynote de lancement du WWDC2012 d’Apple, qu’Apple faisait un bon gros doigt d’honneur à Google du début à la fin. Des petites piques de potaches (« Ice Cream Sandwich. Jelly Bean. Hey, qui c’est qui trouve ces noms ? Ben & Jerry ?« ), aux choix réellement stratégiques (abandon de Google Maps, mise en avant de résultats sportifs dans Siri, intégration profonde dans iOS de Facebook et Twitter, …), Apple semble bien déterminé à laisser Google de côté.

Le malaise envers Google se fait aussi sentir sur le web, où la relation entre Mozilla et Google me semble toujours aussi étrange. Si les deux sociétés sont officiellement « partenaires » (notamment via un contrat d’1 milliard de dollars pour les 3 années à venir), j’ai vraiment l’impression que Mozilla aurait préféré que Google reste en dehors du marché des navigateurs. Et si de mon point de vue, l’arrivée de Chrome a été une bonne chose et a donné un coup de fouet au marché des navigateurs, je ne suis pas sur que le glissement vers le statut de N°3 était dans les ambitions de Mozilla.

Dans les années 1980, une légende urbaine racontait que le groupe Van Halen exigeait avant chaque concert d’avoir dans leur loge un bol rempli de M&M’s, mais ne devant contenir aucun M&M’s marron. Il se trouve que cette légende (racontée notamment dans Wayne’s World 2) est belle et bien réelle. Mais il ne s’agit pas du tout d’une excentricité du groupe, et il y a une raison bien rationnelle derrière tout cela. Il y a quelques années, Jim Cofer expliquait sur son blog :

Van Halen était un des premiers groupes de rock à faire des concerts vraiment énormes dans des villes moyennes comme Macon, en Géorgie. Les équipes des scènes dans ces petites villes étaient habituées à ce que des groupes viennent en ville avec, au plus, trois semi-remorques pleins d’équipement. L’équipement de Van Halen demandait jusqu’à 9 semi-remorques. Il y avait beaucoup de matériel, et les équipes dans ces lieux étaient souvent submergées. Et quand les gens sont sous l’eau, ils font des erreurs. A un concert de rock, « faire une erreur » pendant l’installation a un grand nombre de conséquences possibles. Certaines erreurs n’auront aucun effet. D’autres erreurs rendent le son du groupe horrible, ce qui n’affecte que l’image du groupe. Mais certaines erreurs sérieuses peuvent tuer des gens… et c’est exactement ça dont le groupe avait peur.

Au coeur de n’importe quel concert majeur, il y a un contrat. Une grande partie des textes de ces contrats sont des mentions légales standards passe-partout, mais chaque groupe peut y ajouter des demandes spécifiques via quelque chose appelé un « avenant ». La plupart des contrats impliquant des concerts dans des lieux importants sont bourrés d’avenants, dont la plupart évoquent des détails techniques spécifiques à la mise en scène du groupe. Par exemple, un avenant pourra dire « Article 148 : Il y aura 15 prises de courant séparées de 6 mètres, espacées de manière identique, fournissant 19 ampères au total, sur des poutres suspendues au plafond, qui doivent pouvoir supporter un poids total de 2500 Kg chacune, en étant suspendues à au moins 9,5 mètres de hauteur, mais pas plus de 11,5 mètres, au dessus de la scène« . Les contrats des concerts de Van Halen avaient plusieurs centaines de demandes similaires, et leurs contrats finissaient par ressembler, comme le disait le chanteur David Lee Roth, à des « Pages Jaunes chinoises ».

Les équipes des lieux importants dans les grandes villes étaient habituées à des spectacles techniquement complexes comme ceux de Van Halen. Le groupe jouait dans des lieux comme le Madison Square Garden de New York ou l’Omni à Atlanta sans le moindre incident. Mais le groupe remarquait souvent des erreurs, parfois des erreurs significatives, dans l’installation de la scène dans les plus petites villes. Le groupe avait besoin d’un moyen pour savoir que leur contrat avait bien été lu en entier. Et voilà comment est arrivé le « bol sans M&M’s marron ». Le groupe avait ajouté une clause au beau milieu du jargon technique d’autres avenants : « Article 126 : Il n’y aura aucun M&M’s marron dans la zone backstage, sous peine d’abandon du spectacle, avec réparation intégrale. » Ainsi, le groupe pouvait simplement entrer dans un stade, et chercher un bol de M&M’s dans leur loges. Pas de M&M’s marron ? Quelqu’un a lu le contract en entier, donc il n’y a probablement pas d’erreur majeure avec les équipements. Un bol de M&M’s avec des bonbons marrons ? Pas de bol de M&M’s du tout ? Arrêtez tout le monde et vérifiez le moindre petit truc, parce que quelqu’un n’a pas pris la peine de lire le contrat.

Si vous déléguez une tâche et que vous voulez vous assurer qu’elle est bien exécutée, vous devriez toujours demander un « bol de M&M’s sans marrons » dans votre cahier des charges. J’ai trop souvent eu écho de chefs de projets ou référenceurs insatisfaits parce que telle demande ou telle préconisation n’avait pas été prise en compte, bien qu’écrite noire sur blanc dans le cahier des charges.

Dans le cas d’un référenceur, on pourrait imaginer la demande d’ajout d’une balise <meta name= »mms » content= »nobrown » /> sur une page spécifique, noyée au milieu de toutes les autres préconisations. Ainsi, pour vérifier si le travail a été fait, il suffira de commencer par vérifier la présence de cette balise.

Début mai, des ingénieurs de Facebook sont venus chez Google faire une présentation intitulée « Timeline timeline« , où comment l’outil de profilage en Timeline de Chrome leur a permis d’optimiser les pages Timeline sur Facebook, et vice-versa. Paul Irish, de chez Google, résumait sur son compte Google+ ses principales notes :

• Quand vous essayez d’améliorer la vitesse de rendu CSS d’un site, vous devez identifier le pourcentage du temps passé à exécuter les sélecteurs (« selector matching« ), au calcul des styles (« style recalculation« ), au reflow et au repaint.
• Vous êtes préoccupés par le paint ? Désactiver le rendu d’un élément avec « visibility:hidden » et voyez ce que ça donne.
• Vous êtes préoccupés par le reflow ? Sortez un élément de l’arbre du rendu avec « display:none ».
• Utilisez requestAnimationFrame pour mesurer le nombre d’images par secondes.
• Des images en background fixes sont très coûteuses en framerate.
• Chrome est assez paresseux pour décoder des images en JPG. Redimensionner une image côté client est très coûteux car Chrome garde à la fois l’image originale décodée et la nouvelle image redimensionnée en mémoire. Cela peut causer l’expulsion d’autres images de la mémoire ce qui demandera un nouveau décodage par la suite. Chrome Task Manager permets de suivre les chiffres de vos images en cache : si la consommation de mémoire est plus ou moins la même alors que vous voyez de nouvelles images, vous expulsez très certainement des anciennes images.
• performance.webkitNow() a été implémenté dans Chrome et permets de faire des mesures très précises (à la nanoseconde et même au delà).

L’année dernière, j’ai découvert (grâce à une conférence TED) Dan Meyer. Dan Meyer est un professeur de mathématiques en collèges et lycées, actuellement doctorant à l’Université de Stanford. Le crédo de Mr Meyer, c’est que les mathématiques sont partout autour de nous, et qu’il faut partir de ça pour les enseigner et les rendre intéressantes.

Il lutte contre les manuels scolaires, avec leurs problèmes tout fait totalement déconnectés de la réalité et qui utilisent de faux prétextes pour rendre intéressant les problèmes. Par exemple :

Personne, dans la vraie vie, ne s’est posé ce genre de problèmes. Et encore moins sous cette forme.

Il a donc imaginé une méthodologie en 3 actes :

1. Introduisez le problème central de votre histoire/tâche clairement, visuellement, viscéralement, en utilisant aussi peu de mots que possible.
2. Les protagonistes/étudiants surmontent les obstacles, cherchent des ressources, et développent de nouveaux outils.
3. Résolvez le problème et mettez en place une suite/extension.

Un des premiers problèmes sur lesquels j’étais tombé, et qui m’avais particulièrement plu, est celui du réservoir d’eau. Regardez la vidéo ci-dessous, et voyez si ça provoque en vous le besoin soudain de résoudre ce problème.

Lu dans une fabuleuse parodie de l’introduction en bourse de Facebook par John Flowers :

2. Publicité

Nous avons essayé de vendre notre produit aux utilisateurs mais cela a échoué lamentablement. Donc, nous nous sommes tournés vers un modèle guidé par la publicité. La façon dont ça fonctionne est que, nous donnons accès à notre produit gratuitement, puis nous appâtons les annonceurs avec la promesse de les relier à des millions de personnes qui détestent payer pour quelque chose. Étonnamment, ça fonctionne.

C’est probablement un des plus forts arguments que je retiens contre la publicité comme modèle économique. Par exemple, comment pouvez-vous attendre à ce que vos utilisateurs Android achètent vos applications alors que toute la plate-forme est poussée par la publicité ?

Réponse : vous ne pouvez pas*.

*D’après une étude Surikate publiée cette semaine (slide 28), 45,6% des utilisateurs d’Android n’ont jamais téléchargé d’application payante (contre 15,7% sur iOS).

La semaine dernière, Olivier Richenstein (designer de l’excellent IA Writer) expliquait son dégoût pour les boutons des réseaux sociaux dans un excellent article dont on pourrait traduire le titre par « Balayer la vermine » :

Vous promettant de vous rendre branché et de promouvoir votre contenu comme par magie sur les réseaux sociaux, les boutons J’aime, Retweeter, et +1 occupent un bon emplacement sur quasiment toutes les pages du World Wide Web. À cause de ça, quasiment chaque site majeur et chaque marque mondiale offre de la publicité gratuitement à Twitter et à Facebook. Mais est-ce que ces boutons marchent ? C’est difficile à dire. Ce que l’on sait pour sûr, c’est que ces boutons magiques promeuvent leurs propres marques, et qu’ils ont tendance à vous rendre un peu désespéré. Pas trop désespéré, juste un petit peu.

Il prend ensuite l’exemple de Smashing Magazine, qui tweetait récemment :

Nous avons supprimé les boutons Facebook et le trafic de Facebook a augmenté. La raison : au lieu « d’aimer » des articles, les lecteurs les ont partagé sur leur profil.

Il liste enfin les principales raisons qui l’opposent à ces boutons :

• Vous étiez au courant de l’espionnage ?
• Êtes-vous d’accord pour avoir un site plus lent à charger et au scroll cahoteux ?
• Si vous n’êtes pas connu, les boutons des réseaux sociaux vous font passer pour le chien qui attends les miettes à côté de la table. Vous avez peut-être une très belle plume et beaucoup à dire, mais vous n’aurez jamais que quelques retweets et « J’aime ». Oui, ce n’est pas juste, mais c’est comme ça. Si vous êtes connu, vous attirerez l’attention, même de vos articles les plus médiocres. Si vous n’êtes pas connu, peu importe à quel point vous êtes bon, au départ ça ne marchera pas. Le bouton qui dit « 2 retweets » sera plutôt lu comme « Cet article n’est pas terrible, mais s’il vous plaît lisez-le quand même. S’il vous plaît ?« 
• Si vous êtes connu et que votre texte n’est pas si bon, les boutons de partage peuvent sembler avares et injustes (oui, les gens sont jaloux). « 1280 retweets et vous en voulez encore ? Arf, je pense que vous en avez eu assez pour cette bouze. » Quand j’ai commencé à écrire cet article, je voulais citer un article courageux de 37signals expliquant que « c’est le contenu, pas les icônes » qui compte, jusqu’à ce que je me rende compte qu’ils ont maintenant ajouté un bouton « J’aime » et un bouton « Retweeter ».
• Sur un média plein de publicité et d’auto-promotion, chaque pixel de bruit inutile et de mendicité au clic devrait être évité autant que possible. Moins il y a de bruit, moins il y a de mendicité, moins il y a de publicité secondaires, signifie qu’il sera plus facile, et plus probable, que les gens lisent réellement votre contenu.

J’ai toujours refusé de mettre des boutons de partage sur ce blog pour des raisons plutôt techniques (et pour éviter que les pages ne mettent 3 minutes à charger). Mais ça n’empêche pourtant pas mes articles d’être partagés sur Facebook, Twitter ou même Google+. Est-ce que j’aurais plus de partages sur les réseaux sociaux en ajoutant ces boutons ? Peut-être. Est-ce que je détériorerais considérablement le temps de chargement de mon site en rajoutant ces boutons ?  Absolument.

En janvier dernier, je vous racontais comment j’avais rédigé une petite annonce pour recruter un intégrateur dans ma boîte l’année dernière. Voici le deuxième article de cette petite série vous faisant part de mon retour d’expérience.

La deuxième étape d’un recrutement, c’est d’éplucher les candidatures reçues, et de répondre à chaque candidat. L’année dernière, nous avions reçu une vingtaine de candidatures en l’espace de deux semaines (ce qui nous a suffit pour trouver la bonne personne). Mais je reçois également régulièrement des demandes de stage et de contrats professionnels tout au long de l’année. Et croyez moi, en général ce n’est pas très réjouissant.

Voici quelques points presque automatiquement rédhibitoires (et qui sont réellement arrivés) :

• Les lettres papier manuscrites. Je travaille dans le web. La dernière fois que j’ai écrit une lettre manuscrite, c’était quand j’étais en vacances dans les Alpes quand j’avais 11 ans. Et surtout, les seuls courriers papier que je reçois, ce sont les appels à cotisations de l’URSSAF, du RSI ou de la RAM. Autrement dit je n’ai déjà pas un très bon à priori de votre candidature avant même de l’avoir lu. Je me doute que c’est ce qu’on enseigne encore dans certaines universités, mais sérieusement, arrêtez ça si vous postulez pour le web.
• Les pièces jointes. Si vous m’envoyez votre C.V. ou lettre de motivation en pièce jointe, faites le impérativement au format PDF. Les formats doc ou odt ne sont pas universels, et il y a de grandes chances que ça ne s’affiche pas chez moi comme ça s’affichait chez vous. Et surtout, évitez d’envoyer une pièce jointe de 15 Mo, et préférez un lien vers votre site.
• Votre adresse e-mail. Faites attention à l’adresse e-mail avec laquelle vous envoyez votre candidature. Vous n’avez pas idée du nombre de candidat qui utilise leur adresse personnelle type « kikilefada@caramail.com » pour me contacter.
• Les fautes d’orthographe. On est en 2012. La plupart des navigateurs ont un correcteur orthographique intégré. Ce n’est plus acceptable.
• Les candidatures envoyées à la terre entière en copie. Si vous avez trop la flemme d’envoyer un mail unique à chaque entreprise qui vous intéresse, il y a des chances pour que j’ai trop la flemme de vous convoquer en entretien. Mention spéciale pour ceux ou celles qui en plus envoient leurs C.V. à toutes les entreprises en CC (et même pas en CCI).
• Les candidatures, oui mais en fait, non pas trop. Il m’est arrivé plusieurs fois de recevoir des mails du type « Bonjour, est-ce que vous recrutez, comme ça je pourrais vous envoyer mon C.V. ». Qu’est-ce qui vous retient d’envoyer votre C.V. directement ? Vous n’avez pas de timbre à payer. Si on recrute, ça évite déjà un premier échange inutile. Et si on ne recrute pas, ça nous permet de conserver vos coordonnées pour éventuellement vous recontacter lors d’un futur recrutement.

En tant que recruteur, en postant ma petite annonce, j’ai déjà une petite idée en tête des réponses que je souhaiterais obtenir. Le point essentiel, c’est de me donner l’impression que vous répondez à mon annonce, et que votre réponse n’est pas un copié/collé envoyé à l’identique à toutes les agences web de la région. Bien sûr je ne suis pas dupe, il y aura forcément des éléments communs. Mais il est indispensable que votre C.V. et votre lettre de motivation contiennent des éléments personnalisés répondant précisément à l’annonce.

Le critère déterminant pour moi, c’est d’identifier les candidats qui ont répondu aux perches tendues dans la petite annonce. J’avais volontairement glissé quelques perches pour repérer les candidats qui y paieront attention et y répondront (par exemple « Afin de développer notre activité et poursuivre nos plans de domination mondiale« , « Des connaissances en SF4, L4D2 ou WOW sont des plus non négligeables« ). Ce n’est pas forcément dramatique si vous passez à côté, mais par contre si vous y répondez, ça montre bien que vous avez bien compris le type de profil recherché.

Maintenant concernant votre C.V. en lui même, ne misez pas tout dessus. En janvier dernier, Guillaume Potier résumait très bien la situation dans un article intitulé « Développeurs & startup : vos diplômes et vos CV ne servent à rien (ou presque)« . Je passerais au mieux une à deux minutes à lire votre C.V. et votre lettre de motivation, donc n’en faites pas trop.

L’année dernière, nous avions reçu une vingtaine de candidatures en l’espace de deux semaines. C’est un volume qui reste tout à faire gérable humainement, donc j’ai pris le temps de répondre à chaque candidat. Dans quelques rares cas, je me suis permis de remonter au candidat une ou plusieurs erreurs que je considérais comme grave dans sa candidature (dans l’espoir éventuellement qu’il ne la reproduise pas).

Dans un cas en particulier, le candidat m’avait transmis un C.V. et une lettre de motivation datant de 2010 (soit vieux de plus d’un an). Je me suis permis de lui apporter la réponse suivante.

Bonjour Monsieur,

Je vous remercie de nous avoir transféré un e-mail de candidature datant de mai 2010. Mais comme vous aurez pu le remarquer dans notre annonce, nous sommes très attachés aux détails et nous recherchons un candidat rigoureux. Je vous souhaite bon courage dans la suite de vos recherches.

Cordialement.

Bonsoir,

Je n’ai pas changé la date de ma lettre de motivation, il est vrai,une erreur de ma pare, mais désolé que mes motivations n’est pas changé, j’aurais pu vous réécrire la même chose tourné d’une autre manière et cela n’aurais rien changé à mes compétences, ma rigourosité et mon envie de travailler.

Cordialement.

Croyez-moi, quand vous répondez à une annonce, ce n’est pas bien difficile de ne pas être dans les 90% du bas. Par contre, il faudra apporter votre personnalité et votre savoir faire afin de vous démarquer des 10% restants.

Si mes souvenirs sont bons, j’ai passé l’une de mes premières commandes en ligne en 2002 sur CD Baby pour acheter l’album (alors exclusif au site) Electro-Shock Blues Show de Eels. La réception de ma commande fut une excellente surprise, avec un CD gratuit rempli de MP3 de tous les autres artistes disponibles sur le site. Mais surtout, quand vous passez une commande sur CD Baby, vous recevez cet e-mail :

Rémi,

Merci pour votre commande chez CD Baby !

Votre CD a été délicatement extrait de nos étagères chez CD Baby avec des gants stérilisés non contaminés et placé sur un coussin de satin.

Une équipe de 50 employés a inspecté votre CD et l’a poli pour être sûr qu’il soit dans les meilleures conditions possibles avant l’envoi.

Notre spécialiste de l’emballage en provenance du Japon a allumé une bougie et le silence s’est abattu sur la foule lorsqu’il a mis votre CD dans la plus belle boîte enluminée d’or qu’on puisse acheter.

Nous avons tous fait une merveilleuse célébration par la suite et toute la fête est descendue dans la rue de la poste où la ville de Portland toute entière saluait « Bon Voyage ! » à votre colis, en route vers vous, dans notre jet privé CD Baby ce jour, le samedi 2 juin.

J’espère que vous avez passé un bon moment à commander sur CD Baby. C’était le cas pour nous. Votre photo est sur notre mur en tant que « Client de l’année ». Nous sommes tous épuisés mais avons déjà hâte que vous reveniez sur CDBABY.com !!

Si je parle de ça, c’est parce que cette semaine l’excellent Timothy Ferriss a laissé la parole à Derek Sivers, le fondateur de CD Baby et l’auteur de ce mail, pour ce qu’il décrit comme « l’e-mail le plus réussi au monde » :

Ce seul ridicule e-mail, envoyé avec chaque commande, a été tellement aimé que si vous cherchez sur Google « private CD Baby jet », vous aurez plus de 20 000 résultats. A chaque fois, c’est quelqu’un qui a reçu l’e-mail et qui l’a tellement aimé qu’il l’a posté sur son site web et l’a dit à tous ses amis.

Ce seul e-mail toqué a créé des milliers de nouveaux clients.

Quand vous réfléchissez à comment faire grossir votre business, c’est tentant d’essayer de penser à toutes les grandes idées, et les énormes plans d’actions qui vont changer le monde.

Mais sachez que c’est souvent les petits détails qui font vraiment vibrer quelqu’un suffisamment pour qu’il parle de vous à tous ses amis.

Le site Windows Within rapportait la semaine dernière qu’Internet Explorer 10 pourrait finalement supporter Flash dans la version Metro de Windows 8 (contrairement aux précédentes annonces de Microsoft). La nouvelle a été confirmée cette nuit, avec la sortie officielle par Microsoft de la 6ème version beta d’IE10, et d’une mise à jour de la feuille de route d’Adobe.

Mais avant que les flasheurs ne se réjouissent, il y a un tout petit hic :

Flash Player sera disponible et supporté par Windows 8 dans ses styles Desktop et Metro sur les plate-formes x86/64 et ARM.

Afin d’assurer la meilleure expérience pour les utilisateurs, Microsoft maintient une liste de compatibilité des contenus HTML et Flash qui sont connus pour bien fonctionner sur Internet Explorer en mode Metro.
Les contenus Flash qui ne sont pas dans la liste de compatibilité ne sont pas affichés en mode Metro dans Internet Explorer sous Windows 8. Les développeurs et utilisateurs auront alors certaines options pour afficher ce contenu, y compris le passage sous Windows 8 Desktop pour le visualiser.

On ne connait pas encore les sites qui auront la chance d’être inclus dans cette liste. Mais Microsoft avait déjà utilisé le même principe de liste de compatibilité pour permettre aux sites optimisés pour IE6-7-8 de s’afficher correctement dans IE9. Dans cette liste de 2590 sites mondiaux, on n’y retrouve seulement 19 domaines .fr.  Et cette liste est uniquement exclusive. Autrement dit, vous pouvez faire une demande pour en sortir, pas pour y rentrer.

Microsoft l’annonce clairement, il s’agit d’une solution temporaire pour laisser un peu plus de temps aux éditeurs de sites pour abandonner définitivement Flash et migrer vers HTML5 :

Ce mécanisme apporte une atténuation à court terme. L’expérience de navigation sur bureau et la plupart des plug-ins n’ont pas été conçus pour des petits écrans, des contraintes de batteries, et de souris. Fournir un moyen facile d’accès vers Windows Desktop est le dernier recours quand aucun contenu équivalent sans plug-in n’existe.

Si je désapprouve personnellement ce retour en arrière de Microsoft et ce choix rétrograde d’inclure Flash sous Windows 8 Metro, je concède qu’il réponds à un besoin et aux réalités du marché actuel. Mais si vous en doutiez encore, tout ça sonne vraiment comme la dernière heure pour Flash sur le web.

De plus en plus, je rencontre des pratiques absolument horribles sur des sites soit disant optimisés pour mobile. Là où j’ai le sentiment que l’ergonomie et l’utilisabilité des sites desktop s’est améliorée, j’ai l’impression qu’on fait un retour 10 ans en arrière sur mobile. Des chefs de projet, graphistes, développeurs et intégrateurs se permettent tout et n’importe quoi sans aucune considération pour les utilisateurs de leurs sites.

Les redirections automatiques foireuses
C’est sympa de vouloir me rediriger d’un site normal vers votre site mobile. Mais si c’est pour me rediriger sur votre page d’accueil mobile, et pas sur la page où je souhaitais aller, ça ne sert à rien.  Cet XKCD décrivait bien ce problème.
Exemple : La Redoute

Les alertes pour télécharger une application mobile
Écoutez, si je viens sur votre site, c’est probablement pour une bonne raison. Peut être que je serais intéressé par votre application mobile, mais clairement pas maintenant, pas tout de suite.
Exemple : La Redoute (encore)

Empêcher de zoomer
Ça, ça me laisse complètement abasourdi. On est en 2012, on a des appareils tactiles absolument  incroyables, qui me permettent de totalement m’approprier le contenu affiché, en zoomant sur ce que je souhaite regarder ou lire. Et pourtant, de nombreux sites mobiles empêchent de zoomer. Il n’y a aucune raison valable pour ne pas laisser un utilisateur zoomer. Arrêtez de faire ça.
Exemple : Amazon

Masquer la barre d’adresse du navigateur
J’aimerais bien étriper celui qui a lancé cette idée. Oh, bien sur techniquement ce n’est pas compliqué, il suffit de faire un window.scrollTo(0,1). Sauf que cette solution est la pire au monde, car elle ne tient pas compte du fait que vous ayez déjà scrollé ou pas. Et surtout en masquant la barre d’adresse et votre propre URL, vous laissez la porte ouverte au phishing.
Exemple : Amazon (encore)

Empêcher d’afficher la barre d’adresse du navigateur
Encore pire que de simplement masquer la barre d’adresse, certains sites empêchent purement et simplement de remonter pour réafficher la barre d’adresse. Ces sites utilisent en général des barres de menu en position:fixed (le tout simulé en JavaScript bien entendu, tant qu’on y est, autant faire dégueulasse jusqu’au bout). Et puis voilà. C’est fini. Vous êtes bloqués sur ce site. Le seul moyen de changer de site, c’est de fermer l’onglet, et d’en rouvrir un autre. Oh, non bien sûr, sur iOS vous pouvez appuyer sur la barre système tout en haut de l’écran pour scroller tout en haut, mais j’ai un doute sur le nombre de vraies personnes qui connaissent ce raccourci, et qui auront la présence d’esprit de l’utiliser.
Exemple : Paper.li

Ce ne sont que quelques exemples que j’ai croisé récemment. Ce qui me dégoûte, c’est que toutes ces pratiques seraient facilement reconnues comme inacceptables sur PC. Sérieusement, vous empêchez aussi à vos utilisateurs de scroller ou de zoomer sur vos sites desktop ? Non. Alors, arrêtez de le faire sur mobile.

En gestion de projets, il y a un modèle représenté en triangle qui lie les trois principales contraintes d’un projet (le temps, le coût, et la qualité). Cette théorie définit que pour n’importe quel projet, vous ne pourrez choisir que 2 des critères sur les 3.

Dixit Wikipédia :

• Vous pouvez concevoir quelque chose rapidement et de qualité, mais ça vous coûtera très cher.
• Vous pouvez concevoir quelque chose rapidement à bas coût, mais ce ne sera pas de très bonne qualité.
• Vous pouvez concevoir quelque chose de bonne qualité à bas coût, mais ça prendra beaucoup de temps.

L’intégration, c’est avant tout une histoire de balance. Vous n’aurez jamais le beurre, l’argent du beurre, et la crémière. Vous devez alors faire des choix, qui influeront directement sur le résultat final.

Il est assez courant d’entendre des graphistes râler parce qu’on n’a pas respecté au pixel près leur design. Mais si cet écart du design s’est fait au bénéfice de la performance, du référencement, de l’accessibilité et de la maintenabilité, alors on a quand même réalisé une intégration de meilleure qualité.

A l’opposé, il est particulièrement nocif sur un projet de laisser un critère prendre le dessus sur tous les autres. Quand vous cédez aux retours capricieux d’un graphiste, ou quand vous cédez à la pression d’un chef de projet qui veut son site pour dans une heure, vous devrez forcément négligez les autres critères, et votre intégration ne sera pas qualitative.

Ce week-end, je suis tombé via Twitter sur une intervention chez Mediapart de Daniel Schneidermann, fondateur/directeur d’Arrêt sur Images :

Internet nous offre le luxe incroyable de nous permettre au moins de tenter d’être financé uniquement par ceux pour qui on travaille, c’est à dire nos lecteurs. C’est le luxe incroyable de pouvoir dire d’emblée « Merde aux investisseurs » et « Merde à la pub ».

J’aimais beaucoup Arrêt sur Images lors de leur diffusion sur France 5. Je n’ai pas vraiment suivi leur aventure sur le web, mais je suis ravi de voir qu’ils s’en sortent bien avec un modèle économique d’abonnement payant, et pas en se reposant sur des bannières publicitaires.

Je suis persuadé que le nombre de bannières publicitaires influe directement négativement sur la qualité journalistique d’un site internet. La semaine dernière, Kelly Stewart imaginait sur son blog comment naissait les rumeurs sur les produits Apple, et je pense qu’on ne doit pas être loin de la vérité :

1. Il est 16h49 un vendredi.
2. Ils sont à quelques dizaines/centaines/milliers de pages vues près pour faire leur mois.
3. Ils écrivent un paquet de mensonges sur un produit fictif et pour ajouter un peu de crédibilité ils ajoutent la fameuse ligne « des sources familières avec le sujet ».

Le problème des sites qui vivent uniquement de la publicité, c’est que leurs revenus dépendent plus du volume de pages affichées que de la qualité de leurs articles. Bien sûr, en écrivant de bons articles, le volume de pages affichées devrait suivre. Mais pas forcément autant qu’en écrivant un article inventé de toute pièce, ou un bon vieux troll des familles. Et surtout, en dépendant de la publicité, ces journalistes ont tout intérêt à ce que vous quittiez rapidement leur site via une publicité. Pas vraiment de quoi les inciter à faire leur travail.

J’ai vraiment le sentiment que se baser sur des bannières publicitaires pour gagner de l’argent, c’est le modèle économique du pauvre. Non pas parce que ça ne rapporte rien. Mais parce que c’est la solution de facilité, qui ne demande pas vraiment de réflexion à mettre en place, et qui ne présente pas vraiment de risque. Mais la plupart du temps je suis convaincu que ce n’est pas la meilleure solution.

La semaine dernière, je suis tombé sur la conférence « Better Revenue Through UX » qui illustre parfaitement ça. Melissa Matross est responsable Expérience Utilisateur chez HotWire, site comparateur de réservations de vols et d’hotels. Elle raconte son travail au sein de l’entreprise, et comment elle a réussi à retirer les bannières publicitaires en faveur d’une fonctionnalité plus subtile.

https://vimeo.com/44071616

J’ai eu de la chance, et mon chef m’a dit quelque chose qui a vraiment fait écho en moi, et qui je pense a changé la direction de ma carrière : « Si tu veux te débarrasser des publicités, trouve un moyen pour remplacer les revenus ».

C’est une déclaration plutôt simple, non ? Ça devrait être évident. Mais ça ne l’était pas Alors je me suis mise à y réfléchir, beaucoup. Je vais vous présenter d’abord la solution, puis comment j’ai décortiqué le problème.

Voici à quoi ressemble l’outil qui a remplacé la publicité. Dans le coin en haut à droite, il y a cette petite boîte grise. C’est assez subtil. Ça dit « Comparez avec d’autres sites ». Et on y trouve quelques cases à cocher vers nos concurrents. Certaines sont pré-cochées, d’autres pas. Quelque chose de vraiment simple, et qui ne vous saute pas au visage. Mais c’est quelque chose que nos clients ont adoré.

Comment ça marche ?

1. L’utilisateur fait une recherche pour un vol, un hotel ou une voiture.
2. Il voit des prix intéressants, et se dit « Laissez moi voir si ce sont vraiment de bons prix ».
3. Il remarque la boîte « Comparez avec d’autres sites » judicieusement placée au dessus des résultats de recherche.
4. Il pense : « Hey c’est trop facile. Hotwire doit vraiment avoir les meilleurs prix puisqu’ils me permettent de comparer avec d’autres sites. Mais je vais quand même aller vérifier de toutes façons… »
5. L’utilisateur coche en moyenne 3 cases et va vérifier sur les autres sites.
6. Hotwire est payé pour chaque recherche effectuée sur les autres sites.

Je vous laisse regarder la conférence (seulement 15 minutes), mais il se trouve que ça a plutôt bien marché pour eux.

Si vous avez un site, un produit, une application, et que vous souhaitez le monétiser, réfléchissez à toutes les solutions qui s’offre à vous avant de vous jeter sur des bannières publicitaires.

Hier, le site Pocket-lint rapportait que Facebook serait en négociation pour racheter Opera. Il ne s’agit que d’une rumeur, mais certains signes semblent confirmer que des négociations pourraient bien être en cours. Mais surtout, cette rumeur relance l’idée d’un navigateur Facebook.

Si l’idée n’est pas nouvelle, elle refait surface régulièrement ces derniers temps. Le mois dernier chez CNET, Ben Parr expliquait pourquoi Facebook devrait lancer son propre navigateur :

Pensez-y une minute. En une seule mise à jour, Google pourrait transformer Chrome en sa propre version de Rockmelt. Il s’agirait d’un navigateur social qui mettrait Google+ au premier plan pour ses utilisateurs avant qu’ils n’aient la moindre chance de taper Facebook.com dans la barre d’adresse.

Vous pensez que Google ne le fera pas ? Ils ont déjà commencé à sortir des extensions qui intègrent Google+ dans Chrome. Je soupçonne que ces extensions sont juste des précurseurs de leur intégration dans Chrome.

J’ai un doute sur le fait que Google+ représente aujourd’hui la moindre menace pour Facebook. Mais vu l’insistence de Google à forcer Google+ dans la bouche de ses utilisateurs dans tous ses services, Google+ pourrait devenir une menace.

Là où je pense que Facebook pourrait bénéficier de son propre navigateur, c’est dans la compréhension de ses utilisateurs et la création de nouveaux services. J’ai le sentiment que Facebook arrive un peu au bout du concept de réseau social tel qu’ils l’avaient imaginé. Facebook doit désormais comprendre ce que fait l’internaute en dehors de Facebook. Si les boutons J’aime et autres widgets parsemés sur de nombreux sites leur permettent déjà de nous suivre à la trace, un navigateur Facebook pourrait récolter encore plus d’infos (de la même manière que Google Chrome récolte nos infos pour « améliorer leurs services »). L’idée d’un navigateur social n’est pas nouvelle, et les navigateurs Rockmelt ou le décédé Flock sont déjà passés par là.

Maintenant, j’ai des doutes concernant le rachat d’Opera. D’un point de vue stratégique pour Facebook, ce serait une excellente chose. Opera Mobile/Mini est le navigateur le plus utilisé au monde sur mobile, plus particulièrement en Asie. Là où ça se complique, c’est qu’Opera n’est pas juste un navigateur. C’est un ensemble de solutions professionnelles pour embarquer leur navigateur (comme par exemple avec Nintendo sur Wii et DS). Si Facebook rachète Opera, ils devront aussi s’occuper de ça, et je ne vois pas vraiment l’intérêt.

Mais surtout, le rachat d’Opera risquerait d’atteindre des sommes astronomiques. Le mois dernier, Facebook a racheté Instagram pour 1 milliard de dollars. Instagram, c’est 13 employés, et 30 millions de comptes enregistrés, et zéro euros de bénéfices. Opera, c’est plus de 750 employés, plus de 200 millions d’utilisateurs à travers le monde, et 80 millions d’euros de bénéfices. Même si Facebook veut se lancer de manière sérieuse et stratégique sur le marché des navigateurs, je ne vois pas comment ils pourraient racheter Opera.

Maintenant, un point intéressant que j’ai découvert en rédigeant cet article, c’est que le décédé navigateur Flock n’est plus tout à fait décédé. Depuis début avril, la page d’accueil de leur site affiche une mystérieuse citation de Mark Twain (« The rumors of my death have been greatly exaggerated. »), suivi d’un « Stay tuned« . Vu les tumultes de la vie du navigateur, un retour sous la même forme semble assez improbable. Mais à l’heure actuelle, et ce depuis leur rachat en janvier 2011, Flock est la propriété de Zynga. Zynga, c’est la plus grosse société de jeux sur réseaux sociaux, et qui a elle seule a contribué à 11% du chiffre d’affaires de Facebook en 2011. Un rachat de Flock par Facebook me semble alors beaucoup plus réaliste.

Personnellement, je me demande souvent quelles sociétés pourraient faire leur entrée sur le marché des navigateurs. Si je me dit qu’Adobe pourrait trouver sa place avec un navigateur orienté conception/design/intégration, Facebook semble un prétendant vraiment bien trouvé. Et avec un navigateur de qualité, Facebook pourrait vraiment facilement attirer ses utilisateurs, là où des navigateurs comme IE, Firefox et Safari ont beaucoup de mal à inviter directement de nouveaux utilisateurs. Et dans un futur hypothétique où Facebook sortirait un navigateur, et où ce navigateur rencontrerait un minimum de succès, j’ai bien peur que le grand perdant sur le marché ne soit Firefox. Si vous utilisez beaucoup les services de Google, vous avez tout intérêt à utiliser Google Chrome. Dans une moindre mesure, c’est également vrai pour Microsoft et IE, et pour Apple et Safari. Si vous utilisez beaucoup Facebook, vous aurez tout intérêt à utiliser un navigateur Facebook.

Je crois que le truc qui me plaît et me fascine le plus dans l’intégration, c’est de savoir que ce que je code aujourd’hui fonctionnera encore demain. Et quand je dis demain, je veux dire dans 10, 20 ou 30 ans.  Je me suis fait la réflexion récemment en revisitant 2 de mes tous premiers sites perso encore en ligne (ici ou là), créés il y a exactement 10 ans.

Ces sites ont été créés à l’époque d’IE6, Netscape et Firebird, sous Frontpage 98, avec une connexion ADSL 512k chez Wanadoo. Mais ils tournent parfaitement aujourd’hui sur Chrome 19, Firefox 14, ou même sur Safari sur mon iPhone en 3G.

En comparaison, si vous avez développé une application sous Mac OS 9 il y a 11 ans, il n’y a quasiment aucune chance pour qu’elle fonctionne encore sous Mac OS aujourd’hui. La même chose est surement valable pour Windows. Et je ne parle même pas du fait que si vous avez gravé à l’époque vos applications sur CD-R, ces derniers sont très certainement périmés et inutilisables.

Sur le web, la rétro-compatibilité est possible grâce aux standards qui essayent de l’assurer dans toutes les spécifications. Et ça souligne bien à mon avis l’importance de ces standards. Il y a quelques mois, Nicolas Hoffmann relatait de manière amusante une conversation qu’il a eu lors du passage à IE7 chez l’un de ses clients, dont voici un court extrait :

— (s’adressant à moi) Vous devez être sous perfusion de stress ces temps-ci !
— Heu non, pas en particulier, pourquoi me dites-vous cela ?
— Bin avec la migration, ça tourne à la catastrophe chez nous.
— Quelle migration ???
— Bin on va passer à Internet Explorer 7, et c’est pas triste avec nos intranets.
— (interloqué) Et pourquoi donc ? Ça fait un bout de temps qu’il est sorti, ça marche plutôt bien, et honnêtement ça a pas changé grand chose par rapport au 6.
— Vous plaisantez ? Les intranets avec ActiveX ne fonctionnent plus correctement, on a des bugs de rendu, ça fait des mois et des mois qu’on bosse à cette migration, et on a problèmes sur problèmes !
— Ah bon ???

Si vous ne vous conformez pas aux standards, vous ne bénéficierez probablement pas de cette rétro-compatibilité. Si vous avez un site qui dépends fortement de Flash, Silverlight ou Real Player, vous commencez surement à en faire les frais.

Ce qui me fait sourire, c’est qu’il y a 10 ans, je ne me serais jamais imaginé pouvoir consulter les sites que je concevais sur des terminaux mobiles tactiles connectés en permanence à Internet. Et alors que le marché des navigateurs était constitué principalement de Microsoft et Netscape/Mozilla, je n’aurais probablement jamais suspecté qu’Apple puis Google entrent aussi sur le marché. Cela me laisse rêveur quant aux façons dont je naviguerais dans 10 ans sur les sites que je crée aujourd’hui. Et surtout, ça m’inspire ce slogan d’Hipster Intégrateur :

Aujourd’hui, de nombreux sites high-tech se sont empressés de reprendre l’information suivante : Chrome dépasse Internet Explorer et devient le navigateur le plus utilisé. Ce serait chouette si c’était vrai. Sauf que ça ne l’est pas.

Cette « information » se base sur les statistiques agrégées par le site StatCounter. Il fut un temps où je me basais volontiers sur leurs données, jusqu’à ce que je me rende compte qu’elles n’étaient pas toujours juste. En particulier en comparaison avec les données de leur principal concurrent, Net Applications, qui présente encore aujourd’hui Internet Explorer à 54% de parts de marché contre 18% pour Chrome. Pourquoi tant de différences ?

Il y a deux mois, Microsoft expliquait comment comprendre les statistiques de parts de marché des navigateurs. Ces données résultent de méthodologies différentes :

1. Les parts d’usage réel contre les non-usages pré-rendus. Depuis juin 2011 et Chrome 13, Chrome a commencé a faire du « pré-rendu » sur certaines pages web. Avec le pré-rendu, Chrome ouvre des onglets séparés basés sur des recherches sur Google.com ou dans l’Omnibox de Chrome qui sont invisibles pour l’utilisateur. Si l’utilisateur clique ces liens de recherche, alors l’onglet et la page seront affichés. Par contre, une certaine partie de ces liens ne sera jamais cliquée et l’utilisateur ne les verra jamais – restant alors invisibles pour lui et alors ne comptant pas vraiment comme de réelles pages vues. Le mois dernier, Net Applications a commencé à retirer le trafic pré-rendu de Chrome de ses statistiques, en signalant que le « pré-rendu en février 2012 représentait 4,3% des visiteurs uniques quotidiens de Chrome ». [à noter que depuis cet article, StatCounter à également suivi le pas et ajusté ces mesures de données pour Chrome]

2. La balance géographique de l’utilisation des navigateurs basée sur les populations Internet du monde réel. La plupart des sociétés d’analyses qui mesurent l’utilisation des navigateurs font ça sur un réseau de sites partenaires qui les aide à obtenir ces données, mais un seul – Net Applications – fait une « balance géographique » de ces données. Comme Net Application l’explique :

Les données de Net Market Share sont ajustées par pays. Nous comparons notre trafic aux mesures du Trafic Internet par Pays de la CIA, and nous ajustons nos données en conséquence. Par exemple, si nos données mondiales montrent que le Brésil représente 2% de notre traffic, et que les données de la CIA montrent que le Brésil représente 4% du trafic Internet mondial, nous compterons chaque visiteur unique du Brésil en double. Ceci est fait pour contre-balancer nos données mondiales. Toutes les régions ont des marchés différents, et si nos trafics étaient concentrés en une ou plusieurs régions, nos données mondiales seraient affectées de manière inappropriées par ces régions. L’ajustement par pays retire tout favoritisme par région.

C’est absolument critique pour nous pour comprendre ce que représente la part de marché mondiale d’IE afin qu’on puisse mieux servir nos clients. StatCounter, à l’inverse, ne fait aucune balance géographique. Ils rapportent simplement leurs pages vues mondiales de manière absolue. […]

3. Les visiteurs uniques contre les pages vues absolues. Une dernière différence entre Net Applications et StatCounter est qu’alors que StatCounter rapporte seulement les pages vues sans aucun filtre, Net Applications rapporte les parts de marché basés sur les visiteurs uniques. C’est ce type d’analyse qui leur permets de réaliser des représentations plus précises des habitudes et comportements de navigation en retirant le pré-rendu de Chrome dans le but de séparer les pages vues réelles des pages vues invisibles. C’est également un moyen plus précis de déterminer la vraie utilisation d’un navigateur car elle est moins prédisposée à la fraude. Wikipedia indique que « mesurer l’utilisation de navigateurs par le nombre de requêtes (pages vues) faites par chaque agent utilisateur peut être trompeur. » Cela peut mener à une surestimation et même une fraude dans le cas où des bots réaliseraient un nombre important de pages vues.

Alors oui, Firefox est sur le déclin. Oui, Internet Explorer aussi. Oui, Chrome connaît une croissance fulgurante. Mais avant de se précipiter d’annoncer que Chrome est devenu le navigateur le plus utilisé au monde, il est important de comprendre comment les données qui l’affirment sont mesurées.