Comment concevoir une lettre d'information HTML avec Photoshop, InDesign, Illustrator et Adobe XD

Vous envisagez de concevoir des lettres d’information HTML ou des campagnes par courrier électronique qui attireront l’attention de votre public? Excellent. Vous avez pris une décision marketing qui vous apportera beaucoup de retour sur investissement.

Cet article vous aidera à démarrer. Nous allons présenter les principes de base de la conception, du codage de la lettre d’information HTML et de la distribution du courrier électronique, afin que vous compreniez parfaitement les différentes options logicielles.

Qu'est-ce qu'une newsletter ou une campagne HTML?

Dans le monde du marketing par courrier électronique, il existe deux types de courrier électronique. Courriels en texte brut et HTML.

La plupart des industries, en particulier celles qui utilisent le courrier électronique à des fins commerciales, utilisent le courrier électronique HTML.

Une combinaison d’images exceptionnelles, un appel à l’action saisissant (CTA) et un texte bien écrit s’ajoute pour attirer l’attention de vos abonnés dans la boîte de réception. Comme dans cet exemple de Rooted NYC:

Le principal avantage de la création d’e-mails HTML par rapport au texte brut est la conception de la newsletter.

Vous contrôlez exactement comment l’email apparaîtra dans les boîtes de réception. Cela revient à envoyer un site Web ou une brochure publicitaire sur papier glacé directement dans une boîte de réception. Vous pouvez mélanger et faire correspondre les couleurs, les polices et les images de manière à capturer votre image de marque.

Notez cependant que dans d’autres secteurs, tels que le monde juridique et la technologie, les courriers électroniques en texte brut peuvent être plus performants car ils présentent un degré de gravité élevé. Ils ressemblent moins à de la publicité.

Comment concevoir, coder et envoyer une newsletter HTML

Lorsque vous apprenez à créer un courrier électronique ou une lettre d'information HTML, vous devez reconnaître que la création comporte 3 étapes isolées.

1. Concevez votre email. Décidez de son apparence dans la boîte de réception de vos abonnés.
2. Codez votre design en HTML. Mettez la conception dans un langage de programmation que les clients de messagerie peuvent générer.
3. Envoyez votre email. Assurez-vous qu’il arrivera dans la boîte de réception de votre public.

Il existe une multitude de programmes que vous pouvez utiliser pour tous les aspects de la création de newsletter. Vous pouvez choisir un programme distinct pour la conception, le codage et l'envoi.

Ou vous pouvez utiliser un seul outil pour les trois étapes: un logiciel de marketing par courrier électronique. Nous vous recommandons de choisir un seul outil parmi trois autres pour ce processus (Sendinblue, de préférence). 😉

Vous gagnerez du temps et de l’énergie.

Mais nous vous expliquerons toutes les options possibles pour que vous sachiez exactement à quoi vous avez affaire.

Commencer à concevoir un bulletin d'information HTML

Le principal avantage de l'utilisation d'un logiciel de conception pour la première étape de la création d'un bulletin est que vous pouvez être à l'aise avec un logiciel de conception particulier. La création de votre lettre d'information ou de votre courrier électronique dans un programme de conception graphique rendra toutefois la tâche plus difficile pour vous dans le futur.

Vous ne pouvez pas simplement exporter votre conception sous forme d’e-mail HTML ou coder automatiquement votre fichier .ai.

Vous devrez le coder ou faire appel à une personne possédant une expertise professionnelle en HTML.

Mais si vous utilisez votre outil créatif de la meilleure façon possible, utilisez-le. En fait, s’agissant de la partie conception, n’importe quel éditeur de photo ou outil de mise en page fera le travail.

Voici les 3 restrictions de conception clés à prendre en compte lors de la conception d'e-mails HTML:

1. Conception de messagerie réactive:
   Votre courrier électronique ou votre lettre d'information doit être lisible sur l'appareil que vos abonnés utilisent. Selon les rapports, 66% des courriers électroniques sont ouverts sur les smartphones aux États-Unis. Cela signifie que vous aurez besoin d’un plan de conception pour la vue bureau et la vue mobile.
2. Largeur fixe:
   Toutes les lettres d’information doivent avoir une largeur fixe, ce qui évite aux abonnés d’avoir à faire défiler horizontalement. Vous voulez éviter leur expérience de lecture difficile à tout prix! La largeur de courrier HTML HTML est la norme dans l’industrie, car elle convient à la plupart des appareils. Vous pouvez aller jusqu'à 650 et que votre email soit restitué correctement.
3. Au dessus du pli:
   L'objet de votre courrier électronique est la première occasion d'attirer l'attention de votre abonné. Si vous réussissez ce test et que votre courrier électronique est ouvert, vous avez encore une chance de retenir leur attention avec un très bon en-tête. C’est la zone que vos contacts voient avant de devoir faire défiler. C'est ce qu'on appelle l'espace au-dessus du pli. Incluez les informations les plus cruciales dès le début.

Comment créer des newsletters HTML avec Photoshop

Commencez par créer un nouveau document.

La largeur doit être légèrement supérieure à celle d'une newsletter car cela vous permettra d'inclure un arrière-plan dans votre newsletter. La largeur totale recommandée est de 800 pixels.

En ce qui concerne la longueur, vous n’êtes pas limité ici. Si vous ne savez pas par où commencer, choisissez une longueur de 1000 pixels.

En termes de résolution, 72 DPI suffiront pour un bulletin d’information. Comme pour toutes les images du Web, vous devez choisir la couleur RVB, et non CMJN, qui convient mieux à l’impression.

Créez une zone de 600 pixels de large dans le document et centrez-le. C’est là que le contenu de votre newsletter s’adressera. Ensuite, choisissez une couleur d’arrière-plan pour le reste du document. Le blanc ou le gris clair en tant que couleur de fond crée une expérience de lecture agréable qui ne gêne pas. Certaines marques se sont bien comportées avec des couleurs pastel douces pour le fond également.

Si votre marque est connue pour son audace, alors n'hésitez plus et choisissez une couleur contrastante vive pour l'arrière-plan. Tant que c'est sur la marque, vous êtes bon (pour des idées de marque de bulletin d'information cliquez ici).

Votre fichier est maintenant configuré et vous êtes prêt à commencer. Laissez-nous travailler à travers la conception de haut en bas.

Il est de tradition de placer un lien vers une version Web du bulletin d’information ou de la campagne en haut de votre courrier HTML. Si les images ne s'affichent pas (ce qui se produit par défaut dans Microsoft Outlook) ou pour une autre raison, le client de messagerie ne restitue pas correctement votre courrier électronique, le lien vers une version Web permet à l'utilisateur de l'afficher dans son navigateur plutôt que dans son courrier électronique. client.

Cependant, de plus en plus de marques omettent le lien vers la version Web ou le placent discrètement au bas de l'e-mail.

De cette façon, cela ne gênera pas vos lecteurs et n’altérera pas la conception coordonnée de tout ce qui est au-dessus du pli. Notez que si vous travaillez en B2B, beaucoup de vos abonnés utiliseront Microsoft Outlook, ce qui signifie que vous devez toujours inclure le lien vers la version Web.

Directement sous le lien discret vers une version Web (ou si vous ignorez le lien, ajoutez le premier élément de votre lettre d'information), ajoutez une image de présentation. Vous pouvez ajuster la taille de l'image dans Photoshop, ainsi que le texte.

Souvent, la photo de présentation comprend votre logo et une image de marque reconnaissable. Vous pouvez également inclure un bouton d'appel à l'action (CTA) dans l'image de présentation. Cette zone représente ce précieux espace au-dessus du pli. En règle générale, la longueur doit être comprise entre 200 et 250 pixels, mais le meilleur moyen de vous assurer que la zone située au-dessus du pli est couverte est de le tester dans un logiciel de marketing par courrier électronique.

Le corps de votre lettre d'information ou de votre campagne par courrier électronique suit directement l'en-tête. Insérez ici un rectangle de 600 pixels, ajoutez du texte et insérez des images à votre goût.

Il vous suffit de dupliquer ce bloc pour ajouter du contenu à la newsletter. Utilisez des guides pour ajuster les blocs et vérifier les distances. Assurez-vous que vous utilisez un espacement suffisant pour assurer une excellente expérience de lecture.

Si vous souhaitez ajouter des boutons de médias sociaux à votre newsletter ou campagne par courrier électronique, insérez-les à la fin sous le corps du courrier électronique.

Enfin, fermez avec un pied de page. Vous devez inclure ici des informations sur la société et des liens permettant aux utilisateurs de mettre à jour leurs préférences en matière d’abonnement et de se désabonner facilement de la newsletter. Vous pouvez utiliser une police plus petite et ordinaire, à condition qu’elle soit toujours parfaitement lisible et cliquable.

Comment créer des newsletters HTML avec InDesign

Pour InDesign, créez un nouveau document avec une largeur de page de 600 pixels. En ce qui concerne la longueur, choisissez ce qui fonctionne. Enregistrez la page en tant que format personnalisé et ouvrez-la.

Votre mise en page de courrier électronique suivra la même structure que lors de l'utilisation de Photoshop:

1. Lien facultatif à afficher dans le navigateur
2. Image d'en-tête au-dessus du pli
3. Corps (contenu principal)
4. Bas de page

Dans InDesign, utilisez l'outil Rectangulaire pour créer trois rectangles superposés d'une largeur égale à la page. C'est ici que vous allez insérer l'en-tête, le contenu de la newsletter et le pied de page.

Ajouter une image à l'en-tête. Placez l'image et insérez-la proportionnellement. Assurez-vous que toutes les images que vous utilisez dans une lettre d'information InDesign sont hébergées en ligne afin que vos abonnés puissent les voir.

Ajoutez un fond blanc dans le corps de la newsletter pour assurer une lecture fluide. Utilisez l’outil de texte pour insérer du texte et, enfin, ajoutez des marges afin qu’il ne se trouve pas au bord de la page.

Le pied de page est le meilleur endroit pour placer un lien de désinscription et les autres détails de la société.

Comment créer des newsletters HTML avec Illustrators

Illustrator est un excellent outil pour concevoir des images.

Cependant, ce n’est pas le meilleur choix pour concevoir un bulletin entier. Utilisez Illustrator pour concevoir l’arrière-plan de votre bulletin d’information, vos logos ou d’autres graphiques.

Le bulletin d'information lui-même devrait être créé dans un autre programme.

Comment créer une lettre d'information HTML avec Adobe XD

Adobe XD est l’un des programmes de conception les plus récents qui fonctionne bien pour la conception de modèles de courrier électronique.

En fait, c’est le seul outil recommandé par notre équipe de conception graphique pour la création de modèles. Et ils devraient savoir. Ils en conçoivent beaucoup.

Adobe XD est un outil de conception graphique épuré, facile à apprendre, gratuit et intuitif. Pour créer une lettre d'information dans Adobe XD, créez simplement un fichier et suivez les mêmes instructions que celles répertoriées sous Photoshop.

La fonctionnalité d’Adobe XD se démarque par son outil de grille de répétition. Au lieu de dupliquer une boîte à plusieurs reprises, vous pouvez choisir l'option de répétition de grille.

Supposons, par exemple, que vous ayez une lettre d’information avec 4 blocs de contenu qui servent de teasers pour les articles de blog. Créez un bloc de contenu, puis passez la souris sur la sélection et sélectionnez Répéter la grille. Ensuite, faites glisser le groupe jusqu'à obtenir 4 blocs de contenu.

Disons que vous envoyez le dessin à votre patron ou à votre collègue pour approbation.

Et ils l'approuvent avec un seul changement. Ils veulent que tous les titres soient dans la nouvelle marque rose, au lieu de l’ancien gris. Au lieu d'avoir à sélectionner chaque titre et à le modifier manuellement, il vous suffit d'en changer un et le motif sera automatiquement adopté pour les autres.

Cela devient particulièrement utile lorsque vous traitez avec des groupes de grille répétés de plus de 12 ou même des centaines d’images. C’est le genre de problème que vous rencontrez régulièrement dans le secteur du commerce électronique.

Pas assez de conseils de conception pour vous? Assurez-vous de consulter nos conseils de création de newsletter si vous avez besoin de plus de conseils!

Astuces pour coder les newsletters HTML

Vous avez votre design? Avez-vous toutes les signatures dont vous avez besoin? Génial! Nous arrivons maintenant à la partie difficile: comment coder votre newsletter.

Certains programmes de conception ont la possibilité d’exporter votre document au format HTML. Mais ne soyez pas dupe. Malheureusement, cela ne fonctionnera tout simplement pas pour un email HTML.

La programmation HTML pour le courrier électronique est très différente de la programmation pour le Web. De plus, chaque client de messagerie fonctionne différemment, vous devez donc tester son apparence dans différents clients de messagerie.

Si vous êtes déjà familiarisé avec la programmation, continuez à lire. Nous avons quelques conseils pour vous.

Mais si vous n'êtes pas un programmeur expérimenté en codage de courrier électronique, vous avez plusieurs options pour obtenir votre conception dans un format qui rendra le rendu correctement:

1. Louer un programmeur expérimenté dans le codage de courrier électronique HTML
2. Choisissez un fournisseur de service de messagerietels que Sendinblue (oh, hé, c’est nous!), et recréez le design 1: 1 dans l’éditeur de campagne glisser-déposer du logiciel de newsletter.
3. le option de luxeChoisissez un fournisseur de services de messagerie qui offre le service complémentaire de programmation d’un modèle pour votre newsletter ou votre campagne de courrier électronique. Vous leur envoyez les fichiers de conception indiquant exactement à quoi vous souhaitez que le modèle ressemble, et ils codent dans le backend du logiciel. Ensuite, tout ce que vous avez à faire est de vous connecter au logiciel, d’insérer le texte et les images de votre choix dans votre nouveau modèle et de cliquer sur Envoyer.

Si vous avez l'habitude de programmer pour la conception de sites Web mais que vous n'avez simplement pas codé pour la messagerie HTML auparavant, voici quelques conseils à prendre en compte.

Pourquoi la programmation de courrier électronique HTML est-elle différente?

L'une des raisons pour lesquelles le codage pour le courrier électronique est si différent du codage pour la conception Web est qu'il y a beaucoup plus de facteurs en jeu dans la manière dont le courrier électronique sera rendu. Lors de la programmation pour le Web, vous devez tenir compte de facteurs tels que le système d'exploitation, le navigateur et la taille de l'écran.

En revanche, lors de la programmation d'un courrier électronique, vous devez tenir compte de ces facteurs, ainsi que de nombreux autres. Ceux-ci incluent les clients de messagerie, les options de blocage d'images et les services d'envoi.

De plus, bien qu’il ne reste que quelques navigateurs à prendre en compte lors de la programmation Web, il existe au moins 1 000 clients de messagerie dans le monde que votre courrier HTML doit être prêt à utiliser.

Même si vous ne regardez que les clients de messagerie ayant la plus grande part de marché, vous avez encore environ 50 clients de messagerie susceptibles de restituer votre courrier HTML.

De plus, les applications de messagerie Web basées sur le rendu seront rendues différemment selon les navigateurs. Et vous avez une multitude d’appareils et de tailles d’écran sur lesquels votre courrier électronique sera visualisé.

Pour couronner le tout, vous devez tenir compte du fait que les clients de messagerie utilisent principalement le code HTML de la vieille école. La plupart des développements récents en HTML n’ont tout simplement pas été adoptés par les logiciels clients de messagerie. Et il n'y a pas de normes universelles pour les clients de messagerie.

Dans l’ensemble, c’est une tâche délicate à programmer pour le courrier électronique. Pas pour les faibles de coeur.

Code HTML pour les bulletins d’information et autres courriels: À surveiller!

Pour créer votre code, vous pouvez utiliser un éditeur de texte brut ou un outil visuel tel que Dreamweaver. Ce dinosaure du monde de la programmation fonctionne bien pour coder des modèles de courrier électronique HTML, car il existe depuis toujours.

Comme nous l'avons établi, programmer un bulletin diffère considérablement du développement Web. Voici certaines des différences les plus importantes à prendre en compte:

• Commencez avec la structure. Votre modèle HTML commencera par un doctype indiquant au client de messagerie à quoi s'attendre. Suivez ceci avec votre en-tête. C’est là que vos requêtes multimédia, votre style et toutes les animations iront. Tout ce qui suit votre en-tête compte comme le corps de l'e-mail. Placez ce contenu avec des balises body.
• Oubliez les fichiers CSS séparés. La plupart des clients de messagerie ne les prennent pas en charge. Cela signifie que vous allez devoir faire en sorte que votre code HTML et votre code CSS fonctionnent correctement d’une manière différente: les styles CSS en ligne. Ils sont reconnaissables par la plupart des clients de messagerie et peuvent être utilisés pour les éléments clés de la conception de bulletin d’information, tels que les couleurs d’arrière-plan et les polices.
• Embrasser la table. Pour la mise en page de la newsletter, utilisez des tableaux HTML imbriqués. Je sais. Je sais. C’est très ressenti en 1999, mais c’est ce avec quoi nous devons travailler. Les balises de table permettent de contourner le fait que les clients de messagerie ne prennent en charge ni l'attribut rowspan ni l'attribut colspan. Vous voudrez utiliser des tables tout au long. Utilisez le remplissage de cellule pour une meilleure lisibilité.
• Rappelez-vous le texte alt. Enregistrez vos images séparément et incluez des balises alt-text. Cela améliore l'accessibilité et facilite les choses pour ceux qui lisent votre bulletin d'information dans les clients de messagerie qui bloquent les images.
• Soyez précis sur votre police! Les balises HTML habituelles, telles que H1 et H2, ne s'affichent pas correctement dans les clients de messagerie. Vous devez spécifier la taille et le style de la police directement dans le code HTML. Notez cependant que toutes les polices ne seront pas restituées correctement. En savoir plus sur la meilleure police à utiliser pour le courrier électronique.

Voici un exemple de code à utiliser lors du démarrage de votre campagne de courrier électronique. Cela rendra le texte en blanc sur un fond noir.

Envoi de votre newsletter

Nous arrivons maintenant à la troisième et dernière étape: votre outil d’envoi de courrier électronique.

Vous pouvez penser que vous pouvez envoyer votre courrier électronique en entrant simplement tous vos contacts dans un champ Cci avec votre service de messagerie gratuit, comme Gmail. Malheureusement, le recours à un fournisseur de messagerie gratuit et régulier n’est pas suffisant pour les campagnes par e-mail en masse.

Le plus gros problème est que votre courrier électronique ne sera pas très performant, ce qui signifie que la plupart de vos courriels ne parviendront même pas sur le serveur de la boîte de réception de vos contacts. Vos courriels ne verront littéralement jamais la lumière du jour, ni, vous le savez, l'écran rétro-éclairé d'une boîte de réception.

Au lieu d’essayer d’envoyer vos emails à partir d’un compte de messagerie privé, vous devrez utiliser un logiciel de newsletter, tel que Sendinblue. Votre service de marketing par courrier électronique disposera de nombreux outils et procédures pour garantir que vos courriers électroniques parviennent dans la boîte de réception.

La plupart des outils de marketing par courrier électronique vous permettent de télécharger directement le code HTML de vos modèles de newsletter. Une fois que vous l'avez conçu et codé, vous pouvez le télécharger et l'envoyer directement.

L'alternative la plus rapide au codage de newsletter

Mais il y a un meilleur moyen. Il n’est pas nécessaire d’être un concepteur ou un programmeur pour envoyer une campagne de courrier électronique professionnelle car la création du bulletin a été démocratisée.

Au lieu d'utiliser trois outils différents, vous pouvez faire tout ce qui est décrit ici dans un seul outil. L'option tout-en-un consiste à créer un modèle de bulletin d'information dans un logiciel de marketing par courrier électronique, tel que Sendinblue. Voici les trois étapes de la création d'un bulletin d'information:

1. Après avoir trouvé l'inspiration dans la newsletter, vous concevez vos emails avec un éditeur à glisser.
2. Le codage se fait automatiquement à l’arrière-plan, vous n’avez donc pas à vous soucier de son aspect technique.
3. Pour envoyer, cliquez simplement sur un bouton pour vous assurer que votre courrier électronique évite le filtre anti-spam et en fait une boîte de réception.

Vous souhaitez l'essayer sur notre plateforme? Tout ce que vous avez à faire est d'ouvrir un compte Sendinblue gratuit:

Je veux créer des newsletters gratuites avec Sendinblue >>

Pour plus de contenu comme celui-ci, abonnez-vous à notre bulletin mensuel de blog et Suivez-nous sur Twitter!