nota-bene.org

La vraie vie

Stéphane — 2012-05-06T14:41:46Z

Renifler, tendre l'oreille, écouter la verdure qui bruisse, sentir le printemps qui arrive.

(ceci est un message du CCCCCI).

Débat de fond

Stéphane — 2012-05-02T20:02:33Z

En ces moments importants pour la France, je ne pouvais pas ne pas participer au débat.

Gauche ou bien encor droite, je ne sais que choisir,
Ne veux en aucun cas, surtout pas, m'abstenir.
Ma chère amie de toi je reste l'électeur,
Prenons tout à loisir cet entier postérieur !

Pensez à aller voter dimanche tout de même, et vive l'amour.

Paris Web vous veut !

Stéphane — 2012-05-01T20:37:48Z

Je me demande si vous le savez, j'espère que oui : Paris Web a lancé un appel à orateurs.

Et donc moi, si j'étais vous, j'arrêterais de me dire que les autres ont des trucs super intéressants à dire et pas moi, et je proposerais un sujet. Parce qu'en vérité tout le monde a quelque chose à dire.

Enfin c'est vous qui voyez.

En plus Paris Web paye à manger, dis donc !

Du changement

Stéphane — 2012-04-17T20:32:15Z

Il y a quelques mois je vous confiais que j'étais fatigué, fatigué de l'énergie qu'il a fallu depuis plusieurs années pour faire avancer la cause de l'accessibilité, fatigué des voyages fréquents qui mangent sur le sommeil et la vie de famille.

Je ne pouvais pas encore en parler, tant que la suite n'était pas connue, mais maintenant c'est officiel : je vais quitter mon poste actuel le premier mai prochain.

J'ai été très honoré d'avoir pu participer toutes ces années à la construction d'un service reconnu, en partant d'un Projet Accessibilité de trois personnes pour finir en Centre d'Expertise Accessibilité et Ergonomie d'une quinzaine de personnes, compétent et reconnu dans tout le Groupe France Télécom – Orange.

J'y ai rencontré des gens extraordinaires, tant par leurs différences et leurs difficultés que par leur humour et leur classe pour les surmonter. J'y ai été sincèrement ému aux larmes, quelquefois ; et j'y ai tellement, tellement appris, que ce soit en capacité d'évangélisation, en formalisme, en gestion de projet, en rencontres un peu partout en France et en Europe.

Je ne remercierai jamais assez mon chef, Olivier, pour m'avoir fait confiance toutes ces années et m'avoir porté à toujours faire mieux. On a fait de bien belles choses ensemble, avec quelques personnes de cette équipe qui resteront mes copains avant d'être des collègues.

Mais il est temps, certains moments dans la vie sont inévitables. Malgré toute la passion que j'ai pu y mettre, je veux être plus souvent à la maison et tenir la main des enfants dans ce qu'ils sont en train d'apprendre (on n'a qu'une vie) et j'ai envie de revenir plus près de la technique, tout en restant là où est ma passion : dans le web.

À compter du premier mai prochain, je vais faire de la veille technique, développer des prototypes et tâcher d'apporter des solutions en tant que Responsable Technique au sein de la Direction Expérience Utilisateur d'orange.fr.

Ça sonne bien, non ?

La route Joyce, par Alfonso Zapico

Stéphane — 2012-04-04T19:59:09Z

De retour de six jours étalés sur trois semaines, je baragouine un bout d'espagnol. Pas grand-chose, juste de quoi discuter des choses de base (manger, boire, demander la facture, causer météo avec le chauffeur de taxi).

Mais depuis plusieurs années j'ai envie de m'y mettre, parce que les traductions que j'ai lues de Gabriel Garcia Marquez (Cent ans de solitude), Lucia Etxebarria (Un miracle en équilibre), et, cerise sur le gâteau, Carlos Ruiz Zafón (L'ombre du vent, Le jeu de l'ange) ; les traductions disais-je, talentueuses, donnent à imaginer une langue fleurie, décorative, magnifique.

Bref, à Madrid dans une librairie pour enfants, j'avise des traductions de livres que je connais (Christophe Blain), et le même éditeur publie Alfonso Zapico, un auteur avec un trait assez souple, proche de Craig Thompson, donc fort fréquentable.

Je comprends 30% de ce qui est écrit (il ya des images !), mais franchement :

El impulso artístico : metáfora explicativa

Uno puede intentar nadar en contra del impulso artístico.

Pero es inútil, porque es demasiado fuerte.

Asi que lo mejor es dejarse llevar... y dejar que todo fluya.

Ça sonne bien, non ?

Comme je le disais, je n'en comprends qu'une petite partie, c'est un peu agaçant mais très rafraîchissant. En tout cas je m'attends à le voir traduit un de ces jours (dans la collection « écritures » de Casterman par exemple). Notez-le : La ruta Joyce, de Alfonso Zapico.

Je suis frustré, mais décidé !

Un label d'excellence en accessibilité

Stéphane — 2012-04-01T07:00:00Z

En complément des Accessibility First Steps, j'ai proposé à quelques éminents membres de la communauté de partir à l'autre bout du spectre et de récompenser les sites vraiment excellents en mettant en place une médaille de l'excellence en accessibilité.

Reprendre cette logique de A, AA, AAA, qui « n'a plus de sens » comme le disaient avec raison Laurent Denis et Élie Sloïm au dernier Paris Web.

Les discussions du moment montrent aussi que les WCAG sont des guidelines, des bons principes, mais pas forcément des règles applicables directement.

J'ai donc monté un groupe de travail composé dans l'immédiat des acteurs suivants :

Aurélien Levy
Nicolas Hoizey
Delphine Malassingne
Olivier Nourry
Ulrik Döppelganger (qui tient à garder l'anonymat)
Izo (Mathieu Drouet)
Laurent Denis
Laurent Gloaguen
Eric Daspet
Tristan Nitot
Thierry Régagnon
Elie Sloïm

Pour bien montrer cette notion d'excellence, nous pensons appeler ce projet « AAAA ». Qu'en pensez-vous ?

Hypoacousie bilatérale de perception – hein ?

Stéphane — 2012-03-30T13:58:14Z

Ce matin je suis allé à l'hôpital, au service Oto-rhino-laryngologie, voir un oto-spécialiste [1]. La dernière visite médicale du travail ayant relevé que mon acuité auditive a baissé dans les fréquences moyennes (c'est bête : c'est là que sont les voix humaines), il fallait confirmer par un diagnostic sérieux, m'avait-on dit.

J'avais bien remarqué que les ambiances bruyantes m'étaient pénibles, et les réunions téléphoniques difficiles (ça tombe bien, c'est ce que je fais souvent plusieurs heures par jour).

Et quand, le soir venu, à la veillée, dans notre manoir loin de l'agitation vaine et de la promiscuité urbaine, nous regardions la télévision, avec Pamela, ma concubine favorite, blottie nue contre mon torse d'athlète au coin du feu tandis que nos cinq lévriers s'allongeaient avec langueur sur notre moquette d'alpaga, souvent ma douce à mon oreille susurrait à 130 décibels : « La vache, comment t'as mis la télé trop fort, sa mère ! ».

Il était donc temps d'agir. Après tout, quand il entendait Wagner, Woody Allen lui-même n'avait-il pas dans sa jeunesse des velléités d'envahir l'Autriche ? Et Beethoven, qui toute sa vie a cru qu'il était peintre ? Que n'a-t-il consulté plus tôt un oto-rhino-laryngologiste !

Aujourd'hui j'ai appris :

qu'on s'endort n'importe où, jusques et y compris dans une salle d'attente où des gens vont et viennent bruyamment,
que j'ai « une courbe en U »,
que c'est sans doute génétique (« c'est typique de ce genre de courbe »),
qu'il faut s'appareiller sans attendre d'être vieux, sans quoi la plasticité du cerveau baissera et l'aide auditive sera moins efficace (appareillez des gens de 80 ans et ils finiront par ne pas les utiliser, ne percevant pas de différence). Un extrait choisi :

« Est-ce que vous avez des problèmes à (là il dit un truc que je ne comprends pas) ?

— Pardon ?

— Je disais : “Est-ce que vous avez des problèmes à suivre une conversation ?” »

Curieusement, le médecin et moi, nous avons bien ri.

Un peu plus tard :

« Je vous fais une ordonnance pour vous faire appareiller, si vous vous sentez prêt.

— Merci, mais au final j'ai quoi ?

— Une hypoacousiebilatéraledeperception.

— Une ?

— Une hypoacousie bilatérale de perception : ça veut dire que vous entendez moins bien, des deux côtés, symétriquement, et que ce n'est pas mécanique donc pas opérable. Vos tympans marchent, mais certaines petites cellules de votre oreille interne ont du mal à distinguer les sons de la conversation.

— Une « hypoacousie bilatérale de perception » ? Mais ce mot est magnifique !

— J'aime bien appeler les choses par leur nom : j'ai horreur de l'à-peu-près. »

Je vous passe les détails, on a continué en discutant du mérite d'une langue précise et d'un vocabulaire varié dans la formation d'un esprit critique sain et riche ; il m'a ensuite confié que lui-même était appareillé. Le monde est petit et plein de gens aimables et qui savent tenir une discussion, mais je le savais déjà.

Au final, c'est vous le patient qui décidez : si vous éprouvez une gêne dans le bruit [2] ou lors de discussions au téléphone [3], alors il est temps de vous appareiller, pas la peine d'attendre trop longtemps.

On a aussi eu une discussion assez intéressante avec le médecin qui a fait l'audiogramme sur le fait que le premier seuil à franchir est celui de la barrière psychologique. De mon côté j'ai répondu que, travaillant depuis des années dans un domaine qui gravite autour du handicap, ce ne serait pas trop difficile, d'autant que ne disposant que d'un œil valide je vois bien ce qu'il veut dire [4].

En réalité, ce qui gêne souvent les gens dans les prothèses et toutes les aides pour compenser les handicaps, c'est le fait que ces objets matérialisent le handicap : ils l'incarnent, d'une certaine manière. J'ai un copain aveugle qui, quand il était jeune, refusait de prendre sa canne blanche : à traits grossiers, tant qu'il n'avait pas de canne, il ne se sentait pas complètement aveugle [5].

Je n'ai pas réellement ce souci-là : je sais que j'entends de moins en moins bien, et on me propose de m'aider. Je serais bien bête de refuser son ordonnance.

Je pensais devenir aveugle avant de devenir sourd, pour être sincère ; cette baisse d'acuité est donc assez étonnante, elle n'est pas dans l'ordre que j'attendais (d'abord voir de moins en moins, comme tout le monde, puis entendre de moins en moins, comme tout le monde).

Mais on va faire avec.

[1] Le vrai nom de sa spécialité m'échappe à l'instant.

[2] J'opine et je pense aux rares sorties au pub.

[3] J'opine à nouveau et je pense à mon travail

[4] Mais si, on peut rire de tout !

[5] « Tu sais ce que c'est, on est con quand on est jeune, » m'a-t-il un jour confié.

Chère “Edna”, chère “Camille de mutuelle santé”

Stéphane — 2012-03-30T11:24:17Z

Voilà ce que je vous propose, chers commentateurs qui vous croyez assez malins pour jouer à mettre des liens cachés dans des display:none, voire peu cachés : ne le faites plus.

Au passage si vous regardez bien, tous les liens des forums ici sont en rel="nofollow" donc vous perdez votre temps : vos liens ne gagnent aucun pagerank. Notez que c'est flatteur, ça veut dire que vous me considérez comme quelqu'un d'important pour Google.

Mais bast, tout ça, c'est tellement volatil.

Allez, sans rancune, hein ?

Le chauffeur de train agacé

Stéphane — 2012-03-24T10:52:55Z

Dans le RER, la sonnerie pas très agréable (un « la » peut-être ? Je ne suis pas musicien mais j'adore abuser ceux qui s'y connaissent aussi peu que moi : ça doit être un « la »), la sonnerie de canard, au lieu d'une longue fois, s'impatiente et se répète en petits cancanements exaspérés.

Les portes se ferment, et de façon fort inattendue, sans manières, le chauffeur n'a pas pu se retenir :

« C'est pas possible, hein. Ça sonne et vous montez quand même ! »

Passent quinze secondes, le train part, puis on entend un jingle et la voix qui veut ressembler à Simone-de-la-SNCF qui « rappelle que le signal sonore indique la fermeture des portes et pour votre sécurité il ne faut pas gêner leur fonctionnement. »

On imagine le chauffeur, indigné, les doigts tremblants, cherchant dans le répertoire la phrase adéquate, s'exclamant « HA ! » et appuyant sèchement sur le bouton.

L'humain ne peut pas toujours se cacher derrière la procédure. Et d'une façon sourde et difficile à expliquer je trouve ça très rassurant.

Responsive design et Mobile first – ou pas.

Stéphane — 2012-03-21T13:05:20Z

Comme ce site est mon site perso, je m'en sers souvent pour expérimenter des solutions, pour voir si je sais les mettre en pratique (d'une part) et si je peux les préconiser dans le cadre de mon travail (d'autre part). Par exemple pour la version 6 les questions que je me suis posées sont :

Peut-on faire du Mobile first qui tienne la route ?
Est-ce difficile de faire du Responsive design, combien ça coûte ?
Peut-on déjà mettre du HTML5 (notamment figure et figcaption qui permettent de remplacer avantageusement un ) ?

Le parc cible

En préambule je dois rappeler que ma cible est le parc grand public : tout le monde n'a pas un smartphone-qui-tue, tout le monde ne sait pas installer une version hyper récente de navigateur. Par exemple je tape ce texte sur un Windows XP professionnel (la machine que mon employeur met à ma disposition), donc je n'ai que IE8 et aucune possibilité de le mettre à jour [1].

Je n'ai aucune raison de préjuger que vous allez consulter mon site chez vous, avec une nightly de Firefox ou de Chrome [2]. Je dois donc considérer qu'au moins 50% de mes visiteurs utilisent Internet Explorer, et pas forcément la version la plus récente. Restez avec moi, ça a son importance dans les choix qui vont suivre.

HTML5 est-il mûr ?

Comme vous le savez, le consensus depuis les débuts du web, c'est qu'un navigateur qui ne comprend pas une balise l'ignore : il affiche ses contenus sans autre forme de procès (c'est ce qui nous permet de faire des dégradations élégantes quand un plugin n'est pas chargé, par exemple). Le hic avec Internet Explorer, c'est qu'il fait bien ce qu'on lui demande, sauf que faute de connaître la balise, il est incapable de la styler (donc pas de display:block; et tutti quanti). Un type plus malin que moi a découvert qu'il suffit d'ajouter un élément factice dans le DOM avec ce nom de balise pour qu'IE la considère comme légitime et nous permette de la styler. Par exemple pour faire comprendre à IE qu'il existe bien un élément article il suffit de lui dire qu'on a ajouté des éléments article dans le DOM :

document.createElement('article')

Partant de là, peut-on se dire que tout va bien et qu'on peut donc utiliser toutes les chouettes balises de HTML5 dans un site en production, là, tout de suite ? La réponse est : ça dépend [3]

Pour un site perso comme celui-ci, il suffit d'aller chercher html5shiv.js et le tour est joué. Au pire le Javascript casse, le site est moche. C'est tout à fait supportable.

Pour un site pro, en revanche, la question se pose encore : sachant que le moindre octet compte sur un portail qui prend plusieurs millions de hits par jour, pour le moment ce n'est pas une si bonne idée.

Nous pourrons utiliser sans ennui les éléments sémantiques HTML5 quand IE8 aura disparu. Avant ça, prudence est mère de sûreté.

Media queries

On a dit qu'on faisait un site moderne, on doit donc s'attendre à ce que nos visiteurs accèdent à ce site avec une variété de terminaux différents : de l'écran 24 pouces au smartphone, de l'ordinateur portable à la tablette (je parle de Mobile first plus bas, promis, mais pour l'instant oublions-le le temps que je vous expose ma démarche).

Premier choix : quelle taille pour mon design ? Partant du principe que la plupart des gens qui consultent ce site sur un ordinateur ont un écran d'au moins 1024 pixels de large, j'ai choisi arbitrairement 922 pixels de large, soit 6 colonnes de 112 pixels, des gouttières confortables de 42 pixels, et 20 pixels de chaque côté pour faire un padding de confort. Ce qui nous fait un contenu central de 574px de large avec une police de base à 14px [4], encadré par des jolies marges dans lesquelles poser les figcaption et les pavés de type « à propos de cet article ».

Ensuite, à quel endroit poser les points de rupture de votre design ? En fait il n'existe pas de règle, pas plus qu'on ne peut être sûr qu'un utilisateur navigue en ayant dimensionné son navigateur pour prendre la totalité de l'écran.

La méthode très simple que nous appliquerons est la suivante : redimensionnez votre fenêtre, et dès qu'une barre horizontale apparaît, considérez que c'est un point de rupture. Il faut alors faire une déclaration supplémentaire et commencer à « casser » le design : dans mon cas, en-deçà de 930px disponibles (je ne veux pas attendre le dernier moment pour des questions de confort visuel), réduire la marge gauche, ramener les figcaption dans le flux de l'article puisqu'ils n'auront plus de place dans la marge gauche, commencer à indiquer aux images qu'elles ne doivent pas dépasser des bords en appliquant les bons conseils de tonton Raphaël :

img { max-width:100%; height:auto !important; box-sizing:border-box; }

De la même manière, en-dessous de 600px, je laisse quelques marges, j'enlève tous les float, je ne fais plus appel aux web fonts (ça n'a que peu de sens sur un petit affichage), je fais des polices de titre moins grandes (400% sur un petit écran, ça peut tourner au cauchemar) et j'en profite pour surcontraster les polices.

Prenons deux secondes en passant pour parler de surcontraste : à la demande générale d'Olivier, qui souffrait de mon noir sur blanc très tranché dans la précédente version, j'ai opté pour un gris sombre (#333) sur blanc, voire pour certains contenus « décoratifs » (les exergues [5], les dates, les liens visités) pour un gris plus clair (#666). Profitons donc de nos media queries pour recontraster l'ensemble : allez zou, tout en noir sur blanc sur les petits affichages ! C'est une règle que je n'ai encore jamais vue dans les articles qui parlent de design réactif, et qui à mon avis est tout à fait pertinente [6].

Mobile first

Luke Wroblewski est un mec pas bête, et je suis sûr qu'il a beaucoup de bonnes raisons de prôner le Mobile first (bientôt je lirai son livre sur le sujet), notamment le fait qu'on part du contenu principal, celui dont on est sûr qu'il est demandé par le visiteur, puis on ajoute des choses autour (je résume grossièrement, hein). L'idée serait donc de faire un design pour mobile, puis d'ajouter des règles CSS d'enrichissement au fur et à mesure que la zone d'affichage du navigateur s'élargit, comme l'explique très bien Nicolas Torres dans son article sur Webdesign Friday.

Oui mais, on l'a vu plus haut, une grosse partie de nos visiteurs, jusque-là, n'ont pas encore accès aux media queries : Elles ne sont disponibles qu'à partir... d'IE9 (voir le tableau de support des media queries sur When can I use ?).

Dois-je donc proposer à une partie encore non négligeable de mes visiteurs une version linéaire, pensée pour un petit écran, alors que par ailleurs leur navigateur est tout à fait en mesure d'afficher un design riche ? J'ai choisi de répondre non.

Note liminaire : le support de Windows XP arrive à son terme, la plupart de nos visiteurs vont donc devoir mettre à jour leur parc (et donc leur navigateur). On peut donc raisonnablement supposer que d'ici un an ou deux la réponse sera toute différente, mais pour le moment présent, non.

Donc, en résumé : j'ai une approche « content first » et autour je brode [7], j'ajoute la navigation, un footer riche (commentaires, liens vers twitter, informations légales). Pour le parc de mes visiteurs, là encore, le Mobile first n'est pas mûr.

Vue mobile

Pour autant, toute cette histoire de responsive design m'a permis sans trop d'effort d'avoir au final une CSS pour mobile : il me suffit d'aller jeter un œil dans mon Firebug, de copier/coller le rendu calculé en-deçà de 600px dans un fichier mobile.css et d'y faire appel via un media='handheld'. Ça fait toujours plaisir à Opera Mini et aux vieux navigateurs des téléphones à mi-chemin entre l'entrée de gamme et le smartphone.

Et puis tiens, pendant qu'on y est, regardons ce qui se fait autour de nous : Twitter, Flickr, etc. proposent tous un lien vers la « version mobile ». Qu'est-ce qu'ils changent ? Principalement ils linéarisent la page, servent des contenus avec très peu de styles, très peu d'images (et dans un format plus petit), et pas de scripts.

Je me suis donc nourri de cette idée-là pour proposer aux visiteurs, en opt-in, de choisir une version mobile. On pose un cookie, Spip génère des pages différentes selon le réglage. Profitons-en donc pour adapter le design, mais pas seulement :

Fournissons uniquement la CSS mobile.css (qui ne fait pas de requête sur les web fonts, rappelez-vous) ;
Supprimons dans notre code tous les appels à Javascript [8] ;
Réduisons les contenus : fournissons une image directement bridée en taille (par défaut elles font 574px, soit la largeur de notre colonne en vue « desktop », réduisons-les à 300px, ce qui devrait être suffisant même pour une petite résolution de smartphone à 320px), supprimons la moitié du contenu du footer (tous les liens vers Twitter sont accessoires sur mobile, par contre je conserve la « zone de rebond » des commentaires, des liens avant/après et évidemment les informations légales). Vous allez me dire « oui mais moi j'ai beau avoir un smartphone, je viens de le brancher sur la borne wifi chez moi et je veux tout voir comme si j'avais un navigateur de bureau ». Qu'à cela ne tienne, il vous suffit de ne pas demander expressément la version mobile : les media queries sont là pour ça.

En résumé

La philosophie du mobile first est bonne, mais dans mon environnement cible le parc n'est pas encore mûr. De plus, cette approche me « bridait » un peu trop quand j'en étais à réfléchir à une mise en page pour la version desktop [9]. J'ai donc opté pour une approche content first (une voie moyenne, en somme), puis brodé autour, et fourni à l'utilisateur un moyen de voir le site dans une version très allégée.

On verra ce que ça donne à l'usage, encore une fois c'est une expérimentation. À mon avis un des premiers enseignements à tirer de tout ça, c'est au moins la notion de surcontraste sur petit écran ; c'est toujours ça de pris.

[1] Évidemment je résume grossièrement, vu que pour ma part j'ai un profil « développeur » et que j'ai donc pu installer tous les navigateurs que je veux ; mais c'est mon travail, en même temps. La plupart des utilisateurs ont une configuration « standard » qui ne leur donne aucun droit d'installation : c'est comme ça dans la plupart des entreprises soucieuses d'une bonne gestion de leur parc et conscientes des risques de sécurité.

[2] Une nightly c'est une version hyper récente d'un navigateur, en cours de développement.

[3] Vous allez voir, tout cet article est un article de Normand.

[4] Bien sûr je continue à prôner et à pratiquer les polices en em. Satané IE, me direz-vous.

[5] En anglais dans le texte : les pullquotes. Au passage, les exergues génèrent des h3 qui viennent « requalifier » des segments de contenus enfants de h2, ça non plus je ne le vois pas souvent et ça me semble pertinent quand on regarde le plan de la page au final.

[6] C'est avec ce genre de petit ajout à votre boîte à outils que j'espère atteindre la postérité, je suis diabolique.

[7] D'ailleurs, en passant, pour la première fois le design s'est fait directement dans le navigateur sans passer par Photoshop : j'ai juste utilisé LibreOffice Calc pour mes calculs de colonnage.

[8] Le lecteur attentif verra que quelques petits morceaux de Javascript sont encore là, c'est Spip qui les rajoute et je ne me suis pas encore penché sur le problème.

[9] Même si le design au final est minimaliste et peut donner à penser que j'aurais pu réellement faire du mobile first et l'enrichir. J'ai toujours considéré qu'un site perso doit être le reflet de son auteur, autrement dit si on n'a que des notions de design et pas plus de talent que ça, tant pis : le site sera au niveau de ce qu'on sait faire. Je n'aime pas l'idée de demander à quelqu'un de faire mon design, c'est contraire à cette notion de cohérence.