Reef Notes
Nous construisons des sites pour vivre, et nous notons ce que nous apprenons : ce qui a vraiment accéléré une page, pourquoi une police s'est effondrée sur Android, comment un devis approximatif est devenu un contrat signé. Le carnet, pas le portfolio.
La note du mois
À la uneTypographie
Une proportion est facile à choisir et le plus souvent fausse. Une échelle gagne sa place quand chaque palier a un rôle sur une vraie page : cinq tailles, une longueur de ligne qui tient à 320 comme à 1440 pixels, et un clamp() qu'une designer peut lire à voix haute.
Les entrées les plus récentes, de la plus fraîche à la plus ancienne. Le reste attend dans les archives.
Les outils de laboratoire mesurent un robot sur de la fibre. Les données de terrain mesurent vos lecteurs dans le bus. Voici le dispositif honnête le plus simple que nous ayons su construire : trois métriques, un point d'entrée, aucun script tiers, et la semaine où nos deux séries de chiffres se sont contredites de deux secondes et demie.
La plupart des projets qui ont mal tourné avaient déjà mal tourné en page une. Voici le brief sans lequel nous refusons désormais de démarrer : qui décide, ce qui existe déjà, ce qui vaut pour fini, et les trois questions qui révèlent un budget sans que personne ait à citer un chiffre.
Inverser une palette prend un après-midi. Le difficile, c'est tout ce que la palette ne contrôle pas : les photos, les captures d'écran, les graphiques, les vidéos intégrées, et cette couleur de marque qui ne veut plus rien dire une fois le fond passé au noir.
Un schéma qui casse le build vaut mieux qu'un CMS qui laisse n'importe qui publier une page cassée. Ce que nous validons dans Astro, ce que nous laissons volontairement tranquille, et les trois règles qui empêchent un schéma Zod de devenir un second CMS.
Une police variable n'est pas automatiquement moins chère que deux graisses statiques, le sous-ensemble économise moins qu'on ne le croit, et la partie coûteuse reste la police de secours que personne n'a dessinée. Le vrai prix d'un caractère, en octets, en requêtes et en décalage.
Un budget, ce n'est pas un score Lighthouse, et ce n'est pas un message dans Slack. Voici celui que nous écrivons désormais dans le contrat : quatre nombres, l'appareil sur lequel on les mesure, et la phrase qui tranche quand on nous demande une vidéo en en-tête en semaine neuf.
Chaque article appartient à un seul sujet : un fil se lit donc d'un bout à l'autre, sans traverser tout le reste.
La moitié lente du métier : bien nommer les choses, écrire un balisage qui survivra à la prochaine refonte, choisir la solution ennuyeuse en connaissance de cause. Des notes sur la façon dont une page se construit vraiment, pas sur la façon dont on la démontre.
2 articles
Des chiffres qu'on peut défendre : des budgets posés avant le premier commit, ce que racontent les données de terrain quand les vrais téléphones arrivent, et l'écart entre un bon score en laboratoire et une page qui paraît rapide. Au fond, il s'agit surtout d'en livrer moins.
2 articles
La typographie, c'est l'essentiel d'un site, et l'essentiel du travail ne se voit pas : la longueur de ligne, le rythme vertical, la stratégie de chargement, la police de secours que personne n'a pris la peine de dessiner. Ce qu'on livre, et ce que ça coûte en kilo-octets.
2 articles
Des décisions d'interface prises à voix haute : les états avant les écrans, un contraste qui tient aussi en mode sombre, une animation qui porte du sens plutôt que de l'attention. Ici, le design est une liste de contraintes, pas une planche d'ambiance.
1 article
Le métier derrière le code : rédiger un cahier des charges qu'un client peut vraiment signer, facturer un travail plutôt que des heures, tenir entre deux projets. La partie du travail indépendant que personne ne met dans son portfolio.
1 article
Deux personnes, qui livrent toujours des projets clients. Chaque signature mène à tout ce que son auteur a publié.
Fondatrice et développeuse web
Mara a ouvert le studio en 2016, après huit ans passés en agence, et écrit encore la majeure partie du HTML qui part en production. Ce sont les parties ingrates d'un projet qui l'intéressent : le nommage, la modélisation des données et la clause de contrat que personne n'a envie de lire.
Ingénieure performance
Noor vient d'une plateforme de commerce en ligne où cent millisecondes avaient une valeur chiffrée, et elle en a gardé l'habitude de mesurer avant de discuter. Elle s'occupe de la collecte des données de terrain du studio et de la réunion inconfortable où l'on montre au client ce que donne son site sur un téléphone de cinq ans d'âge.
Designer d'interface
Tomas dessine directement dans le navigateur, ce qui est une façon polie de dire qu'il refait ses propres maquettes trois fois avant de les montrer. Il tranche les questions de typographie et de couleur du studio, et tient à jour un tableau de tous les rapports de contraste sur lesquels nous nous sommes disputés.
À propos
L'un construit, l'autre dessine, les deux écrivent. Trois ou quatre projets par an, et tout ce qu'ils nous apprennent finit ici.
Un court résumé de ce que nous avons publié et de ce que nous avons raté. Pas de pixel espion, pas de séquence automatique, un clic pour partir définitivement.