Aller au contenu principal
Voir ↗
EN

Personnaliser l'affichage

Profils rapides

Taille du texte

Espacement du texte

Hauteur de ligne

Affichage

Saturation des couleurs

Mouvement

Alignement du texte

Position du panneau

← Accueil

À propos

Colophon

Les choix techniques et éthiques derrière ce site.

Pourquoi ce site existe

Ce site est mon portfolio. Il présente ma pratique de Product Designer à travers des études de cas choisies, dans les limites de la confidentialité que je dois à mes clients et employeurs. Il complète florianbeaufils.com, ma fiche d'identité numérique, qui reste la page de référence sur mon nom.

Ce qu'il n'est pas :

  • Pas un site public — il est volontairement non référencé par les moteurs de recherche et se partage par lien direct
  • Pas un blog — pas de note publiée pour le moment
  • Pas une page de prise de rendez-vous — un email suffit

Stack technique

  • Framework : Astro
  • Styles : CSS pur, design tokens centralisés, aucun framework CSS
  • JavaScript : minimal pour les interactions (bascule de thème, panneau de confort, micro-interactions)
  • Animations : GSAP, bundlé avec le site (aucun CDN tiers)
  • Polices : système exclusivement (zéro requête HTTP, zéro chargement)
  • Hébergement : Cloudflare Pages
  • Domaine : florianbeaufils.design (registrar Gandi, DNS Cloudflare)

Éco-conception

Le site s'aligne sur les référentiels RGESN de la Direction Interministérielle du Numérique et GR491 de l'Institut du Numérique Responsable. Les choix concrets :

  • Polices système — aucune police téléchargée, donc aucune requête réseau pour la typographie
  • Icônes — SVG inline, aucune bibliothèque chargée
  • Images — formats modernes (WebP, AVIF), dimensions adaptées, chargement différé (loading="lazy")
  • Aucun script tiers — pas de chargement vers Google, Meta ou un quelconque CDN externe
  • Aucun outil de profilage commercial (voir « Vie privée » ci-dessous)
  • Poids cible — moins de 500 Ko au premier chargement

Au-delà de ces choix techniques, la démarche elle-même est tenue dans la durée :

  • Objectifs mesurables — un budget de moins de 500 Ko par page, un nombre de requêtes réseau réduit au strict nécessaire, et des cibles publiques vérifiables (EcoIndex A, Website Carbon A+)
  • Revue à chaque évolution — toute modification est évaluée à l'aune de son coût (poids, requêtes, rendu) avant mise en ligne. Une fonctionnalité qui n'améliore pas l'expérience à coût constant n'est pas ajoutée
  • Cycle de vie des contenus — les contenus devenus obsolètes (certificats expirés, pages sans usage) sont retirés plutôt qu'accumulés. Le site reste volontairement réduit à ce qui sert son objectif

Une différence assumée avec florianbeaufils.com : ce portfolio embarque la bibliothèque d'animation GSAP pour servir des animations plus riches, pensées pour la démonstration. C'est un coût supplémentaire — quelques dizaines de kilo-octets de JavaScript, servis depuis le site lui-même — accepté en connaissance de cause : sur un portfolio, le mouvement fait partie du propos. Le reste de la démarche demeure : polices système, SVG inline, aucun script tiers, aucune mesure d'audience. Et toutes les animations respectent prefers-reduced-motion ainsi que le réglage « Arrêter les animations » du panneau de confort.

Les notes de performance environnementale (EcoIndex, Website Carbon) seront publiées dans la déclaration d'accessibilité après la mise en ligne de la refonte.

Accessibilité

L'accessibilité d'un site web ne commence pas sur le site : elle commence dans les préférences système de la personne qui le visite. Taille de texte, contraste élevé, lecteur d'écran, loupe, réduction des animations — ce sont les outils que les personnes en situation de handicap configurent une fois, à l'échelle de leur appareil. Un site bien fait respecte ces choix sans demander à être reconfiguré.

Ce site vise les standards WCAG 2.2 niveau AA (AAA visé sur les contrastes critiques), RGAA et EAA. Concrètement :

  • Préférences système respectées : prefers-color-scheme (mode sombre/clair), prefers-reduced-motion (animations), prefers-contrast (contraste élevé), prefers-reduced-data (économie de données)
  • Sémantique HTML stricte et hiérarchie des titres respectée
  • Tous les éléments interactifs accessibles au clavier, focus visible distinctif
  • Zone interactive minimale 44×44 px sur tous les éléments cliquables (Loi de Fitts, WCAG 2.5.8)
  • Lien d'évitement (« Aller au contenu principal ») dès la première tabulation

En complément, un panneau de confort permet d'ajuster ponctuellement l'affichage : taille du texte, espacement, alignement, contraste, masquage des images, arrêt des animations, et plus encore. Ce panneau est un complément pour des besoins contextuels (fatigue, écran prêté, préférence ponctuelle) — il ne remplace pas les outils d'assistance configurés au niveau de l'OS, qui restent prioritaires.

Pas d'overlay d'accessibilité. Ce site n'embarque aucun widget tiers se présentant comme une solution de mise en conformité « clé en main » — ni profils de simulation par pathologie (dyslexie, DMLA, daltonisme…), ni synthèse vocale intégrée, ni polices « dyslexie » téléchargées à la volée. Ces outils donnent l'illusion d'une accessibilité sans toucher au code sous-jacent, et la communauté internationale de l'accessibilité numérique a documenté en détail leurs limites et les torts qu'ils peuvent causer aux personnes concernées. La seule accessibilité qui fonctionne est celle qui est construite dans le code (sémantique HTML, contrastes, navigation clavier, compatibilité lecteurs d'écran) et celle que l'utilisateur configure dans son système d'exploitation et ses outils d'assistance. Le panneau de confort de ce site est un complément de personnalisation, jamais un substitut.

Le détail complet de la conformité, des résultats d'audit et des moyens de signaler un problème figure dans la déclaration d'accessibilité.

Vie privée

  • Aucun cookie, tiers ou non
  • Aucun pixel de reciblage publicitaire ni outil tiers de profilage (pas de Meta Pixel, pas de LinkedIn Insight Tag, pas de Google Tag Manager)
  • Aucune donnée personnelle collectée sans interaction explicite
  • Aucune mesure d'audience — ni cookies, ni script de mesure, ni beacon. Votre visite ne génère aucune statistique, même anonyme

La liste exhaustive des outils utilisés et leur rôle figure dans la politique de confidentialité.

Toujours là ?

← Retour à l'accueil

L'esthétique, l'utile et le juste.

→ LinkedIn → Mail

Mentions légales · Politique de confidentialité · Déclaration d'accessibilité · Colophon · Plan du site

Conçu et développé par Florian Beaufils

© Florian Beaufils 2026