Est-ce qu’un e‑mail doit avoir le même rendu partout ?
Non.

C’est tout pour moi. Merci de m’avoir lu. Appréciez cet hommage à la plus grande réussite de Gmail en 2016.
Lire la suite de « Est-ce qu’un e‑mail doit avoir le même rendu partout ? »
Non.

C’est tout pour moi. Merci de m’avoir lu. Appréciez cet hommage à la plus grande réussite de Gmail en 2016.
Lire la suite de « Est-ce qu’un e‑mail doit avoir le même rendu partout ? »
Je suis tombé récemment sur cet article initialement intitulé « Quand ne devrait-on pas utiliser WordPress ? ». J’ai d’abord cru à un article satirique, puis j’ai vite réalisé que l’auteur était sérieux. Parmi les arguments avancés pour justifier une utilisation systématique de WordPress, j’ai sursauté sur le suivant.
- Il ne sert à rien de réinventer la roue.
C’est un argument que je n’aime pas trop, mais que j’ai déjà entendu de la part de clients. Pour commencer, je n’aime pas la comparaison avec la roue. Je ne suis pas un travailleur à la chaîne qui assemble des pneus. Je suis intégrateur. Je me vois plus comme un artisan que comme un ouvrier sur une chaîne de montage.
Alors prenons une autre métaphore. Par exemple, la cuisine. Si vous allez dans un supermarché, vous trouverez certainement de quoi vous nourrir jusqu’à la fin de vos jours sans avoir jamais à cuisiner. Plats préparés, surgelés, conserves. Rien de telle qu’une bonne ratatouille surgelée, non ? Non ? Non ?
Mais alors, à quoi bon réinventer la ratatouille ?
Le premier argument qui me vient à l’esprit, c’est bien entendu la qualité. En cuisinant moi même une ratatouille, je connais la qualité de mes ingrédients.
Le second argument, c’est la facilité de personnalisation. Vous n’aimez pas les poivrons ? Aucun problème, je vous fait une ratatouille sans poivron.
Le dernier argument, c’est le plaisir. Découper soi même amoureusement ses aubergines, courgettes et tomates, et les faire revenir langoureusement à la poêle, c’est quand même autre chose que jeter un sachet plastique surgelé dans le micro-onde.
Le parallèle avec l’intégration, ou même le développement au sens large, n’est pas bien difficile à faire. Je suis un codeur dans l’âme. J’aime savoir comment fonctionne quelque chose avant de l’utiliser. J’ai besoin de m’assurer de la qualité de ce que j’utilise. J’aime aussi concevoir des pages et interfaces sur mesure, correspondant à un besoin précis. Et j’éprouve beaucoup de plaisir à faire tout ça, même si ça nécessite que j’y passe beaucoup de temps ou que j’y laisse quelques cheveux.
De la même manière que je pourrais me contenter de manger du surgelé tous les soirs, je pourrais me contenter de claquer du WordPress sur tous mes projets. Mais j’y perdrais surement vite goût.
Toute la subtilité de mon métier réside alors mon propre jugement de ma capacité à réinventer la ratatouille. Si on est vendredi à dix-sept heures et qu’il faut impérativement que je livre une page avec un carousel en 3D pour dans trente minutes, il y a des chances pour que je me jette sur la première bibliothèque faisant ça proprement que je trouverais.
Et ça ne signifie pas non plus que je vais systématiquement réessayer de réinventer la roue. J’aurais peu d’intérêts à créer mon propre pré-processeur CSS, mon propre langage de programmation, mon propre système d’exploitation, etc.
Pour citer Carl Sagan (dans un moment de télévision tel qu’on ne ferait plus de nos jours) :
Si vous souhaitez faire une tarte aux pommes à partir de zéro, vous devez d’abord inventer l’univers.
La semaine dernière, je suis tombé sur cet autre article intitulé « Je sais comment programmer, mais je ne sais pas quoi programmer ». Ce passage m’a apporté un autre argument pour réinventer la roue :
Dans la communauté du logiciel, l’attitude générale est de ne pas réinventer la roue. C’est presque mal perçu si vous réécrivez une bibliothèque quand une option mature et stable existe. Si c’est une bonne règle en général, les débutants ne devraient pas avoir peur de réinventer la roue. Quand c’est fait pour apprendre et pour s’entraîner, c’est très bien de faire une roue. C’est une partie importante de l’apprentissage. Par exemple, écrivez votre propre version de
ls,mv,wgetoucowsay. Si vous souhaitez partir sur un jeu, alors faites un clone de Pong, Tetris ou Space Invaders. Vous n’avez pas besoin de reprendre toutes leurs fonctionnalités ou d’en faire une réplique exacte, mais vous démarrez avec votre objectif et une feuille blanche, et vous faites en sorte d’y arriver.
Il s’avère que Jeff Atwood avait écrit sur ce thème en 2009 :
« Ne réinventez pas la roue » devrait être utilisée comme un appel aux armes pour s’enrichir de toutes les solutions existantes, et pas comme une matraque pour affaiblir ceux qui voudraient légitimement construire quelque chose de mieux ou améliorer ce qui existe déjà. De ma propre expérience, malheureusement, c’est plus souvent ce dernier cas que le premier.
Donc, non, vous ne devriez pas réinventer la roue. À moins que vous ne prévoyiez d’en savoir plus sur les roues.
Les métiers du Web nécessitent un constant réapprentissage (« Les bonnes pratiques d’aujourd’hui seront les mauvaises pratiques de demain », disais-je il y a quatre ans). Réinventer la roue, c’est aussi une façon de s’assurer de rester dans la course plutôt que de regarder la roue tourner.
Lu le mois dernier : ce commentaire sur Hacker News (via Twitter) en réaction à un test du dernier Macbook.
J’ai trouvé cette affirmation intéressante :
« Les nouvelles spécifications vous offrent une meilleure performance, mais aussi une meilleure durée de vie de la batterie avec, selon Apple, 10 heures de navigation web ou 11 heures de lecture de films iTunes. »
La lecture de films était autrefois considérée comme un test de facto de la rigoureuse autonomie qu’un ordinateur pouvait avoir. Les DVD tournoyant et les disques durs ont été remplacés par des SSD, et le décodage de vidéo avec accélération matérielle a remplacé l’utilisation maximale de votre processeur.
En revanche, la navigation web était autrefois considérée comme une utilisation légère de batterie. Récupérer du contenu réseau en mémoire, analyser du HTML de base, etc. Maintenant, avec JavaScript partout et la complexification grimpante des pages web, la navigation web est devenue l’une des choses les plus coûteuses que vous pouvez faire, en ce qui concerne l’autonomie. À vrai dire, sur mon Macbook Pro, maintenant qu’OS X indique quels processus consomment le plus d’énergie, les navigateurs web comme Safari et Chrome sont les seules choses que je vois apparaître dans les « Applications consommant beaucoup d’énergie ».
Je n’avais jamais vu les choses sous cet angle, mais le web est effectivement devenu un nouveau benchmark de facto.
Je l’avais posté sur Twitter en mars dernier, mais je le reposte ici parce que c’est important. Accessible Email est un outil gratuit en ligne permettant de vérifier l’accessibilité de vos newsletters.
Campaign Monitor a publié en octobre dernier un article sur les dessous d’e-mails interactifs, et notamment celui-ci de PRET A MANGER que j’avais déjà repéré. J’adore voir le brouillon qui a servi à la conception initiale.
Google a publié les slides et la vidéo d’une conférence de Elie Bursztein (« Anti-spam and Abuse Research Lead » sur Gmail). C’est hyper-hyper intéressant. J’ai relevé notamment les quelques points suivants :
L’an dernier, Microsoft a annoncé son intention de remplacer son webmail Outlook.com par une version équivalente à son autre webmail Office 365. Le mois dernier, Microsoft a précisé que cette nouvelle version d’Outlook.com était en cours de déploiement partout dans le monde. Si cette nouvelle version n’est pas encore déployée pour tous les comptes Outlook en France, vous devriez pouvoir y accéder en vous créant un nouveau compte @outlook.fr dès aujourd’hui.
Je teste régulièrement mes intégrations d’e‑mails sur ce webmail (et sa version Office 365) depuis un an. Voici un petit compte-rendu de mes observations, et des bonnes et mauvaises nouvelles que ce webmail apporte.
Lire la suite de « Ce qu’il faut savoir sur la nouvelle version d’Outlook.com »
Mark Robbins a partagé une technique très intéressante pour simuler du positionnement absolu dans un e‑mail, la propriété position:absolute étant filtrée un peu partout. En résumé : en utilisant des margin dans des éléments à taille nulle (avec un max-width:0; max-height:0), on arrive au même résultat.
Vu sur Twitter, un long article sur Marissa Mayer et Yahoo, avec notamment cette anecdote invraisemblable.
Près de 4000 employés de Yahoo étaient assis et attendaient que Marissa Mayer arrive pour s’expliquer. […]
Mayer pris une grande respiration. Elle salua tout le monde. Elle leur rappela la confidentialité de cette réunion. Elle déclara avoir parcouru leurs questions, et qu’elle avait quelque chose qu’elle voulait leur lire. Elle tenait un livre dans ses mains. Un livre pour enfant. « Bobbie had a Nickel ».
Elle commença à lire.
« Bobbie avait un nickel rien que pour lui. Devait-il acheter des bonbons ou un cône glacé ? »
Mayer leva le livre, pour montrer aux employés les illustrations.
« Devait-il acheter une pipe à bulles ? Ou un bateau en bois ? »
Une autre illustration.
« Peut-être, quand même, qu’un petit camion serait mieux que tout ! »
Les employés présents dans la salle échangeaient des regards. À leurs bureaux, les employés à distance devenaient embrouillés.
Que faisait Mayer ?
Elle continua à lire.
« Bobbie s’assit et se demanda, Bobbie s’assit et pensa. Quelle pourrait être la meilleure chose qu’un nickel puisse acheter ? »
Mayer sembla sauter quelques pages. Elle lu, avec un peu d’agitation dans sa voix :
« Il pourrait s’acheter un sac de fèves ou une toupie. Il pourrait s’acheter un moulin à vent à offrir à son petit frère. Ou devrait-il s’acheter, se demande Bobbie, une petite boîte à crayons ? »
Mayer semblait lire avec une réelle frustration maintenant, comme si toute la colère et confusion de la salle s’en irait si tout le monde comprenait l’histoire qu’elle lisait à voix haute.
« Bobbie pensa, et soudain une idée brillante lui vint », Mayer lu, atteignant la dernière page du livre.
« Il dépensa son nickel comme ça… »
Mayer leva le livre pour montrer sa dernière illustration. C’était un dessin d’un petit garçon roux à cheval sur un manège.
Quasiment personne ne pouvait voir la page.
Personne ne compris ce que Mayer essayait de dire. […]
C’est quand Mayer est montée sur scène, s’est assise sur sa chaise, et leur a lu un livre pour enfant, en leur montrant les illustrations comme si elle était une maîtresse d’école et qu’ils avaient tous six ans. Plus tard, elle expliqua qu’elle avait lu ce livre parce qu’elle voulait dire que ce qui comptait le plus dans la vie était les expériences, et que son expérience chez Yahoo était fantastique jusque là.
Dans sa dernière newsletter envoyée hier, Louis CK s’excuse longuement d’envoyer beaucoup plus de newsletters récemment pour promouvoir sa nouvelle série. J’ai beaucoup aimé ce paragraphe.
Vous vous demandez peut-être, ou avez envie de me demander, mais à l’intérieur de vous même, « Pourquoi est-ce que tu ne laisses pas les gens se désinscrire d’une liste dédiée aux e-mails de Horace and Pete ? ». Et bien, le fait est que j’ai demandé à mes gens du web de créer des options de catégories pour mes listes d’e-mails. Et pour être juste avec eux, ils ont fait exactement ça. Et ils m’ont envoyé un e-mail il y a quelques jours, me montrant ces options et me demandent de les tester et de les valider. Et je n’ai pas regardé. Parce que je suis très occupé en ce moment à faire plein de choses comme, par exemple, emmener mes enfants à l’école le matin, aller les chercher plus tard, demander poliment au chien de ne pas mâcher des choses, construire un abri anti-Trump comme tout le monde, créer et payer pour une série télévisée et vous la distribuer directement. Donc oui, putain, je suis occupé. Désolé d’être vulgaire.
J’ai arrêté de compter le nombre de projets qui ont glissé à cause de clients trop occupés pour répondre. Mais Louis CK illustre parfaitement à quel point répondre à des « gens du web » n’est pas une priorité. Et c’est peut-être aussi bien comme ça.
Je pense avoir trouvé une nouvelle façon de créer des e‑mails responsive, sans media queries. La solution implique la fonction CSS calc(), et les trois propriétés width, min-width ou max-width.
Ou comme je me plais à les appeler une fois toutes réunies : les « Fab Four » (en CSS).

Vu sur Hacker News, le concept de « dette d’idées » présenté par Jessica Abel.
La dette d’idées est quand vous passez trop de temps à vous représenter à quoi un projet va ressembler, trop de temps à penser à quel point ça va être génial de l’avoir terminé et livré au monde entier, trop de temps à imaginer à quel point vous aurez l’air cool, à quel point tout le monde va vous demander, combien d’argent vous allez vous faire. Et beaucoup trop peu de temps à faire le projet.
C’est tout moi, ça. J’ai des tas d’idées de projets, d’articles, de choses vers lesquelles j’aimerais me lancer. Mais je passe une bonne partie de mon temps à rêvasser et imaginer les suites de ces idées une fois lancées plutôt que n’en réaliser ne serait-ce qu’une seule.
Parfois même, j’en parle à des gens, peut-être en espérant avoir des retours me motivant davantage. Je me suis rendu compte après ma conférence à Paris Web en 2014 que j’avais déjà parlé de l’idée de cette conférence à quelqu’un en 2012. C’est dans ce cas plutôt satisfaisant de se rendre compte qu’on a réussi à passer à l’action, même s’il a fallu du temps.
Et j’aime vraiment l’écho que l’expression « dette d’idées » fait à l’expression de « dette technique ». La façon dont je vois les choses, la dette technique nous freine dans le présent à cause du passé. La dette d’idées nous freine dans le présent à cause du futur.
J’ai enfin lu cet article gardé dans mes favoris depuis le mois dernier sur le design de produit et le design itératif. La conclusion est très bien :
Vous ne pouvez pas devenir bon dans quelque chose sans avoir la liberté d’y être mauvais pour commencer. Si vous croyez que chaque idée que vous présentez doit avoir l’air géniale, ne soyez pas surpris si vous n’en avez que très peu. Si vous en avez très peu, ne soyez pas surpris si vous en choisissez une mauvaise. Quand vous choisissez une mauvaise idée, l’itération ne la rendra pas bonne, ça la rendra juste achevée.
Un exemple d’animation un peu kitsch mais amusante chez FreshInbox : comment « secouer » un e-mail en ajoutant une animation sur le conteneur principal d’un e‑mail.
Le mois dernier, le blog Mosaico a fait un travail formidable de recherche dans le code source d’Android. L’auteur a découvert ce qui supposément peut être associé au comportement de Gmail forçant le redimensionnement d’e-mails.
Dans certains cas, Gmail va ajouter une classe .munged (en anglais selon Wikipedia, « une série de changements potentiellement destructifs ou irrévocables ») à toutes les <table> et <td>. Cette classe va appliquer un width:auto !important;, causant les dommages qu’on peut imaginer.
J’ai publié une traduction en anglais de mon retour sur la création de Super Mail Forward, un e-mail transférable évolutif. Cinq mois après, il y a deux changements principaux.
AOL a corrigé le bug de remplacement des images en background dans une balise <style>. J’ai donc trouvé une autre bidouille pour activer des styles sur AOL. Ou plus précisément, pour ne pas que des styles s’activent sur AOL. En fait, une balise <style> contenant une image de fond à l’URL non supportée (par exemple background:url('#');) sera totalement supprimée. Dans l’exemple suivant, ces styles s’appliqueront donc partout (ou presque), sauf sur AOL.
<style type="text/css">
.step1 { background:url('#'); }
.step1 .W { background:#fff!important; }
.step1 .X { background:#f8d81f!important; }
.step1 .Y { background:#d89f37!important; }
.step1 .Z { background:#000!important; }
</style>
Microsoft a commencé à remplacer Outlook.com par le même webmail qu’Office 365 (aussi appelé Outlook Web App). Ce webmail ne supporte pas les sélecteurs d’attributs. Pour cibler des styles uniquement sur ce webmail, on peut donc écrire le sélecteur suivant…
<style type="text/css">
[owa] .toto { … }
</style>
…qui sera interprété comme :
<style type="text/css">
.rps_123a .x_toto { … }
</style>
Aujourd’hui, Brendan Eich (co-fondateur de Mozilla et créateur de JavaScript) a présenté sa nouvelle société et un nouveau navigateur basé sur Chromium : Brave. Et j’ai tiqué en lisant une partie de son annonce.
Tout le monde parle du blocage de publicité. Les bloqueurs peuvent rendre l’expérience utilisateur du Web bien meilleure. Mais comme l’a noté Marco Arment, ça ne semble pas juste pour de nombreuses personnes. C’est comme du parasitisme, ou même comme le début d’une guerre. Vous ne cliquez peut-être jamais sur une publicité, mais même réaliser l’affichage d’une publicité peut avoir une petite valeur. Avec suffisamment de personnes qui bloquent des publicités, le modèle de financement principal du Web est en péril.
Selon moi, la publicité n’est pas le modèle économique du Web. À vrai dire, je pense que le Web n’a pas de modèle économique. Dire que la publicité est le modèle économique du Web, c’est comme dire que la prostitution est le modèle économique de l’Amour.
Cependant, certaines sociétés ont effectivement fait le choix de la publicité comme principal modèle économique sur le Web. C’est le cas notamment de certains sites de presse, dont le financement tient désormais à un énième article sur Nabilla, Apple, ou je ne sais quel sujet qui va pouvoir générer un maximum de pages vues. D’autres ont toutefois eu le courage de dire merde à la pub.
Ça va faire près de vingt ans que j’ai accès au Web. Et quasiment autant de temps que j’écris, partage, et publie gratuitement du contenu en ligne. Je n’ai pas vraiment de modèle économique dans tout ça. Je le fais parce que ça me plaît. Je le fais parce que j’apprends du retour des autres. Je m’enrichis, mais pas financièrement. Et ça vaut largement la quarantaine d’euros annuelle en hébergement que me coûte ce présent blog.
Et je crois que depuis le début, ce qui m’a toujours plu dans le Web, c’est de lire le blog de monsieur et madame tout le monde. De lire une page écrite par quelqu’un il y a des années. C’est ce « petit tricot universel », comme le dit si bien Marie Guillaumet, auquel chacun peut participer, que ce soit à travers un tweet, un article, une vidéo, une chanson…
Je fais le rapprochement de tout ça avec ce dernier article de Mike Monteiro sur les quinze ans de Wikipedia.
Un bourdon ne peut pas voler.
On m’a énoncé ce fait par les soeurs de Saint Joseph en grandissant à l’école catholique. Comme de nombreux autres enfants. C’est dit comme un témoignage de Dieu au dessus de la science. Selon l’histoire, les scientifiques et experts en aérodynamisme se sont rassemblés, ont fait des calculs et ont réalisé qu’avec sa masse et son envergure, un bourdon n’était pas capable de générer la poussée nécessaire pour s’élever. En d’autres termes : un bourdon ne peut pas voler. Il est trop gros et ses ailes sont trop petites.
Wikipedia ne peut pas exister.
Une collection du savoir humain. Rassemblée par les humains. Pour les humains. À travers le monde. De manière décentralisée. Une organisation à but non lucratif auto-policée fondée par la bonté des autres. Impartiale. Et construite sur un wiki. Où chaque décision est infiniment débattue en comité. En d’autres termes: Wikipedia ne peut pas exister. C’est trop ouvert et ça ne rapporte pas d’argent.
Sauf que ça existe. Et ça existe depuis quinze ans. Quinze merveilleuses années d’humains rassemblant l’histoire de tout ce que l’on sait, de sorte à ce que d’autres humains ne l’oublient pas. Quinze ans de gestion de notre mémoire collective. Quinze ans où l’on s’assure que l’on puisse raconter nos propres histoires. Quinze ans où votre voie a autant d’importance que celle d’un autre. Quinze ans où le peuple rassemble l’histoire du peuple. 28% de la planète vivant aujourd’hui n’ont jamais connu un monde sans Wikipedia.
C’est l’histoire de Twitch Plays Pokemon encore et encore.
Il y a une réplique dans Scrubs où le Dr. Cox dit :
Je suis sur pratiquement sûr que si on enlevait tout le porno sur internet, il ne resterait plus qu’un seul site web, et il s’appellerait « Qu’on nous ramène le porno ! ».
Je suis pratiquement sûr que si on enlevait toute la publicité du Web, il resterait plein de sites très bien.
Hier soir, je me suis connecté pour la première fois à Spotify sur ma poussiéreuse PS3, pour voir. Et à ma grande surprise, le système d’identification est plutôt bien pensé. En plus d’un traditionnel formulaire identifiant / mot de passe, l’application présente par défaut l’écran suivant.

(capture d’écran via jmdgame.fr)
On ouvre Spotify sur son smartphone, on lance un morceau, on choisit de le lire sur sa PS3 dans la liste des appareils distants. Et c’est parti.
C’est rapide et ça fonctionne bien. En particulier pour une console où les gestionnaires de mot de passe sont inexistants, et où la moindre saisie au clavier virtuel est un enfer.
Lu en fin d’année dernière sur le Wall Street Journal :
M. Forrest, un manager chez Freebirds World Burrito à Thousand Oaks, en Californie, était en train de couper de la viande quand le minuteur de sa montre a commencé à vibrer et sonner. Avec ses mains recouvertes de jus de viande, M. Forrest a flairé une solution :il a arrêté l’alarme avec son nez.
« Ça marche vraiment », déclare M. Forrest. « Parfois il faut faire ce qu’il faut. »
L’illustration de l’article est vraiment chouette.
Lu sur le New York Times, « A Quick Puzzle to Test Your Problem Solving », un article interactif sur le biais de confirmation (qui reprend un exemple que j’avais lu il y a quelques mois sur le blog de DrLoser).
Un petit jeu permet de comprendre la politique gouvernementale, l’Amérique des entreprises, et pourquoi personne n’aime avoir tort.
Voici comment ça fonctionne :
Nous avons choisi une règle que certaines suites de trois chiffres respectent, et d’autres pas. Le but est de trouver quelle est la règle.Nous commencerons par vous dire que la séquence 2, 4, 8 respecte cette règle.
Maintenant c’est à votre tour.
J’adore la façon dont le New York Times a rendu cet article interactif et dynamique avec un formulaire en tout début et les résultats intégrés dans une phrase un peu plus loin.
Ces explications dans le reste de l’article m’interpellent.
Ce puzzle met en avant une sorte particulière de biais de confirmation qui hante les entreprises, gouvernements et individus chaque jour :la tendance du yes-man (et yes-woman). Il est plus probable que nous pensions à des situations positives que négatives, à pourquoi quelque chose pourrait bien se passer plutôt que mal, et à des questions dont la réponse est oui plutôt que non.
Parfois, la réticence à penser négativement n’a rien à voir avec des opinions politiques ou une peur consciente de s’entendre dire « non ». Souvent, les gens ne pensent même pas à poser des questions qui pourraient produire une réponse négative en cherchant à résoudre un problème — comme celle-ci. Au lieu de ça, ils réduisent l’univers possible de questions à celles qui pourraient potentiellement produire un « oui ».
C’est ma hantise en tant que concepteur web : m’assurer que je pose les bonnes questions, et surtout ne pas me satisfaire de voir un client acquiescer à mes propositions.