Le guide complet de conception pour le courrier électronique

Concevoir pour le courrier électronique consiste à aller droit au but et à tirer le meilleur parti de la brève chance que vous avez avec vos abonnés. Vous n’avez qu’une seule chance, il est donc utile d’utiliser autant de trucs que possible dans le livre pour que votre message soit bien compris. Les principes sous-jacents visent à respecter vos lecteurs en leur donnant quelque chose de précieux en retour de leur temps, qui est, après tout, la raison pour laquelle ils se sont engagés à vous entendre..

Une note avant de commencer

Certaines des suggestions que je vais faire ne s'appliqueront pas à toutes les listes, entreprises ou produits. Comme toujours avec le courrier électronique, testez tout ce qui est nouveau et voyez comment il fonctionne pour déterminer ce qui convient le mieux à vos abonnés..

Règle n ° 1: être transparent

C'est vraiment important. Évitez d’utiliser des noms d’envoyeurs, des lignes de sujet, des en-têtes ou des copies complexes ou énigmatiques. Cela va simplement dérouter vos lecteurs et les rendre plus susceptibles de supprimer votre courrier électronique ou de le marquer comme courrier indésirable.

Dites à vos lecteurs qui vous êtes, exactement pourquoi vous les envoyez par courrier électronique et exactement ce qu'ils vont tirer de cette expérience. Avoir tout cela aussi près du haut de l'email que vous pouvez l'obtenir. Cela signifie que dès que votre courrier électronique est ouvert, vos intentions et votre identité sont clairement définies et que votre proposition ne sera pas négligée..

Assurez-vous que le nom de l'expéditeur, la ligne d'objet, l'en-tête et le contenu "au-dessus du pli" sont significatifs et pertinents par rapport à la raison pour laquelle vous avez contacté vos lecteurs..


Essaye ça! Nom de l'expéditeur, ligne d'objet, logo et contenu d'ouverture clairs et évidents.

Règle n ° 2: Soyez évident, adhérez à la convention

Cela peut sembler ennuyeux, mais être conventionnel est très utile avec le courrier électronique. Les courriels sont petits et ouverts pendant une très brève période. La fonction de chaque élément doit donc être parfaitement claire..

Rendez vos liens évidents

Créez de beaux boutons, gros, facilement cliquables et tappables pour vos liens. Sur mobile, définissez-les à 100% de la largeur de sorte qu'ils puissent être facilement tapés avec le pouce (aucun effort requis).

Si vous souhaitez également inclure des liens de texte dans votre copie, assurez-vous qu'ils sont en gras et de couleur contrastante afin de se démarquer. Essayez de ne pas avoir trop de liens rapprochés, ce qui pourrait inciter un utilisateur à taper accidentellement le mauvais..

Environ 50% des ouvertures sont sur des appareils tactiles ces jours-ci, évitez donc un langage qui n'a pas de sens, tel que "cliquez ici".


De Justine Jordan sur litmus.com

N'hésitez pas à ajouter une flèche: des études ont montré qu'elles étaient plus efficaces mais, comme toujours, testez-les sur vos propres abonnés.

Rendre les avantages de cliquer évident

Les meilleurs boutons combinent l'avantage de cliquer avec l'action elle-même. Par exemple, «Commencez à utiliser votre nouveau compte» ou «Réclamez votre essai gratuit»..

Règle n ° 3: dire moins

N'écris pas beaucoup. Vos destinataires numériseront les courriers électroniques à la recherche de choses qui les intéressent plutôt que de les lire en entier; divisez-les donc en petits morceaux aussi courts que possible..

Votre objectif avec l'e-mail marketing est d'amener les internautes à cliquer sur votre site Web. Il n'est donc pas nécessaire de retarder cela avec un long monologue, d'autant plus qu'un e-mail de longue durée va submerger vos lecteurs de fatigue mentale et les rendre plus probables. appuyer sur "Supprimer".


Essaye ça! Bouchées courtes et percutantes, avec des appels clairs à l'action.

Le rendre scannable

Concevez votre email pour être percutant. Le texte doit apparaître en morceaux clairs et bien délimités qui vont droit au but.

Utilisez des titres clairs et énoncez en gras les concepts clés afin que vos lecteurs de numérisation puissent comprendre l'essentiel, même s'ils ne lisent pas tout (ce que la plupart d'entre eux ne liront pas).


Essaye ça! De courtes phrases percutantes avec des boutons évidents.

Vous pouvez dire plus tard

Si vous êtes en train d'envoyer du contenu plus long que vos lecteurs apprécient, je ne suis certainement pas en train de dire qu'il n'y a pas de place pour cela dans l'email marketing.

Les gens lisent leurs courriels dans toutes sortes de scénarios. Certaines seront "actives" et entre des réunions importantes, d'autres pourraient être extrêmement ennuyées dans la salle d'attente d'un dentiste, et je suis vraiment désolée de vous dire que d'autres seront encore aux toilettes. Ces scénarios sont tous très différents, mais il est facile de satisfaire tout le monde en s'en tenant à une hiérarchie logique..

Fournissez d'abord les informations les plus courtes et les plus percutantes, puis incluez le contenu de votre formulaire le plus long en dessous. De cette façon, vous ne forcez personne à parcourir des contenus plus longs, sauf ceux qui travaillent activement dans votre courrier électronique..

Répétez votre appel principal à l'action

Si votre courrier électronique est long et qu'un utilisateur a fait défiler tout votre contenu, assurez-vous qu'il dispose d'un accès facile à un autre appel à l'action sans avoir à faire défiler l'écran jusqu'en haut de votre courrier électronique..


Essaye ça! Donnez la priorité à votre proposition principale, puis incluez-y du contenu secondaire et / ou plus long.

Courriels promotionnels et annonces

Ces conseils s'appliquent aux messages marketing dans lesquels il existe généralement une ou deux choses principales pour lesquelles vous contactez vos abonnés..

Ne diluez pas votre message

Si vous écrivez à vos lecteurs à propos d'une chose, essayez de ne pas diluer le message en ajoutant plein d'autres choses sous ou dans une barre latérale. Avec chaque option supplémentaire, vous augmentez le risque de les faire dérailler.

Supprimer tous les éléments non essentiels

Évaluez la conception de votre courrier électronique, identifiez tout ce qui n'est pas essentiel pour transmettre votre message, puis supprimez-le. Moins de distractions signifie une communication plus claire.

Ne donnez pas trop de choix

Trop de choix augmente la charge cognitive de vos lecteurs, les rendant moins enclins à prendre une décision..

Réfléchissez aux exigences minimales pour que quelqu'un puisse cliquer sur votre site Web, puis introduisez progressivement plus de détails requis. Surcharger les gens avec trop de choix au début ne fera qu'encourager l'abandon des tâches.

Si vous essayez d'amener vos abonnés à choisir un produit et à l'acheter, ne présentez pas toutes les options dans l'e-mail. Accédez-les simplement à votre site Web et commencez à y introduire la complexité nécessaire..

Essayez d'impliquer progressivement les gens

Parfois, il est intimidant de recevoir un email qui dit immédiatement: "ACHETEZ-LE! ENREGISTREZ-VOUS! COMMITEZ !!"

Essayez plutôt d'amener les internautes sur votre site à une étape préalable du voyage, par exemple "sélectionnez la pointure de votre chaussure pour afficher les styles disponibles" plutôt que "achetez ces chaussures"..

Avoir un point focal

Appelez principalement à agir en tant que principal point focal de votre courrier électronique. Assurez-vous que vos lecteurs ne sont pas obligés de rechercher un appel à l'action dans un océan de similitudes..

Créer un point focal est facile. Tout d’abord, assurez-vous d’avoir un objectif principal. Ensuite, il vous suffit de le rendre plus grand que tout le reste et de vous assurer qu'il y a suffisamment d'espace autour pour que l'œil soit attiré en premier par cette zone. Ceci s’applique davantage à la conception de votre ordinateur de bureau lorsqu'un utilisateur voit simultanément une grande quantité de courriels..

Utiliser des espaces autour des éléments

Si vous avez beaucoup de choses de taille et de poids similaires, sans espace, elles apparaîtront sous la forme d'un gros bloc amorphe que l'œil ignorera tout simplement. Utilisez des espaces autour d'éléments pour attirer l'attention sur ce qui compte vraiment.


Essaye ça! Un point focal clair et une structure qui guide le lecteur.

Conseils universels

Si les gens veulent partir, laissez-les partir

Ne pas enterrer, masquer ou masquer vos informations de désabonnement. En plus d'être illégal dans de nombreux pays, c'est grossier et contre-productif. Si quelqu'un souhaite se désinscrire de votre newsletter et que vous le lui rendez impossible, il ne redeviendra pas un abonné heureux. Cela ne fera que générer de la mauvaise volonté envers votre marque car ils seront obligés de continuer à traiter vos emails (ou à mettre en place un filtre pour envoyer vos messages à la corbeille).

Évitez d'avoir trop de divisions verticales

Plus le tracé est divisé verticalement, plus il est distrayant. S'en tenir à deux ou trois divisions verticales dans une grille.

Les frontières solides sont également très distrayants pour les yeux, alors gardez-les au minimum.


Essaye ça! Moins de divisions verticales facilitent les yeux.

Considérations pratiques

Gardez-le sous 600px de large

Il s’agit généralement de la largeur maximale la plus sûre pour la conception de votre bureau afin d’assurer aux utilisateurs de ne pas devoir faire défiler horizontalement.

Utiliser l'amélioration progressive

Avant de donner à chaque boîte des coins arrondis et des ombres portées, réfléchissez au fonctionnement de votre mise en page. sans pour autant ces améliorations. Traitez cela comme votre conception de base, à laquelle vous allez ajouter vos coins arrondis et les ombres comme des améliorations.

Créer des formes audacieuses avec des bords carrés est tout aussi attrayant et les utilisateurs de nouveaux clients de messagerie électronique verront vos coins arrondis comme un bonus supplémentaire..

Cette approche vous fera gagner beaucoup de temps pour la construction de votre courrier électronique. Si vous devez créer une zone de texte arrondie avec une ombre portée et qu'elle doit fonctionner sur tous les clients de messagerie, vous devrez créer les effets à l'aide d'images, ce qui peut prendre beaucoup de temps, en particulier lors de la création de modèles réutilisables..

Donnez à votre conception un espace de respiration

Adoptez le fait qu’il n’est pas toujours possible d’obtenir une apparence identique dans chaque client de messagerie jusqu’au dernier pixel. Concevez dans cet esprit pour atténuer les maux de tête un peu plus loin sur la piste.

Créez des conceptions qui ont un peu de marge de manœuvre, où peu importe qu'un client ajoute 7 pixels d'espace mystère en dessous. À tout le moins, évitez les petits détails extra-rusés qui auront l’air brisé s’ils sont à un pixel de l’écran..

Considérer toute l'expérience

Votre courriel est un tout cohérent, alors réfléchissez à la manière dont tout fonctionne ensemble. Les utilisateurs verront d’abord le courrier électronique dans leur boîte de réception et liront le nom de votre expéditeur, son sujet et son en-tête. Ensuite, ils verront probablement une version de votre courrier électronique avec des images désactivées, la valeur par défaut pour la plupart des clients de messagerie. Enfin, ils verront votre courrier électronique comme vous le souhaitiez - s'ils activent les images.

Assurez-vous que tout est bien lié et que les abonnés pourront toujours comprendre votre message, même si les images sont désactivées..


Dans la boîte de réception (à gauche) et sans images (à droite).

N'incluez pas votre message principal dans une image. Il sera bloqué par défaut et de nombreux clients de messagerie n’afficheront pas non plus vos balises alt..

Dans l'exemple ci-dessous, vous pouvez voir comment presque tout le message serait oublié sans les images activées, car tout le texte est contenu dans les images et le texte de remplacement n'a pas été stylisé pour le rendre lisible..


Un e-mail Velocity Frequent Flyer avec des images désactivées (à gauche) et des images activées (à droite).

Style vos balises Alt

Vous pouvez ajouter des styles CSS aux images (ou à leurs balises de cellule ou de lien parent) pour vous assurer qu'elles s'affichent correctement dans les clients prenant en charge les balises alt. Cela peut vraiment améliorer l'expérience globale de vos abonnés.

Test de daltonisme

Si vous utilisez Photoshop, cela est intégré. Il existe également de nombreux outils qui vous permettront de voir comment votre conception va ressembler à celle de 10% des personnes souffrant d'un déficit de vision des couleurs..

Tout lien

Lors de la construction, ne vous contentez pas de lier vos boutons. Assurez-vous de tout lier afin que les utilisateurs puissent cliquer n'importe où. Liez l'image, le bouton et le titre. Heck, même lier le texte si cela fonctionne.

Comment concevoir un courrier électronique compatible avec les mobiles

Il existe plusieurs façons de créer un courrier électronique compatible avec les appareils mobiles..

1. Colonne unique, conception agnostique par appareil

C'est sans aucun doute le moyen le plus simple de disposer d'un e-mail compatible avec les appareils mobiles. À l'aide de cette méthode, les images et le texte sont définis pour être assez volumineux. Ainsi, que le courrier électronique soit affiché sur un ordinateur de bureau ou un téléphone portable, la police est lisible et les images sont déjà suffisamment grandes..

L'avantage de ce type de conception est qu'il vous suffit de coder une seule disposition. C'est certainement votre option la plus rapide et la plus simple. Les clients Smartphone prenant en charge la mise à l’échelle réduiront votre courrier électronique à une largeur de 100%. Sur ceux qui ne le font pas, il y aura très peu de défilement horizontal..

L'inconvénient est que la version de bureau est très grande échelle (ce que je ne vois pas personnellement comme un inconvénient).

Pour réaliser cette mise en page:

  1. Concevez votre courrier électronique à environ 450 pixels de large
  2. Les en-têtes doivent avoir au moins 30 pixels
  3. Copie du corps doit être d'au moins 20px

2. Conception de courrier électronique entièrement réactive

Un courrier électronique HTML entièrement réactif utilise des requêtes multimédia pour afficher le courrier électronique d'une certaine manière, en fonction de la taille du périphérique sur lequel il est visualisé. Presque aucun des principaux clients de bureau et de messagerie Web ne prend en charge les requêtes multimédia, contrairement à de nombreux clients de messagerie pour smartphones et tablettes. Cela signifie que le codage des e-mails réactifs est un peu en arrière-plan par rapport à celui des sites Web réactifs, en ce sens que votre version de bureau est votre version de base et que vous utilisez une requête de largeur maximale pour ajuster la présentation aux périphériques plus petits..

L'avantage de ce type de conception réside dans le fait que vous pouvez créer un courrier électronique à plusieurs colonnes qui se transforme en une version mobile à une colonne facile à lire. Les requêtes multimédia sont également polyvalentes car vous pouvez cibler des tailles d’écran spécifiques ainsi que des écrans spécifiques de densité de pixels (pour l’affichage d’images haute résolution)..

L'inconvénient est que l'application Gmail pour Android (le client de messagerie le plus populaire sur Android) ne prend pas en charge les requêtes multimédia et peut générer des résultats inhabituels lors du rendu de vos versions de messagerie entièrement réactives. Les e-mails entièrement réactifs prennent également beaucoup plus de temps à coder que leurs cousins ​​indépendants de l'appareil..

3. Conception de courrier électronique entièrement fluide

Pensez à cela comme étant de la réactivité sans les requêtes des médias.

Cette méthode implique la création d’une conception fluide, 100% large, avec une largeur maximale d’environ 600 pixels sur la table extérieure. Des commentaires conditionnels sont requis (pour Outlook) ainsi qu'une requête multimédia (pour Apple Mail qui, de manière hilarante, ne prend pas en charge la propriété max-width).

L'avantage de ce type de conception est qu'il sera réactif dans tous les clients de messagerie, y compris l'application Gmail pour Android. Cette méthode peut également être utilisée avec des requêtes multimédia pour affiner des éléments tels que la taille du texte et les boutons des clients qui les prennent en charge..

L'inconvénient est que cela ne fonctionnera bien qu'avec des conceptions relativement simples et ne comportant généralement pas plus d'une colonne. Le contenu à deux colonnes est acceptable tant qu'il est suffisamment petit pour que tout se passe bien dans une colonne étroite sur l'écran d'un smartphone.

Vous devez également pouvoir utiliser un pourcentage de largeur pour vos images, ce qui n'est pas toujours possible lors de la création de modèles (souvent, les images dans les modèles doivent avoir une largeur de pixel définie)..

Améliorer davantage la conception de votre messagerie

Enfin, vous pouvez mettre à profit certaines choses fantaisistes pour créer des courriels vraiment originaux qui se démarquent vraiment..

Images de fond

Les images d’arrière-plan appartenaient jadis à la pile "Trop difficile", mais grâce à Stig Morten Myre et aux collaborateurs de Campaign Monitor, il existe désormais un générateur de fond d'e-mail ultra-efficace, très simple à utiliser, qui élimine tous les tracas. Il n'est plus nécessaire de retarder l'ajout d'images d'arrière-plan à vos campagnes..

Polices Web

L'utilisation de polices Web est également un excellent moyen de faire ressortir votre conception du reste. Avec un peu plus de conception et un peu de temps de construction, il est facile d'implémenter des polices Web qui rendront très bien dans un nombre surprenant de clients de messagerie.

Animation CSS3

Les clients de messagerie modernes (tels que Apple Mail et ceux des appareils iPhone et Android) prennent en charge l’animation CSS3, ce qui signifie que vous pouvez commencer à penser à ajouter des éléments vraiment intéressants à vos campagnes. Les transitions, ainsi que les animations d'images clés, affichent un très bon rendu et peuvent constituer un ajout fantastique au courrier électronique (dans la mesure où elles se dégradent gracieusement), car elles n'augmentent pas la taille du fichier autant qu'un GIF animé..

Conclusion

Il y a un lot à prendre en compte lors de la conception pour le courrier électronique! Les conseils énumérés dans cet article vous donneront un bon départ et rechercheront plus d'articles dans cette série qui aborderont divers aspects (tels que l'utilisation de polices Web et la conception réactive) plus en détail..