Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

Le webmail mobile d’Orange et les double tirets

J’ai découvert tout récemment qu’il existait une version mobile du webmail d’Orange. Celle-ci semble utiliser le même préfixage de règles CSS que son pendant desktop, avec le même support de propriétés CSS (ce qui est plutôt une bonne nouvelle puisqu’Orange est plutôt permissif de ce côté là).

Cependant, j’ai remarqué un gros problème au niveau de l’interprétation de double tirets dans le code HTML ou CSS. Le webmail mobile d’Orange va systématiquement remplacer toute occurrence de -- (tiret tiret) par - - (tiret espace tiret). Et ça, c’est très pénible, en particulier si comme moi vous appréciez la notation de la méthodologie BEM. Prenons par exemple le code suivant…

<style>
	.button--primary { color:#fff; background:#333; }
</style>
<a class="button--primary" href="http://www.hteumeuleu.fr/">Mon blog</a>

…sera transformé par le webmail mobile d’Orange en…

<style>
	.button- -primary { color:#fff; background:#333; }
</style>
<a class="button- -primary" href="http://www.hteumeuleu.fr/">Mon blog</a>

La règle CSS .button- -primary n’a alors plus aucun sens, et ses styles sont ignorés par le navigateur. La solution est alors de ne jamais utiliser de double tirets dans un nom de classe HTML ou une règle CSS. Soit.

Mais ce problème touche également les commentaires HTML. Ainsi le commentaire suivant…

<!-- Ceci est un commentaire HTML -->

…sera transformé par le webmail mobile d’Orange en…

<!--- - Ceci est un commentaire HTML - --->

Par chance, les balises ouvrantes et fermantes du commentaire HTML sont quand même conservés. Mais ça se gâte si on utilise un commentaire conditionnel, par exemple pour cibler certaines versions d’Outlook. Ainsi le commentaire conditionnel suivant…

<!--[if gte mso 9]>Du contenu visible uniquement sur Outlook.<![endif]-->

…sera transformé par le webmail mobile d’Orange en…

<!--- -[if gte mso 9]-->Du contenu visible uniquement sur Outlook.<!--[endif]- --->

Le commentaire est ici carrément réécrit, avec une fermeture avec le [if gte mso 9], et une réouverture avant le [endif]. Ainsi, le contenu à l’intérieur du commentaire conditionnel, censé s’afficher uniquement sur Outlook, sera visible sur le webmail mobile d’Orange. Je n’ai alors malheureusement pas d’autre solution que de ne pas utiliser de commentaire conditionnel. Ou alors de choisir de ne pas supporter ce webmail mobile.

Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

Les statistiques des webmails en France en mars 2015

Le Journal du Net a publié les statistiques de consultation des webmails en France en mars 2015, telles que mesurées par Médiamétrie (j’en parlais un peu l’an dernier).

  1. Orange (11,89, 25,8%) (12,442 millions, 26,8%)
  2. Gmail (11,24 millions, 24,4%) (au lieu de 3 en 2013, 8,637 millions, 18,6%)
  3. Outlook (8,9 millions, 19,3%) (au lieu de 2 en 2013, 8,966 millions, 19,3%)
  4. SFR (4,29 millions, 9,3%) (5,186 millions, 11,2%)
  5. Yahoo (3,95 millions, 8,6%) (5,185 millions, 11,2%)

Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

Vivement les variables CSS !

En février dernier, Aaron Gustafson expliquait sur son blog que les variables CSS sont une mauvaise idée. Ses principaux arguments sont que le support est pour l’instant mauvais et que la syntaxe est atroce. Et il n’a pas totalement tort. Les variables CSS ne fonctionnent pour le moment que sur Firefox. Et voici à quoi ressemble la déclaration et l’utilisation d’une variable en CSS.

body {
	--main-color: #333;
}

h1 {
	color: var(--main-color);
}

Si vous êtes habitué à la syntaxe habituelle des pré-processeurs, c’est sûr que la syntaxe à base de double tirets et la fonction var() sont plutôt rebutantes. Et pourtant, ces derniers mois, je suis tombé sur plusieurs intégrations qui m’ont fait dire à chaque fois : vivement les variables CSS !

Lire la suite de « Vivement les variables CSS ! »

Travailler avec de l’aluminium

La série d’articles « Dear Design Student » de Mule Design Studio est vraiment intéressante. Le dernier article en date, « Working  With Aluminium », l’est encore plus :

N’importe quelle discipline de design a une composante technique. Les designers graphiques ont besoin de l’imprimerie, les designers industriels ont besoin d’ingénierie, et les designers numériques ont besoin de code. Les designs élégants et efficaces prennent en compte les propriétés et limites de leurs matériaux. Les designers qui font de l’excellent travail étudient leurs matériaux pour comprendre les contraintes auxquelles ils répondent.

Allez regarder une vidéo de Jony Ive qui parle d’aluminium. Il adore clairement ce truc. Il a passé des heures à y penser et à expérimenter avec. Je parie que certains soirs il rentre chez lui et fait tomber des copeaux de métal en secouant son t-shirt. Personne ne lui dit que son enthousiasme pour la métallurgie implique qu’il devrait enfiler une combinaison et opérer un routeur CNC à l’usine. Il apprend ce qu’il doit apprendre pour obtenir le maximum de ses matériaux, et la qualité de son travail reflète ce soin et cette attention.

Cela devrait être votre attitude vis à vis du code en tant que designer. Apprenez tout ce que vous pouvez, et appliquez le constamment dans le but d’améliorer vos designs. Vous ne devez pas être un développeur pour y trouver un intérêt et y acquérir en compétences. Parfois avoir suffisamment de connaissances pour poser les bonnes questions est tout ce dont vous avez besoin. C’est votre responsabilité d’être impliqué dans la globalité du processus de design par tous les moyens possibles.

Un e-mail interactif avec filtre SVG et transitions CSS

Cette année, Litmus organise des concours communautaires visant à présenter des concepts d’e-mails un peu plus originaux que de trucs tout en tableaux. Le second concours vient de se terminer, et avait pour but de présenter une navigation créative au sein d’un e-mail. Pour participer, j’ai eu envie de porter cet effet de menu gluant créé par Lucas Bebber (et détaillé chez Codrops).

C’est un exemple particulièrement intéressant car cet effet nécessite à la fois l’utilisation d’un filtre SVG pour l’effet gluant à proprement parler, de transitions et transformations CSS pour faire bouger les éléments, et d’une interaction sans JavaScript. J’ai appris plein de choses en m’essayant à cet exercice. Voici le résultat final de ma participation et quelques détails sur le fonctionnement de tout ça.

Lire la suite de « Un e-mail interactif avec filtre SVG et transitions CSS »

Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

C’est facile

Le CommitStrip du jour fait mouche :

« Tout ça c'est bien mais j'ai rien compris, c'est trop compliqué ! »

Juger de ce qui est simple ou compliqué est très relatif. Par exemple je connais certains développeurs qui sont tellement à l’aise avec Vim qu’ils trouvent ça simple. La dernière fois que j’ai lancé Vim, je suis resté bloqué sans savoir quoi faire devant le premier écran et j’ai du chercher un tutoriel pour m’expliquer comment quitter la commande. Pourtant quand je lis Harry Roberts, j’ai vraiment l’impression que c’est simple.

L’exemple de Commit Strip m’a rappelé une autre bande dessinée, mais cette fois-ci de Penny Arcade, lors de la sortie du Fire Phone d’Amazon :

If I see something delightful, I'm delighted by it.

Le nouveau « Fire Phone » a une partie de son UI qui s’appelle « l’enchanteur ». Je ne pense pas que vous puissiez faire ça. Si je vois quelque chose d’enchanteur, j’en suis enchanté. Sans que vous n’ayez à me le dire. Je le sais immédiatement.

Dès que vous l’appelez ainsi, je suis mal à l’aise. Tout le truc devient vraiment suspect.

En décembre dernier, avec mes collègues, on a relancé Cher Papa Noël pour la quatrième année consécutive. Précédemment, l’accroche principale du site était :

Créez et partagez simplement vos listes d’idées de cadeaux de Noël.

Pour cette année, on a supprimé le « simplement ». D’une part, parce que ça rend la phrase plus simple. Mais surtout parce qu’en faisant tester le site, on s’est rendu compte que le site n’était pas si simple. Le site permet de créer des listes d’idées de cadeaux en y collant les URL de produits que vous avez copié ailleurs sur le web. Copier, coller, bim. Sauf qu’en faisant tester le site par nos proches, on s’est rendu compte que pour certains (moins familiers avec l’utilisation d’un ordinateur et du Web en général), un copier-coller et une URL, c’est déjà très compliqué. 

Alors on a supprimé le « simplement ». Ce n’est pas à nous de juger si le site est simple ou pas.

L’année dernière, Chris Coyier avait publié un article sur les mots à bannir dans l’écrit éducatif.

Je ne suis pas diplômé en Anglais, mais en tant qu’auteur et consommateur de tonnes d’écrits (principalement techniques) éducatifs, je remarque un certain nombre de mots et phrases qui reviennent souvent et n’ajoutent rien du tout à l’écriture. En réalité, ils peuvent même lui nuire.

« Évidemment », « simplement », « bien sûr », « clairement », « juste » ou « facile » font partie de la liste. Je suis probablement coupable d’utiliser ces expressions beaucoup trop souvent. Mais désormais, à chaque fois que je me surprends à employer l’un de ces termes dans un e-mail à un client ou dans un article, je reprends ma phrase et je la simplifie.

Essayez, vous aussi. Vous verrez, c’est facile.

Yahoo supporte les media queries

C’est la nouvelle de la semaine rapportée par FreshInbox : Yahoo supporte désormais officiellement les media queries. Précédemment, Yahoo filtrait les media queries, et les filtrait mal. Ainsi le code suivant…

@media only screen and (max-width:600px) {
	.box { width:auto; } 
	.box-title { font-size:1.25em; }
}

… était transformé en :

_filtered #yiv6851014585 {
}
	#yiv6851014585 .yiv6851014585box-title { font-size:1.25em; }
}

Yahoo prenait le contenu entre la première accolade ouvrante d’une media query et la première accolade fermante (correspondant à la première règle), et filtrait le tout. Les autres règles contenues dans la media query se trouvait alors appliquée quelque soit le medium. On utilisait alors des sélecteurs d’attributs dans les media queries pour éviter que les règles ne s’appliquent. Tout ça, c’est désormais terminé.

Et cette correction ne vient pas de nulle part. Il y a tout juste un mois, Justin Khoo a remonté le bug sur la plate-forme dédiée de Yahoo. Et en un mois seulement, Yahoo a fait la correction. C’est très encourageant de voir que Yahoo est prêt à faire ce genre de corrections.

L’autre bonne nouvelle, c’est que cette modification s’applique pour toutes les versions de Yahoo, soit le webmail desktop, mais aussi les applications iOS ou Android.

Tout n’est cependant pas tout rose. Yahoo ne supporte que les media queries basées sur min-width, max-width, min-height ou max-height. Les media queries basées sur min-device-width, min-device-height, max-device-width, max-device-height-webkit-min-device-pixel-ratio ou même print seront filtrées.

Ainsi le code suivant…

@media only screen and (max-device-width:600px) {
	.box { width:auto; } 
}

… est transformé en :

@media screen and ( _filtered_a ) {
	#yiv6851014585 .yiv6851014585box { width:auto; } 
}

Un autre bug survient dès que l’on imbrique des media queries les unes dans les autres. Ainsi le code suivant…

@media only screen and (min-width:320px) {
	@media only screen and (max-width:480px) {
		.box { background:#001F3F; }
	}

	.box { background:#FF851B; }
}

… est transformé en :

@media screen and (min-width:320px) {
	@media screen and (max-width:480px)
	#yiv6851014585 .yiv6851014585box { background:#001F3F; }
}

#yiv6851014585 .yiv6851014585box { background:#FF851B; }
#yiv6851014585

Alors très clairement, je n’écris jamais de media queries comme cela (et j’ai du mal à imaginer des cas où ce serait indispensable de l’écrire comme ça). Mais cela pourrait devenir courant avec l’arrivée future de la spécification des Media Queries niveau 4.

Bravo quand même à Yahoo d’avancer dans la bonne direction. J’espère que ceci est le premier pas d’une longue marche.

Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

Le webmail mobile de La Poste et le mot « body »

En refaisant des tests sur le webmail mobile de La Poste, je suis tombé par hasard sur un nouveau bug. Par défaut, le webmail mobile de La Poste remplace la balise <body> d’un e-mail par un <div class="tag_body">. C’est une pratique plutôt courante chez les webmails. Jusqu’ici tout va bien.

Afin d’ajuster les styles appliqués sur la balise <body>, le webmail de La Poste remplace aussi les sélecteurs body { } par div.tag_body { }. Jusqu’ici tout va bien.

Mais si la moindre de vos classes a le malheur de contenir le mot body isolé, alors elle sera également affectée par ce remplacement dans les styles. Ainsi un sélecteur .media-body sera transformé en .media-div.tag_body. Curieusement, cette transformation ne s’applique pas si le terme body est inclus dans un mot.

Ainsi le code suivant…

.body {  }
.media-body {  }
.everybody {  }

… est transformé en :

.wrapper_h8uftw div.tag_body {  }
.wrapper_h8uftw .media-div.tag_body {  }
.wrapper_h8uftw .everybody {  }

Afin d’éviter ce problème, je n’ai pas trouvé d’autre solution que d’éviter d’utiliser toute classe contenant le mot body.

Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

Le webmail mobile de La Poste et les liens Youtube et Dailymotion

Cette semaine je suis tombé sur une fonctionnalité bien particulière du webmail mobile de La Poste. Quasiment chaque lien vers Youtube ou Dailymotion est complété par l’ajout d’un lecteur intégré. Dans l’exemple suivant, j’ai mis un lien vers une vidéo Youtube, et un lien vers une recherche Youtube.

Un e-mail transformé par La Poste avec des liens Youtube

Ainsi, le code suivant…

<a href="http://www.youtube.com/watch?v=i6ft4GcaNPE">Un Zombie Dingo</a> sur <a href="http://www.youtube.com/user/WaltDisneyStudiosFR/search?query=Mickey+Mouse+Episode+int%C3%A9gral">Youtube</a>

… est transformé en :

<object width="250" height="200">
	<param name="movie" value="http://www.youtube.com/v/www.youtube.com&hl=fr&fs=1&rel=0">
	<param name="allowFullScreen" value="true">
	<param name="allowscriptaccess" value="always">
	<param name="wmode" value="transparent">
	<embed src="http://www.youtube.com/v/i6ft4GcaNPE&hl=fr&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="250" height="200">
</object>
<br>
<a href="http://www.youtube.com/watch?v=i6ft4GcaNPE" target="_blank" class="ui-link">Un Zombie Dingo</a> sur 
<object width="250" height="200">
	<param name="movie" value="http://www.youtube.com/v/www.youtube.com&hl=fr&fs=1&rel=0">
	<param name="allowFullScreen" value="true">
	<param name="allowscriptaccess" value="always">
	<param name="wmode" value="transparent">
	<embed src="http://www.youtube.com/v/user/WaltDisneyStudiosFR/search?query=Mickey+Mouse+Episode+int%C3%A9gral&hl=fr&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="250" height="200">
</object>
<br>
<a href="http://www.youtube.com/user/WaltDisneyStudiosFR/search?query=Mickey+Mouse+Episode+int%C3%A9gral" target="_blank" class="ui-link">Youtube</a>

Cette fonctionnalité part d’un bon sentiment. Mais dans la pratique, son implémentation est une véritable catastrophe. Et ça pose un certain nombre de problèmes :

  1. Chaque balise <a> est directement précédée par l’insertion d’une balise <object> et d’un <br>. La mise en page de votre e-mail risque d’être déformée à cause de ça, que ce soit parce que vous avez mis un lien sur du texte ou autour d’une image.
  2. Un lecteur est intégré même pour les liens qui ne correspondent pas à des vidéos (par exemple une page d’utilisateur, une page de recherche, ou n’importe quelle page statique de Youtube ou Dailymotion). Dans ce cas, rien ne fonctionne, et on se retrouve avec une zone vide à l’écran.
  3. Le lecteur intégré utilise Flash. Pour un webmail sur mobile. J’aimerais bien rencontrer celui qui a eu cette idée de génie. Youtube parvient à renvoyer une version HTML5 de la vidéo à travers la balise <embed>. Mais pour Dailymotion, rien ne fonctionne si vous n’avez pas Flash Player installé.
  4. Si vous avez Flash Player installé, le lecteur Youtube ne fonctionnera pas car l’URL en valeur du paramètre movie est erronée. (On a alors une balise <param name="movie" value="http://www.youtube.com/v/www.youtube.com">).

Je suis vraiment émerveillé par autant d’erreurs qui montrent que tout ceci n’a jamais du être testé une seule fois par la moindre personne chez La Poste.

Heureusement, je me suis rendu compte qu’on pouvait facilement éviter l’ajout du lecteur intégré. Pour cela, il suffit de préciser tous les liens vers Youtube et Dailymotion avec un protocole https, et non en http.

Je suppose que les développeurs du webmail n’ont même pas pris la peine d’écrire une regex permettant de gérer les deux cas. Et c’est tant mieux. Paradoxalement, leur incompétence (pour créer un tel filtre) nous sauve de leur incompétence (pour intégrer un lecteur vidéo).

Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

5 ans

Il y a 5 ans, le 24 février 2010 à 15h53, je publiais mon premier tweet. Je suis plutôt mauvais pour fêter les anniversaires, mais celui-ci me tient à cœur. Des paroles de la chanson Wooden Nickles de Eels me sont revenues en tête aujourd’hui, et elles illustrent parfaitement mon état d’esprit :

thinking how things have turned out
i never would’ve guessed it this way

Mon compte Twitter a atteint les 10 000 abonnés la semaine dernière. C’est fou. Presque absurde, même. Je tweete. J’écris des articles. Je monte des projets. Je donne des conférences. Je vais bientôt me lancer dans de la formation.

C’est fou. Je n’aurais jamais pu m’imaginer faire tout ça. Je n’ai aucune idée de combien de temps je continuerais tout ça. Je n’ai aucune idée d’où tout ça va m’amener (si ça m’amène quelque part un jour). Mais je vais essayer de continuer de faire ce qui me plaît.

Merci à tous mes lecteurs et abonnés de m’accompagner dans cette étrange aventure.

Le nom des choses

Des discussions intéressantes ont émergé récemment sur la pertinence de la dénomination du métier d’intégrateur à travers des articles comme « Je ne suis pas développeur » (par STPo), « Front-end designer ou intégrateur ? » (par Éric Daspet) ou dans un document collaboratif (lancé par Marie Guillaumet).

J’ai un attachement personnel déraisonné pour le nom d’intégrateur. Mais à chaque fois que je lis des discussions sémantiques sur des termes de nos métiers, je ne peux pas m’empêcher de repenser à ces sages paroles de Richard Feynman.

Un lundi, quand nos pères étaient au travail, nous autres enfants jouions dans un champ. Et l’un des enfants m’a dit : « Tu vois cet oiseau ? Quelle espèce d’oiseau est-ce que c’est ? » Et j’ai dit que je n’avais pas la moindre idée de quelle espèce d’oiseau il pouvait s’agir. Et il dit : « C’est une grive à gorge brune. Ton père ne t’apprend rien du tout ! » Mais c’était tout le contraire.

Il m’avait déjà tout appris. « Tu vois cet oiseau ? » me disait-il. « C’est une fauvette de Spencer » (il ne connaissait pas le vrai nom). « Et bien, en italien, c’est une Chutto Lapittida. En portugais, c’est un Bom da Peida. En chinois, c’est un Chung-long-tah, et en japonais, c’est un Katano tekeda. Tu peux apprendre le nom de cet oiseau dans toutes les langues du monde, mais quand tu auras fini, tu ne connaîtras absolument rien de cet oiseau. Tu en sauras seulement plus sur les humains à différents endroits, et comment ils nomment cet oiseau. Alors regardons cet oiseau et voyons ce qu’il fait — c’est ça qui compte. »

J’ai appris très tôt la différence entre savoir le nom de quelque chose et savoir quelque chose.

Je me fiche pas mal que mes collègues ou clients me désignent comme intégrateur, développeur front-end, monteur HTML ou développeur guichet. L’important, c’est qu’ils comprennent ce que je fais, là où mon métier commence, et là où il s’arrête. Et ça peut très bien varier d’un client à un autre, ou d’un projet à un autre.

Ma connexion de campagne

Depuis un peu plus d’un an, j’habite à la campagne. Le vacarme du ramassage des poubelles au réveil a été remplacé par le chant des oies et le meuglement des vaches. En contrepartie, j’ai dû troquer ma connexion ADSL citadine à 10 Mbits/s contre une connexion ADSL de campagne à 2 Mbit/s.

2 Mbit/s, c’est quand même pas mal. J’ai découvert le web avec une connexion 56 K, et j’ai grandi avec une connexion ADSL à 512 Kbit/s. À 2 Mbit/s, je peux télécharger presque 1 Go en une heure. (Avec une connexion 56 K, il m’aurait fallu plus de 2,5 jours.) C’est une connexion suffisante pour surfer sur le web dans des conditions convenables. Mais il y a quand même quelques inconvénients. Par exemple, dès que je veux regarder une vidéo en streaming. En dehors de Youtube et Vimeo, la plupart des lecteurs vidéo du web sont absolument atroces pour ma connexion. Par exemple ce matin, j’ai voulu regarder une vidéo chez Polygon vantant les graphismes d’un nouveau jeu Star Wars.

Voici ce que j’ai vu.

Une vidéo en bas débit chez Polygon

Autant dire que je ne trouve pas ces graphismes folichons. En forçant manuellement la vidéo en qualité élevée, j’étais déjà plus emballé. Mais j’ai du attendre près d’une minute pour que le lecteur ait téléchargé une dizaine de secondes. J’ai donc rapidement abandonné le visionnage de cette vidéo.

Là où ça se gâte, c’est quand la télévision (via ADSL) est allumée. Je passe alors d’un débit de 2 Mbits/s à 0,2 Mbits/s. Ça devient alors un tout autre monde. À 0,2 Mbit/s, il me faut environ quarante secondes pour charge une page d’un mégaoctet. Le web presque tout entier devient alors très, très lent. Quand il se charge. À 0,2 Mbits/s, n’importe quelle interface reposant lourdement sur du JavaScript devient tout simplement inutilisable. L’écran de chargement de Gmail me semble interminable. Je maudis les sites utilisant des polices personnalisées en CSS, car je suis condamné à regarder des pages sans aucun texte pendant qu’elles se chargent.

Je rencontre aussi parfois des surprises. Par exemple, le soir où Apple annonce le langage Swift et que je veux voir par simple curiosité à quoi ça ressemble, j’essaye de télécharger le livre de présentation sur iBooks.

Un téléchargement lent sur IBooks

« 2 heures » de téléchargement restant pour 308 Ko. Ça fait beaucoup. J’ai compris un peu plus tard pourquoi c’était si long. Au même moment, ma Wii U avait décidé de se mettre à jour. 2 Mbits/s moins la télé moins le téléchargement d’une mise à jour pour la Wii U égale plus grand chose pour le web.

Alors face à ça, je m’adapte. Je laisse des pages se charger en arrière-plan, et j’y retourne cinq minutes plus tard, en espérant que tout soit bien chargé. Mais là encore, je maudis certains sites qui forcent le rafraichissement des pages en utilisant une <meta http-equiv="refresh">. Je maudis aussi les sites qui utilisent un scroll infini plutôt qu’une pagination, parce que ça signifie que je suis condamné à regarder des contenus se charger, plutôt que de passer directement à la page suivante en arrière-plan. Et je maudis aussi les sites qui utilisent des scripts de lazyload pour des images (qui permettent de ne déclencher le chargement des images qu’une fois que l’utilisateur a scrollé jusqu’à leur niveau). Avec ma connexion de campagne, ça signifie que je dois encore une fois attendre devant mon écran que ces contenus se chargent.

Mais tout ça est en passe de changer ! En fin d’année dernière, j’ai découvert qu’Orange avait installé une antenne 4G à trois kilomètres de chez moi. Je suis alors aussitôt passé chez Sosh. J’avais pris un téléphone du boulot pour tester le débit en 4G. J’ai hurlé de joie en voyant le premier résultat sur SpeedTest.

31.57 Mbps en débit descendant.  18.93 Mbps en débit montant.

Malheureusement, mon iPhone 5 ne supporte pas la 4G française (à part sur les fréquences de Bouygues Telecom). Mais rien qu’en 3G+, j’ai déjà un débit dépassant les 8 Mbit/s. C’est déjà un grand pas en avant pour moi pour le moment. Et je changerais peut-être de téléphone dans le courant de l’année pour profiter de la 4G.

Alors pourquoi je raconte tout ça ? Parce que ça me fait beaucoup réfléchir sur les statistiques de débit que je peux lire et parfois communiquer à mes clients. Juste parce que j’ai une connexion théorique de 2 Mbit/s ne signifie pas que j’ai ces 2 Mbit/s de disponibles pour surfer sur le web. Même quand ma télévision n’est pas allumée, je suis quasiment en permanence sur Spotify, qui pompe forcément une partie de mon débit.

Ça me fait réfléchir aussi, parce que les bonnes pratiques de report de chargement de fichiers se révèlent en fait être un enfer avec un petit débit.

Et puis ça me fait réfléchir, parce que la connexion la plus rapide avec laquelle j’ai accès au web est désormais sur mon téléphone. J’utilise quasiment en permanence cette connexion partagée depuis mon téléphone sur mon ordinateur. Si mon forfait n’était pas limité en téléchargement (à 3 Go), j’aurais probablement déjà résilié mon abonnement ADSL.

 

Utiliser CSS dans Gmail

En août dernier, j’expliquais comment Gmail supporte bien la balise <style> et les media queries. Pas grand chose n’a changé du côté de Gmail depuis. Mais il s’avère que la compréhension collective des filtres opérés par Gmail a, elle, plutôt bien évolué. Quelques jours après la publication de mon précédent article, l’excellent FreshInbox a publié deux articles qui ont complètement changé ma compréhension de Gmail.

Dans le premier article, « Gmail supporte la balise <style>… en quelque sorte », Justin Khoo explique que simplement en ajoutant un sélecteur universel * devant une règle CSS, celle-ci ne sera pas supprimé. Dans mon précédent article, j’écrivais :

Malheureusement, Gmail supprime toute règle CSS contenant des pseudo-sélecteurs comme :first-child ou :nth-child().

C’est totalement faux ! Grâce à cette bidouille de sélecteur universel, on peut tout à fait utiliser des pseudo-classes. Si on prend par exemple le code suivant :

* div:first-child { background:red; }
* div:nth-child(2) { background:blue; }

Il sera transformé par Gmail ainsi :

div.m1479b618d2293d85 * div:first-child { background:red; }
div.m1479b618d2293d85 * div:nth-child(2) { background:blue; }

C’est déjà un grand pas en avant ! Mais ça signifie aussi qu’on peut aussi utiliser un sélecteur d’attributs. Et c’est là où les choses deviennent vraiment intéressantes.

Dans un article publié quelques jours après, Justin Khoo explique comment rendre un e-mail interactif dans Gmail en utilisant le sélecteur d’attributs. Grâce à la présence du sélecteur *, il utilise une règle avec la pseudo-classe :hover.

* [lang~="x-divbox"]:hover{
	background-color: green !important;
	color: white;
}

Comme Gmail supprime toute classe du code HTML, il détourne malicieusement l’attribut lang (qui lui n’est pas supprimé) pour cibler un élément en CSS. Est-ce que c’est sale ? Oui. Est-ce que ça fonctionne ? Oui.

It it looks stupid but works, it is not stupid.

Et c’est là où j’ai compris un truc. Le problème de Gmail, ce n’est pas son support de CSS, mais son support de HTML. En supprimant des attributs HTML de notre code, Gmail complique l’utilisation de CSS.

J’ai alors fait quelques tests afin de déterminer si d’autres attributs que lang ne pouvaient être utilisés, l’objectif étant de trouver un attribut qui puisse être utilisé à des fins de styles, mais sans incidence sur le rendu utilisateur. Malheureusement, Gmail supprime les attributs id, class ou data-*. Par contre, Gmail conserve les attributs title, alt, lang, mais aussi les attributs ARIA comme aria-labelledby.

J’ai rapidement écartés les attributs title et alt qui se retrouvent visibles facilement dans un navigateur. Et je reste alors partagé entre les attributs lang et aria-labelledby. D’après mes tests, une utilisation détournée de l’un ou de l’autre n’a pas d’incidence avec VoiceOver sous OS X. Cependant, un récent article d’Adrian Roselli met en garde contre l’utilisation détournée de l’attribut lang.

J’ai alors une préférence pour l’utilisation de aria-labelledby. Je suppose que si un lecteur d’écran ne trouve pas d’élément avec l’identifiant correspondant, il ignorera purement et simplement l’attribut (c’est bien ce qui se passe dans VoiceOver).

Voici un exemple de code fonctionnel dans Gmail avec cet attribut.

<div class="toto" aria-labelledby="toto">
	Ceci est un test.
</div>
.toto, * [aria-labelledby="toto"] { background:red; }

Ce code sera transformé comme ci-dessous par Gmail.

div.m1479b618d2293d85 .toto,div.m1479b618d2293d85 * [aria-labelledby="toto"]{background:red}

Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

Mom Itunes

J’ai découvert chez Khoi Vinh ce sketch de Tommy Johnagin qui aide sa mère à installer iTunes. J’ai ri tout haut à ce passage :

Elle m’a appelé une heure après. « J’ai téléchargé une chanson. Est-ce que c’est censé s’ouvrir dans Microsoft Works ? » Non, maman. Non, ce n’est pas censé s’ouvrir dans Microsoft Works. Je ne sais même pas comment tu as fait pour que cela se produise. Je ne suis pas suffisamment intelligent pour être suffisamment bête pour revenir à l’envers et comprendre le nombre de choses que tu as fait de travers pour ouvrir une chanson dans Microsoft Works. Bill Gates ne pouvait pas ouvrir une chanson dans Microsoft Works. Le nombre de fois où ton ordinateur a du te dire « Êtes-vous sûr ? ». Et en toute confiance : « Oui ! Pourquoi est-ce que tu continues à demander ? ». L’ordinateur doit se dire « je ne pense pas que nous sommes censés être là Madame ».

J’aime beaucoup l’expression « être suffisamment intelligent pour être suffisamment bête ». Aussi je ne sais pas si c’est une erreur ou du génie, mais le sketch en question dans son album s’intitule « Mom Itunes ». Je penche pour la seconde option.

Retour sur 24 jours de web, édition 2014

En décembre dernier, j’ai lancé la troisième édition de 24 jours de web, « le calendrier de l’avent des gens qui font le web d’après ». J’ai déjà donné quelques détails sur l’intégration du site. J’avais aussi écrit un compte rendu de l’édition 2012, mais rien sur l’édition 2013. Voici quelques remarques personnelles sur cette dernière édition et sur le projet en général.

Lire la suite de « Retour sur 24 jours de web, édition 2014 »

Non, Apple, tu n’es pas Charlie

Les attentats perpétrés ce mercredi 7 janvier à Paris m’ont laissé sans voix. Je n’ai aucune idée de comment réagir face à ce genre de situation. Je regarde les chaînes d’infos en boucle. Je lis et relis des articles sur tous les sites d’information ressassant les mêmes informations. Comme si j’avais besoin de me rappeler que c’était bien arrivé.

Néanmoins, je trouve un certain réconfort à observer des rassemblements, un peu partout dans le monde ou en ligne, souvent derrière le slogan « Je suis Charlie ». Mais je n’ose pas prononcer ce slogan pour autant. Parce que si je suis pour la liberté d’expression, je n’ai jamais œuvré pour sa défense. Je n’ai jamais acheté le moindre exemplaire de Charlie Hebdo. Et je ne me suis encore moins battu pour pouvoir librement publier mes idées.

Charlie, oui. Et des journalistes, dessinateurs, et policiers assurant leur protection sont morts pour ça. Je n’ai pas le millionième de courage et de valeurs que ces gens avaient.

Ce matin, je lis que le site français d’Apple arbore fièrement une bannière avec le slogan « Je suis Charlie ». Et ça me met hors de moi.

Je suis Charlie sur le site d'Apple

Il y a une page Wikipédia recensant quelques exemples de censures opérées par Apple. Le plus approprié à vous donner est le suivant :

En décembre 2009, Apple a banni une application de dessins humoristiques appelée NewsToons par le dessinateur Mark Fiore, sur les motifs qu’elle « ridiculisait des personnalités publiques ».

En avril 2010, Fiore a gagné le prix Pulitzer pour ses dessins satiriques politiques, rentrant dans l’Histoire comme le tout premier dessinateur publié uniquement sur Internet à gagner le prestigieux prix journalistique. Suite à un tollé général après que l’affaire ait fait grand bruit au lendemain de sa récompense, Apple a demandé à Fiore de resoumettre son application, et elle a cette fois-ci été acceptée.

Fiore déclara : « Bien sûr, mon application a été approuvée. Mais que se passe-t-il pour quelqu’un qui n’a pas gagné un Pulitzer et qui fait peut-être une meilleure application politique que la mienne ? Est-ce qu’il faut une frénésie médiatique pour qu’une application avec du contenu politique soit approuvée ? »

Cet exemple date d’il y a quelques années, et il avait fait grand bruit dans la presse généraliste. Mais il ne se passe pas une semaine sans que je ne lise un exemple du même genre. Encore ce matin, justement, je suis tombé sur ce tweet :

Notre application iOS a été rejetée de l’App Store parce qu’un lien de support va sur le web vers une FAQ où nous mentionnons que nous avons une application disponible sur Android.

Alors, non, Apple, tu n’es pas Charlie. Tu œuvres au quotidien contre la liberté d’expression pour défendre tes intérêts commerciaux. Je comprends que tu sois ému par ces attentats et que tu souhaites apporter ton soutien. Mais dans ce cas, il est peut-être temps de revoir ta politique de revue des contenus afin de défendre la liberté d’expression plutôt que la brider.

Designing for Emotion in Email

Litmus a mis en ligne il y a quelques semaines les vidéos de The Email Design Conference de 2014. La conférence Designing for Emotion in Email, par Jason Rodriguez et Kevin Mandeville, est visible gratuitement. Et ça tombe bien parce qu’elle plutôt chouette, avec plein d’exemples concrets.

J’ai particulièrement apprécié l’exemple suivant (à partir de 28m23s) :

Certains d’entre vous ont peut-être reçu cet e-mail de Fab. Ils ont littéralement envoyé un e-mail avec un chat.

Un e-mail de Fab avec un chat.

Il n’y a rien d’autre dans cet e-mail. Nous aimons tous les chats mais… qu’est-ce que c’est ? pourquoi ?

Mais ils ont saisi l’opportunité de cette erreur. Et ils ont tenté de transformer ça en bienveillance de la part de leurs abonnés. La suite de cet e-mail contient aussi beaucoup de chats. Mais ils expliquent ce qu’il s’est passé. Et ils offrent à tout le monde 10 % de réduction sur tout le site.

Un autre email de Fab avec des chats

Ils ont pris leur erreur, et ont créé cette opportunité pour eux. Et ils ont fait ça en reconnaissant qu’ils sont humains, qu’ils font des erreurs, qu’il y a bien quelqu’un qui envoie les e-mails et que ce n’est pas une espèce de machine géante. Et ça a créé cette connexion d’Homme à Homme.

Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.

L’expérience après une commande

Le mois dernier, j’ai été missionné par le Père Noël pour trouver une poupée « Elsa Chantant » pour ma filleule. Après une recherche sur Google, j’ai rapidement décidé de passer commande sur le site de Toys“R”Us (qui m’assurait d’être livré dans les temps, vu que je ne m’y prenais pas du tout à la bourre…). Je n’avais jamais passé de commande sur le site, et j’ai été très agréablement surpris par la simplicité et la facilité d’achat sur le site. En effet, dès la page panier, le site de Toys“R”Us propose un bouton « Acheter avec Paypal » qui me redirige directement vers Paypal. Je n’ai alors eu qu’à me connecter à mon compte Paypal, et toutes mes coordonnées ont été récupérées. J’ai ainsi pu passer une commande sans avoir à me créer de compte chez Toys“R”Us, ce qui est vraiment pratique dans ce genre de cas où je ne compte pas refaire d’achat.

À ce moment précis, j’étais un client totalement satisfait. Mais je ne sais pas si je peux en dire autant pour tout ce qui a suivi ma commande, hors du site, à travers les différents e‑mails reçus. Et en y repensant, j’ai l’impression que mon expérience est assez représentative de ce qui se passe pour un client après une commande en ligne. Cet article n’a donc rien du tout de personnel contre Toys“R”Us. Je tenais plutôt à partager quelques remarques et réflexions.

Lire la suite de « L’expérience après une commande »

Quelques détails sur l’intégration de 24 jours de web

Pour la troisième année consécutive, mon mois de décembre est rythmé par 24 jours de web (le « calendrier de l’avent des gens qui font le web d’après » dont j’avais parlé ici en 2012 et 2013). Le mois dernier, j’ai un peu retravaillé l’intégration du site, en particulier la page d’accueil et sa vue en calendrier. Voici des détails sur quelques points sur lesquels j’ai porté mon attention pour cette mise à jour.

Lire la suite de « Quelques détails sur l’intégration de 24 jours de web »

Gmail s’intéresse aux media queries

L’équipe de Inbox (le nouveau client mail de Gmail) participe à un AMA sur Reddit. À la question « Prévoyez-vous de supporter des e-mails responsive ? », Jason Cornwell (Lead Designer) répond :

Nous sommes intéressé pour supporter les media queries mais nous devons être sûrs de faire les choses correctement. Nos changements l’an dernier pour afficher les images par défaut dans Gmail étaient similaires : il y avait une tonne de travail compliqué lié à la sécurité qui devait se faire en coulisse avant que nous puissions rendre cette fonctionnalité en apparence simple sûre pour tout le monde. Vous pouvez en lire plus sur ce lancement ici : http://goo.gl/pJavzw

Après la récente regression de l’application Gmail sur Android 5, voici enfin un signe d’espoir de changement positif.