‹ retour

ParisWeb 2016

De retour Ă  la conf des gens qui font le web.

Comme en 2015, j’ai eu la chance d’aller manger les petits fours et en errant à la recherche de têtes connues à l’occasion de Paris Web 2016. La bonne nouvelle, c’est qu’il y a plus de têtes connues par rapport à l’an dernier.

Paris Web est une conférence annuelle basée à Paris, qui rassemble le microcosme des artisans français du web autour de sujets touchant aux technologies du web, au design et à l’accessibilité. Mon employeur m’y envoie à condition que j’écrive un compte-rendu des conf auxquelles j’assiste, je les publie sur Medium pour en faire profiter le plus grand monde. Voici mon compte-rendu de Paris Web 2015 .

Après une mission assez longue chez un client, j’ai rĂ©intĂ©grĂ© mon Ă©quipe en interne le mois dernier : ça m’a permis de me rendre compte plus en dĂ©tail des savoirs et process qu’on a ensemble en interne. C’est sous cet angle-lĂ  que j’ai abordĂ© les diffĂ©rents talks de la confĂ©rence : d’une part dans le cadre de l’équipe, et aussi pour mon pĂ©rimètre. De plus, certains talks se dĂ©tachaient encore par leur caractère universel, j’en parle Ă  la fin.

Si vous voyez des erreurs ou des flous dans ce texte, n’hĂ©sitez pas Ă  me contacter : @joachimesque )


Ce qui va ĂŞtre utile Ă  mon Ă©quipe

Est-ce que le dĂ©veloppement serait si amusant s’il n’y avait pas continuellement une nouvelle techno Ă  adopter ? J’ai entendu les collègues parler de Docker et Capistrano, j’y pigeais rien. Jusqu’à ce que David Sferruzza explique le principe.

Pour éviter de tout gérer soi-même à la main (ce que je fais pour mes projets perso), il y a toute une série d’outils pour travailler à plusieurs sur le même projet ou automatiser les tâches. Git, on l’utilise déjà dans l’équipe, comme NPM ou Grunt. En revanche, tout ce qui est CI (Intégration Continue) ou déploiement, on n’a pas encore touché. Les gars, regardez du côté de GitLab CI, Docker, Deployer ou Capistrano… mais avant ça, regardez les slides (en attendant la vidéo).

Le dĂ©ploiement manuel : non merci, j’essaye d’arrĂŞter !
Par David Sferruzza — Sur paris-web.fr — Les slides


Certains de nos projets n’ont pas besoin de grosse base de donnĂ©e, d’énormes serveurs qui peuvent traiter des millions de requĂŞtes Ă  la minute. Parfois, moins c’est mieux. En l’occurence, la technologie commence Ă  ĂŞtre mature du cĂ´tĂ© des gĂ©nĂ©rateurs de sites statiques ; bien utilisĂ©, un système statique auquel on ajoute un Headless CMS est plus performant, scalable et moins cher. Bref, il y a plein d’outils sympathiques Ă  dĂ©couvrir. Peut-ĂŞtre mĂŞme un peu trop .

Ne passons pas à côté des choses simples
Par Franck Taillandier et Bertrand Keller — Sur paris-web.fr — Les slides & le support texte


Un site dans une langue, c’est bien, dans plein de langues c’est mieux mais beaucoup plus compliquĂ©. L’internationalisation (i18n pour les intimes), c’est Ă  penser en amont, et ça impacts toutes les Ă©tapes du dĂ©veloppement. Du contenu (qui va traduire ?) au back-end (comment stocker les dates ?) au design (Ă©criture de gauche Ă  droite, de droite Ă  gauche ? polices de caractères adaptĂ©es ?) au rĂ©fĂ©rencement, ou Ă  l’intĂ©gration de fonctionnalitĂ©s (quels outils utiliser ? Google est interdit en Chine), rien ne s’improvise, il faut tout spĂ©cifier dès le dĂ©but.

Lancer son site Ă  l’international, facile ? Oui, si l’on pense Ă  tout !
Par Aurélie Guillaume — Sur paris-web.fr — Les slides


Paris Web m’étonne toujours par les moyens déployés, notamment en matière d’intervenants étrangers. On a une traduction simultanée assorti d’une vélotypie, comme ça c’est accessible pour tous, même ceux qui ne comprennent pas l’anglais. C’est fou. Comme ça on peut avoir des intervenants étrangers et on ne reste pas à tourner en rond dans notre communauté web française.


Les tests d’utilisabilité sont une étape cruciale du développement d’un produit, malheureusement le manque de moyen nous empêche de bien le faire (ou le manque d’intérêt de la part des décideurs, mais ça c’est un autre problème). Tester une app mobile, c’est la mettre entre les mains d’un sujet qui n’y connait encore rien et voir s’il s’en sort. Filmer ces tests, c’est parfait pour se souvenir des résultats, pour communiquer plus facilement, et pour générer de l’empathie avec les vrais utilisateurs.

LĂ , Belen Pena et Bernard Tyers nous proposent un protocole Ă  faire soi-mĂŞme (DIY, Do It Yourself ), Ă  base de webcams, de patafix, de Linux et de pièces de Meccano, pour filmer l’écran et le visage d’un testeur, et mieux comprendre ses rĂ©actions. Le talk Ă©tait très rĂ©ussi : ils ont pu faire une dĂ©monstration sur la scène pour tester le site des AĂ©roports de Paris sur mobile. Le site lui-mĂŞme est inusable.

CDG airport web site totally destroyed on stage by conference on mobile user testing #parisweb HILARIOUS !!!

— Daniel Glazman (@glazou) 29 septembre 2016

DIY Mobile Usability Testing
Par Bernard Tyers et Belen Barros Pena — Sur paris-web.fr — Les slides


Il est des talks dont je ne comprends pas tout, mais dont je sais qu’ils peuvent être importants. La sécurité, par exemple, c’est important. Les données de chacun sont à la merci des hackers, plus personne n’est à l’abri. La sécurité est la responsabilité de toutes les entreprises (PME comme CAC 40). Jérémie Jourdin et Benjamin Leroux sont experts en sécurité et donnent quelques pistes pour envisager les bonnes pratiques de sécurité dès le début d’un projet. Ça peut vouloir dire éviter les mauvaises décisions (mauvais usage de chiffrement, pas de logs…), prises pour de mauvaises raisons (time to market, faible sensibilisation sécurité, manque de contrôles…). La sécurité ça s’apprend, il ne faut pas réinventer la roue et investir dans des bons process.

Web Security by design
Par Jérémie Jourdin et Benjamin Leroux — Sur paris-web.fr


Le retour d’expĂ©rience, c’est un exercice un peu pĂ©rilleux : comment rapporter les enseignements d’un projet, sans partir trop dans le dĂ©tail et rester pertinent ?

Le talk de NoĂ«lie Andrieu est bien conçu sur ce plan lĂ . Au lieu d’une liste technique de ce qui a Ă©tĂ© fait dans le projet en question, elle nous parle de l’approche personnelle Ă  adopter, de mĂ©thodes qui permettent de comprendre/mesurer/ĂŞtre Ă  l’écoute pour bien avancer. Étaient abordĂ©es aussi les questions du management, et son utilitĂ©, ainsi que les personnes : la maturitĂ©, positivitĂ© et l’écoute dont elles doivent faire preuve. Plein d’idĂ©es utiles, j’attends les slides !

Retour d’expérience sur la refactorisation d’une application d’e-mail
Par Noëlie Andrieu — Sur paris-web.fr


Ce qui va m’être utile

Le syndrome de l’imposteur, c’est le dĂ©calage entre les compĂ©tences perçues et les compĂ©tences rĂ©elles. Quelqu’un qui en souffre trouvera toutes les excuses pour ne pas faire valoir son expĂ©rience. « J’ai pas de diplĂ´me/expertise/idĂ©e cool Â» (rayez la mention inutile)

Pour s’en dĂ©faire, pourquoi ne pas redĂ©couvrir ses compĂ©tences en les mettant en avant en participant Ă  des confĂ©rences ou en participant au monde de l’Open Source ? Ici, Agnès Haasser raconte comment elle a dĂ©passĂ© ce syndrome, et conclut que ce qui est Ă©vident pour soi ne l’est pas forcĂ©ment pour tous : c’est bien de partager ses connaissances.

Libérée, délivrée… du syndrome de l’imposteur
Par Agnès Haasser — Sur paris-web.fr — Les slides


L’Open Design, c’est curieux. On connait l’open source pour le développement logiciel, mais pour le design c’est loin d’être aussi riche et développé. À travers quelques exemples, My Lê nous a montré l’effervescence autour du partage en matière de design. Au niveau des connaissances, les designers on tendance à cacher leurs process, sans doute parce qu’ils sont payés pour le process. La solution c’est d’ouvrir, de partager. Dans le monde typographique, quelques fonderies libèrent leurs polices, notamment Velvetyne ou Open Source Type Foundry. Si on choisit ces d’utiliser ces typos, on lutte contre l’uniformisation (voir le talk suivant) et on soutient la démarche des graphistes dans l’Open Source. Le troisième exemple portait sur le rebranding de Mozilla.

Ă€ la suite de ce talk, il y a eu une informelle (une conf « improvisĂ©e Â», espace de conversations). Il en est ressorti plusieurs idĂ©es chères aux graphistes

  • le design est perçu moins comme une expertise que comme un truc artistique sur lequel tout le monde doit avoir un avis
  • le rebranding de Mozilla est l’exemple mĂŞme du design by committee , et gagnerait peut-ĂŞtre Ă  un benevolent dictator pour trancher
  • @hellgy conseille de demander pourquoi ? Ă  chaque commentaire, ça a tendance Ă  dĂ©partager ce qui est pertinent de ce qui ne l’est pas
  • @l_myle_l ajoute la règle des 5 pourquoi , qui fait la mĂŞme chose, mais encore plus profondĂ©ment
  • le plus important pour faire accepter un design, c’est la pĂ©dagogie

Open Design
Par My Lê — Sur paris-web.fr — La transcription


En ce moment, tous les sites se ressemblent ! , c’est le constat qui ouvre la prĂ©sentation. Il y a beaucoup d’homogĂ©nĂ©isation dans le web, due au plagiat ou aux templates, ou au syndrome de on-ne-va-pas-rĂ©inventer-la-roue. Utiliser un thème dĂ©jĂ  fait, c’est utiliser une antisèche qui n’a pas la bonne rĂ©ponse. Le principal, nous dit AmĂ©lie Boucher, c’est d’être soi, et d’apporter du sens aux projets. Pour ça, il faut rechercher, trouver un regard neuf, se poser les bonnes questions et dĂ©couvrir le domaine. Ça passe aussi par le dĂ©tail, rĂ©flĂ©chir Ă  ce qu’on veut montrer/cacher, et ĂŞtre conscient qu’une rĂ©ponse de design peut ĂŞtre liĂ©e au contenu. Le process peut aussi aider, par exemple en se mettant dans la peau de l’utilisateur, en ne partant de rien ( l’esprit du dĂ©butant ), en faisant attention aux fausses bonnes idĂ©es que sont le benchmark ou le brainstorm, et surtout en sortant de sa zone de confort.

C’était une prĂ©sentation très intĂ©ressante, que je conseille Ă  tout travailleur « crĂ©atif Â».

Questionnements sur l’Internet prêt-à-porter
Par Amélie Boucher — Sur paris-web.fr — les slides


Les sélecteurs CSS, il y a des tonnes à dire sur ce sujet, mais Gaël Poupard s’est bien débrouillé pour en tirer la substantifique moelle, en proposant à la fin son projet a11y.css , un outil CSS pour contrôler le markup HTML sur certains sujets d’accessibilité (genre contrôler la présence de l’attribut lang dans la balise .

L’usage de sĂ©lecteurs dans le genre de [aria-hidden=”true”] au lieu d’ajouter/enlever des classes spĂ©ciales dans nos scripts peut ĂŞtre plus pratique. On peut aussi en Ă©conomiser en utilisant [class=”btn”] au lieu de .btn.btn-red.btn-big ou autre horreur. Et puis ça, c’est joli : main + * { margin-top: 1em; } (au lieu de faire des tas de p:first-child { margin-top: 0; }).

Maintenant, il faut que je me renseigne sur Atomic CSS et Tachyons , je crois que ça peut m’intéresser.

Il n’y a pas que class et id dans la vie
Par Gaël Poupard — Sur paris-web.fr — La transcription


Cette présentation très complète portait sur les nouveautés qu’apportera la spec HTML5.1, par exemple les service workers , les notifications push , l’API Gamepad (pour les jeux dans le navigateur), et les trucs dont on ne sait pas encore si ça existera un jour (genre ContentEditable ).

HTML 5.1 + Web Platforms API
Par Léonie Watson et Charles McCathieNevile — Sur paris-web.fr — Les slides


Leboncoin, c’est le site jaune qui a changĂ© rĂ©cemment (mais pas trop). Son design est basĂ© sur la simplicitĂ© d’utilisation, lors de la refonte responsive, l’accent a Ă©tĂ© mis sur l’UX, le « pixel Â» est passĂ© après. Pour un tel projet, ils ont rassemblĂ© des talents très diffĂ©rents mais complĂ©mentaires, et ont coupĂ© la chaine dĂ©cisionnaire habituelle. Il leur a fallu se former auprès d’autres Ă©quipes de leur groupe, et auprès de consultants extĂ©rieurs. Avec 40% de visiteurs sur mobile, la refonte Ă©tait un vrai enjeu, qu’ils ont pu rĂ©ussir en faisant les changements petit Ă  petit, workflow par workflow. Ils ont pu recruter un très grand nombre de testeurs pour leurs beta grâce aux rĂ©seaux sociaux (il leur a fallu lire 70000 rĂ©ponses). Les leçons finales, c’est de faire les features progressivement, d’écouter les utilisateurs, de ne pas trop se couper des dĂ©cisions des autres Ă©quipes de la boĂ®te (c’est plutĂ´t important, ça), et surtout de bien communiquer au sein de sa propre Ă©quipe.

Leboncoin, les coulisses d’une refonte graphique
Par Margaux Chenard et Jérémie Pereira— Sur paris-web.fr


Une expertise de graphiste au milieu d’une équipe de dev c’est toujours une richesse, mais ça passe d’abord par le partage et la présentation du métier (peu de développeurs savent en quoi ça consiste vraiment), et cultiver les à-cotés comme le dessin, etc. Et puis ça peut être intéressant d’avoir l’avis de devs sur des sujets de graphistes.

Une graphiste parmi les dev
Par Florie Séchaud — Sur paris-web.fr


Ce qui va ĂŞtre utile au plus grand nombre

En regardant mes notes, il y a trois talks qui m’ont vraiment enthousiasmé, c’est là qu’il y a le plus de pages noircies, de mots soulignés et de flèches dans tous les sens. Étrangement, c’est des sujets plus larges que de la technique ou du retour d’expérience, ça a à voir avec le web et la façon dont il influence les sociétés.

Les donnĂ©es personnelles, c’est le pĂ©troles du web ; qui a un gisement de data, domine. Apple rĂ©colte, Google rĂ©colte, Amazon en sait sĂ»rement plus sur moi que ma maman, Facebook et Twitter n’en parlons pas. Il y a aussi les data brokers , qui rĂ©cupèrent toutes les donnĂ©es utilisateurs possibles, les croisent, et en font des profils le plus dĂ©taillĂ© possible pour nous envoyer des publicitĂ©s pour du viagra.

L’existence de données utilisateur peut être positive mais elle est beaucoup plus souvent négative. Quand le site d’une pharmacie contient un tracker de Google, Google sait quels médicaments j’achète, et donc quelles maladies je peux avoir.

En tant que professionnels du web, on a une responsabilitĂ© dans la protection de la vie privĂ©e, la notre et celle des utilisateurs pour qui on fait des sites. En l’absence de contexte, toutes les donnĂ©es doivent ĂŞtre considĂ©rĂ©es comme sensibles ; une donnĂ©e peut ĂŞtre indirectement sensible. Adoptons un principe de prĂ©caution, et offrons la possibilitĂ© aux utilisateurs de modifier/supprimer leurs donnĂ©es.

Il faudra donc « dĂ©ratiser Â» nos sites, notamment en analysant les logs ou en hĂ©bergeant les outils soi-mĂŞme (au lieu de faire appel Ă  Google), en hĂ©bergeant aussi ses typos et en n’incluant pas de maps google… Il faudra aussi toujours activer le chiffrement, rĂ©internaliser/dĂ©sexternaliser les donnĂ©es, par exemple les commentaires, ne pas empĂŞcher les utilisateurs de protĂ©ger leur vie privĂ©e, et plein d’autres choses.

Anatomie d’une désintoxication Web sous surveillance
Par Thibault Jouannic — Sur paris-web.fr — Le support texte — La transcription


Le Web a Ă©normĂ©ment grossi depuis ses dĂ©buts il y a 20 ans ; les pages web ont grossi 115 fois : plein d’images, de scripts, de typos, etc. Grâce Ă  l’explosion du web et maintenant des apps, Internet a une empreinte environnementale plus grande que deux fois la France.

Le principal impact se situe au niveau des terminaux, et non des rĂ©seaux ou des serveurs ; en tant que dev web, on ne peut pas allonger la durĂ©e de vie des smartphones et ordinateurs personnels… en revanche, on peut rĂ©duire le besoin en terme de serveurs et de bande passante. L’important, c’est la frugalitĂ© et l’efficience.

Malheureusement, il n’existe pas de certification officielle « Ă©coconception de services numĂ©riques Â» type Ă©colabel, bien qu’il y a une demande de la part de grands groupes ( Il ne faudrait pas non plus que ça devienne un argument de green-washing). En revanche, beaucoup de petites structures en France se posent la question et bâtissent des rĂ©seaux de connaissance et de bonnes pratiques au niveau rĂ©gional.

Parmi les bonnes pratiques à développer, il faut centrer la conception sur le fonctionnel ( Le designer en moi est horrifié, l’utilisateur en moi applaudit des deux mains, l’écolo en moi enlève ses chaussures pour applaudir aussi des deux pieds ), avec une approche frugale et sobre. Au niveau design et UX on bosse en mobile first, on purifie l’interface (pas trop d’images—bande passante—ou d’animations—puissance processeur), au niveau technique on adapte les choix techno à l’usage ( voir plus haut la conférence sur les sites statiques ), on évite les plugins genre flash ou java, etc…

Dans l’esprit des gens, le web est immatériel. Mais nous, les concepteurs, on sait que tout ça a un coût, à nous de réduire ce coût.

Éco-conception : mon site web au rĂ©gime
Par Frédéric Bordage — Sur paris-web.fr — Les slides


Bruce Lawson travaille chez Opera, les dĂ©veloppeurs du navigateur Ă©ponyme. Chez Opera, ils se prĂ©occupent Ă©normĂ©ment des 4 milliards d’internautes Ă  venir, en provenances des pays en dĂ©veloppement. Sa confĂ©rence Ă©tait très intĂ©ressante pour briser les idĂ©es reçues sur tous les utilisateurs qu’on ne voit pas. ÉnormĂ©ment de gens n’ont pas commencĂ© avec Internet sur un ordinateur, par exemple, mais via un tĂ©lĂ©phone mobile. Il faut donc penser Ă  construire le web en tenant compte de ces limitations. Par exemple, au lieu d’apps faites depuis un marketplace, les progressive web apps sont beaucoup mieux : toujours Ă  jour, et peuvent s’utiliser sur toutes les plate-formes, et mĂŞme offline grâce aux Service Workers . C’est d’ailleurs en Asie et en Afrique qu’on voit le plus de web apps natives ( Pour des exemples, voir pwa.rocks ).

_It doesn’t matter how smart your device is, if your network is dumb
_Pour accĂ©lĂ©rer l’accès au web, Opera a mis en place un navigateur proxy : les pages visitĂ©es par un utilisateur sont compressĂ©es par un serveur, puis envoyĂ©es au device de l’utilisateur, de manière dĂ©gradĂ©e certes, mais beaucoup plus rapide. Il faut donc oublier les typos web (surtout pour les icĂ´nes, le SVG c’est le bien), les coins arrondis ou les animations. LĂ  on parle web basique, mais web accessible sur un rĂ©seau lent ou soumis aux coupures de courant.

WWW : World Wide Web, not Wealthy Westerners’ Web
Par Bruce Lawson — Sur paris-web.fr — Les slides


J’ai aussi assisté à deux ou trois autres talks assez intéressants mais peu pertinents à ce compte-rendu, et aux lightning talks, très sympa… mais j’ai pas pris de notes, il faudra les regarder en vidéo.

Parmi les sujets des talks auxquels je n’ai pas assistĂ© et qui m’intĂ©ressaient aussi, il y avait :

  • La Blockchain , on m’en a dit le plus grand bien (et sans langue de bois)

  • Les Beacons , comment augmenter le monde physique, dans le cadre par exemple d’une visite de musĂ©e ?

  • L’accessibilitĂ© dĂ©complexĂ©e , j’admets que le rĂ©sumĂ© me laisse sur ma faim, j’attends la vidĂ©o

  • Les ateliers de co-conception UX , j’admets volontiers que l’UX est pour moi un domaine Ă  explorer (mais Ă  la diffĂ©rence de beaucoup de directeurs artistiques qui se la pĂŞtent, je sais que c’est une discipline Ă  part entière et pas juste une excuse pour vendre du design minimaliste et des boutons hamburger), heureusement les slides sont dĂ©jĂ  lĂ 

  • Les Progressive Web Apps , j’attends la vidĂ©o avec impatience, Ă©tant donnĂ© que la salle Ă©tait archi-pleine

  • L’accessibilitĂ© au delĂ  des rĂ©fĂ©rentiels , il faudrait dĂ©jĂ  que j’arrive Ă  sensibiliser les gens pour qui je fais des sites, sur les sujets de l’accessibilitĂ©. Mais c’est bien de savoir comment aller plus loin

  • Le design de l’audio , un talk dont on m’a beaucoup parlĂ©, et que j’ai pu revoir avec Carine , la confĂ©rencière

J’ai lu quelques articles au sujet de cette édition de ParisWeb, sur le manque de diversité dans le type de conférenciers présents (depuis 10 ans). Personnellement, je suis pour plus de diversité. En tant que participant, j’ai été content de voir sur la scène et dans les couloirs des gens qui ne me ressemblaient pas. Je sais que l’organisation de ParisWeb fait beaucoup de travail dans ce sens, il faut continuer, et amplifier le mouvement. Je ne dis pas ça pour plonger moi aussi dans la polémique, mais bien pour souligner l’importance de la discussion.


En conclusion de ce long—très long—compte rendu, j’ai appris plein de choses et passé des bons moments avec des amis professionnels que je ne vois que pas assez souvent. L’an prochain j’y reviens, avec peut-être une idée de conférence sous le bras, mais surtout avec plein de collègues. Ils verront à quel point c’est fondamentalement bien de se connecter à tant d’autres gens qui partagent leur savoir, leurs pratiques, leur foi dans le web.


Initialement publié le sur Medium.


Billets liés


Feedback (en travaux)

RĂ©pondez sur votre propre site, envoyez une Webmention!

🌱 🍂 🌱 🌱 🌱 🌱 🌱 🌱 🌱 🌿 🌱 🌿 🍂 🌱 🌿 🌱 🍂 🍂 🌿 🌱