Conférences
L’invasion du HTML mutant
DevQuest Niort 2025 —
- Page de l’événement
- DevQuest Niort 2025
- Support
- Lire les slides de « L’invasion du HTML mutant »
L’invasion du HTML mutant
DevFest Nantes 2024 —
- Page de l’événement
- DevFest Nantes 2024
- Support
- Lire les slides de « L’invasion du HTML mutant »
- Jeu
- Jouer au jeu « L’invasion du HTML mutant »
Orange Confort+
a11y Paris 2024 —
- Page de l’événement
- a11y Paris 2024
- Support
- Lire les slides de « Orange Confort+ »
Dessine-moi un graphique (en CSS)
devQuest Niort 2024 —
Dessine-moi un graphique (en CSS)
Touraine Tech 2024 —
Dessine-moi un graphique (en CSS)
DevFest Nantes 2023 —
HTML à la rescousse de l’UX des formulaires
Human Talks Nantes 2023 —
- Page de l’événement
- Human Talks Nantes 2023
- Support
- Lire les slides de « HTML à la rescousse de l’UX des formulaires »
Découvrez « le bon HTML » et économisez du JS et du CSS
DevFest Nantes 2022 —
Découvrez « le bon HTML » et économisez du JS et du CSS
Paris Web 2022 —
Le jargon web, avant le web
Paris Web 2021 —
- Page de l’événement
- Paris Web 2021
- Support
- Lire les slides de « Le jargon web, avant le web »
- Vidéo
- Regarder la vidéo de « Le jargon web, avant le web » (sur Viméo)
Comprendre et prendre en compte les situations de handicap sur le web
Nantes Numérique Responsable —
Des propriétés personnalisées très, très personnalisées
Paris Web 2020 —
Un plan de salle modifiable avec les grilles et propriétés personnalisées CSS
Paris Web 2019 —
- Page de l’événement
- Paris Web 2019
- Support
- Lire les slides de « Un plan de salle modifiable avec les grilles et propriétés personnalisées CSS »
Les graphiques de données avec HTML et CSS
Web2Day 2019 —
La donnée graphique avec HTML et CSS
Paris Web 2018 —
Un plan de tests automatisés pour votre front-end
WP-Tech 2018 —
Visite guidée du customizer
Meetup WordPress Nantes —
- Page de l’événement
- Meetup WordPress Nantes
- Support
- Lire les slides de « Visite guidée du customizer »
- Vidéo
- Regarder la vidéo de « Visite guidée du customizer » (sur YouTube)
Il n’y a pas que
classetiddans la vieParis Web 2016 —
Workflow moderne cherche graphiste à l’ancienne
KiwiParty 2016 —
L’accessibilité via les thèmes enfants
21e séminaire AccessiWeb —
- Page de l’événement
- 21e séminaire AccessiWeb
- Support
- Lire les slides de « L’accessibilité via les thèmes enfants »
Accessibilité et efficience
WPMX 2015 —
- Page de l’événement
- WPMX 2015
- Support
- Lire les slides de « Accessibilité et efficience »
- Vidéo
- Regarder la vidéo de « Accessibilité et efficience »
Les thèmes enfants, au-delà de la bonne pratique
WP-Tech 2014 —
Parcours professionnel
Spécialiste du HTML / CSS passé par les cases designer UX/UI en agence, développeur PHP, développeur front-end en start-up aux commandes d’un guide de styles — on ne parlait pas encore de design system ! —, chef de chantier sur une refonte technique front-end chez un éditeur dans un environnement Java, puis spécialiste front-end et CMS en ESN, je suis actuellement référent accessibilité et expert HTML / CSS / SVG chez Onepoint.
Et ne le répétez pas, mais j’ai commencé en 2007 par faire du Flash — et j’aimais ça !
Onepoint — à aujourd’hui
Lead tech front et référent accessibilité chez Onepoint.
Depuis quatre ans, j’ai eu l’occasion de travailler sur des sujets variés :
- une bibliothèque de Web Components basée sur Lion avec une couche de styles basée sur Bootstrap ;
- un design system complet :
- une bibliothèque de composants HTML / CSS, Angular « maison » et Material ;
- le site de documentation, statique, généré sur la base de scripts Node avancés pour compiler les contenus en Asciidoc, les spécifications générées par Compodoc, les notes de versions automatisées sur la base des conventional commits, etc.
- une extension navigateur, Orange Confort+, rénovée techniquement en première intention puis totalement refondue ensuite pour respecter Manifest V3 et utiliser des technologies modernes (Typescript, Web Components, web-ext…) ;
- et des audits RGAA, des interventions correctives, de l’accompagnement…
Actions
- Constituer une équipe d’expertise accessibilité et des communautés de pratique autour de l’accessibilité et de l’intégration HTML / CSS ;
- Évangéliser sur l’assurance qualité web avec Opquast, jusqu’à ce que Onepoint devienne partenaire ;
- Sensibilisation et formation à l’accessibilité de plus de 250 personnes ;
- Mise en place (en cours) du schéma pluriannuel d’accessibilité et d’une stratégie de mise en œuvre de l’accessibilité ;
- Participation au comité de traduction des Web Content Accessibility Guidelines (WCAG) 2.2 coordonné par Access42 ;
- Contribution au cercle d’expertise nantais : commité éditorial, conférences internes avec accompagnement des orateurices, programme de mentorat…
Orange — à
Développeur intégrateur web chez OAB, une filiale d’OBS faisant partie du groupe Orange.
Initialement engagé pour renforcer les équipes PHP sur les projets WordPress et l’intégration, je suis progressivement devenu référent accessibilité pour OBS, référent technique HTML / CSS et WordPress et animateur des communautés de pratique front-end, accessibilité et éco-conception. J’intervenais en conseil dans tous ces domaines pour la plupart des projets de mon pôle.
Je fus également mainteneur, pendant plus de deux ans, de Boosted, le fork de Bootstrap du groupe Orange — et ai intégré l’équipe de Bootstrap à force de reversions de qualité. Ce projet était extrêmement riche : collaboration étroite avec l’équipe londonienne de la marque Orange (en charge du design system) et avec l’équipe EASE, la cellule d’expertise accessibilité du groupe Orange.
Environnements et missions
- PHP7 dans PHPStorm, sur Ubuntu ;
- Vagrant et Puppet, puis Docker pour l’industrialisation ;
- Gulp ou Webpack pour le workflow front-end complet ;
- Développements Node ;
- Outillage pour test : accessibilité, non-régression visuelle, performance… avec notamment la réalisation d’un tableau de monitoring interne, à l’origine de chaarts ;
- Git et GitHub avancés ;
- Thème WordPress très avancé pour une usine à sites : exploitation des Must Use plugins, thème parent et enfant, personnalisation à l’aide du customizer…
- Personnalisation CSS d’un outil de GRU (Gestion de Relations Usager) déployé par Lantéas ;
- Documentation technique, élaboration de référentiels et plans de test.
Ornikar — à
Développeur front-end chez Ornikar.
Ma mission est d’améliorer la partie HTML / CSS jusqu’à l’état de l’art actuel. Il a pour cela fallu refondre le précédent site — intégré à l’emporte-pièce avec Bootstrap — et travailler conjointement avec un directeur artistique pour concevoir une charte graphique et un guide de styles complet qui doit pouvoir supporter les itérations sur le design et l’UX, et à disposition de l’équipe technique.
Un effort conséquent a également été produit pour améliorer l’accessibilité et optimiser le référencement naturel, qui sont des prismes primordiaux pour un travail permanent d’amélioration de l’expérience utilisateur.
Environnement
- PHP7 (Laravel) dans PHPStorm, sur OSx ;
- Angular pour le développement front-end ;
- Gulp pour le workflow front-end complet ;
- GitHub pour la gestion des versions, des PR, et la relecture ;
- Livraison continue avec CodeShip ;
- SauceLabs pour les tests de compatibilité.
Mes sujets
- Nettoyer les dépendances et repartir de zéro si possible ;
- Travail conjoint avec un DA externe pour formaliser une charte graphique ;
- Mise en place de Hologram pour le guide de styles ;
- Création d’un socle CSS sur-mesure avec une approche éducative ;
- Mise en conformité et évangélisation autour de l’accessibilité ;
- Réalisation de quelques illustrations ;
- Audits récurrents avec Opquast Reporting, Tanaguru, Dareboost et bookmarklets ;
- Travail d’optimisation avec l’agence SeoMix pour le référencement naturel ;
- Mise en place d’un workflow dédié aux SVG, inexistant jusqu’alors.
Kosmos — à
Développeur front-end chez Kosmos.
Ma mission principale consiste à rembourser la dette technique accumulée sur le front-end et l’UI en plusieurs années de développements fonctionnels, mais aussi à apporter des solutions efficaces et modernes pour les nouvelles fonctionnalités. J’interviens également en tant que conseil dans les domaines de l’ergonomie et du graphisme, et suis référent d’équipe pour l’accessibilité.
Environnement
- Environnement Java dans IntelliJ Idea, sur Ubuntu ;
- Gestion de versions avec SVN ;
- Développement du produit en méthode agile.
Mes rôles
- alimenter la feuille de route front-end ;
- faciliter les échanges entre les équipes fonctionnelles et techniques via l’UX ;
- intervenir en support des équipes Qualité pour les sujets front-end ;
- migrer des composants UI (basés en majeure partie sur YUI2) vers Kendo UI ;
- mettre en place d’utilitaire JavaScript pour palier aux scripts spécifiques ;
- ré-écrire des scripts en JS natif pour supprimer des dépendances inutiles ;
- factoriser et optimiser massivement l’ensemble des CSS ;
- passer à HTML5 et ARIA ;
- améliorer le niveau d’accessibilité en allant du général au particulier ;
- faciliter l’utilisation des dernières avancées CSS et JS notamment ;
- former et outiller progressivement les développeurs sur les sujets front-end ;
- documenter les modifications et apports au fur et à mesure ;
- proposer et expérimenter des alternatives techniques (vidéo HTML5, par ex.).
1-ter-net — à
Graphiste, intégrateur web et développeur WordPress au sein de l’agence 1-ter-net — disparue depuis.
Ma mission initiale était la création graphique, puis s’est étendue jusqu’à ce que ma mission principale soit l’intégration et le développement WordPress. Je couvrais ainsi l’ensemble de la chaîne de production de sites sur WordPress. J’ai également réalisé plusieurs prestations en tant que sous-traitant pour des ESN sur des sujets d’intégration et d’ergonomie, avec parfois une bonne dose d’accessibilité.
Mes missions
- Création graphique (logos, chartes graphique et maquette) avec Gimp et Inkscape ;
- Conception ergonomique et fonctionnelle, prototypes fonctionnels sur Axure et Balsamiq ;
- Intégration HTML, CSS et JS — responsive et mobile first selon les projets ;
- Optimisation de la sémantique et des performances pour le référencement ;
- Développements WordPress spécifiques (thèmes et extensions) et industrialisation des bonnes pratiques ;
- Développements de plugins jQuery ;
- Gestion des versions avec SVN puis Git ;
- Développement et intégration occasionnels sur Prestashop et Magento ;
- Gestion de projets simples.
Les différentes prestations en ESN m’ont permis de découvrir les environnements Java et dotNet, et de travailler aussi bien sur des applications riches que sur des clients lourds. J’ai également créé un thème complet pour la solution de portail Liferay, et suis intervenu sur l’intranet de Système U pour de la compatibilité IE6. Quelle belle époque !
Zéni — à
Infographiste en alternance chez Zéni, l’agence web du groupe Keyrus — devenue Spikly puis disparue ?
Mon rôle consistait principalement à réaliser des déclinaisons de maquettes, des animations Flash ainsi que des supports publicitaires web et print.
Projets associatifs
Au-delà de quelques fugaces contributions pour créer les sites web d’association de quartier ou d’un club de rugby,
Paris Web
Après six interventions en sept ans, il était temps que je laisse la place et que je contribue différemment : me voilà donc dans le staff de Paris Web pour la troisième année, en responsabilité du pôle design et contributeur des pôles sites et applications notamment.
J’y ai découvert le CMS Kirby, un petit bijou — mais aussi, de plus loin, l’écosystème Python et Django en particulier, et Ruby On Rails.
WP-Tech
Après avoir été orateur lors de la première édition en 2014, j’ai contribué à l’organisation de la deuxième édition en 2015. J’étais très impliqué dans l’écosystème WordPress nantais à ce moment-là, animant également quelques meetups L’événement a sauté quelques années avant de renaître à Lyon en 2018, où j’ai également été orateur.
Projets open-source
Je contribue dès que possible aux projets open-source que j’utilise, que ce soit pour signaler des bugs (dans Chromium ou WebKit récemment), améliorer la documentation ou proposer des corrections. Mais certains projets prennent plus de place que les autres, notamment quand j’en suis à l’initiative.
a11y.css
a11y.css est une feuille de styles pour évaluer la qualité de votre HTML — très orientée accessibilité et assurance qualité web — et traduite en dix langues ! Elle est embarquée dans une extension navigateur qui ajoute quelques fonctionnalités utiles, comme l’inspection des alternatives aux images et l’affichage des langues déclarées dans la page.
chaarts
Chaarts est un projet expérimental visant à transformer un tableau HTML en graphique de données interactifs et accessibles, sans JavaScript. L’occasion de plonger dans la trigonométrie en CSS, entre autres choses !
Bootstrap
Ma position de mainteneur de Boosted pendant plus de deux ans m’a permis de contribuer largement à Bootstrap et d’être intégré à la core team. J’ai notamment implémenté le RTL dans la v5 de Bootstrap à l’aide de RTLCSS, déjà utilisé dans la v4 de Boosted.
Publications
- Trois pages d’introduction à l’accessibilité et à son impact sur le référencement naturel dans « Optimiser son référencement WordPress » par Daniel Roch a.k.a. SEO Mix ;
- Du consommateur au producteur le sur Openweb ;
- Webgrids : Structure et typographie de la page web le sur Alsacréations ;
- C’est anecdotique, mais j’en suis fier : un extrait de mon compte-rendu de lecture du « Guide pratique de choix typographique » est cité en quatrième de couverture de l’édition revue et augmentée, toujours rédigé par David Rault.
Formation
- 2022 : Formation Audit RGAA chez Access42 ;
- 2018 : Formation Référent Qualité Web chez Opquast — certifié expert avec 965/1000 ;
- 2008 — 2009 : licence professionnelle ATC à l’IUT de Bobigny ;
- 2006 — 2008 : BTS communication visuelle option Multimédia au lycée Eugénie Cotton à Montreuil ;
- 2003 — 2006 : Bac STI Arts Appliqués au lycée Albert Claveille à Périgueux ;