HTeuMeuLeu

La dernière conférence de Maciej Cegłowski, « The Website Obesity Crisis », est pleine de citation et d’exemples bons à partager.

Voici un article didactique sur les bonnes pratiques pour augmenter sa performance en ligne qui pèse 3,1 Mo.

Cet article mentionne que Google était capable d’augmenter l’engagement utilisateur dans Google Maps en réduisant le poids des pages de 100 Ko à 80 Ko.

Vous vous souvenez quand Google Maps, la web app la plus sophistiquée de son époque, était trente-cinq fois plus petite qu’un article d’actualité moderne ?

Ou encore :

Les gens ont inventé des mesures créatives pour se persuader que leurs sites mélasses se chargent vite.

Google en a une populaire appelée SpeedIndex. (Vous savez que ça vient de Google quand ils balancent une intégrale dans la définition comme si de rien n’était.)

Mais surtout, j’adore sa pyramide alimentaire du Web.

Les nutritionnistes étaient à fond sur ce concept de pyramide alimentaire. Je pense qu’on a besoin d’une pour le web, pour se rappeler ce à quoi un site sain devrait ressembler.

Voici ce que je recommande pour un site équilibré en 2015 :

• Une base solide de texte qui vaille la peine d’être lu, formaté avec une bonne dose de balises.
• Quelques images, avec modération, pour illustrer le design visuel.
• Un gros morceau de CSS.
• Et puis, avec parcimonie et seulement si besoin, du JavaScript.

Comme la plupart des webmails, Outlook.com ajoute un préfixe aux noms de classes de nos e‑mails. Ainsi, une classe test sera transformée en ecxtest. Il y a quelques mois, j’avais remarqué cependant que ce préfixage ne s’appliquait pas sur certains noms de classes, comme par exemple button, menu, label ou nav.

Dans la troisième édition de son excellentissime Email Development Newsletter, Julie Ng évoque également ce bug qu’elle a rencontré en utilisant des classes head, header ou footer. Il n’en a pas fallu plus pour que je fasse le rapprochement et comprenne ce qu’il se passe. Tous ces mots-clés ne sont pas des noms pris au hasard, mais des noms de balises HTML.

Ni une, ni deux, je suis allé récupéré la liste des éléments HTML sur MDN, et j’ai envoyé le test suivant sur Outlook.com.

<style type="text/css">
	.html, .base, .head, .link, .meta, .style, .title, .address, .article, .body, .footer, .header, .h1, .h2, .h3, .h4, .h5, .h6, .hgroup, .nav, .section, .blockquote, .dd, .div, .dl, .dt, .figcaption, .figure, .hr, .li, .main, .ol, .p, .pre, .ul, .a, .abbr, .b, .bdi, .bdo, .br, .cite, .code, .data, .dfn, .em, .i, .kbd, .mark, .q, .rp, .rt, .ruby, .s, .samp, .small, .span, .strong, .sub, .sup, .time, .u, .var, .wbr, .area, .audio, .img, .map, .track, .video, .embed, .iframe, .object, .param, .source, .canvas, .noscript, .script, .del, .ins, .caption, .col, .colgroup, .table, .tbody, .td, .tfoot, .th, .thead, .tr, .button, .datalist, .fieldset, .form, .input, .keygen, .label, .legend, .meter, .optgroup, .option, .output, .progress, .select, .textarea, .details, .dialog, .menu, .menuitem, .summary, .content, .decorator, .element, .shadow, .template, .acronym, .applet, .basefont, .big, .blink, .center, .dir, .frame, .frameset, .isindex, .listing, .noembed, .plaintext, .spacer, .strike, .tt, .xmp {
		padding:1em 1.5em;
		color:#fff;
		background:#2ecc40;
	}
</style>
<div class="html base head link meta style title address article body footer header h1 h2 h3 h4 h5 h6 hgroup nav section blockquote dd div dl dt figcaption figure hr li main ol p pre ul a abbr b bdi bdo br cite code data dfn em i kbd mark q rp rt ruby s samp small span strong sub sup time u var wbr area audio img map track video embed iframe object param source canvas noscript script del ins caption col colgroup table tbody td tfoot th thead tr button datalist fieldset form input keygen label legend meter optgroup option output progress select textarea details dialog menu menuitem summary content decorator element shadow template acronym applet basefont big blink center dir frame frameset isindex listing noembed plaintext spacer strike tt xmp"></div>

Ce code est transformé par le code suivant :

<style type="text/css">
	.ExternalClass .ecxhtml, .ExternalClass .ecxbase, .ExternalClass .ecxhead, .ExternalClass .ecxlink, .ExternalClass .ecxmeta, .ExternalClass .ecxstyle, .ExternalClass .ecxtitle, .ExternalClass .ecxaddress, .ExternalClass .ecxarticle, .ExternalClass .ecxbody, .ExternalClass .ecxfooter, .ExternalClass .ecxheader, .ExternalClass .ecxh1, .ExternalClass .ecxh2, .ExternalClass .ecxh3, .ExternalClass .ecxh4, .ExternalClass .ecxh5, .ExternalClass .ecxh6, .ExternalClass .ecxhgroup, .ExternalClass .ecxnav, .ExternalClass .ecxsection, .ExternalClass .ecxblockquote, .ExternalClass .ecxdd, .ExternalClass .ecxdiv, .ExternalClass .ecxdl, .ExternalClass .ecxdt, .ExternalClass .ecxfigcaption, .ExternalClass .ecxfigure, .ExternalClass .ecxhr, .ExternalClass .ecxli, .ExternalClass .ecxmain, .ExternalClass .ecxol, .ExternalClass .ecxp, .ExternalClass .ecxpre, .ExternalClass .ecxul, .ExternalClass .ecxa, .ExternalClass .ecxabbr, .ExternalClass .ecxb, .ExternalClass .ecxbdi, .ExternalClass .ecxbdo, .ExternalClass .ecxbr, .ExternalClass .ecxcite, .ExternalClass .ecxcode, .ExternalClass .ecxdata, .ExternalClass .ecxdfn, .ExternalClass .ecxem, .ExternalClass .ecxi, .ExternalClass .ecxkbd, .ExternalClass .ecxmark, .ExternalClass .ecxq, .ExternalClass .ecxrp, .ExternalClass .ecxrt, .ExternalClass .ecxruby, .ExternalClass .ecxs, .ExternalClass .ecxsamp, .ExternalClass .ecxsmall, .ExternalClass .ecxspan, .ExternalClass .ecxstrong, .ExternalClass .ecxsub, .ExternalClass .ecxsup, .ExternalClass .ecxtime, .ExternalClass .ecxu, .ExternalClass .ecxvar, .ExternalClass .ecxwbr, .ExternalClass .ecxarea, .ExternalClass .ecxaudio, .ExternalClass .ecximg, .ExternalClass .ecxmap, .ExternalClass .ecxtrack, .ExternalClass .ecxvideo, .ExternalClass .ecxembed, .ExternalClass .ecxiframe, .ExternalClass .ecxobject, .ExternalClass .ecxparam, .ExternalClass .ecxsource, .ExternalClass .ecxcanvas, .ExternalClass .ecxnoscript, .ExternalClass .ecxscript, .ExternalClass .ecxdel, .ExternalClass .ecxins, .ExternalClass .ecxcaption, .ExternalClass .ecxcol, .ExternalClass .ecxcolgroup, .ExternalClass .ecxtable, .ExternalClass .ecxtbody, .ExternalClass .ecxtd, .ExternalClass .ecxtfoot, .ExternalClass .ecxth, .ExternalClass .ecxthead, .ExternalClass .ecxtr, .ExternalClass .ecxbutton, .ExternalClass .ecxdatalist, .ExternalClass .ecxfieldset, .ExternalClass .ecxform, .ExternalClass .ecxinput, .ExternalClass .ecxkeygen, .ExternalClass .ecxlabel, .ExternalClass .ecxlegend, .ExternalClass .ecxmeter, .ExternalClass .ecxoptgroup, .ExternalClass .ecxoption, .ExternalClass .ecxoutput, .ExternalClass .ecxprogress, .ExternalClass .ecxselect, .ExternalClass .ecxtextarea, .ExternalClass .ecxdetails, .ExternalClass .ecxdialog, .ExternalClass .ecxmenu, .ExternalClass .ecxmenuitem, .ExternalClass .ecxsummary, .ExternalClass .ecxcontent, .ExternalClass .ecxdecorator, .ExternalClass .ecxelement, .ExternalClass .ecxshadow, .ExternalClass .ecxtemplate, .ExternalClass .ecxacronym, .ExternalClass .ecxapplet, .ExternalClass .ecxbasefont, .ExternalClass .ecxbig, .ExternalClass .ecxblink, .ExternalClass .ecxcenter, .ExternalClass .ecxdir, .ExternalClass .ecxframe, .ExternalClass .ecxframeset, .ExternalClass .ecxisindex, .ExternalClass .ecxlisting, .ExternalClass .ecxnoembed, .ExternalClass .ecxplaintext, .ExternalClass .ecxspacer, .ExternalClass .ecxtt, .ExternalClass .ecxxmp {
		padding:1em 1.5em;
		color:#fff;
		background:#2ecc40;
	}
</style>
<div class="html base head link meta style title address article body footer header h1 h2 h3 h4 h5 h6 hgroup nav section blockquote dd div dl dt figcaption figure hr li ecxmain ol p pre ul a abbr b bdi bdo br cite code ecxdata dfn em i kbd mark q rp rt ruby s samp small span strong sub sup time u var wbr area audio img map track video embed iframe object param source canvas noscript script del ins caption col colgroup table tbody td tfoot th thead tr button datalist fieldset form input keygen label legend meter optgroup option output progress select textarea details ecxdialog menu ecxmenuitem summary ecxcontent ecxdecorator ecxelement ecxshadow ecxtemplate acronym applet basefont big blink center dir frame frameset isindex listing ecxnoembed plaintext spacer strike tt xmp"></div>

Tous les sélecteurs CSS sont bien préfixés par .ExternalClass .ecx. Par contre, les noms de classe dans le code HTML ne sont eux pas préfixés par ecx, rendant le sélecteur précédent caduque. Seuls quelques noms d’éléments HTML semblent échapper à ce bug (comme main, data, dialog, menuitem, content, decorator, element, shadow, template and noembed).

Par précaution, il est donc plus prudent de ne jamais utiliser de nom de balise HTML comme nom de classe.

Je suis tombé hier soir via reddit sur ce fantastique compte-rendu d’une conférence de Fred Hébert, « The Little Printf ». C’est beau, c’est poétique, et ça énonce assez joliment des vérités sur les différentes facettes du métier de développeur. Je pourrais citer l’histoire dans son intégralité. Mais voici mes deux extraits favoris.

Quand (chapitre 7), le Petit Printf rencontre un développeur super fier de connaître tous les derniers frameworks à la mode :

— Quels problèmes est-ce que tu résous avec tous ces frameworks ?

— Oh, je m’assure que nous n’utilisons pas quelque chose qui ne va pas avoir du succès, comme ça cette société ne parie pas sur des technologies qui n’ont pas d’avenir. C’est un travail très important, car si tu ne fais pas ça, tu ne pourras trouver personne à embaucher à part des vieux barbus grisonnants en retard, alors que tu veux des fonceurs autonomes qui sont aussi des adopteurs précoces, dit le monsieur.

— C’est amusant, répondit notre ami.

— C’est très difficile ! Dans le monde des startups, si tu veux les meilleurs joueurs, tu dois utiliser les bonnes technologies pour les attirer ! Sinon tu restes coincé avec des retardataires rigides. Personne ne veut être un retardataire rigide.

Le Petit Printf s’exclama : « Non, ce n’est pas ce que je voulais dire », et puis il ajouta « Je trouve ça amusant que les outils sont censés résoudre des problèmes pour nous, mais pour toi, les outils eux-mêmes sont devenus un problème. »

Et pendant que l’homme resta là en silence (sur son nouveau bureau trop cool avec tapis de course), le Petit Printf sauta hors de la pièce.

Chapitre 10, le Petit Printf rencontre un architecte logiciel.

— Ton système est très impressionnant. Est-ce qu’il est rapide ?

— Je ne saurais pas te dire, dit l’architecte. Il devrait, cependant.

— Et comment est le code alors, est-ce qu’il est bon ?

— Je ne saurais pas te dire.

— Est-ce que les utilisateurs en sont contents ?

— Je ne pourrais pas te dire non plus, j’en ai bien peur.

— Mais tu es un architecte logiciel !

— Exactement ! Mais je ne suis pas un développeur. Ce n’est pas l’architecte qui va écrire les modules et les classes, assembler les bibliothèques. L’architecte logiciel est bien trop important pour faire le tour et toucher du code. Mais il parle avec les programmeurs et développeurs, leur pose des questions, leur fournit des conseils. Et si le problème a l’air suffisamment intéressant, l’architecte prend en charge le planning.

— Et pourquoi ça ?

— Parce que nous avons plus d’expérience. Nous en savons plus sur les systèmes et ce qui fonctionne et ce qui ne fonctionne pas. Les développeurs peuvent être une extension de notre savoir pour produire des bons systèmes !

— Mais comment sais-tu si les choses se passent bien sans jamais être impliqué dans le code ?

— Nous faisons confiance aux développeurs.

— Donc vous leur faites confiance pour implémenter vos idées correctement, mais pas assez pour qu’ils trouvent leurs propres idées ?

L’architecte logiciel était visiblement secoué par ce commentaire. « Je suppose que j’ai été un peu déconnecté, admet-il finalement. Le problème est qu’au bout d’un moment, on vous demande tellement de travailler sur des idées que vous n’avez plus de bon moyen de les faire tester ou vérifier. » Il fixa le sol, pensif. «Parfois un architecte logiciel ne fait ni de l’architecture, ni du logiciel, il semblerait.»

Le Petit Printf quitta la pièce, et achevant ainsi sa visite, quitte le bâtiment.

Cette histoire est géniale et vous devriez la lire.

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.

Le webmail desktop d’Orange remplace le mot « overflow » par « java‑script ». Pas juste la propriété overflow en CSS. Mais carrément le mot « overflow », peu importe où vous l’employez dans un e‑mail.

Ainsi le code suivant :

<style>
	h1 { overflow:auto; }
</style>
<div style="overflow:hidden;">
	<h1 style="overflow:visible;">
		Un e‑mail qui parle d'overflow.
	</h1>
</div>

…est transformé en :

<style>
	h1 { java-script:auto; }
</style>
<div style="java-script:hidden;">
	<h1 style="java-script:visible;">
		Un e‑mail qui parle d'java-script.
	</h1>
</div>

Cela concerne uniquement le webmail desktop d’Orange (et pas sur l’application iOS ou le webmail mobile par exemple). Et cela se produit même lorsque « overflow » est inclus dans un autre mot.

Ça doit être très perturbant de lire des e‑mails de Stack Overflow sur le webmail d’Orange.

Litmus a organisé un nouveau concours communautaire avec comme thème : « créer un e‑mail qui vaille le coup d’être transféré ». Pour participer, j’ai créé un e‑mail que j’ai appelé Super Mail Forward, un e‑mail transférable (entre les webmails de Gmail, Yahoo, Outlook.com et AOL) qui évolue à chaque transfert. C’est un fantastique exercice qui m’a permis d’apprendre et de mettre en pratique plein de choses spécifiques à ces webmails. Voici quelques détails.

Lire la suite de « Super Mail Forward, un e‑mail transférable évolutif »

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