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 l’impact carbone de votre réalisation 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é impact carbone, un principe simple à mémoriser : 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, les teintes plus sombres sont moins impactantes. 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 ?

Le Dark Mode permet principalement d’économiser la consommation de la batterie de vos destinataires grâce à une 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 d’autres paramètres, 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 adoptent fortement cette tendance. En 2021, plus de 82% des internautes déclaraient utiliser le Dark Mode, 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 (source : 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, fait surprenant : 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 y gagne !

Au-delà de la réduction de l’impact énergétique, le Dark Mode répond aussi à un enjeu d’accessibilité numérique. Il offre, 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, réduisant la fatigue visuelle et les migraines ophtalmiques.

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 (également appelées polices systèmes), installées par défaut sur les systèmes d’exploitation : Arial, Times New Roman, Garamond, 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. Oubliez donc les pièces jointes et préférez un lien vers le document hébergé en ligne.

Besoin d’être convaincu ? Un email standard génère environ 4g de CO² en moyenne mais, associé à une pièce jointe volumineuse, il peut produire jusqu’à 50g de CO² (ADEME). Sachant qu’il faut 16 heures en moyenne pour qu’un arbre absorbe 10g de CO², il en faudrait 5 pour absorber en 1 heure le dioxyde de carbone généré par un seul email avec pièce jointe importante. Imaginez l’impact à 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 et les éléments de Motion Design est forte, mais la consultation de ces formats sollicite beaucoup de ressources : 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 (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. Au moins 60% des internautes consultent leurs emails sur mobile en première lecture (Numberly). Sur un message non optimisé : ça déborde, ça dépasse, c’est difficile à lire et à cliquer.

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 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 opte pour le format GIF, le plus léger, 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 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. 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.