HTeuMeuLeu
Excellente trouvaille par Courtney Fantinato : l’application e-mail de Samsung sur Android n’affiche les images de fond si et uniquement si on écrit l’adresse de l’image entourée de guillemets simples. Des guillemets doubles ou pas de guillemet du tout ne fonctionneront pas.
background-image: url('background.jpg');Sur Twitter, ce fil traduit quelques détails liés au développement de The Legend of Zelda : Breath of the Wild, rapportés initialement par le site 4gamer (suite à des conférences des développeurs du jeu au salon CEDEC 2017). J’ai particulièrement aimé ces extraits de la session intitulée « Introduction d’outils de débogage qui maximisent l’amusement de jeu » (traduction Google).
Les développeurs ont géré toutes leurs taches en intégrant leurs outils de gestion directement dans le jeu afin d’éviter que plusieurs personnes ne fassent le même travail en double.
Une tache pouvait être créée en ajoutant un panneau dans le monde, et ensuite toutes les spécifications et compte-rendu de réunions en rapport y étaient directement liés.
À ma grande surprise, j’ai passé plus d’une centaine d’heures sur Breath of the Wild (alors que je lâche la plupart des jeux au bout d’une à dix heures). J’adore découvrir ce genre de détails sur la réalisation d’un jeu de cette envergure.
Campaign Monitor a mis à jour son colossal guide du support de CSS dans un e‑mail, qui n’avait pas été mis à jour depuis 2014. C’est une ressource absolument précieuse à consulter et partager.
Je regrette un peu la nouvelle mise en page que je trouve moins lisible.
Justin Khoo a repéré un e-mail interactif de Microsoft. Modernité oblige, l’interactivité en question en fonctionne sur aucun client mail de Microsoft (à l’exception d’Outlook sur Mac qui, utilisant le moteur WebKit, fait toujours figure d’exception).
Cet article est la retranscription d’une présentation donnée à Litmus Live 2017 à Londres le 29 août lors de la session #EmailHacks présentée par Kevin Mandeville. Vous pouvez trouver mes slides ici et la démo de « l’Email Camera » ici. Une version en anglais de cet article est disponible.
J’aime beaucoup les jeux vidéo. Je suis un grand fan de Nintendo, en particulier du Game Boy. (Oui, on dit un Game Boy.) J’adore le Game Boy. C’était ma première console quand j’étais petit. Et maintenant j’en collectionne plein.
En 1998, Nintendo sort le Game Boy Camera. C’est une caméra numérique montée sur une cartouche de jeu. Elle peut prendre des photos en quatre niveaux de gris dans une résolution de 128 × 112 pixels. Et elle comprenait des jeux, filtres et était compatible avec le Game Boy Printer. Le Game Boy Camera transformait le Game Boy en machine à selfie ultime.
Il y a quelques mois, je trainais sur le Slack des #emailgeeks. À un moment, Kevin Mandeville a mentionné le Game Boy Camera. Et Jacques Corby-Tuech a répondu quelque chose du genre : « Un Game Boy Camera dans un e-mail. »
Ça a immédiatement fait tilt. Il fallait que je fasse ça. Si quelqu’un devait faire un e-mail inspiré par le Game Boy Camera, il fallait que ce soit moi. En plus, j’avais déjà le sentiment qu’utiliser la caméra dans un e-mail était possible depuis que j’avais vu cette démo sur CodePen.
C’est une démo de colorisation d’image dynamique qui utilise la pipette colorimétrique système et qui permet de changer la couleur de la voiture dans la photo. Et ça n’utilise pas du tout de JavaScript. C’est juste du HTML et CSS. C’est possible en grande partie grâce à l’élément suivant.
<input type="color" />Ce qui est bien avec un <input type="color">, c’est que ça utilise la pipette colorimétrique système. Et les navigateurs compatibles affichent généralement un aperçu de la couleur sélectionnée.
En utilisant un peu de CSS et des sélecteurs propriétaires comme ::-webkit-color-swatch et ::-webkit-color-swatch-wrapper, on peut retirer les bordures et marges intérieures de l’élément. Puis, en appliquant encore quelques styles, on peut redimensionner cet élément en plein écran. Et puis on peut placer une photo en dessous. Et en utilisant la propriété CSS mix-blend-mode:hue, on arrive au résultat souhaité.
Qu’est-ce que ça a à voir avec des e-mails et le Game Boy Camera ?
Et bien, il s’avère qu’on peut faire quelque chose d’équivalent avec l’élément suivant.
<input type="file" />Un champ de type file permet de déposer des fichiers sur le Web. Et il y a deux choses particulièrement chouette à son égard :
1. Sur iOS ou Android, on peut importer un fichier directement depuis son appareil, ou utiliser l’appareil photo directement depuis là où on est pour prendre une photo.
2. Sur iOS, après avoir pris une photo, on obtient une toute petite miniature de 18 × 18 px.
À nouveau, en utilisant des sélecteurs propriétaires comme ::-webkit-file-upload-button, on peut masquer le bouton « Choisir un fichier ». On peut aussi tronquer l’élément pour ne laisser visible que l’image, et l’agrandir en utilisant une transformation CSS.
Un peu plus tard, le jour où le Game Boy Camera a été mentionné sur Slack, j’ai posté la vidéo suivante.
https://www.youtube.com/watch?v=A1ltAgkuIX4
Voici la démo complète disponible sur CodePen. Ça fonctionne bien dans Apple Mail sur iOS. Essayez et amusez-vous bien !
Via Twitter, je découvre cette vidéo du passage de Grace Hopper chez David Letterman, en 1986.
Elle est drôle, humble et pédagogue. Et son illustration (apparemment célèbre) des nanosecondes est formidable pour expliquer « pourquoi c’est si long d’envoyer un message par satellite ».
Je suis complètement fan de cette illustration de Firefox par Sean Martell.
(Il y a même un petit détail rigolo sur le bras droit. Et une vue de la progression de l’illustration ici.)
Je suis tombé sur cette conférence de Jennifer Daniel via un tweet de Mike Monteiro que j’avais en favori depuis 2015. Et j’ai beaucoup aimé. Elle est drôle, brute mais avec un message nécessaire que j’ai rarement entendu. Elle commence en commentant une vidéo d’Invision qui présente le métier de designer (à 4:00).
Je ne suis pas choquée par ces gens. Je suis choquée par la façon dont ils parlent. Ils ou elles parlent au nom de sociétés riches, bien installées. Ils parlent de design comme si c’était intrinsèquement une bonne chose. Le design n’est pas bon en soi. En fait, le design est neutre.
Donc quand vous parlez de design… Le design n’est pas une philosophie. Le design n’est pas une révolution. Le design n’est pas une cause. Le design est neutre.
Donc quand des designers parlent au nom de sociétés influentes et qu’ils ou elles prophétisent le design comme une solution aux problèmes du monde, il est important de reconnaître que lorsqu’ils disent « design », ce qu’ils veulent vraiment dire c’est « argent ». Ils parlent d’argent. Ils ne parlent pas de design. […]
Cela ne veut pas dire que le design ne peut pas améliorer les choses. Il n’y a aucun mal à avoir des aspirations à faire la différence. Mon problème c’est à quel point les designers sonnent faux ces derniers temps. Et je n’arrive pas à comprendre comment on est devenu aussi vaniteux.
Sa citation à 9:40 en est une parfaite illustration. Elle poursuit (à 11:40) :
Les designers sont devenus une parodie d’eux-même sans le savoir. Ce n’est pas en faisant un panneau en lettrage à la main pour un sans-abri que vous aiderez des gens dans le désespoir.
Personne n’aura jamais autant besoin de se moquer des designers plus efficacement que des designers. Parce qu’il nous manque la capacité de comprendre à quel point nous nous comportons de manière hilarante.
.
Ethan Marcotte, dans un article sur l’importance d’un device lab au cours du développement et pas seulement en phase de recettage :
Votre site web est seulement aussi fort que le plus faible des appareils sur lesquels vous testez.
Je n’avais jamais réussi à formuler ça comme ça, mais c’est vraiment exactement ça aussi dans le monde de l’intégration d’e-mails. Quoi que vous fassiez, il y aura toujours quelque chose qui ne fonctionnera pas quelque part. Rien ne fonctionne partout. Tout n’est qu’un jeu de construction à base de dégradation gracieuse et d’amélioration progressive.
Vu sur Twitter, cet article intéressant qui évoque l’éducation de l’importance de HTML et CSS. L’auteur y importe son point de vue intéressant, et son expérience où il estime inefficace de décrier telle ou telle technologie.
Pour moi, peu importe que vous écriviez votre HTML et vos CSS à la main ou que vous utilisiez du JavaScript pour les générer à votre place. Ce qui compte, c’est le résultat, comment c’est structuré, et comment c’est servi au client. Quand on permet à nos outils de primer sur la qualité de notre résultat, le Web entier en souffre. Les sites sont susceptibles d’être peu accessibles, peu performants, et de souffrir d’une sémantique pauvre.
Yahoo! Japan a mis en ligne en mars dernier une page qui retrace l’histoire du Web. C’est bourré de centaines de références à plein de sociétés et technologies. C’est absolument gigantesque (la page fait plus de 30 Mo). Pour archivage, j’en ai fait une version statique : 23 Mo en 1920px de large, 4 Mo en 640px de large.
Je suis généralement enchanté par les clips d’OK Go (comme celui avec les chiens ou celui en apesanteur). Et ce TED Talk où ils expliquent comment ils trouvent toutes ces idées est vraiment bien, tant sur le fond que la forme.
J’aime particulièrement ce passage (à 7:24) :
Avec ces vidéos, on cherche ce sentiment qu’est l’émerveillement. Il y a toujours une part de surprise à l’émerveillement. Donc on ne cherche pas seulement de bonnes idées, on cherche de bonnes idées qui nous surprennent d’une manière ou une autre. Et cela pose un problème, car le processus qu’on utilise tous pour faire des trucs a une grosse tendance à être contre les idées surprenantes.
Le processus dont je parle est celui que vous connaissez tous, on le fait tout le temps. Vous pensez à une idée. Vous réfléchissez à votre brillante idée et vous parvenez à un plan pour que cette idée se réalise. Et quand vous avez ce plan en tête, vous revenez et revérifiez votre idée de base et peut-être vous la modifiez. Et vous faites des aller-retours come ça entre l’idée et le plan, le plan et l’idée, jusqu’à ce que finalement vous arriviez à un plan vraiment bon. Et une fois que vous avez ça, et seulement là, vous pouvez sortir et mettre en marche l’exécution. C’est un système infaillible pour maximiser vos ressources parce que c’est peu coûteux. Réfléchir coûte en général très peu. Mais exécuter coûte très cher la plupart du temps. Donc le temps que vous y arriviez, vous devez vous assurer que vous êtes bien préparé et que vous pouvez tirer profit au maximum de ce que vous avez.
En comparaison, c’est assez pertinent pour un projet Web.
Vu sur Twitter, cette image qui rappelle les origines des mots « Uppercase » et « Lowercase ».
J’ai du mal à trouver une expression plus skeuomorphique que ça.
Le mois dernier, Microsoft a introduit une nouvelle fonctionnalité dans Outlook.com et Office 365 qui a causé plein de problèmes aux intégrateurs et intégratrices d’e-mails. Il y a eu pas mal de discussions autour du sujet, que ce soit sur Slack ou les forums de Litmus. Ça m’a obsédé ces deux dernières semaines. Voici tout ce qu’il faut savoir sur ce bug et ma quête pour en trouver une solution.
Lire la suite de « Le dernier bug d’Outlook.com (ou comment supprimer les marges sous les images) »
Jusqu’à l’an dernier, Gmail était l’un des plus gros clients mail ne supportant (presque) que des styles en ligne. Les webmails de Yahoo, AOL, Outlook.com et, oui, même les versions d’Outlook (de 2007 à 2016 sur Windows) utilisant le moteur de Word supportent les balises <style> depuis longtemps. La mise à jour de Gmail en 2016 a tout changé en ajoutant enfin officiellement le support de balises <style> et d’attributs class et id. Alors en 2017, faut-il arrêter d’écrire ses styles en ligne dans des e‑mails ?
La question est réapparue le mois dernier quand Kevin Mandeville de Litmus a partagé son retour expliquant pourquoi Litmus n’a pas utilisé de styles en ligne dans sa première newsletter de l’année. Si ça a beaucoup de sens pour Litmus et leur audience, et s’ils ont fait un bon travail pour s’assurer d’un bon rendu dégradé, je ne suis pas sûr qu’il soit encore temps de recommander à tout le monde d’arrêter d’utiliser des styles en ligne.
Voici quelques points à prendre en compte, avec des pours et des contres.
Lire la suite de « Faut-il arrêter d’écrire ses styles en ligne dans des e‑mails ? »
Sara Soueidan a publié une étude de cas très intéressante sur le design l’intégration de la refonte (bientôt en ligne) de Smashing Magazine.
J’adore ce genre de détail :
Vitaly voulait pousser le caractère enjoué du chat encore plus loin. Et il a suggéré d’ajouter une sorte de jeu responsive dans le footer, où l’illustration change selon la taille du viewport. Ça commence avec l’oiseau qui chante joyeusement dans sa cage, et ça finit par le chat qui le mange. Ou vraiment ? Vous devrez le découvrir par vous-même !
J’ai hâte de voir ce que ça donne.
Le Journal du Net a publié une nouvelle version de son classement des « webmails préférés des français », où par « préférés » ils veulent toujours dire « les plus utilisés ». Le dernier classement datait de mars 2015, et la comparaison est intéressante. Les mesures ont été prises en novembre 2016 via une mesure panel de Médiamétrie.
Pour la première fois, Orange perd sa place de numéro un au profit de Gmail.
Vu sur Reddit :
Et vu sur Twitter avec une légende différente :
Je pense qu’il est temps de commencer à utiliser une bibliothèque de modèles.
On perd une partie de la référence à Indiana Jones, mais ça m’a fait rire quand même.
En ce début d’année, j’ai découvert via un tweet la série animée française « Les Grandes Grandes Vacances », diffusée en 2015 sur France 3.
Été 1939, Ernest, 11 ans, et Colette, 6 ans, deux petits parisiens, passent un weekend en Normandie chez leurs grands-parents. La France entre en guerre et décision est prise de les tenir éloignés de Paris, le temps de «voir venir». Ce séjour qui devait durer quelques semaines s’étendra sur les cinq années de la guerre, se transformant en «grandes grandes vacances»…
J’ai dévoré cette série, et j’ai vraiment adoré. C’est loin d’être cucul la praline. C’est parfois cru, parfois cruel. Ça donne une vision non manichéenne de la Guerre. J’ai aussi ressenti une véritable tension dans certains passages, avec une narration vraiment bien ficelée, et un véritable attachement pour certains personnages.
Sur la page officielle de la série, Delphine Maury, à l’initiative du projet, résume bien une partie de ce qui m’a plu :
J’ai découvert la place magnifique des femmes et des filles durant cette période, leur courage et la manière dont elles prenaient leur vie en main, ainsi que des récits bien plus nuancés que dans les livres d’histoire sur les relations avec l’occupant, entre les gens. Je me suis alors demandé comment rendre compte, le plus positivement possible, de ces témoignages.
Je recommande chaudement. C’est disponible sur Netflix (mais pas en France), sur iTunes, ou en DVD sur Amazon.
En novembre dernier, je suis tombé sur cet historique des unes du New York Times après chacune des quarante et une élections américaines, de 1852 à 2012.
Parmi les choses qui m’ont marqué :
Ce dernier point m’a particulièrement marqué. Je n’avais vraiment pensé à l’arrivée de la couleur dans la presse papier, ayant toujours connu de ma vie d’adulte la presse en couleur. Et même si le New York Times a vu apparaître la couleur petit à petit dès 1993, ça reste incroyablement récent (pour un journal qui vit depuis plus de 150 ans).
Ça m’a fait pensé au Web. Je lis régulièrement des commentaires se plaignant que le Web n’a pas telle ou telle fonctionnalité nativement. L’idée du Web a été proposée en 1989. La balise <img> a été proposée en 1993. La balise <video> a été proposée en 2007. Alors oui, en 2017, il n’y a toujours pas de standard pour styler tous les éléments de formulaires. Mais le Web reste un bébé, et on n’en est qu’au début.
