Top 10 des pratiques pour éco-concevoir vos emails

Dans une démarche de numérique responsable, il est nécessaire de revoir des fondamentaux de communication tout en pensant expérience utilisateur. Cela implique d’aller à l’essentiel sans pour autant que ce soit au détriment de l’expérience et de la performance, bien au contraire. Comparez par exemple la page d’accueil de Google à celle de Yahoo. Bien que leurs approches soient différentes, vous préférerez sans aucun doute la plus simple. Pourquoi ? Car vous vous y sentirez tout simplement plus à l’aise pour trouver rapidement l’information recherchée et naviguer fluidement. La conception responsable d’une campagne email marketing applique la même logique ! Découvrez  conseils pour concevoir des mails qui allient conception durable, attractivité et pertinence.

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 vont jouer à la fois sur l’impact carbone de votre réalisation mais aussi sur le confort de lecture de votre destinataire. On évite alors les effets stroboscopiques de la démultiplication des couleurs (3 ou 4 maximum) et des alliances peu opportunes entre celles non complémentaires (et on révise le fameux cercle chromatique étudié en primaire). Côté impact carbone, un principe simple à mémoriser pour orienter ensuite vos choix : plus une couleur demande de la luminosité liée à l’éclairage des pixels d’un écran, plus elle est énergivore ! Le blanc est ainsi la couleur à l’impact carbone le plus élevé, suivi du bleu, du rouge et du vert. À l’inverse et en toute logique, les teintes plus sombres sont moins impactantes. De quoi faire réfléchir non ?

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, à savoir des textes clairs sur un fond foncé. Mais en quoi cet usage est-il finalement pertinent ? 

Et bien, le « Dark Mode » permet principalement d’économiser la consommation de la batterie de vos destinataires grâce à illumination plus faible des pixels de leurs supports de lecture. Selon la technologie utilisée, la batterie, le pourcentage de luminosité de l’écran et moulte autres subtilités, le mode sombre permettrait d’économiser entre 10 et 80% de la batterie des supports de lecture de vos contacts.

Et côté usage ? Les internautes semblent globalement adopter fortement cette tendance. En 2021, plus de 82% des internautes déclaraient utiliser le Dark Mode, plus de 64% souhaiteraient que tous les sites web soient optimisés pour cet affichage et entre 55 et 70% des utilisateurs de l’iOS d’Apple l’utiliseraient de façon systématique (night eye, Apple).

Sans optimisation adaptée au mode sombre, la lisibilité des messages emails peut être fortement impactée. 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 étonnant : même si vous ajoutez des éléments dans votre code, le poids global de votre message (HTML et images) va être allégé. Tout le monde se retrouve gagnant ! 

Au-delà de la réduction de l’impact énergétique, le Dark Mode répond aussi à l’un des enjeux de l’accessibilité numérique. Il offre en effet, pour la plupart des personnes, une lecture plus agréable grâce à une luminosité plus faible et une réduction de la lumière bleue de leurs écrans, réduisant la fatigue visuelle ou les migraines ophtalmiques. Un effet non négligeable pour de nombreuses personnes. 

Typographie : des choix qui pèsent dans vos emails

En 2022, le poids moyen d’une police web représente 138 Ko, soit 6% du poids total d’une page (http Archive). Privilégiez les polices standards (appelées également polices systèmes) qui sont tout simplement installées par défaut sur les systèmes d’exploitation. Parmi celles-ci, on retrouve Arial, Times New Roman, Garamond, Tahoma, Verdana et bien d’autres. Comparées à des polices plus stylées et design, leur utilisation offre un triple bénéfice : 

• Elles s’adaptent à la quasi-totalité des messageries et permettent ainsi une bonne lisibilité de votre message pour toutes vos audiences, quels que soient les outils choisis.
• Elles demandent moins de ressources énergétiques car 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

Vous l’avez bien saisi, l’attention portée sur le poids des éléments de vos messages emails (images, code HTML, vidéos, etc.) est une base en matière de maîtrise du coût énergétique de vos campagnes. Pour cause, ce poids va être démultiplié par autant de destinataires ouvreurs, cliqueurs. Il existe également des enjeux en termes d’aboutissement réel de votre message dans les boîtes de réception de vos contacts, un email trop lourd pouvant être bloqué par les serveurs des messageries de vos contacts. Alors, dans la même logique, oubliez les pièces jointes et préférez plutôt un lien vers le document hébergé en ligne.

Besoin d’être encore convaincu ? Un email standard génère environ 4g de CO² en moyenne mais associé à une pièce jointe volumineuse, il peut produire jusqu’à 50 g de CO² (ADEME). Sachant qu’il faut 16 heures en moyenne pour qu’un arbre absorbe 10g de C02, il faudrait 5 arbres pour absorber en 1 heure le dioxyde de carbone généré par un email avec une pièce-jointe importante. Imaginez l’impact que cela peut représenter à l’échelle mondiale !

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

82% des audiences préfèrent visionner une vidéo plutôt que de lire un email (iSwissWeb). L’appétence pour la vidéo ainsi que les éléments de Motion Design est clairement forte mais la consultation de ces formats sollicite beaucoup de ressources. En effet, la vidéo représente 80% du trafic de données sur Internet (Cisco) et 20% des émissions de gaz à effet de serre du numérique (Theshiftproject.org).  Alors optons pour une approche réfléchie de l’usage de la vidéo : limitons-le si le message peut être transmis autrement et, si vous êtes persuadé.e. de l’intérêt de ce format en termes d’efficacité, plusieurs pistes : 

• N’intégrez pas de vidéo directement dans le message email (ce qui peut par ailleurs poser des problématiques d’affichage sur différentes messageries) mais redirigez plutôt vos lecteurs vers la vidéo intégrée sur une page d’atterrissage.
• Pensez à la “short vidéo” pour limiter le temps de la vidéo et travaillez sur le poids et la définition des images.
• Inutile de réaliser et diffuser une vidéo avec une résolution élevée du type haute définition ou 4K alors que celle-ci doit uniquement être consultée en ligne sur de petits écrans !
• Evitez de paramétrer le lancement automatique de la vidéo, laissez vos contacts cliquer eux-mêmes sur le bouton lecture, cela limite la consommation inutile de données.
• Envisagez l’hébergement de votre vidéo sur une plateforme professionnelle et responsable, qui assure une plus grande maîtrise des contenus, des paramétrages de diffusion et également des données des internautes.

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

La conception d’un email se fait par ordinateur et le rendu sera donc naturellement optimisé pour ce support de lecture. Le problème avec tout cet espace disponible, c’est que nous avons cette envie de combler les vides et, en conséquence, d’en faire trop en intégrant beaucoup de contenu. Les messages tests sont généralement ensuite vérifiés et validés sur le même type d’écran. Votre message vous semble conforme ? Et c’est parti, il est envoyé ainsi. Mais oups, nous avons oublié un point important : l’expérience de vos lecteurs mobiles ! Sachez qu’au moins 60% des internautes consultent leurs messages emails sur support mobile en première lecture (Numberly). Du coup, ça déborde, ça dépasse, ce n’est pas agréable à lire et c’est bien difficile de cliquer au bon endroit…

Gagnez dès à présent du temps et économisez votre énergie : inversez votre approche et débutez par la conception de votre message sur mobile, tant côté contenu que design. Testez d’abord le rendu de votre email sur mobile puis passez dans un second temps sur ordinateur pour vérifier que votre message prend également toute sa dimension sur ce support. Simple à mettre en œuvre 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 dont fait partie Mies Van Der Rohe, l’auteur de la célèbre phrase « Less is more ». Le concept vise le purisme des formes afin de 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 alors 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 (exit les zones de commentaires !).

En matière d’images, on reste dans la lignée ! On opte pour le format gif, le plus léger de tous, 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’intégrer en tout petit dans un espace de quelques pixels ? Plus les images sont conséquentes, plus elles nécessitent des ressources lors de leurs téléchargements.  Alors, on n’hésite pas : on redimensionne, on réduit, on retaille et vive les économies à tous les points de vue ! 

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
• Éviter les styles inline excessifs et mutualiser lorsque c’est possible
• 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
• Un double bénéfice : performance et durabilité

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 » vient répondre à cette recherche du « vrai » des consommateurs. Les audiences souhaitent revenir à l’essentiel, se reconnecter au concret et au naturel et sentir que, derrière les marques, œuvrent des « Hommes » qui aspirent eux aussi à un monde meilleur.  Humain, nature, bien-être, vie du quotidien, imperfections, scènes authentiques sans fard et sans filtres… On oublie désormais les visuels illustratifs insipides et dénués de sens. On oriente le choix de ses images pour provoquer chez ses lecteurs une projection concrète sans trucage, une émotion (on préfèrera la joie au pathos) ou un focus sur un aspect de la réalité non déguisé. En bref, vous avez compris : 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 en d’autres termes) va directement être impacté par la longueur de votre message. Et oui, plus il est long… plus il est long ! Conséquences : l’attention de vos lecteurs se retrouve éparpillée (ce qui ne favorise pas le clic) et les ressources nécessaires pour télécharger le message vont être démultipliées. 

Pour vous faire votre propre idée, étudiez le 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, tout en haut. Inutile donc de faire long. Concentrez vos efforts sur les premiers éléments de vos emails, les performances et l’impact carbone de vos messages vous en sauront gré !

Vous souhaitez mettre en place ces bonnes pratiques pour réduire l’impact carbone de vos campagnes emails et en augmenter l’accessibilité ?