Conception de vos e-mails

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

Énoncer les directives de conception et d’accessibilité relatives aux e-mails
Comparer les différents niveaux de conception réactive

Principes de conception des e-mails

Maintenant que vous avez créé un contenu de qualité, il est temps de revenir en arrière et d’examiner vos e-mails pour déterminer si ceux-ci respectent les directives en matière d’accessibilité ainsi que les principes de conception applicables. Vous n’avez pas besoin d’être un concepteur pour être en mesure d’identifier et de concevoir des e-mails de qualité. Ainsi, dans cette unité, nous allons nous concentrer sur quatre principes de conception : l’accessibilité, la clarté, la réactivité mobile et l’émotion.

Accessibilité

Selon le dictionnaire Merriam-Webster, l’accessibilité est la caractéristique de quelque chose « qu’il est facile d’employer, auquel il est facile d’accéder, ou qui est adapté de sorte que les personnes atteintes de handicaps puissent l’utiliser ». Le respect des directives en matière d’accessibilité garantit que vos e-mails peuvent être consultés par tous les abonnés, quels que soient leurs handicaps ou leurs capacités. De plus, le fait de suivre ces directives permet de concevoir des e-mails de qualité. Quoi qu’il en soit : l’accessibilité doit faire partie de vos priorités, car elle joue un rôle clé pour proposer du contenu de qualité.

Alors, comment procéder pour créer du contenu accessible ? Il existe de nombreuses ressources pour garantir l’accessibilité (quelques-unes d’entre elles sont répertoriées à la fin de cette unité), mais voici déjà quelques conseils clés pour vous aider à démarrer.

Utilisez des objets précis. Soyez clair, mais accrocheur dans votre objet.
Organisez votre contenu selon un ordre de lecture logique. Le contenu doit être facile à parcourir et à survoler. La cohérence du contenu, des présentations et des styles visuels est essentielle.
Utilisez des polices grandes et lisibles. Mettez en gras les parties importantes du contenu et augmentez la taille de la police (plus de 16 points) pour que votre contenu soit plus facile à lire et à assimiler.
Ajustez l’interligne. Soyez généreux avec l’espacement des lignes pour faciliter la lecture des paragraphes et rendre celle-ci plus agréable.
Utilisez de grands boutons cliquables avec des étiquettes claires. Dans le cadre d’un affichage sur des appareils mobiles, les boutons doivent mesurer au moins 44 pixels carrés. Cela concerne notamment tous les boutons servant à signaler une action et à indiquer l’endroit où l’utilisateur sera redirigé lorsqu’il cliquera (par exemple : « En savoir plus », « Achetez-le ici », « Acheter maintenant »). Voici une anecdote : selon une étude du MIT, la largeur moyenne de l’index est comprise entre 1,5 et 1,8 cm chez la plupart des adultes, ce qui équivaut à une largeur allant de 45 à 57 pixels. En outre, de nombreux utilisateurs utilisent leur pouce (qui fait environ 2 cm de large) pour cliquer sur un bouton sur un écran mobile.
Utilisez les options de texte dynamique et de texte brut. Le texte dynamique est du texte HTML ou du texte modifiable qui n’est pas intégré à une image. Incluez du texte dynamique lorsque cela est possible, pour bénéficier de temps de chargement plus rapides, d’une meilleure réactivité, ainsi que d’une meilleure expérience lorsque les images sont désactivées. Cerise sur le gâteau : le texte dynamique est plus esthétique. Le texte dynamique n’est jamais pixélisé et reste net sur tous les appareils.
Choisissez judicieusement les couleurs. Utilisez une palette de couleurs (pour les arrière-plans, les boutons, les liens et le texte) qui présente un contraste de couleurs élevé pour garantir une bonne lisibilité quel que soit le niveau de luminosité. Voici les directives à suivre concernant les rapports de contraste.
Pour le texte de petite taille (taille inférieure à 18 pixels), le rapport doit être au minimum de 4,5 pour 1.
Pour le texte de grande taille (taille supérieure à 24 pixels) le rapport doit être de 3 pour 1.
Testez le paramétrage de vos couleurs sur aremycolorsaccessible.com.

Examinez les exemples de texte de petite taille, de texte en gras et de texte de grande taille qui respectent les directives de contraste (accompagnés de l’indication Réussite) ou non (accompagnés de l’indication Échec).

Un exemple de contrastes de couleurs avec du texte de petite taille, du texte en gras et du texte de grande taille.

Êtes-vous prêt à réveiller le geek qui sommeille en vous ? Voici quelques conseils de codage pour rendre votre contenu encore plus accessible aux personnes utilisant des lecteurs d’écran et des technologies d’assistance.

Conseil	Description	Exemple
Incluez des balises ALT. Fournissez les informations nécessaires au sujet des images, mais faites en sorte qu’elles soient aussi concises que possible.	Une balise ALT (également appelée texte ALT ou description ALT) est ajoutée au code HTML pour fournir une description textuelle d’une image donnée. Les balises sont également utiles lorsque le chargement des images est bloqué ou lent.	`alt="Descriptive text about an image"` (alt=« Texte descriptif au sujet d’une image »)
Assurez-vous que les tableaux de présentation contiennent un attribut role="presentation". Traitez les tableaux comme une présentation s’appuyant sur un élément div en ajoutant role="presentation" à chaque <tableau>.	Les tableaux imbriqués peuvent créer une expérience désagréable pour les personnes qui utilisent des technologies d’assistance.	`<table role="presentation" border="0" cellpadding="0" cellspacing="0"></table>`
Utilisez des balises HTML sémantiques. Codez vos paragraphes, listes et titres en utilisant des identifiants spécifiques pour aider les utilisateurs à parcourir et à consulter le contenu plus facilement.	Le HTML sémantique consiste en des éléments HTML qui ajoutent du sens ou du contexte au code, ce qui permet aux technologies d’assistance de mieux fonctionner.	`<header></header> <section> <article> <figure> <img> <figcaption></figcaption> </figure> </article> </section> <footer></footer>`

Clarté

Dans le cadre de la conception, le principe de clarté fait référence à la facilité de lecture et d’assimilation de votre contenu pour l’utilisateur. La clarté est un élément important des directives d’accessibilité et vient souligner la nécessité d’enchaîner clairement les idées, d’espacer suffisamment les lignes et d’utiliser des polices lisibles. Ce principe fait également référence au fait que votre e-mail doit être conçu de sorte que votre identité de marque y apparaisse clairement. Comment procéder ? Indiquez clairement quelle est l’importance de vos messages et faites des phrases courtes. Il est souhaitable d’aérer votre contenu. De plus, comme nous l’avons mentionné dans l’unité précédente, le placement de votre contenu joue un rôle essentiel. Utilisez un format d’e-mail cohérent qui présente d’abord votre contenu le plus pertinent. Élaborez des e-mails simples mais efficaces.

Bien que connu pour sa carrière littéraire, Antoine de Saint-Exupéry avait des mots sages que tous les concepteurs et non-concepteurs devraient suivre : « Un concepteur sait qu’il a atteint la perfection non pas quand il n’y a plus rien à ajouter, mais quand il ne reste rien à enlever ».

Réactivité mobile

Selon l’étude menée par Adestra sur l’adoption et l’utilisation par les consommateurs, 71 % des consommateurs suppriment les e-mails qui ne s’affichent pas correctement sur appareil mobile. Ne prenez pas le risque que vos e-mails soient supprimés, optimisez-les pour les appareils mobiles ! Il existe trois options à considérer pour l’optimisation mobile. Sélectionnez celle qui convient à votre marque en évaluant la manière dont vos clients interagissent avec vos messages ainsi que le temps et l’expérience dont dispose votre équipe de production pour créer et coder des e-mails. Passons en revue les options s’offrant à vous.

Description

Quand l’utiliser

Aspects à connaître

Compatible avec les appareils mobiles

Une présentation unique, conçue pour pouvoir s’afficher dans un format réduit sur un appareil mobile sans qu’il n’y ait d’erreurs.

Production rapide, peu de travail à fournir.

Présentation à colonne unique
Éléments graphiques principaux en pleine largeur
Textes de grande taille (17 px pour le corps du texte, 26 px pour les titres)
Boutons d’appel à l’action larges et tactiles

Compatible avec la réactivité

Utilisation d’en-têtes et de pieds de page réactifs.

Emploi d’éléments reproductibles, nécessité d’effectuer un travail initial.

Les modules d’en-tête et de pied de page incluent des requêtes multimédias permettant de modifier et d’adapter simplement l’e-mail dans les cas suivants :

Suppression de contenu
Recours à la navigation empilée

Le corps de l’e-mail emploie des techniques adaptées aux appareils mobiles :

Colonne unique
Textes de grande taille
Boutons d’appel à l’action larges

Réactif

Le contenu modulaire s’adapte à la taille de l’écran de l’appareil.

Expérience optimale, travail à fournir en continu.

Utilise une requête CSS3 de type @media qui active des styles alternatifs en fonction de l’environnement de visualisation général
Détecte la taille de l’écran (en px) pour déterminer s’il est petit ou grand
Revient à la version de bureau lorsque la requête @media n’est pas prise en charge

Ajout d’émotions

Selon l’Interaction Design Foundation, la conception émotionnelle a pour objectif de susciter des émotions appropriées afin de créer une expérience positive pour l’utilisateur. Alors, qu’est-ce que les émotions ont à voir avec les e-mails ? C’est très simple : si les abonnés sont sensibles à votre e-mail, ils ne le supprimeront pas. Les e-mails peuvent susciter une réponse émotionnelle à travers la narration et l’esthétique globale de vos campagnes. Passons en revue quelques considérations relatives aux éléments visuels de votre e-mail.

Image de marque

Restez fidèle à votre marque. Suivez des normes de marque claires qui correspondent à celles employées sur votre site Web, de sorte que si un utilisateur clique sur un appel à l’action, il ne constate pas de différence entre l’identité de marque employée dans vos e-mails et celle utilisée sur votre site Web ou au sein de votre application mobile. Cela garantit la cohérence et la clarté.

Images et illustrations

Interagissez avec vos clients en utilisant des illustrations en haute résolution et des images pertinentes qui les font se sentir en phase avec votre marque. Voici quelques conseils à ce sujet.

Doublez la taille de vos images, y compris votre logo, pour garantir leur bon affichage sur les écrans Retina haute résolution. Lorsque l’image sera par la suite rétrécie dans l’e-mail, elle semblera plus nette.
Visualisez l’e-mail sans ces images. Vérifiez que votre contenu fonctionne toujours si les images ne se chargent pas ou sont désactivées.

GIF animés

Les GIF animés sont un excellent moyen d’attirer l’attention, de présenter plusieurs images ou de montrer comment quelque chose fonctionne. Cependant, ils peuvent causer des problèmes d’accessibilité pour les abonnés malvoyants. Examinez vos animations en tenant compte des considérations suivantes :

Assurez-vous que vos GIF animés ont des transitions fluides.
Si les contenus ont une fréquence de clignotement comprise entre 2 Hz et 55 Hz, cela peut nuire aux utilisateurs souffrant d’épilepsie photosensible.

N’hésitez pas à utiliser des animations et des vidéos, mais veillez bien à vérifier leur fonctionnement, leur temps de chargement et la taille des fichiers associés. Si elles ajoutent de la valeur à votre message, conservez-les. Sinon, abstenez-vous de les utiliser.

Enfin, n’hésitez pas à consulter le module Pratiques de marketing inclusif pour faire en sorte que votre contenu emploie le bon ton et assure une représentation égalitaire. Dans l’unité suivante, nous nous intéresserons à l’étape la plus importante avant d’appuyer sur le bouton Envoyer : la réalisation des tests.