Web design frugal : l'art de faire mieux avec moins

Nos sites internet grossissent inexorablement. Au cours de la dernière décennie, le poids médian d'une page web a plus que doublé sur ordinateur et plus que triplé sur mobile. Animations, vidéos, outils de tracking... À chaque fonctionnalité ajoutée, au nom du confort ou de l'expérience utilisateur·ice, la surenchère fonctionnelle qui caractérise le web moderne s’installe un peu plus comme une norme. Un phénomène, en contradiction avec les enjeux écologiques actuels, qui accroît les besoins énergétiques des data-centers et accélère l'obsolescence programmée de nos appareils.

À contre-courant de cette tendance, certains sites font le choix d’une sobriété radicale. « Brutaliste », « Low-tech », « frugal »... ces approches du web design prônent un retour à l’essentiel et réhabilitent le principe du less is more. Une tendance qui est également esthétique, loin d'être propre au web, qui s’invite dans une pop culture où le brutalisme rencontre un certain renouveau, comme l'illustre par exemple la récente couverture de l’album « brat » de Charli XCX, dont le design modeste, rude et frappant en a fait un phénomène culturel majeur.

Au-delà du visuel, ces approches minimalistes nous invitent à repenser notre rapport à l’information, notamment sur Internet, et à l'attachement que nous avons développé à l’égard d'artifices plus ou moins utiles qui finissent parfois par noyer, voire éroder, la matière première du web : le texte. 

Qu’est-ce qu’un site « frugal » ?

Il s'agit d'un site qui adopte un design se contentant du strict minimum et renonce volontairement à tout ce qui alourdit inutilement la page ou détourne l’attention. Un design frugal n'est pas synonyme de moche, d'ennuyant ou d'inefficace et ne constitue pas un rejet du design, bien au contraire : il s’agit d’un retour à sa mission première qui est de créer des supports accessibles afin de transmettre efficacement un message. 

Généralement, un site ayant adopté ces principes présente quelques caractéristiques notables : 

• Absence d'éléments audiovisuels, comme les images ou (pire) les vidéos, qui sont téléchargées lorsqu'un·e nouveau·elle utilisateur·ice visite une page. Certains sites vont privilégier l’usage d’images optimisées via des techniques comme le dithering et en troquant la résolution ou le nombre de couleurs pour une image beaucoup plus légère.
  
  Dans l'exemple ci-dessous, l’image d'origine (en haut) fait 2052,52 ko, contre 269.96 ko pour la version optimisée (en bas) grâce à une légère réduction du nombre de couleurs et de la résolution réalisée avec l'outil Ditherit.

• Usage de polices système. Il s'agit de polices comme Arial, Georgia ou Times New Roman déjà installées sur la quasi-totalité des appareils et considérées comme des standards web depuis des années. Ces « polices système » évitent tout téléchargement supplémentaire, contrairement aux typographies personnalisées qui doivent être chargées à chaque première visite.

• Élimination d’outils et de services tiers, comme Google Analytics ou Google AdSense, qui consomment beaucoup d'énergie en multipliant les transmissions de données entre plusieurs serveurs, souvent pour des informations peu utiles. Ils vont également à l'encontre des principes d'un web sobre, plus éthique et respectueux de la vie privée. Le magazine Low-tech a par exemple fait le choix, sur son site, d'utiliser des méthodes alternatives, et ce pour deux raisons : « La première est la consommation d'énergie : les services publicitaires augmentent le trafic de données et donc la consommation d'énergie. Deuxièmement, Google collecte des informations sur les visiteur·ses du blog, ce qui nous oblige à rédiger des déclarations de confidentialité et des avertissements relatifs aux cookies très détaillés, qui consomment également des données et agacent les visiteur·ses ».
  
  
• Limitation des fonctionnalités. Pas de jeux, pas de comptes utilisateur·ice et pas de fil d'actualité personnalisé par un algorithme. En cause : des fonctionnalités interactives énergivores ainsi que le besoin de stocker et de transmettre continuellement des données. Ainsi, la plupart des sites adoptant un design minimaliste vont privilégier l’usage d’un site « statique », c’est-à-dire un site qui a une apparence unique et qui n’a pas besoin, à la différence d’un site « dynamique », d’aller interroger une base de données pour personnaliser l’expérience utilisateur·ice. En somme, tout le monde est (littéralement) sur la même page. Vous pourrez retrouver plus d’informations sur la création d’un site « statique » à la fin de cet article.
  
  
• Un accès direct au texte qui limite au maximum la barrière entre le·la lecteur·ice et le contenu. Dans son guide sur le web design brutaliste, David Copeland rappelle qu’une page web est avant tout un document « hypertext » dans lequel les éléments interactifs se limitent aux « hyperliens » et aux boutons : « Bien que JavaScript (langage de programmation principalement destinée à l’ajout de fonctionnalités interactives sur un site, NDLR) permette à n'importe quel élément de répondre à un clic, les sites web ne sont pas des applications, et la grande majorité d'entre eux ne devraient pas avoir besoin de recourir à de telles mesures pour permettre au·à la visiteur·se de naviguer ou de soumettre des données ». Il recommande également de tirer profit de l'avantage spécifique d'une page web par rapport au magazine physique : la possibilité de faire défiler le contenu à l'infini, permettant ainsi une lecture fluide et sans interruption, au rythme choisi par le·la lecteur·ice.

À titre d'exemple, WHOISBN? (une application qui permet de fournir des informations sur l'éditeur d'un ouvrage à partir de son code ISBN) précise dans sa note de bas de page que la conception de son site a été inspiré par les recommandations fournies dans le guide Un site web frugal de Sarah Garcin. Résultat : un site qui se présente sous une page unique sur laquelle toutes les informations sont rassemblées et qui présente, sur la gauche, des boutons permettant de naviguer entre les différentes sections, sans avoir à recharger la page.

Mais pour quoi faire ?

Les sites low-tech réduisent considérablement les besoins en ressources, limitant leur impact environnemental. Étant moins gourmands, ils permettent également aux appareils plus anciens ou peu puissants d’accéder au contenu sans difficulté, sans obliger les utilisateur·ices à renouveler régulièrement un matériel coûteux et polluant à fabriquer. De plus, en adoptant un design sobre, les téléchargements des pages sont plus rapides ce qui reste, même en 2025, un enjeu crucial pour les territoires ne disposant pas d’une connexion rapide, stable ou sécurisée.

L’usage de méthodes « low-tech » assure une compatibilité plus grande, reposant sur des standards du web qui existent depuis des décennies plutôt que des fonctionnalités qui apparaissent ou disparaissent au gré des tendances. Une simplicité qui renforce l'accessibilité d'un site, facilitant par exemple l’accès aux contenus pour les personnes atteintes de déficiences visuelles pour qui l’usage de lecteurs d’écran s’avère complexe sur des pages saturées par des éléments interactifs. Une simplicité technique, qui réduit l’usage de fonctionnalités, de services complémentaires ou de bases de données, limitant également les risques liés au piratage.

Enfin, la contrainte de la sobriété peut être un levier créatif plutôt qu’un frein, offrant de nouvelles possibilités techniques et éditoriale. Concevoir un site frugal devient alors un acte de résistance créatif qui questionne les évidences imposées par les grandes firmes de la tech. Low-tech Magazine, par exemple, a développé un site si peu gourmand qu’il peut être hébergé localement… et alimenté à l’énergie solaire. En renonçant aux services publicitaires de Google, le magazine a dû également repenser son modèle économique, notamment par la vente d'articles sous forme de livres, renforçant du même coup son indépendance. Les pratiques low-tech ne consistent pas à supprimer des fonctionnalités, mais à en créer de nouvelles. Par exemple, plutôt que d'obliger les visiteur·ses à se reconnecter à chaque consultation, pourquoi ne pas faciliter son accès hors ligne en optimisant son impression sur papier ? Vous pourrez retrouver quelques conseils à ce sujet dans le guide du web frugal mentionné précédemment.

Comment faire ? 

Quelques outils et guides complémentaires pour vous aider à faire vos premiers pas.

• Optimiser les images. Utilisez des outils comme Squoosh ou ImageMagick pour réduire leur poids. Testez aussi le dithering avec Ditherit.
  
  
• Utiliser un générateur de site statique. Hugo, Jekyll, Pelican (utilisé par Low-tech Magazine) ou Eleventy permettent de créer des sites rapides et légers. Ces outils nécessitent toutefois certaines compétences techniques et peuvent s’avérer plus complexes pour des sites ou des blogs publiant régulièrement de nouveaux contenus, ne s’agissant pas de CMS (Content Management System) comme Wordpress ou Ghost conçus justement pour gérer la publication d'articles.
  
  
• Nettoyer son code avec des outils comme PurgeCSS qui vous aidera à identifier les lignes de codes inutiles afin d'optimiser votre site.
  
  
• ★ « Décorer son texte » ★ Si vous voulez « embellir » votre texte en évitant de rajouter des images, privilégiez l'usage de symboles Unicode largement répandus (comme ★♦ •) que le·la visiteur·se n'aura pas à télécharger. Certains sites répertorient des symboles que vous pouvez simplement copier-coller, comme celui-ci : https://glyphy.io/cool-symbols 
  
  
• Se documenter. Low-tech Magazine a publié son propre guide qui revient sur les coulisses de son propre site « low-tech ». Découvrez également le manifeste pour un web durable ou le guide Brutalist Web Design sur le rôle de la sobriété dans le design sur Internet. Vous pouvez également dénicher des conseils pratiques sur le guide du Low-tech Lab, Faire un site Low-tech ?. Pour des recommandations relatives à la programmation et à la construction d’une page claire et lisible en HTML/CSS, vous pouvez lire ce guide. Lisez également cet article sur le lien entre la sobriété numérique et l'accessibilité. Suivez l'état du web sur Httparchive pour observer l'évolution du poids des sites.

 Pour aller plus loin 

• Quelles sont les spécificités du design graphique pour les médias indépendants ? Quelle vision défendons-nous ? Voici notre manifeste, rédigé par notre directrice artistique, Christelle Perrin.
• Comment créer des newsletters accessibles ?
• Enjeux tech et design : les 5 choses à savoir pour concevoir votre newsletter.