Mon site web est moche parce que c’est moi qui l’ai fait

 (goodinternetmagazine.com)
22 points par GN⁺ 2025-05-30 | 3 commentaires | Partager sur WhatsApp
  • Quelqu’un aurait pu rendre mon site web plus stylé, mais alors il n’aurait plus été à moi
  • La personnalité d’un site web vient des goûts de la personne qui l’a créé, de ses obsessions et de son intervention directe
  • En visant la simplicité et la familiarité, l’auteur réduit au minimum le CSS et le JS, puis applique directement des règles de transformation CSS pour produire du chaos, de la répétition et une ambiance de librairie d’occasion
  • Le site est conçu pour réagir aux interactions utilisateur avec du CSS uniquement, avec pour signature une texture brute et des changements inattendus
  • Le site web continue d’évoluer, grandit et se transforme avec son propriétaire, laissant vivre sa propre forme de « laideur »

Le site web que j’ai créé, et le sens de cette laideur

  • Si ma mère avait voulu accrocher un beau dessin sur le réfrigérateur, elle aurait pu y mettre une reproduction d’un artiste célèbre comme Vermeer, Lichtenstein ou Wyeth
  • Mais ce qu’elle voulait, ce n’était pas cet art-là : c’était un dessin fait par moi
  • Un designer talentueux aurait pu rendre mon site magnifique, mais dans ce cas il n’aurait plus vraiment été à moi
  • Pour faire du pain, certains veulent cultiver le blé, extraire le sel et faire pousser la levure eux-mêmes ; moi, non
  • Mon palais peu raffiné se satisfait très bien d’engloutir des breadsticks d’Olive Garden en grande quantité
  • Cette différence de goût vient de ce sentiment d’appropriation propre à chacun
  • Pour des raisons qui leur appartiennent, chacun aménage à sa façon son propre espace sur Internet

La diversité du web personnel

  • Tous ces gestes viennent d’une motivation intérieure et d’un désir de faire quelque chose que « moi seul peux faire »
  • Je n’ai pas la motivation de fabriquer du pain, des serveurs ou des puces, mais ce désir s’exprime chez moi à travers l’humour, les systèmes, le logiciel ou les structures
  • Quand l’émotion devient trop forte, elle déborde sous forme de fiction, HTML/CSS, robots bricolés ou chansons tristes
  • C’est pour ça que mon site web est le mien

La coexistence de la simplicité et de la personnalité

  • Autrefois, je ne voulais que de la simplicité et de la familiarité
    • Suppression du bruit
    • Accentuation du contraste
    • Réduction de la profondeur des menus
    • HTML ennuyeux
    • CSS minimal
    • Évitement du JS, etc.
  • En 2023, mon site ressemblait à ça (voir l’image de l’article original)

Un design chaotique, et une histoire de CSS

  • Les problèmes ont commencé au moment où j’ai décidé d’utiliser plus largement l’espace horizontal
  • Le plan de départ était simple : appliquer flex-wrap à un ul
  • Mais comme le texte se mettait aussi à la ligne, les différents liens devenaient difficiles à distinguer
  • Certaines personnes le lisaient comme de l’inline, d’autres le percevaient comme de l’inline-block
  • J’ai aussi essayé d’ajouter davantage d’espaces, de mettre des bordures autour de chaque lien, ou d’insérer des points entre eux, mais rien ne me plaisait

  • J’ai donc choisi d’introduire des variations dans les liens

  • Le chaos de la page d’accueil vient en réalité de quelques règles simples

    li:nth-child(4n + 0) { transform: rotate(1deg); }  
li:nth-child(4n + 1) { transform: rotate(-0.6deg); }  
li:nth-child(4n + 2) { transform: rotate(0.5deg); }  
li:nth-child(4n + 3) { transform: rotate(-0.75deg); }  
li:nth-child(6n + 0) { font-family: Times; }  
li:nth-child(6n + 1) { font-family: Helvetica; }  
li:nth-child(6n + 2) { font-family: Georgia; }  
li:nth-child(6n + 3) { font-family: Times; }  
li:nth-child(6n + 4) { font-family: Arial; }  
li:nth-child(6n + 5) { font-family: "Trebuchet MS"; }

  • Au départ, j’utilisais des entiers premiers entre eux (coprime integers) pour créer davantage de variations, mais j’ai fini par aimer la subtilité des motifs répétitifs

  • J’adore le minimalisme, mais je n’aime pas la sensation de froideur
  • Pour exprimer une chaleur de librairie d’occasion, j’ai ajouté quelques éléments de surprise en CSS 
    li:nth-child(5n + 2) { font-weight: 100; }  
li:nth-child(7n + 2) { letter-spacing: -1px; }  
li:nth-child(41n + 31) { transform: rotate(181deg); }
  • Le web reste un média interactif, donc je voulais qu’il réagisse au mouvement du curseur même sans JS
  • Le CSS ci-dessous crée une sensation de « toucher l’herbe » 
    li:nth-child(2n + 0):hover { transform: rotate(-2deg); }  
li:nth-child(2n + 1):hover { transform: rotate(2deg); }
  • Cela permet une réaction en temps réel au mouvement du curseur
  • Et comme je voulais accentuer la sensation de défilement sans faire de scrolljacking, j’ai donné à la page un aspect de « papier » grâce à un fond texturé
  • J’utilise css-doodle pour composer cette texture 
    svg {  
viewBox: .5 .5 10 10;  
fill: #000;  
circle*1000 {  
  cx, cy: @r(10), @r(10);  
  r: @r(.005, .01);  
  }  
}
  • En mode clair, cela évoque la poussière sur le papier ; en mode sombre, les étoiles dans le ciel nocturne
  • En 2024, mon site avait évolué vers ça (voir l’image de l’article original)

Moi qui change, site web qui change

  • Bientôt, mon site web prendra une forme complètement différente
  • Parce que je suis le propriétaire de mon site web, et que moi aussi je continue de changer
  • Vous changerez vous aussi
  • Vos passions et vos valeurs se diffuseront vers autre chose
  • Même si elle paraît laide, votre création à vous continuera de vivre et de bouger

L’auteur, Taylor Troesh, est le maire de taylor.town, auteur de scrapscript, et amateur de choses bricolées

À lire aussi

3 commentaires

 
secret3056 2025-05-30

J’y suis allé, et c’est vraiment déroutant...

https://taylor.town/
 
tsboard 2025-05-30

Je suis profondément d’accord avec le contenu de l’article. Moi aussi, j’essaie de masquer mon piètre sens du design en utilisant des frameworks soigneusement conçus par des designers, mais malgré cela, je continue obstinément à faire les choses moi-même jusqu’à aujourd’hui.
À chaque fois, je réfléchis à un meilleur design, je corrige ceci et cela, et je prends du plaisir à créer et à faire vivre le site.
Grâce à cette démarche, je pense que je m’y attache davantage et que j’y trouve aussi plus de plaisir. haha
 
GN⁺ 2025-05-30
Commentaires sur Hacker News
  • Haha, c’est tellement vrai. La plupart de mes amis développeurs ont déjà migré leur site perso depuis longtemps vers des templates tout faits comme Hugo ou Jekyll, mais moi je m’obstine à maintenir mon blog avec un système entièrement fait maison, CSS et backend compris. Pour moi, le vrai plaisir n’est pas dans le fait d’« avoir un site web », mais dans le fait de « fabriquer un site web ». Je ne vois pas pourquoi je déléguerais la partie amusante à quelqu’un d’autre. C’est un peu comme entretenir soi-même une voiture de collection. On pourrait simplement acheter une voiture propre et solide, mais ce ne serait pas drôle. Ce n’est pas la destination qui compte : moi, je recherche le plaisir. Comme je passe déjà mes journées au travail à construire des sites où je ne peux pas décider librement du design ou des fonctionnalités que je veux, je ne peux absolument pas renoncer à la liberté de contrôler entièrement mon site personnel
    • Mon site aussi est entièrement fait maison, et je l’ai presque reconstruit une dizaine de fois en dix ans. C’est amusant de le remanier chaque année. Le code JS matrix sur la page d’accueil (https://oxal.org, ça peut vous surprendre au clic), le site est compilé avec genox, un Static Site Generator que j’ai créé, le thème CSS utilise sakura, que j’ai aussi conçu moi-même, sur le blog (https://oxal.org/blog/) un petit cyborg vous suit (j’ai généré l’image de base avec chatgpt, puis j’ai fait l’animation en sprite moi-même avec Piskel), je déploie manuellement sur un VPS (build avec make), j’utilise plusieurs scripts shell pour téléverser des fichiers vers des emplacements privés, même le favicon est un pixel art que j’ai créé à l’université (lien), j’ai même essayé de créer ma propre police avant d’abandonner et d’adopter une police inspirée de Naruto, et si vous utilisez la fonction « view-page-source », il y a encore de quoi s’amuser avec le code source. Quand je regarde mon site, j’ai l’impression d’y voir les traces de mon évolution en tant qu’ingénieur logiciel, donc cette œuvre toute simple m’est très précieuse
    • Ma page d’accueil (https://pablo.rauzy.name/) aussi, je l’ai entièrement faite moi-même à partir de zéro. C’est totalement statique, avec seulement un script Bash sur mesure et un Makefile pour le build. Pas une seule ligne de JS. En explorant le CSS, j’ai aussi implémenté moi-même le responsive, le menu mobile, etc. J’ai probablement inventé mes propres rubriques ou méthodologies en cours de route, et c’est justement ce tâtonnement qui rend le tout vraiment amusant
    • Même parcours pour moi. J’ai commencé avec Hugo, puis au final j’ai créé mon propre static site generator, Loulou. C’était un pur plaisir du début à la fin, et le faire soi-même a vraiment été une expérience précieuse. Mon site est ici
    • Toute l’idée tient dans cette phrase : « le plaisir n’est pas d’avoir un site web, mais de le fabriquer ». Ça rejoint presque le credo des Chevaliers Radiants : « Journey Before Destination ». C’est aussi une histoire qui revient dans beaucoup de mythes. Héraclès, tant qu’il était humain, accomplissait toutes sortes d’exploits ; puis une fois devenu dieu, il a arrêté. Le message, c’est qu’il ne faut pas se laisser enlever la difficulté et la part humaine. Et si vous êtes contrarié, je recommande d’écouter des chants d’oiseaux sur https://birdymusic.com. C’est peut-être le site le plus cool ou le plus bizarre que j’ai vu aujourd’hui
    • Si c’est bien ça, l’objectif, alors très bien. Mais certains sites veulent juste accomplir simplement un but précis, puis s’arrêter là. Par exemple ce site n’a besoin que de faire une seule chose
  • Sur l’image du site moche (celle de l’article original), on voit plein de billets de blog, mais les vrais textes sont hébergés sur un autre site. S’il n’y avait ni cookies marketing ni pop-up d’adhésion, j’aurais presque préféré aller directement sur ce site moche
    • Sur la capture d’écran, on voit l’adresse hello@taylor.town. J’étais curieux moi aussi, donc je suis allé sur taylor.town (https://taylor.town/). Et après la publication de ce post, le site s’est mis à charger très lentement, donc il a probablement subi l’effet Hacker News, le fameux HN hug of death
    • Je croyais que c’était un billet critique sur le « web enshittifié ». Je trouve ce site mauvais, mais il y a quand même quelque chose d’ironique : (1) il y a une bannière pour vendre une édition imprimée (2) il y a un pop-up de consentement aux cookies (3) l’en-tête « Good Internet » apparaît discrètement au milieu de tous les symboles du mauvais web moderne (4) le titre est difficile à lire parce qu’il est masqué par le pop-up de cookies (5) si on ferme la bannière de cookies, il reste ensuite l’icône permanente de réglage des cookies et le bouton « + Become a Member ». À côté de ça, taylor.town, c’est du vrai bon web
    • À mon avis, si l’article est publié ailleurs, c’est surtout parce que le fond, la police ou le choix des couleurs du site moche rendent la lecture pénible. Par exemple : taylor.town/wealth-000. Moi aussi j’ai fait mon site perso à la main, mais il n’est pas moche. Je pense que cette personne a volontairement rendu son site laid, avec un petit côté autocongratulation
  • Je pense qu’il y a une différence entre les sites « moches mais intéressants » et les sites « moches et ennuyeux ». Celui-ci est plutôt dans la seconde catégorie. En pratique, on dirait juste qu’un CMS parcourt un dossier Markdown en boucle pour recracher les titres sous forme de liens. Il n’y a aucune architecture de l’information, pas de catégories, pas d’icônes, pas d’images, pas de dates, donc tout apparaît avec exactement le même poids. Tout est juste disposé de façon à avoir l’air « original ». Comme la plupart des blogs de développeurs récupèrent leur trafic depuis les moteurs de recherche, le design de la page d’accueil n’a peut-être pas grande importance ; mais si l’objectif était de construire une architecture qui donne envie aux lecteurs d’explorer activement, alors la tentative comme le résultat laissent un peu à désirer. Au final, ça ne me semble pas très différent d’un blog avec le template Ghost par défaut
    • Il n’y en a pas besoin. L’essentiel, c’est que l’auteur n’a pas fait ça pour satisfaire les lecteurs, mais pour se satisfaire lui-même. Donc les avis extérieurs ne sont pas vraiment le sujet
    • J’ai l’impression que tu passes à côté du message principal de l’auteur
  • Même en construisant un site avec un framework, on obtient toujours plus ou moins le même look and feel que tout le monde, et ce n’est pas amusant du tout. Je peux le comprendre pour un usage business, mais si l’idée est de montrer qui l’on est ou de présenter son travail, alors un site avec une vraie personnalité a bien plus de sens. Même si c’est moins efficace pour le SEO ou la rétention, j’aime l’idée d’y mettre quelque chose de personnel. Je n’aime pas le fait que les builders de sites d’aujourd’hui deviennent tous trop structurés et interchangeables. L’époque de Geocities ou Freewebs me manque vraiment : les images de fond illisibles, la musique en lecture automatique, les curseurs qui suivent la souris, les crânes qui tournent devant des flammes
  • J’adore cette philosophie, on retrouve complètement l’esprit des débuts d’Internet. À l’époque, on critiquait beaucoup les sites en Flash à cause de leur navigation étrange et de leurs défauts, mais au-delà de ça, j’aimais qu’on respecte cette créativité consistant à faire des sites singuliers. Aujourd’hui, Internet est devenu beaucoup trop uniforme, et je pense que le phénomène va empirer avec les contenus générés par IA. Ça fait plaisir de voir des coins du web qui ne sont pas standardisés
  • J’adhère totalement à cette philosophie. Mon site web exprime entièrement qui je suis. Même si certains disent qu’il est moche ou trop peu professionnel, moi ce style me satisfait. J’aimerais voir davantage de cette attitude non conformiste sur le web, et dans le monde en général
  • J’ai vraiment aimé lire ce billet. Si le « old web » était si bien, c’est parce qu’il n’existait pas de standard clair et que chacun expérimentait à sa façon. C’était plus chaotique, certes, mais il y avait cette joie de tomber par hasard sur un site vraiment unique et marquant. Le web d’aujourd’hui paraît trop structuré, trop officiel, et comme presque tout est fait avec les mêmes templates et frameworks, il est devenu un espace de consommation prévisible. Le plaisir de l’exploration a disparu
  • Le site web de cette personne en 2023 n’était pas moche, il avait un côté minimaliste. Maintenant, il est vraiment devenu moche. Au début, je croyais qu’il s’agissait encore de la version 2023 et j’étais d’accord avec le propos, mais en voyant la version vraiment laide, ça m’a au contraire rendu plus négatif envers le message lui-même
    • Je ne comprends pas très bien l’idée selon laquelle « maintenant qu’il est vraiment moche, le message change ». Le message général du texte, c’est justement qu’il y a du sens à faire ce qu’on aime et comme on le veut, indépendamment du regard des autres. Le fait que beaucoup de gens le trouvent moche rend au contraire le site et le message encore plus intéressants à mes yeux. Dès qu’on reste bloqué sur l’apparence en trouvant ça dommage, on manque le vrai sujet
    • L’ancien design était propre, minimaliste et… sans rien de particulier. Maintenant, c’est un chaos volontaire. Que ce soit moche ou pas, au moins ça marque les esprits. Il y a bien quelques inconvénients (retrouver certains liens plus tard n’est pas facile), mais ce n’est pas important pour cette personne. Ce qu’elle voulait vraiment, c’était de « l’inconfort », de la « dissonance », de la « curiosité » et surtout quelque chose de « /à elle/ »
  • Je n’ai pas encore de site perso. Quand je m’y mettrai, je compte le faire sérieusement juste avec HTML+CSS+JS ou JQ. Je pense utiliser un serveur web comme Apache ou nginx. Je le mettrai probablement sur l’offre gratuite AWS ou sur un hébergement mutualisé. Dès que j’aurai compris comment centrer proprement une div, je pourrai me lancer
    • J’héberge le mien depuis un an sur AWS Free Tier avec une combinaison S3+cloudfront pour 0 euro. C’est probablement le meilleur rapport qualité-prix. Mon site, c’est une simple page HTML+CSS, j’ai repris tel quel un template généré par ChatGPT. Je ne sais pas vraiment faire quelque chose qui marche bien à la fois sur mobile et desktop, donc ça me convient comme ça
    • Je recommande de consacrer quelques minutes à démarrer directement sur Neocities
    • Je n’ai jamais vraiment compris pourquoi le centrage d’une div est devenu un mème 
        width: 60%; // 원하는 만큼 너비 지정
  margin: 0 auto;
      Voilà, tu peux lancer ton blog maintenant
    • J’ai fait pareil : domi.work moi aussi je l’ai rendu moche :)
    • Moi aussi, à peu près pareil, sauf que j’ai ajouté 11ty pour faire un build statique et je déploie avec netlify pages
  • Les sites faits à partir de templates propres se ressemblent tous, mais chaque site fait à la main possède ses propres petites étrangetés uniques au monde. Pour un projet personnel, je choisirais un « HTML wabi-sabi » plutôt qu’une landing page Tailwind