Top 10 des pratiques pour éco-concevoir vos emails

Vive les couleurs dans vos emails, mais avec raison

Chaque couleur a son propre impact. Contraste, intensité, lumière et énergie nécessaire pour la reproduire jouent à la fois sur la consommation de l’écran et sur le confort de lecture de votre destinataire. On évite les effets stroboscopiques de la démultiplication des couleurs (3 ou 4 maximum) et les alliances peu opportunes entre couleurs non complémentaires. Côté énergie, un principe simple à mémoriser sur les écrans OLED, qui équipent la plupart des smartphones récents : chaque pixel produit sa propre lumière, et plus une couleur demande de luminosité, plus elle est énergivore. Le blanc est ainsi la couleur la plus gourmande, suivi du bleu, du rouge et du vert, tandis que les teintes sombres consomment beaucoup moins. Sur les écrans LCD, dont le rétroéclairage est constant, l’écart entre les couleurs est en revanche négligeable. De quoi faire réfléchir !

Le mode sombre : Dark is the best light pour vos emails !

Le Dark Mode est un paramètre d’affichage des écrans consistant à appliquer automatiquement un « mode nuit » aux contenus en ligne : des textes clairs sur un fond foncé. En quoi cet usage est-il pertinent ?

Sur les écrans OLED, le Dark Mode permet d’économiser la batterie de vos destinataires grâce à une illumination plus faible des pixels. Le gain dépend surtout de la luminosité de l’écran : selon une étude de l’université Purdue (2021), il atteint 39 à 47 % à pleine luminosité, mais seulement 3 à 9 % à la luminosité utilisée au quotidien.

Et côté usage ? Les internautes adoptent fortement cette tendance : selon une enquête menée en 2021 par l’éditeur Night Eye, plus de 80 % des répondants déclaraient utiliser le mode sombre, et près des deux tiers souhaitaient que tous les sites web soient optimisés pour cet affichage.

Sans optimisation adaptée au mode sombre, la lisibilité des messages emails peut être fortement impactée : logos invisibles, textes illisibles, couleurs inversées. Pour y remédier, il est nécessaire d’intégrer les standards design et techniques au travers d’un code adapté dans votre structure HTML et de tester le rendu de vos messages dans les deux modes.

Au-delà de la réduction de l’impact énergétique, le Dark Mode répond aussi à un enjeu d’accessibilité numérique. Pour de nombreuses personnes, il offre une lecture plus confortable grâce à une luminosité plus faible, notamment en cas de sensibilité à la lumière. À l’inverse, certains lecteurs, par exemple ceux atteints d’astigmatisme, lisent moins bien un texte clair sur fond sombre : l’objectif est donc de proposer un email parfaitement lisible dans les deux modes, et de laisser chacun choisir.

Typographie : des choix qui pèsent dans vos emails

Les polices web personnalisées alourdissent vos messages et ne sont pas prises en charge par toutes les messageries : de nombreuses applications, dont Gmail, les remplacent par une police par défaut. Privilégiez donc les polices standards (également appelées polices systèmes), installées par défaut sur les systèmes d’exploitation : Arial, Georgia, Times New Roman, Tahoma, Verdana… Comparées aux polices plus stylées, leur utilisation offre un triple bénéfice :

• Elles s’adaptent à la quasi-totalité des messageries et permettent une bonne lisibilité pour toutes vos audiences, quels que soient les outils choisis.
• Elles demandent moins de ressources énergétiques : l’utilisateur n’a pas besoin de télécharger une police supplémentaire pour consulter votre email.
• Elles respectent les bonnes pratiques d’accessibilité numérique.

Exit les pièces jointes dans les emails

L’attention portée sur le poids des éléments de vos messages emails (images, code HTML, vidéos…) est une base en matière de maîtrise du coût énergétique de vos campagnes. Ce poids va être démultiplié par autant de destinataires ouvreurs et cliqueurs. Il existe également des enjeux en termes d’aboutissement de votre message dans les boîtes de réception : un email trop lourd peut être bloqué par les serveurs des messageries de vos contacts et pénaliser votre délivrabilité. Oubliez donc les pièces jointes et préférez un lien vers le document hébergé en ligne.

Besoin d’être convaincu ? Selon les estimations de Mike Berners-Lee (How Bad Are Bananas?), un email standard émet environ 4 g de CO2e, et jusqu’à 50 g avec une pièce jointe volumineuse. Ces ordres de grandeur varient selon les méthodes de calcul, mais ils montrent bien que le poids d’un message compte, surtout lorsqu’il est envoyé à des milliers de destinataires.

La vidéo dans vos emails : simple à lire mais lourde pour la planète

L’appétence pour la vidéo et les éléments de Motion Design est forte, mais la consultation de ces formats sollicite beaucoup de ressources : la vidéo représente environ 80 % du trafic de données sur Internet (Cisco) et près de 20 % des émissions de gaz à effet de serre du numérique (The Shift Project). Optons pour une approche réfléchie :

• N’intégrez pas la vidéo directement dans l’email. Redirigez plutôt vos lecteurs vers la vidéo intégrée sur une page d’atterrissage.
• Pensez à la « short vidéo » pour limiter la durée et travaillez le poids et la définition des images.
• Inutile de diffuser une vidéo en haute définition ou 4K pour une consultation sur de petits écrans : adaptez la résolution au support de lecture.
• Évitez le lancement automatique de la vidéo. Laissez vos contacts cliquer eux-mêmes sur le bouton lecture pour limiter la consommation inutile de données.
• Envisagez l’hébergement de votre vidéo sur une plateforme professionnelle et responsable, qui assure une meilleure maîtrise des contenus, des paramétrages de diffusion et des données des internautes.

Aller à l’essentiel grâce à la conception « Mobile First »

La conception d’un email se fait sur ordinateur et le rendu est naturellement optimisé pour ce support. Le problème avec tout cet espace disponible : on a tendance à le combler et à intégrer beaucoup de contenu. Mais un point crucial est souvent oublié : l’expérience de vos lecteurs mobiles. Selon Litmus, le mobile reste le premier environnement de lecture des emails. Sur un message non optimisé : ça déborde, ça dépasse, c’est difficile à lire et à cliquer.

Inversez votre approche et débutez la conception de votre message sur mobile, tant côté contenu que design : un email builder avec prévisualisation mobile facilite cette démarche. Testez d’abord le rendu responsive de votre email sur mobile puis vérifiez ensuite qu’il prend également toute sa dimension sur ordinateur. Simple à mettre en oeuvre et tellement plus efficace à tous les niveaux !

Le Minimal Design : la méthode « Less is more » pour vos emails

L’éloge du « moins » au service d’une expérience plus riche est directement issu du mouvement architectural de Mies Van Der Rohe, auteur de la célèbre phrase « Less is more ». Le concept vise le purisme des formes pour ne conserver que les fondamentaux et ainsi mettre en évidence l’essentiel.

Appliqué au web et à l’email, le Minimal Design vise l’optimisation de l’expérience utilisateur et la mise en avant du message et de sa promesse. On travaille l’aération des contenus, on laisse place au noir et blanc. Côté HTML, on simplifie la structure (CSS, structure en tableau) et on conserve uniquement le code utile.

En matière d’images, même logique : on choisit le format adapté (JPEG compressé pour les photos, PNG ou GIF pour les aplats de couleur et les logos) et on veille à bien définir les dimensions nécessaires, et pas plus. Pourquoi alourdir son message avec une image HD de 8 Mo pour l’afficher dans un espace de quelques pixels ? Plus les images sont lourdes, plus elles nécessitent de ressources au téléchargement. On redimensionne, on réduit, on retaille.

Optimiser le code HTML de vos emails

L’éco-conception ne concerne pas uniquement les visuels ou le contenu : elle passe aussi par la qualité de votre code HTML. Un email mal codé peut rapidement devenir inutilement lourd et énergivore, même si son design semble simple. Chaque ligne de code superflue augmente le poids global de votre message et donc les ressources nécessaires à son envoi, à son stockage et à son affichage. Un code HTML non optimisé peut entraîner :

• un temps de chargement plus long
• une consommation de données plus élevée
• des problèmes d’affichage selon les messageries
• une expérience utilisateur dégradée

À l’inverse, un code propre et allégé améliore à la fois la performance et l’impact environnemental de vos campagnes. Les bonnes pratiques à adopter :

• Supprimer le code inutile : commentaires, espaces, balises vides ou redondantes
• Limiter les imbrications complexes dans la structure HTML
• Alléger les fichiers CSS et ne conserver que les styles indispensables
• Réduire le nombre de requêtes en limitant les éléments externes

En travaillant la qualité de votre code, vous adoptez une démarche d’éco-conception invisible pour l’utilisateur, mais essentielle pour réduire l’impact global de vos campagnes.

« Design for good » for email : des visuels qui parlent « vrai »

Forte tendance du réalisme, le « Design for good » répond à cette recherche du « vrai » des consommateurs. Les audiences souhaitent revenir à l’essentiel, se reconnecter au concret et sentir que, derrière les marques, oeuvrent des personnes qui aspirent elles aussi à un monde meilleur. Humain, nature, bien-être, vie du quotidien, imperfections, scènes authentiques sans filtre… On oublie les visuels illustratifs insipides et dénués de sens. On choisit ses images pour provoquer chez ses lecteurs une projection concrète, une émotion authentique ou un focus sur un aspect de la réalité non déguisé. En bref : on vise la transparence pour susciter bien-être et confiance.

Les interactions dans vos emails : on y fait attention !

Le niveau d’interaction provoqué par votre message (votre taux de clic) va directement être impacté par la longueur de votre email. Plus il est long, plus l’attention de vos lecteurs se retrouve éparpillée, ce qui ne favorise pas le clic, et plus les ressources nécessaires pour télécharger le message sont importantes.

Pour vous faire votre propre idée, étudiez la heatmap de vos campagnes (la visualisation des zones « chaudes » de clics) : vous constaterez que la majorité des interactions réalisées par vos ouvreurs se situe dans la première partie de vos messages. Inutile donc de faire long. Concentrez vos efforts sur les premiers éléments de vos emails, et vos performances ainsi que l’impact carbone de vos messages s’en trouveront améliorés.