Une fois que les besoins et le parcours sont clairement définis, on peut passer à l’étape de conception et appliquer les bonnes pratiques suivantes. Cette liste est loin d’être exhaustive, et l’essentiel de la démarche consiste toujours à se poser la question du besoin réel.
Les images sont le type de ressources le plus utilisé sur le web d’après le rapport des archives http (Report: Page Weight et Report: State of Images). Le poids d’une page moyenne sur desktop était de 2174 Ko sur l’échantillon testé en janvier 2022, et le poids moyen des images transférées pour une page était
Les vidéos sont des médias extrêmement attractifs et utiles pour véhiculer de l’information. Cependant, l’usage de la vidéo en ligne représente entre 60 % et 90 % du trafic internet (Sobriété numérique : Les clés pour agir, Frédéric Bordage). Limiter l’usage de vidéos La vidéo doit être utilisée avec parcimonie. Bien que c’est un merveilleux
Tous les projets de design n’offrent pas le choix de la technologie. Si vous n’êtes pas concerné par ce sujet un peu plus technique, vous pouvez directement passer à la partie suivante Réaliser et développer. Cependant, beaucoup de designers développent eux-mêmes leurs sites web, notamment lorsque le client a un petit budget ne permettant pas
Utiliser les polices Système En 2022, le poids moyen d’une police web représente 138 Ko, soit 6% du poids de la page. C’est plus du double du poids moyen des polices en 2010 (HTTP Archive). Si l’on utilise les polices pré-installées dans le terminal, alors l’utilisateur n’a pas besoin de télécharger de police supplémentaire, réduisant
Limitez l’utilisation de widgets et plugins comme les icônes de réseaux sociaux, Google Maps, vidéos incrustées, etc. Ces plugins ou service tiers utilisent beaucoup de ressources et peuvent être facilement supprimés ou remplacés. Remplacer les icônes de réseaux sociaux La plupart des sites contiennent des liens vers les réseaux sociaux qui utilisent des plug-ins (Twitter,
Bonne nouvelle : écoconception, économie de l’attention et accessibilité se recoupent et aboutissent à une liste de recommandations communes. Rédiger clairement Rédigez de manière concise et privilégiez les listes à puces plutôt que les blocs de texte, à la fois parce qu’on ne lit pas de la même manière un texte sur le web que
Les formulaires sont utilisés pour collecter différents types d’information et souvent des données personnelles sensibles qu’il convient de protéger. Outre l’enjeu de protection et de gestion des données personnelles, le transfert de données inutiles contribue à accroître l’impact environnemental. Questionner le besoin L’utilisation d’un formulaire de contact par exemple, pose tout de suite la question
Remplacer le défilement infini (scroll infini) Le « scroll infini » (ou défilement infini) permet de faire défiler indéfiniment la page, ce qui augmente le temps passé sur la page donc le poids de la page et les ressources nécessaires. Ce mécanisme est notamment utilisé en captologie pour capter au maximum l’attention des utilisateurs. L’article
Le poids des documents à télécharger ne se voit pas dans le poids de la page elle-même mais devrait être également pris en compte. Il devrait être systématiquement écrit à côté du lien de téléchargement. Optimiser et compresser les documents Optez pour une résolution plus faible et évitez la surqualité des documents à télécharger, que
Les images sont le type de ressources le plus utilisé sur le web d’après le rapport des archives http (Report: Page Weight et Report: State of Images). Le poids d’une page moyenne sur desktop était de 2174 Ko sur l’échantillon testé en janvier 2022, et le poids moyen des images transférées pour une page était de 958 Ko. Les images représentent ainsi en moyenne 44% du poids d’une page web en 2022 !
Redimensionner les images
Les photos et images que nous utilisons sont très souvent surdimensionnées. Une photo non redimensionnée, par exemple, a souvent une taille entre 2000 et 4000 pixels de largeur. C’est inutile car elle sera affichée sur une page web sur desktop à environ 700 ou 800 pixels de largeur. Non seulement l’image sera trop lourde, mais le navigateur fera un effort de calcul pour redimensionner l’image.
Il est donc important de retailler les images à minima selon la taille d’affichage maximale des utilisateurs (par exemple pour un grand écran d’ordinateur). Plus l’image est petite, plus je peux la redimensionner et plus elle sera légère. Privilégier donc dans son design des images de taille moyenne ou petite, plutôt que des images pleine largeur.
Les questions à se poser
Ai-je besoin d’une image pleine largeur ?
Quelle est la taille d’affichage maximale de mes utilisateurs ?
Puis-je repenser le design de ma page afin d’afficher mon image en plus petit sans faire de concession sur le graphisme ?
Préférez les formats vectoriels comme .svg au format .png lorsque cela est possible. Mais n’oubliez pas de minifier et optimiser le fichier .svg en utilisant des outils comme compressor.io. Note : Si un fichier .svg est très complexe, il peut être plus lourd qu’un fichier .png. Il convient de faire des tests et de prendre la décision la plus pertinente.
Icone
Utilisez des glyphs quand c’est possible, ou icônes et styles CSS.
Exemple
Image vectorielle
Le site de l’exposition “Celtique ?” utilise des illustrations vectorielles en format SVG. Par exemple, le personnage seul en page d’accueil ne pèse que 17 Ko en SVG.
Lorsqu’il s’agit de choisir des icônes de pratiques informatiques, privilégier des métaphores qui représentent de manière plus fidèle l’impact du numérique : “télécharger” plutôt que “lire une vidéo”, “se connecter à un autre ordinateur” plutôt que de “mettre dans le cloud”… (Propositions faites par le collectif Bam Cahier d’idées pour un navigateur écologique)
Critère 5.1 du RGESN Utiliser un format d’image adapté au contenu et au contexte d’usage permet de valider le critère 5.1 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Après avoir redimensionné et optimisé vos images, compressez-les avant la mise en ligne. La compression consiste à simplifier le code de la photo de façon imperceptible pour l’œil humain. Par exemple, cela peut être en réduisant le nombre de couleurs de l’image : si deux tons de noir ont un code couleur extrêmement proche, l’outil peut les harmoniser en leur attribuant la même couleur. L’œil humain ne percevra pas la différence. En revanche, cela diminuera le nombre d’informations dans la photo et donc son poids.
Certains outils permettent différents types de compressions en fonction de l’usage qui sera fait de votre image. Vous pouvez, par exemple, choisir entre une compression “lossy” qui permettra un gain maximal de poids avec une légère perte de qualité ou une compression “lossless” où le gain de poids sera moindre, mais la qualité intacte (plus d’explications sur Shortpixel, en anglais). Par exemple, si votre image contient du texte ou des détails importants, vous pourrez choisir une compression “lossless”. En revanche, s’il s’agit d’une photo, la compression “lossy” peut être tout à fait suffisante.
Pour un effet visuel tramé et old school, souvent marque de fabrique des sites écoconçus, il y existe aussi le site : Dither it!. Attention cependant à choisir correctement les options et les images sur lesquelles vous l’appliquez, car la perte de poids n’est pas systématique. Ce type de rendu peut également gêner la compréhension et l’interprétation des images pour certains publics avec un handicap visuel.
Si vous utilisez un CMS comme WordPress, vous pouvez aussi utiliser des plugins tels que shortpixel API tools ou imagify.io.
Exemple
Optimiser une photo
Voici un exemple d’une photo dont le poids original est de 1,4 Mo et la taille de 2800 × 3823 pixels. Cette image pourrait être grandement optimisée pour un usage web en taille moyenne. Après redimensionnement, ajustement de la qualité, et compression, la photo peut être 14 fois plus légère tout en conservant une qualité tout à fait suffisante.
Par défaut
Poids : 1,4 Mo
Taille : 2800 × 3823 pixels
Après redimensionnement
Poids : 123 Ko
Taille : 640 × 874 pixels
Après redimensionnement et qualité à 70%
Poids : 90 Ko
Taille : 640 × 874 pixels
Après redimensionnement, qualité, et compression
Poids : 72 Ko
Taille : 640 × 874 pixels
Critère 5.2 du RGESN Proposer des images dont le niveau de compression est adapté au contenu et au contexte de visualisation permet de valider le critère 5.2 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Critère 4.12 du RGESN Indiquer à l’utilisateur lorsque l’utilisation d’une fonctionnalité (comme le téléchargement d’une image lourde ou le chargement de nombreuses images moyennes) a des impacts environnementaux importants permet de valider le critère 4.12 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Le concept de “Responsive images” permet de fournir une sélection de formats et de tailles d’images au navigateur afin que celui-ci puisse choisir lui-même laquelle charger en fonction du terminal utilisé ou de la vitesse de connexion.
Ainsi, il est recommandé après avoir correctement compressé son image, de la fournir en plusieurs résolutions au développeur pour les stocker sur le serveur du site : à minima une pour Desktop et une pour Mobile.
Cela comporte plusieurs avantages environnementaux :
Économie de transfert de données : Eviter de charger sur un mobile de 375 px de largeur, une image de 1600px qui est inutilement lourde
Économie d’électricité consommée au niveau du serveur : Éviter également au navigateur d’avoir à redimensionner dynamiquement l’image pour le terminal d’affichage, ce qui nécessite de la puissance de calcul du serveur.
Pour cela, il existe deux attributs HTML disponibles pour les images :
<srcset> : Listant les images disponibles et leurs tailles, en les séparant par une virgule
<sizes> : Permettant de décrire l’espace que l’image occupe en fonction de la résolution
Si on couple cela avec les balises <picture> et <source> permettant de fournir des formats plus performant comme le webp, le navigateur sera non seulement en mesure de choisir la dimension la plus pertinente, mais aussi le format le plus optimisé.
Côté support, pas de panique, les navigateurs qui ne sont pas compatibles s’appuieront sur le traditionnel attribut src.
Critère 6.4 du RGESN Afficher majoritairement des images dont les dimensions d’origine correspondent aux dimensions du contexte d’affichage permet de valider le critère 6.4 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Cette technique, plus communément appelée lazy-loading, a pour objectif de ne pas charger les images qui ne sont pas encore visibles à l’écran. Par exemple, cela peut concerner des images se situant plus bas sur la page. La conséquence directe de cela est un gain en quantité de données consommées puisque les utilisateurs qui ne scrollent pas, ne téléchargent pas les images concernées.
Historiquement, cette pratique nécessitait du Javascript qui s’occupait de vérifier les images à charger à chaque défilement de page. Cela pouvait être coûteux techniquement. Depuis quelques temps, l’attribut HTMLloading a fait son apparition. Lorsqu’il a comme valeur lazy, il permet au navigateur de faire ce travail nativement tout en étant compatible avec les « Responsive images ».
Exemple
<img src= »regular.jpg »
alt= » »
width= »960″
height= »540″
loading= »lazy » >
Le support est déjà bon (source : Can I use) et les navigateurs incompatibles ignorent simplement cela.
Penser aux photos de groupes plutôt qu’individuelles
Pour éviter de multiplier les photos, les photos de groupe peuvent être intéressantes à privilégier. Par exemple, pour représenter une équipe, on peut choisir une photo de groupe plutôt qu’une photo par membre de l’équipe.
D’autre part, la tentation est grande d’utiliser les photos gratuites et libres de droits des banques d’images. Or ces photos sont souvent dénuées de sens, peu représentatives de la réalité et de la diversité de la population.
Comme le dit Gerry McGovern dans son livre World Wide Waste (en anglais), quitte à utiliser des photos, mieux vaut utiliser des photos de personnes réelles :
If you need to use images, optimize them and consider using real ones of real people doing real things.
D’autres alternatives existent et peuvent être explorées, comme par exemple, l’affichage des images à la demande, au clic, ou encore en basse résolution.
Affichage de l’image au clic comme suggéré dans Green by Default (en anglais)
Images avec une résolution basse ou un traitement visuel spécial : On peut aussi jouer sur le traitement visuel des photos et des images comme suggéré dans l’article Faire un site low tech.
S’assurer de l’accessibilité des images
Le texte inclus directement dans les images n’est pas accessible : il ne peut pas être lu par les lecteurs d’écran. Il est donc important de ne pas inclure de texte important dans l’image mais dans la description alt-text.
La description alt-text est une description de l’image inscrite dans le code du site. Elle est lue par le lecteur d’écran utilisé entre autres par les personnes malvoyantes, celles ayant des troubles de la concentration ou des difficultés de lecture. Elle est aussi affichée lorsque la connexion est lente et ne permet pas de charger les images. La description alt-text est une obligation du RGAA.
Pour écrire une bonne description vous pouvez suivre les conseils indiqués dans ce guide How to write an image description(en anglais). La description doit contenir l’objet, l’action, et le contexte de la photo, par exemple “Pancarte Black Lives Matter dans une foule.”
Les vidéos et l’audio
Les vidéos sont des médias extrêmement attractifs et utiles pour véhiculer de l’information. Cependant, l’usage de la vidéo en ligne représente entre 60 % et 90 % du trafic internet (Sobriété numérique : Les clés pour agir, Frédéric Bordage).
Limiter l’usage de vidéos
La vidéo doit être utilisée avec parcimonie. Bien que c’est un merveilleux média, elle est coûteuse à réaliser, génère de forts impacts environnementaux, exclut les personnes avec une faible bande passante et pose des problèmes d’accessibilité. Il est important de questionner et de bien définir son besoin en vidéo avant d’en incorporer.
Si la vidéo est indispensable, essayez de la faire la plus courte possible. La longueur idéale dépend de son usage mais en marketing, il est recommandé de réaliser des vidéos de moins de 1 min 30.
Assurez-vous auprès de votre développeur que la bonne résolution sera servie à la bonne taille d’écran. De même que pour les images, vous pouvez préparer 2 résolutions différentes de votre vidéo selon qu’elle sera lue sur écran mobile ou desktop. La taille 720p offre déjà une excellente d’image largement suffisante pour la plupart des usages.
Identifiez la bonne résolution à servir par défaut :
pour une conférence, une interview ou un MOOC, 480p est suffisant
pour un tutoriel, préférer 720p.
Critère 5.3 du RGESN Utiliser pour chaque vidéo une définition adaptée au contenu et au contexte de visualisation permet de valider le critère 5.3 du référentiel général de l’écoconception des services numériques Voir le référentiel
Les questions à se poser
À quoi va servir votre vidéo ?
À qui va-t-elle servir ?
Est-qu’on peut faire autrement ? Par exemple, proposer uniquement le son pour la musique ou les conférences, mettre une infographie plutôt qu’une vidéo…
Puis-je la faire plus courte ?
Quelle est la résolution par défaut adéquate ?
Critère 4.7 du RGESN Opter pour les choix les plus sobres entre le texte, l’image, l’audio ou la vidéo, selon les besoins utilisateurs permet de valider le critère 4.7 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Critère 5.5 du RGESN Proposer un mode « écoute seule » pour les vidéos permet de valider le critère 5.5 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Bannir les fonds vidéos et la lecture automatique
Il est commun de voir en tête de page d’accueil une vidéo qui tourne en boucle, sur laquelle on peut lire le nom du site, voire le menu racine.
Exemple
Vidéo en en-tête de site
Sur le site des cognacs Hennessy, un carrousel en en-tête de page comprend des vidéos qui se jouent automatiquement. Cette pratique augmente fortement le poids du site puisque sans même avoir scrollé, plus de 17,8 Mo de données ont été transférées. Il nous a fallu 20 secondes pour pouvoir interagir avec le contenu, et ce, en connexion wifi. Enfin ce type de composant pose des problèmes d’accessibilité pour les personnes malvoyantes (texte en blanc sur fond jaune) ou autistes (contenu mouvant qu’on ne peut pas mettre en pause).
Par ailleurs, les vidéos se lançant automatiquement (comme sur les réseaux sociaux) sont critiquées pour la captation de l’attention qu’elles génèrent. L’article 19 de la proposition de loi du Sénat prévoyait l’interdiction de la lecture automatique des vidéos. Bien que cette mesure n’ait pas été rendue obligatoire par la loi votée à l’Assemblée nationale le 15 novembre 2021, on peut supposer que cette interdiction le devienne dans les années à venir.
Exemple
Vidéo en lecture automatique
Sur le site La Chaîne Météo, la vidéo de bulletin météo (en ancrage à droite quand on descend sur la page) se lance automatiquement. Il élève le poids de la page à 13,7 Mo (près de 7x le poids moyen d’une page web) et le temps de chargement total de la page à près de 2 min (pour une faible connexion).
Plus rare de nos jours, la pratique la plus décriée demeure celle du son de la vidéo activé par défaut, ce qui gêne les personnes malvoyantes ayant un lecteur d’écran, voire même peut les empêcher de naviguer sur le site. Dans tous les cas, lorsqu’on met une vidéo, il faut toujours permettre aux utilisateurs de régler le volume du son, d’éviter les arrière-plans sonores ou bien de permettre de les désactiver.
Critère 4.1 du RGESN Désactiver la lecture automatique des vidéos et des sons permet de valider en partie le critère 4.1 du référentiel général de l’écoconception des services numériques (il conviendra de faire la même chose sur les animations). Voir le référentiel
Compresser les vidéos et sons
Bonne nouvelle, si vous devez mettre une vidéo sur votre site, il existe d’excellents outils de compression sans perte de qualité perceptible. Par exemple, le logiciel Handbrake permet de compresser une vidéo HD de 1mn35 en 720p, réduisant ainsi son poids de 38% soit de 11,7 Mo.
Il faut bien choisir la taille de compression adaptée à votre contexte d’usage : par exemple, pour une publication sur les réseaux sociaux, une vidéo de 480p plus légère peut être préférable à une vidéo de 720p. Elle chargera plus vite et sera mieux adaptée aux usages mobiles, tout en ayant un impact environnemental réduit.
Dans le cas d’une application mobile, demander au développeur d’installer Video Optimizer. Ce code open source permet aux développeurs d’optimiser la qualité des vidéos et images, la vitesse de chargement des vidéos ou encore la consommation de batterie du terminal selon la performance de réseau de l’utilisateur.
Critère 5.4 du RGESN Proposer des vidéos dont le mode de compressionest efficace et adapté au contenu et au contexte de visualisation permet de valider le critère 5.4 du référentiel général de l’écoconception des services numériques. Voir le référentiel
De même, beaucoup de bandes sonores peuvent être compressées en mp3 avec des logiciels comme Adobe Audition, l’encodeur gratuit Lame ou encore des sites gratuits sans perte notable pour l’utilisateur final.
Bien entendu, la compression, comme tout choix de design, doit dépendre du contexte d’utilisation final : dans le secteur musical ou cinématographique, il sera préférable de ne pas compresser les fichiers.
Critère 5.6 du RGESN Proposer des audios dont le mode de compressionest efficace et adapté au contenu et au contexte d’écoute permet de valider le critère 5.6 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Éviter d’intégrer les plugins de lecteur vidéo
Parfois la vidéo est indispensable : par exemple pour un MOOC (Massive Open Online Course). En revanche, si la vidéo est facultative dans la navigation de la page (interviews, description de produit, etc.), alors il est préférable de la remplacer par une image cliquable plutôt que d’utiliser un plugin qui intègre la vidéo dans la page.
Exemple
Images cliquables
Une page profil entreprise de Welcome to the Jungle peut comporter 8 vidéos d’interviews et peser 5 Mo. Or, le plugin YouTube pèse à lui seul environ 2 Mo (soit le poids moyen d’une page web en 2019) pour chaque vidéo incrustée. Les vidéos ne sont donc pas réellement incrustées : ce sont des images qui, lorsqu’elles sont cliquées, ouvrent le lecteur YouTube en pleine page. Ainsi, seules les personnes souhaitant réellement visionner les vidéos les chargeront.
Si votre site est statique, il est possible d’intégrer un lecteur HTML5 qui ne nécessite qu’une requête, et ne charge la vidéo qu’une fois que l’utilisateur appuie sur le bouton play.
Prévenir l’utilisateur de l’impact environnemental important de la fonctionnalité
Tout en veillant à ne pas faire reposer la responsabilité de l’impact du numérique sur l’utilisateur ni à le sur-culpabiliser, il est recommandé de l’informer à l’usage de fonctionnalités à l’impact environnemental relativement important :
Afficher le poids de la vidéo ou de l’audio, notamment en fonction des différents niveaux de qualité proposés
Si l’espace le permet, proposer des équivalences en impacts environnementaux parlantes en indiquant la méthodologie employée
Aider l’utilisateur à choisir la meilleure qualité par rapport à son contexte d’usage (par exemple cela ne sert à rien de regarder une vidéo en plus que 720p sur un smartphone).
Critère 4.12 du RGESN Indiquer à l’utilisateur lorsque l’utilisation d’une fonctionnalité (comme regarder une vidéo) a des impacts environnementaux importants permet de valider le critère 4.12 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Sous-titrer les vidéos pour l’accessibilité
85% des vidéos Facebook sont regardées sans le son (Digiday, en anglais). Non seulement le sous-titrage rend votre contenu vidéo accessible aux personnes en situation de handicap permanent (sourdes ou malentendantes) mais aussi aux personnes rencontrant un handicap situationnel (celles qui regardent une vidéo dans les transports en commun, au bureau, ou à côté d’une personne endormie par exemple).
De même, si le contenu est uniquement audio : proposer une retranscription écrite de l’audio.
Choisir sa solution : site statique ou CMS
Tous les projets de design n’offrent pas le choix de la technologie. Si vous n’êtes pas concerné par ce sujet un peu plus technique, vous pouvez directement passer à la partie suivante Réaliser et développer. Cependant, beaucoup de designers développent eux-mêmes leurs sites web, notamment lorsque le client a un petit budget ne permettant pas d’embaucher 2 personnes. Le choix le plus simple pousse alors souvent à se tourner vers WordPress mais pour écoconcevoir, ce n’est pas forcément le meilleur choix, comme nous l’expliquons ensuite.
Le choix entre site statique et CMS (content management system, outil de gestion de contenu) fait débat. La décision à prendre dépendra du contexte et des personnes impliquées dans le projet. Nous proposons ici plusieurs éléments de réflexion qui pourront vous aider dans le choix de solution en fonction de votre contexte et de vos possibilités.
Principes du site statique
Les générateurs de sites statiques sont des outils permettant de générer individuellement chaque page HTML d’un site web. Pour cela, conformément aux recommandations du W3C, on distingue totalement la forme et la mise en page d’un côté, et le contenu de l’autre. Lors d’une modification, le site va ainsi être généré de nouveau, mettant à jour les fichiers statiques déjà existants.
Les avantages des sites statiques sont nombreux :
Le contenu est maintenu à part de la mise en page, permettant ainsi une meilleure gestion éditoriale.
S’agissant de contenus statiques, il n’est plus nécessaire de disposer de langages dits « dynamiques », ni même de bases de données.
Les pages n’étant plus calculées et rendues sur le serveur à chaque requête, on observe une nette amélioration des performances.
Tout cela réduit fortement l’impact environnemental du site.
A considérer : Il est difficile de prévoir comment les technologies sur lesquelles certains générateurs reposent seront maintenues dans quelques années. Cela pourrait dans certains cas engendrer une dette technique. Par ailleurs, si un site statique est recommandé, le générateur en lui-même peut être surdimensionné par rapport à votre besoin. Il faut donc veiller à bien choisir son générateur.
Principes du CMS
CMS signifie Content Management System ou Système de gestion de contenu. Comme le nom l’indique, c’est un programme permettant de créer un site web, souvent facilement (sans nécessité d’être un développeur), et de l’alimenter « à plusieurs mains », sans aide technique non plus. Les CMS permettent par exemple d’accorder différents niveaux de droits aux administrateurs ou encore de structurer le contenu selon que c’est un article, une FAQ, etc.
Exemples de CMS :
WordPress, le plus connu. Environ 36% des sites web sont faits avec WordPress (WordPress in 2024 – en anglais)
Certains CMS et thèmes proposés comportent beaucoup de fonctionnalités inclues par défaut qui peuvent alourdir inutilement votre site. C’est un peu comme utiliser un porte-conteneur pour traverser une rivière : cela peut nécessiter beaucoup de ressources, être surdimensionné et pas forcément le plus pratique.
Pour autant, recourir à d’autres CMS ou thèmes optimisés ne consomme pas nécessairement plus de ressources qu’un site statique. Nous vous donnons plus bas des conseils pour minimiser l’impact de la solution retenue.
Par exemple, le CMS Translucide est par essence écoconçu. Il repose sur l’essentiel, avec le moins de fonctionnalités possibles. A l’inverse de WordPress auquel on doit retirer un maximum de couches, Translucide en a très peu au départ et utilise des technologies standards et open-source (principalement HTML, CSS, PHP). L’ajout de fonctionnalités fait l’objet d’une réelle réflexion au sein du collectif.
Typographies
Utiliser les polices Système
En 2022, le poids moyen d’une police web représente 138 Ko, soit 6% du poids de la page. C’est plus du double du poids moyen des polices en 2010 (HTTP Archive). Si l’on utilise les polices pré-installées dans le terminal, alors l’utilisateur n’a pas besoin de télécharger de police supplémentaire, réduisant l’usage de la bande passante et accélérant le chargement du site.
Il existe des dizaines de polices préinstallées sur les terminaux. Voici une petite sélection des polices standards les plus répandues :
Toutes les polices ci-dessus sont incluses dans les ordinateurs Mac OS X 10.7 (sorti en 2011) et Windows 7 (sorti en 2009) et plus (sources pour Mac OS et pour Windows). Point de vigilance : en octobre 2020, encore plus d’1 personne sur 5 avait Windows 7 comme système d’exploitation (source : Net market share, en anglais).
Il est recommandé dans la mesure du possible de ne pas utiliser de police personnalisée, ou sinon de se limiter à 1 ou 2, pour les titres par exemple.
Utiliser le format WOFF2
Certains formats de police tels que les formats WOFF (le plus répandu) et WOFF2 (le plus compressé) ont des poids optimisés qui réduiront le poids de la police téléchargée par les utilisateurs. Certaines anciennes versions des navigateurs ne supportent pas le format WOFF2.
Respecter les bonnes pratiques d’accessibilité
Les polices standards linéales (sans serif) sont également recommandées à des fins d’accessibilité (en opposition à des polices cursives, manuscrites, décoratives, entre autres qui peuvent être difficiles à lire pour des personnes en situation de handicap).
Évitez les polices condensées, les longues portions de texte en majuscules, en souligné ou en italique ainsi que le texte animé ou défilant.
Plugins et widgets
Limitez l’utilisation de widgets et plugins comme les icônes de réseaux sociaux, Google Maps, vidéos incrustées, etc. Ces plugins ou service tiers utilisent beaucoup de ressources et peuvent être facilement supprimés ou remplacés.
Remplacer les icônes de réseaux sociaux
La plupart des sites contiennent des liens vers les réseaux sociaux qui utilisent des plug-ins (Twitter, Facebook, Instagram, LinkedIn, etc) et utilisent inutilement du Javascript.
Exemple
Réseaux sociaux remplacés par une Image + lien
Vous pouvez facilement remplacer ces plugins par l’utilisation d’une image et un lien et obtenir le même effet.
<a class="nav-link" href="https://www.linkedin.com/company/designers-ethiques">
<img src="asset/images/linkedin.svg" alt="Accéder à la page LinkedIn de Designers Ethiques">
</a>
Exemple
Réseaux sociaux remplacées par des liens simples
Vous pouvez également tout simplement remplacer par un lien sans image, comme le fait le site du Low-tech Lab :
De la même façon, résistez à la tentation d’ajouter les fils d’actualité de réseaux sociaux directement dans votre site. Mieux vaut mettre un lien vers les réseaux sociaux, ou faire un choix sélectif des actualités à mettre en avant. Vous réduirez du même coup le nombre de trackers sur votre site.
Remplacer les cartes intégrées
À titre d’exemple, le plugin Google Map pèse environ 1 Mo. Or, on peut s’interroger sur sa valeur ajoutée.
Les questions à se poser
Tous les utilisateurs ont-ils besoin de charger la carte ?
Au vu de la taille que la carte fait sur beaucoup de sites, l’information qu’elle apporte compense-t-elle son poids ?
Ne peut-elle pas être remplacée par un lien vers une carte interactive que seules les personnes intéressées ouvriraient ?
Critère 4.4 du RGESN Laisser l’utilisateur décider de l’activation d’un service tiers permet de valider le critère 4.4 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Localisation d’une adresse
Se poser la question : est-ce que nos utilisateurs / clients vont venir nous rendre visite ? Si la réponse est non, l’adresse sans le lien suffit !
Exemple
Carte remplacée par une image + lien
Si vous pensez que l’image apporte une vraie valeur, et évitera aux utilisateurs d’aller chercher sur Maps, vous pouvez ajouter une image de la carte avec un lien, en suivant le même principe que pour les icônes, comme le fait Un Ecrin Vert – Biocoop Montreuil.
Exemple
Carte remplacée par un lien simple
Sinon, remplacez le plugin Google Maps par un simple lien vers la carte, comme cet exemple de Contact Wholegrain Digital. Et pourquoi pas un lien vers une carte OpenStreetMap ou Qwant Maps plutôt que Google Maps.
Carte interactive
Lorsqu’il s’agit d’une carte interactive pour localiser des lieux, considérez l’utilisation qui en sera faite, et remplacez, par exemple, par un annuaire.
Contenu
Bonne nouvelle : écoconception, économie de l’attention et accessibilité se recoupent et aboutissent à une liste de recommandations communes.
Rédiger clairement
Rédigez de manière concise et privilégiez les listes à puces plutôt que les blocs de texte, à la fois parce qu’on ne lit pas de la même manière un texte sur le web que dans un livre (il faut adapter les textes à ce format) et à la fois pour des raisons d’accessibilité. Expliquez toutes les abréviations, sigles et acronymes.
Dans l’idéal, pour répondre aux exigences AAA d’accessibilité, le contenu doit être compréhensible pour toute personne ayant un niveau de lecture équivalent à la fin de l’école primaire ou moins. Sinon, il faut proposer une façon alternative de présenter l’information afin qu’elle soit compréhensible pour ce type de profils.
Faciliter la navigation
Utilisez les feuilles de style pour structurer l’information en titres, sous-titres, citations et textes.
Tout site doit offrir deux méthodes de navigation parmi les 3 suivantes : menu de navigation, plan du site et moteur de recherche. N’oubliez pas de décrire le contenu dans la métadonnée de la page pour améliorer les résultats de recherche.
Présenter le texte de manière accessible
L’information doit rester visible et compréhensible même lorsque les feuilles de style sont désactivées ou la taille des caractères augmentée à 200 %. Par conséquent, ne pas mettre d’information essentielle dans les images.
Ne pas justifier le texte : l’espacement variable entre les mots peut gêner la lecture pour les personnes dyslexiques. De même, l’espacement entre les lignes (interlignage) doit être d’une valeur d’au moins 1,5 dans les paragraphes et l’espacement entre les paragraphes d’au moins 1,5 fois plus grand que la valeur de l’interligne, afin de respecter les normes AA d’accessibilité.
Ces bonnes pratiques ne sont pas exhaustives. Les suivre ne suffit pas à rendre un site accessible mais y contribue.
Bien référencer
L’objectif de fluidification du parcours utilisateur implique de lui permettre d’aboutir le plus rapidement possible à ce qu’il cherche. Par conséquent, le référencement est clé pour réduire la durée du parcours et le nombre de pages visitées au minimum. Si le site est correctement optimisé pour les moteurs de recherche, l’utilisateur trouve plus facilement ce qu’il cherche et évite ainsi de parcourir plusieurs pages ce qui réduit l’empreinte de son parcours.
Par ailleurs, en écoconcevant son site, on réduit le poids des pages et donc le temps de chargement, ce qui est un des critères utilisés par les moteurs de recherche comme Google pour hiérarchiser les résultats. De plus, de nombreuses bonnes pratiques d’écoconception se retrouvent dans les exigences d’accessibilité, ce qui est un autre facteur améliorant le référencement d’un site. Un site écoconçu aura donc de meilleures chances d’arriver haut dans les résultats de recherche (voir plus d’infos dans la partie Convaincre les décisionnaires : zoom sur le référencement).
Ainsi, l’écoconception reprend non seulement certaines bonnes pratiques de Search Engine Optimization mais améliore aussi le référencement par sa sobriété et son accessibilité.
Bien entendu, l’écoconception de contenu ne se limite pas à ces quelques bonnes pratiques.
Les formulaires sont utilisés pour collecter différents types d’information et souvent des données personnelles sensibles qu’il convient de protéger. Outre l’enjeu de protection et de gestion des données personnelles, le transfert de données inutiles contribue à accroître l’impact environnemental.
Questionner le besoin
L’utilisation d’un formulaire de contact par exemple, pose tout de suite la question de l’utilisation de données personnelles et requiert une politique de confidentialité et une gestion de ces données. Il nécessite également des requêtes vers le serveur.
La question qui se pose est donc de savoir si le formulaire a une réelle utilité ou s’il peut être remplacé par une adresse mail et/ou un numéro de téléphone.
Exemple
Remplacement d’un formulaire par une adresse mail
Sur le site de Designers Ethiques, le formulaire de contact WordPress a été remplacé par une simple adresse e-mail. A noter que depuis ce changement, le nombre de mails de spam que reçoit Designers Ethiques est passé d’une dizaine par jour à quelques-uns par semaine. Des robots d’indexation avaient certainement été développés pour viser spécifiquement ce plugin de formulaire répandu.
Limiter le nombre de champs
La tentation est souvent grande d’utiliser des formulaires standards avec un certain nombre de champs prédéfinis. Encore une fois, l’enjeu est d’interroger l’utilité du ou des champs, et de ne demander que ce qui est vraiment nécessaire.
Exemple
Formulaire avec peu de champs obligatoires
Le site de streaming Imago propose un formulaire d’inscription succinct. Les champs facultatifs sont très bien indiqués. Le prénom et le nom ne sont pas des informations obligatoires. Aucune information superflue telle que le sexe ou l’âge n’est demandé.
Aider à la saisie
Si l’utilisateur ne sait pas à l’avance le format de saisie attendu, il risque de répondre de façon incorrecte et de soumettre le formulaire à plusieurs reprises, générant ainsi des requêtes superflues.
Il est donc recommandé de :
indiquer clairement les champs obligatoires (et en haut de page pour les lecteurs d’écran)
donner un exemple de saisie sur ou sous le champ (mettre un exemple dans le champ n’est pas accessible car il disparaît à la saisie)
contraindre, lorsque c’est possible et pertinent, le format de saisie (que des chiffres, format de la date, etc.)
afficher des messages d’erreur explicites en cas d’erreur de saisie, et à l’emplacement du champ concerné
valider les saisies sans requête serveur côté frontend (nécessite l’aide de développeurs).
Critère 4.10 du RGESN Informer l’utilisateur du format de saisie attendu avant la soumission du formulaire permet de valider le critère 4.10 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Vérifier la pertinence des choix disponibles
On rencontre encore trop souvent des listes déroulantes, sélection de dates, etc. qui contiennent des choix qui ne sont pas pertinents dans le contexte de l’utilisation du service. Cela crée de la confusion, détériore l’expérience utilisateur, et augmente l’impact environnemental.
Dans une logique de design inclusif, il convient également de ne demander le sexe ou le genre que si l’on a un service requérant certaines spécificités anatomiques. Si vous souhaitez vraiment demander le sexe de votre utilisateur, laissez lui du choix afin de garantir le respect de son identité.
Le « scroll infini » (ou défilement infini) permet de faire défiler indéfiniment la page, ce qui augmente le temps passé sur la page donc le poids de la page et les ressources nécessaires. Ce mécanisme est notamment utilisé en captologie pour capter au maximum l’attention des utilisateurs. L’article 20 de la proposition de loi du Sénat (PDF) prévoyait d’ailleurs l’interdiction de l’utilisation de cette technique.
Exemple
Scroll infini
En cherchant quelques photos sur Unsplash.com, sur les marches climat, en quelques “scrolls”, le poids de la page est rapidement passé à 25 Mo (sans compter le téléchargement des photos) ! Scroller est tellement simple qu’il est difficile de se rendre compte ou de s’arrêter soi-même. On cherche toujours la meilleure photo.
Il s’agit donc de remplacer autant que possible le scroll infini par une action, comme une pagination, ou un bouton “Voir plus”.
Il est important également de penser au bon nombre d’éléments à faire apparaître par défaut, pour éviter de créer de la frustration si trop de clics sont nécessaires. Le juste équilibre s’impose !
Critère 4.2 du RGESN Bannir le défilement infini permet de valider le critère 4.2 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Par ailleurs, il convient de bannir tout procédé manipulatoire ou dark pattern qui pourrait engendre un usage accru et disproportionné du service : enchaînement automatique de vidéos, publicités cachées qui perturbent le parcours, certains procédés de « gamification » comme les streaks que l’on retrouve dans Duolingo et Snapchat, etc.
Critère 4.14 du RGESN Éviter le recours à des procédés manipulatoires dans l’interface utilisateur permet de valider le critère 4.14 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Les mécanismes d’autocomplétion ou de suggestions qui visent à compléter automatiquement ou suggérer des options « intelligentes » nécessitent beaucoup de requêtes vers le serveur.
Exemple
Complétion automatique
L’option par défaut “Smart compose” de Gmail propose des suggestions “intelligentes” qui uniformisent le langage, contribuent à une certaine paresse intellectuelle, et nécessitent des allers-retours vers le serveur.
En règle générale, il est préférable de les éviter ou d’utiliser plutôt les techniques d’aide existantes (prévention des erreurs, exemples, format de saisie, etc.). Si leur usage reste pertinent dans votre contexte, il est également possible de les limiter, par exemple en ne proposant des suggestions qu’à partir d’un nombre minimal de 3 caractères tapés et de 500 ms avant de s’activer.
Critère 4.9 du RGESN Limiter les requêtes lors de la saisie utilisateur permet de valider le critère 4.9 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Entre tenir informer et solliciter en continu, la frontière peut être ténue. Encore une fois, éco-conception et éthique se rejoignent. Il s’agit ici de remettre en question nos habitudes de conception et de s’interroger véritablement sur l’utilité et la fréquence des notifications.
Quelques pistes à considérer :
Réfléchir aux différents formats des notifications selon leur degré d’urgence.
Permettre de personnaliser de qui, quand, et comment ils reçoivent les notifications.
Proposer un SMS de notification plutôt qu’un email.
Éviter les mails de confirmation inutiles (ex : désinscription d’une newsletter).
Remplacer un toaster de confirmation par un changement d’état. Par exemple, un toaster indiquant qu’un nouvel élément a bien été créé peut simplement être remplacé par un état focus sur le nouvel élément.
Critère 4.13 du RGESN Limiter le recours aux notifications et laisser à l’utilisateur la possibilité de les désactiver permet de valider le critère 4.13 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Le poids des documents à télécharger ne se voit pas dans le poids de la page elle-même mais devrait être également pris en compte. Il devrait être systématiquement écrit à côté du lien de téléchargement.
Optimiser et compresser les documents
Optez pour une résolution plus faible et évitez la surqualité des documents à télécharger, que ce soit un PDF, un podcast, une image, etc. La plupart des outils proposent différentes options d’ajustement de qualité ou d’optimisation. Par exemple, dans PowerPoint ou Keynote, il existe une option pour compresser et réduire la taille des images et du fichier.
Vous pouvez également facilement compresser vos documents, en utilisant des outils complémentaires tels que ilovepdf pour compresser les documents PDFs.
Choisir un format adapté
Les documents, notamment pdf, ne sont pas toujours le format le plus adapté aux usages, comme l’explique si bien Praticable (voir le détail dans Pour aller plus loin) :
Non responsive donc peu confortable à lire sur mobile
Peu accessible
Non référencé
Difficulté à mettre à jour
…
Critère 5.7 du RGESN Compresser les documents et choisir le format de fichier adapté à l’usage permet de valider le critère 5.7 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Lorsqu’un document est long, et pour éviter qu’il soit téléchargé inutilement, vous pouvez fournir une description ou un court résumé du document directement dans la page.
On peut également fournir 2 versions d’un document, une version courte constituant une synthèse et une version longue contenant tous les détails, sans oublier d’indiquer le poids de chaque.
Exemple
Différentes versions proposées d’un rapport
Le rapport sur l’empreinte environnementale du numérique mondial de GreenIT.fr est disponible au téléchargement en différentes tailles :
Rapport complet (PDF accessible, 40 pages, 716 Ko)
Conférence de présentation de l’étude (vidéo Youtube 1h30 et support associé PDF, 963 Ko)
Indiquer le poids et le format du document
Téléchargement
Avant tout téléchargement par l’utilisateur, indiquer le poids et le format du document.
S’il s’agit d’un document généré dont le poids n’est pas connu avant export, indiquer un poids approximatif (moyenne des exports par exemple).
Par ailleurs, si la puissance requise pour exporter est importante ou que le fichier qui en résultera aura un poids conséquent, indiquer à l’avance à l’utilisateur que l’usage de cette fonctionnalité va entraîner un impact environnemental relativement non négligeable.
Critère 4.12 du RGESN Indiquer à l’utilisateur lorsque l’utilisation d’une fonctionnalité a des impacts environnementaux importants permet de valider le critère 4.12 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Téléversement
Permettre aux utilisateurs d’envoyer des fichiers à la taille disproportionnée par rapport à l’usage (ex : photo de profi à 1 Mo) génère un impact environnemental superflu et qui se répercute sur les usagers ou services qui chargeront le fichier.
Avant tout téléversement ou upload par l’utilisateur (d’une photo, d’un document pdf tel qu’un CV, un contrat ou un formulaire…) :
bien indiquer les formats acceptés et le poids maximum autorisé. ex : si les images en webp ne sont pas prises en charge, informer à l’avance l’utilisateur que seuls les jpeg et png sont acceptés
ne pas permettre de soumettre le formulaire si les fichiers ne correspondent pas aux prérequis.
Critère 4.11 du RGESN Informer l’utilisateur, avant le transfert, des poids et formats de fichier attendus permet de valider le critère 4.11 du référentiel général de l’écoconception des services numériques. Voir le référentiel
Les animations (surtout en Javascript) alourdissent la page, nécessitent des appels vers le serveur, et des ressources pour être affichées sur un écran. Elles doivent donc être utilisées seulement si le besoin est justifié, notamment pour améliorer l’expérience.
Limiter les animations
Les animations posent également souvent des problèmes d’accessibilité. Il n’est pas rare de voir des animations qui perturbent les utilisateurs ou pire, leur donnent la nausée : tuiles qui tournent, éléments qui défilent à la verticale et à l’horizontal, chatbots qui nous sautent dessus, etc. Souvent utilisées comme simple « fioritures décoratives », les animations viennent gêner certains utilisateurs et alourdir la page.
Souvenez-vous des débuts de PowerPoint où chaque diapositive était une animation différente parce qu’on le pouvait. Alors ne reproduisons pas les erreurs du passé ! Idéalement, il faut se limiter à celles qui améliorent l’expérience utilisateur comme par exemple une barre de chargement.
Critère 4.6 du RGESN Utiliser des animations uniquement si elles apportent de l’information permet de valider en partie le critère 4.6 du référentiel général de l’écoconception des services numériques (il conviendra de faire la même chose pour les vidéos et sons). Voir le référentiel
Eviter les GIFs animés et les carrousels en autoplay
En règle générale, les animations doivent pouvoir être arrêtées par les utilisateurs. Il s’agit d’une bonne pratique d’accessibilité et d’expérience utilisateur.
Ce qui pose problème, ce sont notamment les GIFs animés qui ne sont pas contrôlables comme le souligne la checklist Opquast de qualité web :
Dès lors qu’une animation visuelle a une durée de plus de 5 secondes ou qu’un son a une durée de plus de 3 secondes, doter systématiquement l’objet multimédia des moyens de contrôle nécessaires : démarrage, arrêt, muet ou volume. Ne pas utiliser de graphismes animés non contrôlables, ou encore partiellement contrôlables par l’utilisateur (images gif animées en particulier).
Les animations, sons et clignotements peuvent être mis en pause, Opquast (consulter en ligne)
Les carrousels automatiques sont aussi à éviter de par leur poids et les ressources qu’ils nécessitent. De plus, ils détériorent la plupart du temps l’expérience utilisateur et nuisent à l’accessibilité.
Vous ne pouvez pas compter sur le fait que les gens voient l’information placée dans les carrousels sur internet comme sur intranet. Que ce soit sur un écran de 30 pouces ou de 3 pouces, les internautes descendent souvent sur la page en dessous de ces grandes images, manquant tout le contenu qui s’y situe.
Carousel Usability: Designing an Effective UI for Websites with Content Overload, Auto-Forwarding Carousels, Accordions Annoy Users & Reduce Visibility, Nielsen Norman Group, traduction par Anne Faubry (consulter en ligne)
Critère 4.1 du RGESN Désactiver la lecture automatique des animations permet de valider en partie le critère 4.1 du référentiel général de l’écoconception des services numériques (il conviendra de faire la même chose sur les vidéos et les sons). Voir le référentiel
Trouver une alternative au chatbot
On voit de plus en plus de chatbots nous proposant de l’aide dès qu’on arrive sur un site. Ils posent plusieurs problèmes :
Impact environnemental : Codés en javascript, faisant des appels à des serveurs externes, voire recourant à de l’intelligence artificielle, ces chatbots impactent négativement le poids de la page et le nombre de requêtes.
Dégradation de l’expérience de navigation : Pop-ins intempestives, menu flottant masquant du contenu, animations de gigotement pour attirer l’attention, “fausse attente” (pour simuler une réponse humanisante)… Ces chatbots viennent souvent gêner la navigation sur le site.
Frustration : Incompréhension du contenu entré, personnel déconnecté car en dehors des heures ouvrées… Les chatbots sont souvent sources de frustration et de perte de temps.
Collecte de données personnelles : Souvent gérés par des entreprises tierces, les chatbots nécessitent le partage des données utilisateurs avec une autre entreprise, et donc l’acceptation de cookies.
Coût : Non seulement la valeur ajoutée des chatbots peut être discutée, mais en plus ils sont souvent assez coûteux. Entre les services tiers qu’il faut payer à la licence et au nombre de personnes atteintes, et les chatbots nourris à l’intelligence artificielle pouvant coûter plusieurs millions à développer, trouver une alternative sera économique.
Comme le suggère le Nielsen-Norman Group, si dans certains cas, les chatbots peuvent avoir une valeur ajoutée, il est préférable d’investir dans l’amélioration de l’expérience utilisateur du site qui assure un meilleur retour sur investissement, plutôt que de créer un chatbot peu utilisé. (The User Experience of Chatbots, en anglais, Nielsen Norman Group)
Exemple
Chatbot pouvant être remplacé
Dans cet exemple, le chatbot apparaît en bas de la page pour proposer de l’aide. L’aide consiste à poser sa question et à attendre ou laisser son email pour obtenir la réponse. Des chatbots comme celui-ci peuvent être remplacés par un bouton “Contact” visible sur le site.
Privilégier les changements instantanés plutôt qu’animés (Javascript)
Pour éviter des effets d’animation inutiles en Javascript, il vaut mieux privilégier les apparitions instantanées. Par exemple à l’apparition d’un formulaire d’inscription : le formulaire peut apparaître directement sans effet de fondu au noir pour l’arrière-plan.
