Comment créer une newsletter réactive sur tous les clients de messagerie?

Si vous voulez créer une newsletter réactive pour promouvoir vos produits et la délivrer sous la bonne forme à votre public – cet article est pour vous !

Dans ce billet, je vais vous montrer comment programmer une newsletter réactive qui vous permettra de reproduire fidèlement le contenu de votre maquette et de toucher des clients potentiels. Je vous guiderai pas à pas, de la création du design de la newsletter à son envoi à votre client.

Créer un design graphique pour une newsletter

Lorsqu’il s’agit de la conception graphique d’une newsletter, quelques options s’offrent à nous :

1. 1. Commander la conception graphique de la newsletter à une entreprise professionnelle – si vous ne vous sentez pas capable de créer vous-même la conception graphique de la newsletter, vous pouvez demander à une agence interactive ou à un graphiste de le faire pour vous. Ce n’est généralement pas très cher et vous pouvez être sûr que le projet est bien fait – Bienvenue à la coopération (cliquez)
   2. Créer votre propre projet dans un logiciel de conception graphique – si vous avez travaillé avec un logiciel de conception graphique, vous pouvez essayer de créer votre propre projet en utilisant des outils professionnels comme Photoshop ou GIMP gratuit. Je vous recommande un tutoriel sur la création d’une lettre d’information type à l’aide de Photoshop (la vidéo est assez ancienne mais elle vous aide à acquérir les bases) – Création d’une lettre d’information dans Photoshop (ENG)

1. 1. Créer une conception de newsletter à l’aide des modèles préétablis de Canva – cette option est de loin la moins coûteuse et la plus facile que de créer votre propre conception graphique à partir de zéro dans des programmes de conception graphique. Canva est un outil de glisser-déposer qui vous permet de créer rapidement et facilement des graphiques à l’aide de modèles prêts à l’emploi.

Dans ce tutoriel, nous allons choisir l’option n° 3 et concevoir notre bulletin d’information à l’aide de l’application Web Canva. Sur le web, vous trouverez de nombreux tutoriels sur la façon de créer des graphiques dans cet outil populaire. Je vais essayer de montrer brièvement comment créer un exemple de newsletter sur la base duquel nous programmerons plus tard le code HTML de notre newsletter.

Comment créer une newsletter dans Canva ?

Tout d’abord, avant de créer une newsletter, vous devez lire les conditions d’utilisation de l’application. Canva dispose dans sa base de données d’un grand nombre d’images et de modèles prêts à l’emploi, sur lesquels peuvent figurer diverses marques ou images sur lesquelles des personnes sont visibles. L’utilisation de ces images peut entraîner certaines conséquences et une violation des droits d’auteur. Il vaut donc la peine de lire la licence Canva – License Agreements Canva et l’article Legal Canva Graphics (PL).
Après avoir lu les conditions d’utilisation de l’outil et créé un compte sur https://www.canva.com/, nous pouvons passer à la création de graphiques.

Sélection du modèle de newsletter Canva

Après s’être connecté sur la page d’accueil, il y a une barre pour sélectionner le modèle du graphique que nous voulons concevoir. Nous choisissons la catégorie Marketing et le modèle Bulletin électronique..

Cela nous amènera à la page de conception graphique. Sur le côté gauche, vous trouverez des modèles prêts à l’emploi pour le marketing par courriel dans différents secteurs. Vous pouvez choisir n’importe quel modèle et l’utiliser comme modèle d’e-mailing.

Nous choisissons un modèle gratuit qui nous convient le mieux et le modifions en conséquence en insérant notre propre contenu. N’oubliez pas de vous assurer que les images contenues dans le contenu du mailing ne violent pas les droits d’auteur et que nous avons le droit de placer ces images dans notre newsletter.

Les polices et la mise en page de notre bulletin d’information peuvent être modifiées comme vous le souhaitez. Canva est un outil intuitif, l’édition est donc très facile. Mais si vous ne savez pas comment commencer, je vous recommande un tutoriel vidéo décrivant comment utiliser la plupart des fonctionnalités – Comment utiliser Canva pour les débutants (ENG).

Construction du modèle de newsletter

Avec l’aide de Canva et une légère modification du modèle prêt à l’emploi (changement des couleurs, du contenu et des images), nous avons obtenu notre propre conception graphique de notre mailing. Canva n’est pas un outil idéal pour ce type de projets. Surtout dans la version gratuite, que nous avons utilisée dans ce cas. Outre l’aspect agréable de notre bulletin d’information, nous avons également quelques problèmes à résoudre :

1. 1. Le modèle de newsletter par courriel dans Canva est à double face – le modèle de marketing par courriel est en deux pages tandis que le mailing lui-même sera un seul graphique.
   2. L’absence de dimensions du projet – malheureusement Canva ne décrit pas la taille des éléments ou l’espacement entre eux en pixels.

Comme vous pouvez le constater, rien n’est parfait. La meilleure solution ici serait un programme professionnel qui vous permet de définir les dimensions des graphiques et la possibilité de vérifier en permanence des choses comme l’espacement entre les éléments ou la taille des éléments en pixels. Lorsque nous recevons une maquette d’un graphiste dans des programmes tels que Adobe XD ou Zeplin, nous avons un aperçu de tous les détails du projet, tels que les polices, les espaces et les dimensions, immédiatement après avoir survolé un élément donné.

Une maquette de projet professionnelle permet de créer plus rapidement un projet et d’accéder plus facilement aux détails des éléments graphiques.

Un modèle de mailing de deux pages créé avec Canva :

La newsletter compatible avec tous les clients de messagerie – est-ce possible ?
En créant une newsletter, nous voulons toucher le plus grand nombre de destinataires possible et les encourager à cliquer sur notre publicité. Si les graphiques que vous envoyez s’affichent d’une manière incompatible avec votre conception, vous risquez de perdre des clients potentiels. Il est important d’assurer la compatibilité avec toutes les boîtes aux lettres électroniques possibles.

Les boîtes aux lettres sont différentes et se comportent de manière différente. Le codage d’une newsletter n’est pas une chose simple en raison de la variété des exigences techniques du courrier électronique.  Chaque fournisseur de services de messagerie a des exigences différentes en matière de code HTML et CSS. Cela entraîne des problèmes d’affichage du contenu du mailing. Par exemple, l’affichage du fichier HTML contenant notre bulletin d’information dans un navigateur web ne reflète pas l’apparence du fichier livré à l’adresse électronique.

Notre message doit être testé de manière approfondie pour tous les clients de messagerie susceptibles d’être nos destinataires. Ce n’est qu’après l’envoi et la réception du message sur un compte de messagerie donné que nous saurons comment le client de messagerie l’interprète.

Sur Campaign Monitor nous avons une liste de styles CSS et de code HTML qui se comportent différemment selon les applications de messagerie populaires (navigateur web, application gmail, etc.). Il faut également mentionner que l’application est une chose, et le client de messagerie en est une autre (onet, wp, interia etc.). Dans les deux cas, il peut y avoir des exigences différentes pour le code HTML ou CSS.

Liste des CSS Support Campaign Monitor (cliquez).

Codage d’une newsletter responsive basée sur la conception graphique

J’ai plus ou moins décrit comment les boîtes aux lettres électroniques interprètent de différentes manières le code HTML et CSS fourni. Nous devons maintenant réfléchir à la manière de créer notre newsletter pour qu’elle s’affiche correctement dans toutes les boîtes aux lettres. Il est également important que cette solution soit réactive et s’affiche correctement sur toutes les résolutions.

Tableau – un ami de chaque newsletter

L’une des plus anciennes structures HTML, le tableau, nous aide. Les boîtes aux lettres et les applications de messagerie n’ont aucun problème pour interpréter les vues basées sur des tables.

Nous devons nous assurer que la structure du tableau est basée sur des largeurs basées sur %. Cela nous aidera à fournir à notre mailing une réactivité.

Il est également utile de se souvenir de la largeur maximale du contenu de la newsletter. Nous ne pouvons pas dépasser la largeur maximale de notre mailing, car le destinataire pourrait recevoir un contenu mal affiché. Une largeur de newsletter sûre serait jusqu’à 600px. Quel que soit le client de messagerie, la résolution d’écran ou la taille du moniteur du destinataire, la lettre d’information doit s’afficher correctement.

Code de démarrage de l’envoi – Plaque chauffante HTML pour la newsletter

Vous trouverez ci-dessous un exemple de code de démarrage pour notre envoi :

Création de tableaux et de styles pour un exemple de newsletter

La création de la structure du bulletin d’information et du style qui en découle est un processus plutôt fastidieux et long. Tous les changements qui auront lieu dans le code à partir du code de démarrage peuvent être trouvés à la fin de l’article dans le fichier téléchargeable. Vous pouvez l’utiliser et le modifier comme bon vous semble.

Lorsqu’il s’agit de créer des tableaux et des styles, il existe de nombreux tutoriels qui vous aident à comprendre comment cela fonctionne et comment écrire ce code. Je peux vous recommander deux tutoriels :

1. 1. Construire un modèle d’e-mail HTML de A à Z (ENG) – apprenez-en plus sur la création de tableaux dans votre newsletter
   2. Guide complet de l’élément tableau (ENG) – conseils, astuces et principes de base sur la création et le style des tableaux

Les polices de caractères dans le marketing par courriel

Les polices de caractères dans les courriers électroniques sont également un sujet fleuve. L’importation de polices entre les balises <head> du code HTML ne fonctionne généralement pas pour les mailings. Il en va de même pour l’importation avec le style @import et la tentative d’importation à l’intérieur de la balise <body>.

L’option la plus sûre consiste à utiliser des polices courantes qui devraient être disponibles sur chaque ordinateur, dans chaque navigateur et dans chaque boîte aux lettres électronique.

Nous choisissons la police la plus similaire à celle de notre projet. Nous vérifions la police dans Canva en cliquant sur l’inscription donnée.

Nos polices de caractères sont :

• • En-têtes : Glacial Indifference
  • Texte oblique : Libre Baskerville
  • Aparagraphes : Lato
  • Click To Action : Glacial Indifference

Maintenant, nous recherchons des polices similaires parmi les polices sûres :

1. Arial
2. Arial Black
3. Helvetica
4. Tahoma
5. Verdana
6. Impact
7. Times New Roman
8. Georgia
9. Courier New
10. Comic Sans

Il ne nous reste plus qu’à sélectionner une police par son apparence qui se rapproche le plus de la police de l’œuvre d’art. Nous n’aurons pas une reproduction exacte de la police mais nous pouvons nous rapprocher de l’aspect de la police à partir de la maquette.

Dans notre cas, les polices utilisées dans le modèle Canva préfabriqué utilisé pour créer notre conception graphique sont très spécifiques. Il sera difficile de reproduire les polices de caractères de la maquette. Si la conception graphique de la newsletter était réalisée par un graphiste professionnel, ce problème n’existerait pas. Le graphiste s’occupera de choisir les bonnes polices de caractères pour la conception de notre mailing.

Nous avons choisi les polices de caractères :

• • Arial – pour les titres et les CTA

• • Helvetica – pour les paragraphes

• • Times New Roman, italic – pour un texte en italique

Outre le choix de la police, son épaisseur, sa taille et son espacement sont également importants. Tout cela peut être trouvé dans le programme Canva dans notre conception graphique. Il suffit de sélectionner le texte et de vérifier ses valeurs.

Polices de caractères sélectionnées et différences :

Les différences sont minimes, mais vous pouvez voir que les textes sont différents et que cela affecte l’ensemble de l’esthétique du projet. Une différence particulière peut être observée dans les titres des bulletins d’information.

La newsletter responsive – comment faire

Le mailing réactif peut être très problématique pour un programmeur. Le publipostage peut être divisé en une vue pour les appareils plus grands (ordinateur de bureau, tablette) et pour les résolutions plus petites – smartphones. Cette division nécessite deux conceptions graphiques distinctes et plus de travail.

La réactivité ne signifie pas que le courrier doit être divisé en deux vues distinctes. Cela signifie qu’il doit être agréable à regarder sur tous les types d’appareils. Il est connu que plus les polices de caractères sont lisibles, plus les graphiques sont grands et plus la vue est adaptée à l’affichage, meilleure sera l’impression des destinataires.

Dans le cas du mailing utilisé dans ce tutoriel, nous n’avons pas créé de deuxième vue pour les appareils mobiles. Nous n’avons créé qu’une seule vue primaire qui sera adaptée aux petits appareils. Cela signifie que la visibilité des sous-titres et des images sera un peu plus faible en vue mobile.

media queries – programmation pour une largeur d’écran donnée

Le code CSS nous permet de personnaliser l’aspect de notre bulletin d’information en adaptant le code à la largeur de l’écran à l’aide de ce que l’on appelle les « media queries ».

Malheureusement, dans le cas du mailing, les media queries ne sont pas toujours prises en charge. Certaines applications de messagerie ne lisent malheureusement pas le code media queries et il n’est pas possible d’utiliser cette fonction. Par exemple, la prise en charge des requêtes média ne fonctionne pas pour Outlook (Outlook 2007-2019, outlook.com).

Malgré cela, la plupart des clients de messagerie devraient lire le code media query et nous permettre de « rafraîchir » l’apparence de notre newsletter pour les appareils mobiles. Comment faire ?

C’est facile ! Il suffit d’écrire un code qui vérifiera si un appareil donné a une largeur d’écran supérieure ou inférieure à la largeur indiquée et d’appliquer le code CSS en fonction de cette condition. Exemple :

L’exemple de code ne fonctionnera que pour les appareils dont la largeur est inférieure ou égale à 600px. Si le périphérique est conforme à notre condition, la classe .small-devices-table définira une largeur de 300px pour l’élément.

Il existe de nombreux tutoriels sur la façon d’utiliser les requêtes médias, et je vous recommande vivement de vous familiariser avec ce sujet, car il s’agit d’un outil essentiel pour construire des vues repsonsive.

Comment tester et envoyer une newsletter

Tant pour les tests que pour une utilisation commerciale ultérieure, je recommande deux sites:

• • GetResponse – Service polonais s’occupant de l’envoi de mailings et prenant en charge tous les détails liés au marketing par email. Je l’ai moi-même testé et utilisé à de nombreuses reprises. Je le recommande vivement en raison de son utilisation facile et agréable et de ses excellentes performances.
  • Campaign Monitor – également un excellent service qui mérite d’être recommandé et qui traite du marketing par courriel.

Les pages suivantes suffiront :

• • Créer un compte,

• • Créer votre liste de diffusion,

• • Télécharger le code de votre newsletter,

• • Ajouter des images pertinentes,

• • envoyer à la liste de diffusion créée précédemment,

Modèle de newsletter prêt à l’emploi à télécharger gratuitement!

Si vous êtes curieux de savoir comment s’est déroulée notre newsletter, tant en termes de conception que de fonctionnalité – voir notre newsletter (cliquez).

Vous pouvez également télécharger le code source de notre newsletter, que vous pouvez modifier et utiliser comme bon vous semble. Vous pouvez modifier le contenu et les images et envoyer une newsletter à vos clients.

Code de la lettre d’information ! (cliquez).

Summary

La création d’un bulletin d’information est une tâche à forte intensité de main-d’œuvre qui nécessite de nombreuses connaissances techniques. Le gros problème n’était pas tant le codage que la conception graphique de la newsletter. Il est important de disposer d’une base solide pour créer un mailing. Si vous n’avez jamais eu affaire à la création de mailings et de graphiques auparavant et que vous envisagez de faire du marketing par courriel, je vous recommande de vous tourner vers des professionnels. Notre équipe de programmeurs et de graphistes vous fera oublier les soucis liés à un code qui ne fonctionne pas ou à un affichage incorrect. Nous préparerons un projet adapté aux besoins de votre publicité.

Nous vous invitons à la coopération ! (cliquez).