HTeuMeuLeu

Samedi dernier, j’ai eu la chance de participer à l’atelier « Tester l’accessibilité de son site Web avec NVDA » présenté par Denis Boudreau à Paris Web. Après une présentation très intéressante (où j’ai appris notamment qu’il y avait 39 000 000 de non-voyants dans le monde, mais seulement 22 000 utilisateurs de NVDA), les participants ont été invités à faire des tests à l’aide d’un lecteur d’écran sur le site de la Fnac par petits groupes. Je me suis donc retrouvé à faire la connaissance de @ouik_web et @joellechong avec qui nous avons testés les formulaires de la création de compte du site. N’ayant pas de PC sous la main, nous avons fait des tests avec VoiceOver sous OS X. Et j’ai trouvé nos trouvailles particulièrement intéressantes. En voici un compte-rendu.

Afin de créer un compte, nous avons sélectionné le lien « Me connecter » du header du site. Celui-ci ouvre un sous-menu qui contient un lien « Créer mon compte ». En cliquant sur ce lien, on arrive sur la page suivante.

• Le premier point surprenant, c’est que cette page contient également un formulaire d’identification (alors que je viens pourtant explicitement de cliquer sur un lien « Créer mon compte »). Et le problème, c’est que cette colonne d’identification se trouve en premier dans le code HTML. Avec un lecteur d’écran, on doit donc traverser toute cette zone avant d’atteindre le formulaire de création de compte qui nous intéresse.
• Les étoiles après les libellés de chaque champ n’ont pas de libellés correspondants. En fait, même pour un utilisateur voyant, nulle part sur le reste de la page il n’y a d’indication de ce que à quoi correspondent ces étoiles. Est-ce que ce sont les champs obligatoires ? Est-ce que ce sont les champs facultatifs ?
• Le lien « oublié ? » après le libellé « Mot de passe* » n’est pas très explicite. Si on navigue sur la page avec la touche tabulation, on tombe directement sur ce lien sans avoir aucune idée qu’il concerne le mot de passe.
• Le champ d’adresse e-mail utilise un <input type="text" /> plutôt qu’un <input type="email" />. L’avantage, c’est qu’un lecteur d’écran pour restituer cette précision sur le type de contenu attendu, et c’est une aide précieuse sur des formulaires. La version mobile de la création de compte de la Fnac utilise bien un champ <input type="email" />.
• La balise <title> de la page est vide. Dans ce cas, quand on prends le focus sur la fenêtre, VoiceOver va lire l’URL de la page. Je vous laisse imaginer l’horreur d’entendre https://secure.fnac.com/Account/Logon/Logon.aspx?LogonType=StandardCreation&PageAuth=X&pagepar=LogonType%3dStandardCreation%26PageRedir%3dhttp%253a%252f%252fwww4.fnac.com%252f&PageRedir=https%3a%2f%2fsecure.fnac.com%2fAccount%2fProfil%2fAccountInfos.aspx.
• Avant le formulaire de création de compte, il y a un petit texte d’introduction « Bonjour cher inconnu, on ne se connait pas encore. Aucun problème, continuez c’est tout droit. » Les deux phrases sont chacune sur une ligne. Sauf qu’il n’y a pas de point à la fin de la première. VoiceOver lit donc les deux phrases d’une seule traite. C’est le genre de détails presque insignifiant visuellement, mais assez pénible quand on utilise un lecteur d’écran.
• Sous le champ « Mot de passe », il y a une indication « 8 caracètres minimum dont au moins 1 chiffre et 1 lettre ». J’ai bien dit « caracètres ». C’est encore une fois une faute à côté de laquelle on peut facilement passer visuellement, mais qui saute aux oreilles en utilisant un lecteur d’écran.
• Lorsqu’on valide le formulaire mais qu’il y a des erreurs, la page se recharge complètement, et on se retrouve à devoir renaviguer à travers toute la page. C’est assez déroutant, et un focus sur le message d’erreur aurait été le bienvenu.

Une fois ce formulaire dûment complété, on arrive sur la deuxième étape suivante.

On y retrouve plus ou moins les mêmes écueils, mais avec quelques suppléments :

• Les titres « Mon compte » et « Vos données personnelles : identifiez-vous » sont tous les deux dans des balises <h2>. Il n’y a aucun titre de niveau <h1> sur la page. À l’écoute, on a l’impression de passer d’une section à une autre, plutôt que de rentrer dans le coeur de la page.
• Les diminutifs de civilité « Mlle », « Mme » et « M » n’ont pas d’alternatives complètes. VoiceOver lit donc littéralement « Mleu », « AimeAimeEuh », et « Aime ».
• Les <label> des champs Nom, Prénom et « Combien avez-vous d’enfants ? » ont bien un attribut for, mais celui-ci est vide. Quand on arrive dans ces champs, on n’a donc aucune idée d’où est-ce qu’on est. De la même manière, les deux listes déroulantes et le champ texte pour la date de naissance n’ont aucun label associés. On navigue donc de l’un à l’autre sans trop savoir où l’on est.

Et tout ça, ça ne concerne que les formulaires de la création de compte du site. Les autres groupes participant à cet atelier se sont concentrés sur d’autres points (textes, images, …) et ont répertorié tout autant de retours sur l’accessibilité du site. (J’ai surtout retenu que le lien « Mon panier » du header est totalement inaccessible, que ce soit en naviguant au clavier ou pour un lecteur d’écran, car il ne s’agit pas d’une balise <a> mais d’un ensemble de <div> dont le comportement est géré en JavaScript.)

Alors je ne cherche pas ici à jeter la pierre aux équipes responsables du site de la Fnac. Mais ce qui me fascine, c’est la facilité avec laquelle nous avons pu identifier des problèmes d’accessibilité importants, en quelques dizaines de minutes de tests, avec des outils à la portée de tout le monde. Je suis un adepte de la maxime « Si vous voyez quelque chose, dites quelque chose ». Et ça me chagrine de lire des tweets comme celui-ci. Alors j’espère que ces quelques retours ne tomberont pas dans l’oreille d’un sourd, et que la Fnac pourra mettre les moyens nécessaires pour améliorer l’accessibilité de son site.

 

Je l’ai tweetée le mois dernier, mais cette conférence m’est vraiment restée en tête. Une excellente présentation, tant sur le fond que la forme, sur l’appréhension de parler en public.

On m’a fait remarqué à deux reprises hier que ça faisait un petit moment que je n’avais rien posté ici depuis un moment. C’est en partie parce que j’étais tout récemment aux chouettes conférences de Paris Web ou que j’organise la nouvelle édition de 24 jours de web. Mais aussi parce que j’ai consacré un peu plus de temps ces derniers mois à écrire sur mon blog consacré à l’intégration d’e-mails (notamment pour expliquer comment j’ai créé un e-mail qui se transforme en le transférant). Et je suis toujours bien vivant sur Twitter. Il faut juste que je trouve un peu plus de temps pour écrire sur ce blog sur pleins de sujets qui me restent en tête depuis un moment.

J’aime bien James Victore. Et dans cette conférence du mois dernier, j’aime particulièrement cette réponse (à 7:07) face à un argument que j’entends ou prononce parfois trop souvent :

Je donnais une conférence il y a quelques années. Il y avait des questions/réponses à la fin. Et j’étais particulièrement déchaîné ce jour là. Je parlais des gens assumant et défendant leur créativité. Et puis un jeune a levé la main dans le fond.

— J’ai une question ! M. Victore, j’entends bien ce que vous dites. Mais j’ai un loyer à payer.
— C’est une histoire intéressante. Comment tu t’appelles ?
— Thomas…
— Thomas. Voici ta pierre tombale : « Ci-gît Thomas. Il aurait fait du super travail, mais il avait un loyer à payer. »

On laisse nos situations s’imposer. Vous avez besoin d’une révolution. Thomas a besoin d’une révolution. Il n’avait probablement que trente ans et il avait déjà abandonné. Il était déjà abattu.

Voici une autre pierre tombale. « Ci-gît Thomas. Il aurait fait du super travail, mais son patron ne le laissait pas faire. »

Il y a quelques semaines, j’ai tweeté un excellent article de la série « Dear Design Students » sur les développeurs et les designers. L’une des dernières phrases m’est particulièrement restée en tête :

Tout le monde pense que la personne en aval (plus proche de l’échéance) est un bloqueur, et tout le monde pense que la personne en amont est un trou du cul.

Ça m’a rappelé un sketch de George Carlin, « Idiot and maniac » :

Avez-vous déjà remarqué quand vous conduisez que n’importe qui roulant moins vite que vous est un imbécile, et n’importe qui roulant plus vite que vous est un cinglé.

Cette semaine est sorti Her Story, un jeu iOS, PC et Mac rappelant la grande époque des FMV. Vous avez accès à une base de données vous permettant de visualiser des vidéos d’interrogatoires d’une femme. Le but est de comprendre son histoire. Vous saisissez un mot, et vous pouvez visualiser les cinq premières vidéos où ce mot est prononcé. À aucun moment on ne vous dira si vous êtes sur la bonne voie ou pas. J’adore la simplicité du concept. Et même si j’étais un peu perdu au tout début, je me suis vite pris au jeu. Et j’ai trouvé que c’était une formidable manière de raconter une histoire. Mon seul reproche est que j’ai eu l’impression d’avoir compris le gros de l’histoire en moins d’une heure.

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 ! »

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.

Le CommitStrip du jour fait mouche :

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 :

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.

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.

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.

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.

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.

« 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.

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.

 

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.

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 »

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.

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.

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 »

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 »

Le mois dernier, je suis tombé via Twitter sur cette excellente conférence TED de Maysoon Zayid, une comédienne atteinte de paralysie cérébrale qui raconte son parcours face au ressenti de son handicap. C’est vraiment l’une des meilleures conférences TED que j’ai regardé ces dernières années. Voici quelques morceaux choisis :

S’il y avait des Jeux Olympiques de l’Oppression, je gagnerais la médaille d’or. Je suis Palestinienne, Musulmane, je suis une femme, je suis invalide, et je vis dans le New Jersey. […]

J’ai eu une bourse pour l’Université d’État d’Arizona, parce que je remplissais chacun des quotas. […]

Les gens avec des handicaps constituent la plus grande minorité au monde, et nous sommes les plus sous-représentés dans le spectacle. […]

En l’écoutant, ça m’a rappelé un sketch de Louis C.K. (qui avait fait le tour du web en image) :

J’ai lu quelque chose dans le journal qui m’a vraiment embrouillé l’autre jour. Ça disait que 80 % des habitants de New York sont des minorités…

Est-ce qu’on ne devrait pas arrêter de les appeler « minorités » quand elles représentent 80 % de la population ? C’est vraiment une attitude de blanc, vous voyez. Vous pourriez emmener un homme blanc en Afrique, et il vous dirait « Regarde toutes les minorités qu’ils ont ici ! ».

Cela m’amène à un projet qui m’occupe actuellement. J’ai commencé à travailler sur le lancement d’un nouveau site pour un client. J’ai regardé les statistiques d’un autre site du même client, et voici ce que j’ai vu :

Position	Navigateurs	Pages vues
1.	Microsoft Internet Explorer 11	12,8%
2.	Mobile Safari 7.0	10,3%
3.	Microsoft Internet Explorer 9	8,2%
4.	Microsoft Internet Explorer 10	6,6%
5.	Google Chrome 36.0	5,4%
6.	Microsoft Internet Explorer 8	5,3%
7.	None	4,4%
8.	Android Browser 4.0	3,7%
9.	Google Chrome 37.0	3,3%
10.	Mozilla Firefox 31.0	2,9%
11.	Google Chrome 32.0	2,0%
12.	Google Chrome 35.0	2,0%
13.	Safari (unknown version)	2,0%
14.	Google Chrome 31.0	1,7%
15.	Mozilla Firefox 30.0	1,6%
16.	Google Chrome 33.0	1,5%
17.	Mobile Safari 6.0	1,5%
18.	Mozilla Firefox 26.0	1,4%
19.	Mozilla Firefox 32.0	1,4%
20.	Google Chrome 34.0	1,0%

Regardez toutes ces minorités ! Aucune version de navigateur ne dépasse les 13 % d’utilisation. Même constat avec les différentes résolutions d’écran, où la plus courante (1024×768) ne représente que 14,3 % d’utilisation. Et tout ça, c’est sur près de deux millions de pages vues le mois dernier.

Je me suis toujours intéressé de près aux statistiques des navigateurs. Et ça me fascine toujours autant de voir à quel point, en à peine dix ans, nous sommes passés d’un marché monopolistique composé majoritairement d’utilisateurs d’Internet Explorer 6 sous Windows XP en 1024×768, à un marché composé d’un ensemble de minorités.

En juin dernier, Fiona Taylor Gorringe soulevait une question intéressante sur son blog : « 3 % des utilisateurs naviguent avec IE9 et 14 % des utilisateurs ont un handicap. Pourquoi on ne se préoccupe seulement que des premiers ? ». Je ne dirais pas qu’on se préoccupe « seulement » des vieux navigateurs et jamais des utilisateurs avec un handicap. Mais j’ai clairement bien plus de demande explicite pour ces premiers que ces derniers. C’est un peu une « attitude de blanc » appliquée au web. Mais les minorités sur le web ne sont plus forcément celles qu’on croit.

La semaine dernière se sont déroulées les conférences de Paris Web. Cet événement tient une place toute particulière dans mon coeur parce que c’est là-bas, il y a à peine deux ans, que j’ai donné mon tout premier lightning talk en public. Depuis, j’ai poursuivi mon petit bonhomme de chemin en tant qu’orateur, de la Kiwi Party l’an dernier à Sud Web en mai dernier. Cette année, j’ai eu l’immense honneur d’être retenu pour donner une conférence de cinquante minutes sur l’intégration d’e-mails à Paris Web. C’était à la fois la conférence la plus importante que j’ai pu donner, mais aussi celle qui m’a le plus déçu. Voici mon retour d’expérience sur ma conférence à Paris Web 2014.

On me traite souvent de masochiste parce que je parle d’intégration d’e-mails. J’ai même ouvert un blog sur le sujet. Mais l’intégration d’e-mails est au coeur de presque chaque projet web (de newsletters commerciales à un e-mail de mot de passe oublié pour l’admin d’un blog). Et pourtant, l’intégration d’e-mails est considérée comme un sujet anecdotique, presque tabou, et que personne ne prend réellement au sérieux. J’avais déjà proposé une conférence sur le sujet à Paris Web en 2013, en vain. N’ayant pas particulièrement d’autre sujet en tête ou me tenant à coeur cette année, j’ai re-proposé la même chose. Et j’ai été retenu.

J’étais alors particulièrement enthousiaste. « Ça y est », me suis-je dit, je vais enfin pouvoir mettre au grand jour tous les problèmes qui entourent l’intégration d’e-mails. Et avec un public comme celui de Paris Web, composé de représentants de tous horizons (W3C, fabricants de navigateurs, grosses boîtes en tout genre), c’est l’occasion idéale pour tenter de faire prendre conscience du problème, et quitte à rêver encore un peu plus, pour initialiser un changement. J’étais d’autant plus ravi quand lors de l’annonce du programme des conférences Paris Web, j’ai découvert que j’aurais l’honneur d’être dans la plus grande salle. C’est le coup de projecteur rêvé pour tenter de faire quelque chose.

J’ai donc commencé petit à petit en juin dernier à rassembler mes notes, mes idées, les horreurs que je peux rencontrer parfois en intégrant ou en recevant des e-mails. Et puis je me suis réellement lancé dans la préparation de ma présentation en septembre dernier. Et c’est à partir de là que ça s’est gâté. Fin septembre, j’ai reçu un e-mail d’un membre de l’équipe de Paris Web m’informant que l’oratrice prévue en même temps que moi ne pouvait plus venir. Ils ont réussi à trouver un remplaçant, mais comme il est anglophone, il faudra qu’il occupe la plus grande salle, qui est équipée pour une traduction audio simultanée. « Crotte », me suis-je dit. Et comme si ça ne suffisait pas, l’orateur en question n’est autre que Vitaly Friedman, le papa de Smashing Magazine, qui venait parler de bonnes pratiques du responsive. « Double crotte », me suis-je dit. Non seulement j’étais relégué dans la plus petite salle. Mais en plus j’allais avoir en face de moi une immense star internationale pour parler d’un sujet autrement plus attrayant que l’intégration d’e-mails.

J’ai poursuivi la préparation de ma présentation, en restant sur mon idée principale de faire une conférence pas trop technique, visant surtout à sensibiliser sur le sujet et toutes ses problématiques. J’ai aussi essayé de rendre ça un minimum divertissant, en y ajoutant des extraits d’un de mes films préférés (j’ai dépensé sans compter). Je me dit toujours que quitte à prendre cinquante minutes à des gens, autant essayer de leur faire passer un moment agréable. Au moins, même s’ils n’apprennent rien, ils ne trouveront pas ça complètement nul.

La première répétition devant mes collègues lundi dernier fut pénible. Je n’étais clairement pas prêt. Et surtout, je tenais tout juste une trentaine de minutes. J’ai passé les deux jours qu’il me restait à retravailler tout ça. Au total, j’ai dû passer l’équivalent de six jours (soit une bonne quarantaine d’heures) à préparer cette conférence.

Le jour J arriva. En parcourant mes slides tout seul dans ma chambre d’hôtel le matin même, je me suis senti prêt. Je tenais la conférence que j’avais envie de donner. J’étais planifié pour passer en deuxième l’après-midi. J’ai choisi d’assister à la conférence me précédant dans la même salle. Autant dire que je n’ai rien suivi. Je repassais mes slides en boucle dans ma tête. Et puis je commençais petit à petit à stresser. La plus petite salle dans laquelle je me trouvais n’était finalement pas si petite. En regardant le public autour de moi, ça faisait quand même beaucoup de monde. « Est-ce que ces gens resterons pour ma conférence ? », me demandais-je. J’ai rapidement eu la réponse. Une fois la conférence terminée, la salle s’est vidée. Je suis monté sur scène pour tout préparer et vérifier que tout fonctionne bien. Et je contemplais la salle désespérément vide. « On attends encore une minute et tu peux commencer », m’a lancé un membre de l’équipe de Paris Web. « Ah ? Mais on attends pas qu’il y ait plus de monde ? En une minute il n’y aura pas beaucoup plus de monde ! » ai-je pensé naïvement. J’ai compté, et on devait à peine être une soixantaine. Je m’attendais à ce que Paris Web soit l’événement où je parle devant le plus de spectateur. C’est en fait devenu l’événement où j’ai parlé avec le moins de spectateur. Je ne me suis pas laissé décourager pour autant, et j’ai lancé mon premier slide. (Non sans ironie, j’avais prévu de démarrer ma conférence en expliquant que l’intégration d’e-mails est un sujet qui fait fuir les intégrateurs.)

Finalement, tout s’est bien passé. J’ai avalé mes 188 slides les uns après les autres. J’ai entendu les gens rire. Je pense en avoir entendu d’autres pleurer en découvrant certaines horreurs. Je n’ai pas eu l’impression de trop bafouiller. Je n’ai pas eu de trou de mémoire. Tout s’est bien passé.

Et puis est arrivée l’obligatoire séance de questions-réponses. Et c’est là qu’est intervenu Daniel Glazman, co-président du groupe de travail sur CSS au W3C. Secrètement, j’espérais qu’il soit présent. À la fin de ma conférence, j’évoquais une réunion de travail du W3C sur l’intégration d’e-mails qu’il avait dirigé en 2007. J’espérais qu’il puisse partager son expérience, et pourquoi pas raviver la flamme pour tenter de relancer quelque chose sur le sujet. Sauf que le discours qu’il a tenu m’a littéralement refroidi. Il a expliqué que les équipes de Microsoft qui travaillent sur le moteur de rendu d’Outlook sont totalement distinctes de celles qui travaillent sur le moteur de rendu d’Internet Explorer. Et les équipes d’Outlook n’ont strictement rien à cirer de la qualité de leur moteur de rendu HTML. Et le W3C n’a aucune légitimité à débattre sur des spécifications liées aux e-mails. Aussi, je suis bien gentil avec ma conférence et mon petit blog sur l’intégration d’e-mails, mais si je veux que les choses changent, il faut absolument que j’écrive en anglais et que je participe au groupe communautaire du W3C. « Soit », ai-je pensé. Je ne suis pas convaincu que les équipes du webmail de La Poste lisent souvent ce genre de ressources… « Merci d’avoir passé six jours pour rien à préparer tout ça. Tu peux rentrer chez toi avec l’assurance que rien ne bougera dans les dix prochaines années » ai-je retranscrit dans ma tête.

Une salle presque vide. Une ambition réduite au néant. Voilà comment ça s’est terminé. Peut-être que je m’étais un peu trop monté la tête, peut-être que je m’étais mis trop de pression, en m’imaginant que j’arriverais faire à bouger les choses… Ou peut-être pas.

Les vidéos de toutes les conférences de Paris Web ont été rendues disponibles en ligne dès le jour même. (Au passage j’en profite pour féliciter toute l’équipe de Paris Web qui réalise un travail colossal et profondément utile, tout ça bénévolement.) À ma grande surprise, ma conférence est en train de vivre une deuxième vie sur le web. Sur le site de Livestream, elle affiche déjà 1891 vues (soit la troisième plus vue après les lightning talks et l’excellente conférence de Christophe Porteneuve sur JavaScript). Et puis surtout, sur Twitter ou ailleurs, j’ai reçu des commentaires très positifs. Et notamment des remarques inattendues comme celle de PinGoo sur mon blog dédié à l’intégration d’e-mails :

Pour info, [ta conférence] a fait pas mal réfléchir nos chefs de projets sur le temps que l’on passait à vouloir faire du pixel perfect sur nos newsletters. Merci !

Il ne m’était même pas venu à l’esprit que des chefs de projet puissent être intéressés par ma conférence (et aussi que des boîtes vendent encore du pixel perfect, mais ça c’est une autre histoire).

Et puis pas plus tard que ce matin, j’ai vu passé ce tweet de David Rousset, évangéliste HTML5 chez Microsoft :

Grâce à l’excellente conf à Paris Web de HTeuMeuLeu, nous allons peut-être enfin améliorer nos newsletters Microsoft !

Bon, à choisir, je préférerais que Microsoft améliore le moteur de rendu HTML d’Outlook. Mais c’est déjà un bon début. Et peut-être que finalement je n’aurais pas fait tout ça pour rien…

On m’a récemment rappelé sur Twitter une pratique qui m’exaspère au plus haut point ces derniers temps. Sur certains sites, le clic secondaire sur des liens est rendu inutilisable. C’est le cas par exemple sur Factornews (j’aime beaucoup Factornews, notamment quand ils font des jeux de mots comme à la fin de cet article).

Dans la première zone d’actualités du site, chaque encart d’actualité est entièrement cliquable. Mais si j’utilise le clic de la molette de ma souris (pour ouvrir le lien dans un nouvel onglet), il ne se passe strictement rien. Si je maintiens appuyé la touche majuscule de mon clavier (pour ouvrir le lien dans une nouvelle fenêtre), mon raccourci sera ignoré et le lien sera ouvert dans la fenêtre courante.

Si le clic se comporte comme ça, c’est parce que ce n’est pas un vrai lien HTML. Ici, pour chaque actualité, seul le titre de l’actualité est dans une balise <a>. Le clic sur le reste de la zone est géré via JavaScript. La volonté de rendre toute la zone cliquable est fortement louable, mais l’annulation du comportement natif d’un navigateur engendrée nuit fortement à l’utilisabilité. Je rencontre ce genre de problèmes régulièrement sur d’autres sites comme Le Bon Coin ou LEGO Ideas.

Ce problème d’intégration est vieux comme le monde. Prenons par exemple le code HTML suivant.

<article class="item">
	<h1><a href="/faire-un-lien-sur-toute-une-zone-en-css">Faire un lien sur toute une zone en CSS</a></h1>
	<p>On m'a récemment rappelé sur Twitter une pratique qui m'exaspère au plus haut point ces derniers temps…</p>
</article>

En XHTML ou en HTML4, une balise <a> ne pouvait contenir que des éléments inline. Du coup, l’utilisation de JavaScript (voire de jQuery) était fortement recommandée pour résoudre ce problème. Aujourd’hui, les quelques lignes suivantes suffiraient à rendre toute la zone cliquable pour tous les éléments .item sur notre page.

document.addEventListener('DOMContentLoaded', function() {
	var items = document.querySelectorAll('.item');
	for(var i=0; i < items.length; i++) {
		var item = items[i];
		item.addEventListener('click', function() {
			var url = this.getElementsByTagName('a');
			if(url.length > 0)
				url = url[0];
			window.location = url;
		});
	}
});

Mais cette solution est à l’origine des problèmes d’utilisabilité qui m’exaspèrent tant.

La spécification HTML5 a changé la donne, et on peut désormais englober dans un <a> n’importe quel élément. On pourrait alors simplement englober tout notre .item d’une balise <a>. Mais ce n’est pas forcément une bonne idée, en particulier pour le référencement où il serait préférable de conserver un contenu texte court et pertinent.

Heureusement, une solution est possible en CSS. En utilisant un pseudo-élément ::before ou ::after, on peut le positionner en absolu par rapport au conteneur principal parent et faire en sorte qu’il occupe tout l’espace. Il faudra bien s’assurer que le conteneur parent en question (.item) ait lui aussi un positionnement non statique afin de restreindre le pseudo-élément du lien. Le code suivant fait alors l’affaire.

.item {
	position:relative;
}

.item a:before {
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-color:rgba(0,0,0,0);
}

Ça fonctionne bien dans Chrome, Firefox, Safari et Opera. Pour Internet Explorer (9 et plus), il est nécessaire d’ajouter un fond transparent afin que la zone soit cliquable même au-dessus des autres éléments.

L’inconvénient de cette solution est qu’elle ne s’applique pas sur IE8. Même si le pseudo-élément est bien créé, celui-ci restera non cliquable sous les autres éléments de la zone. Mais si vous pouvez vous permettre d’avoir un fonctionnement dégradé gracieusement sur IE8, cette solution me semble assez élégante.