TUTORIEL

Comment écrire le code HTML d’une newsletter pour Outlook et d’autres clients de messagerie ?

Dans ce billet, j’aimerais vous montrer comment j’ai créé un code HTML de newsletter qui s’affichera correctement dans tous les clients de messagerie, y compris Outlook. Grâce à ce tutoriel, vous serez en mesure d’écrire vous-même n’importe quel modèle HTML pour le contenu de votre mailing.

Dans l’article précédent, j’ai décrit le fonctionnement du mailing d’un point de vue technique et j’ai montré comment créer la conception graphique de la newsletter. Je vous invite à le lire :

Comment créer une newsletter responsive pour tous les clients de messagerie ? (cliquez)

Comment écrire le code HTML d’une newsletter pour Outlook ?

Créer du code sous Newsletter n’est pas facile et j’en ai parlé dans un article précédent. La plupart des clients de messagerie évoluent avec le temps et mettent à jour leur logiciel de messagerie pour lire correctement les messages HTML d’aujourd’hui. Malheureusement, tout le monde ne suit pas l’évolution du temps et ne met pas à jour son logiciel avec les nouvelles tendances HTML ou CSS. Microsoft et son application Outlook s’avèrent problématiques.

Outlook a le plus grand mal à lire de nombreux styles CSS populaires (par exemple, border-radius, bords arrondis) et des structures comme les div. Certes, elle lit la balise <div>, mais elle ne fonctionne pas bien avec cette structure et il y a souvent des problèmes. De plus, certaines choses fonctionneront sur une version d’outlook sur une autre et cela dépend de la version de l’application. Cela impose au programmeur beaucoup de travail supplémentaire lors de l’écriture du code et de son test. Alors comment le créer correctement ?

Le meilleur moyen est de faire des tests à la volée. Nous ne sommes pas en mesure de vérifier chaque fonctionnalité, code, style s’ils sont supportés ou non par l’application. C’est pourquoi il est préférable d’envoyer des éléments prêts à l’emploi à la volée pendant la création de la vue de la newsletter et de vérifier comment ils s’affichent dans les différents clients de messagerie. Un bulletin d’information envoyé à des applications de messagerie peut avoir une apparence complètement différente de celle qu’il a lorsqu’il est consulté dans un navigateur. Ce n’est qu’après l’envoi du message que l’on découvre à quoi ressemble la lettre d’information en tant que message électronique dans un courrier et une application donnés.

Le bulletin d’information doit être rédigé de manière simple, de préférence à l’aide de tableaux, les styles doivent être peu développés et les fonctionnalités de base doivent être utilisées. Cela nous permettra de nous rapprocher de l’aspect correct sur la plupart des clients de messagerie.

Tableau en HTML – qu’est-ce que c’est et comment l’utiliser ?
Une table en HTML est une structure qui nous permet de positionner du contenu dans la vue. Comme pour tout tableau, nous devons traiter les lignes et les colonnes. À l’intérieur du tableau, nous pouvons disposer les éléments en position horizontale et verticale.

Pourquoi utiliser un tableau pour les newsletters ?

Le positionnement du contenu dans la vue à l’aide de tableaux nous donne la garantie que chaque navigateur, application ou appareil le lira correctement. Dans le cas des vues basées sur la structure div, la situation se présente différemment en cas de mailing. Nous pouvons nous risquer à utiliser des divs dans le cas d’une lettre d’information et la plupart des clients de messagerie liront cette structure, mais lorsqu’il s’agit de styles écrits pour des divs, ils risquent malheureusement de ne pas fonctionner correctement.

Les tentatives de création de mises en page utilisant des divs se sont soldées par des mises en page plantées dans le cas des boîtes aux lettres Microsoft (outlook).

Comment utiliser les tableaux ? 

C’est très simple. Il est vrai que cela prend beaucoup plus de temps que d’utiliser les balises div ordinaires, car au lieu d’une <div></div> nous devons utiliser 3 balises :

    1. <table></table> – la balise table est une balise de tableau et doit avoir des lignes et des colonnes à l’intérieur,
    2. <tr></tr> – une ligne de tableau,
    3. <td></td> – colonne du tableau.

Bien sûr, au-delà de cette simple mise en page, il existe de nombreuses autres balises ou valeurs de tableau que nous pourrions utiliser. Il s’agit de balises telles que <thead> correspondant à l’en-tête du tableau ou <tfoot> correspondant au pied du tableau. En outre, il existe des fonctions telles que la fusion des colonnes, etc. etc. Mais la question est de savoir si nous avons besoin de tout cela. Pas nécessairement. La plupart des vues peuvent être créées en utilisant une construction simple de tables imbriquées.

Qu’est-ce que les tableaux imbriqués ?

Nous créons une table imbriquée à l’intérieur de la table principale qui correspond aux éléments suivants de notre vue (si nécessaire, bien sûr).

CSS conditionnel Outlook – affichage uniquement dans Outlook

Il arrive parfois que notre newsletter s’affiche correctement sur tous les types de clients de messagerie, mais que certains éléments soient impossibles à convertir pour les applications Outlook. Nous pouvons alors utiliser une condition pour ajouter un élément ou un style uniquement pour le client Outlook.

Exemple de la condition :

Dans cette condition, nous voyons comment fonctionne le CSS conditionnel d’Outlook. Nous vérifions d’abord si le client actuel est un client Outlook – [if mso]. Si oui, nous ajoutons un tableau dans lequel nous pouvons mettre le contenu affiché uniquement pour Outlook.

On peut faire de même avec le style, qui ne peut s’appliquer qu’à Outlook :

Assez de théorie, passons à la pratique 🙂

Création de code HTML adapté à l’emailing

Dans un post précédent, nous avons créé un design graphique et écrit le code d’une newsletter. Il est maintenant temps de voir comment nous avons créé ce code. Pour mémoire, je vais insérer la forme de notre bulletin d’information prêt à l’emploi :
Jak napisać kod HTML newslettera pod Outlook i innych klientów poczty?

Structure de la conception de la newsletter

Les courriers électroniques se développent de plus en plus et la technologie qu’ils contiennent est donc de plus en plus à jour. Grâce à cela, nous pouvons utiliser une structure HTML appropriée dans les messages. Auparavant, les boîtes aux lettres coupaient automatiquement la section d’en-tête et vous deviez utiliser des styles inline pour styliser les éléments. Aujourd’hui, nous pouvons facilement utiliser la structure html avec le corps de l’en-tête et les styles de l’en-tête.

Je colle la structure du projet de newsletter vide, que j’ai déjà montré dans le précédent article :

Comme vous pouvez le constater, il s’agit d’un modèle de base pour le HTML et il n’y a pas de surprise ici. Il y a un DOCTYPE spécifié, nous avons une balise html, à l’intérieur d’une section head avec des balises méta, un titre et un style. À l’intérieur de cette balise se trouve la balise body dont les marges et le padding sont réinitialisés. Ensuite, nous avons une balise de centre pour centrer notre vue de la table principale.

La largeur du tableau principal est fixée de façon permanente à 600px. Les valeurs de bordure, de cellpadding et de cellspacing ont été réinitialisées afin de l’afficher correctement (dans certains cas, certaines valeurs pour ces attributs sont définies à l’avance et il est bon de les mettre à 0 et de définir une autre valeur si nécessaire).

Créer l’en-tête de la newsletter

Notre newsletter se compose d’un en-tête principal à côté duquel se trouve un logo sur le côté droit. En dessous, il y a 4 onglets qui renvoient aux pages correspondantes de notre site redo-interactive.com. Le code de l’en-tête est le suivant :

Nous créons deux tableaux distincts pour l’en-tête principal et les onglets. Nous avons réglé les tableaux pour qu’ils aient une largeur de 500px. Ensuite, dans inline-styles, nous ajoutons margin : auto pour que les marges s’ajustent automatiquement et affichent les tableaux au milieu du tableau principal. Nous ajoutons également un rembourrage approprié à nos tableaux.

Dans la table d’en-tête, nous créons deux colonnes, l’une pour l’en-tête et l’autre pour le logo. Nous lions l’en-tête et le logo à la page principale en ajoutant la balise <a href=”” target=”_blank”>. Dans le cas de l’en-tête principal, nous donnons à l’en-tête la valeur h1 la plus élevée. Plus tard, nous l’affinerons pour qu’elle soit aussi proche que possible de la vue de la maquette. Nous insérons l’image du logo dans la balise <img src=””/>  et définissons la hauteur de l’image que nous voulons obtenir et la largeur sur auto fit.

Un autre tableau de signets est divisé en 4 colonnes <td> et dans chaque colonne nous donnons nos signets comme h3 et les lions avec la balise <a>. En outre, nous devons définir la position d’affichage du texte. La colonne de gauche doit coller au bord gauche. La colonne de droite à droite, et la colonne du milieu au centre. La largeur des colonnes est réglée sur auto pour s’adapter au texte.

Section image

La section contenant l’image principale de notre bulletin d’information comporte une bordure supérieure qui sépare l’en-tête du reste du contenu. En dehors de cela, nous devons juste ajouter un rembourrage approprié et lier l’image.

Contenu principal – invitation à la coopération

C’est l’heure du texte. Nous laisserons le style du texte pour la fin, où je vous montrerai comment j’ai ajouté des styles pour les titres et autres textes de la newsletter. Le contenu lui-même est ajouté de la même manière que les sections avec l’en-tête principal et l’image. En d’autres termes, nous créons des tableaux et insérons le contenu en conséquence et établissons des liens vers les pages pertinentes.

Dans les colonnes appropriées, nous centrons le texte à l’aide de text-align : center et définissons le remplissage approprié.

De plus, la classe italique est apparue. Cette classe est responsable du texte en italique et se trouve dans les styles de la section head. Il sera ajouté aux textes en italique dans notre newsletter.

Nous ajoutons également la classe cta-btn à la balise <a> correspondant au bouton Contact de notre newsletter. La classe cta-btn va osculter notre lien sous la forme d’un bouton.

Section publicité avec images

La section suivante est un peu plus élaborée. Il contient des images et du texte qui changent de position en deux lignes. Cette section comporte également une bordure supérieure qui la sépare.

Nous créons le tableau principal de notre section et ajoutons deux lignes. Dans chaque ligne, nous ajoutons deux colonnes définies à 50 % de la largeur du tableau principal. En outre, nous donnons du rembourrage pour chaque colonne afin qu’elles ne se touchent pas et ne collent pas au bord.

Dans la première ligne du tableau, dans la première colonne, nous ajoutons une image avec un lien sous la forme d’un carré de 265x265px. Une image de mêmes dimensions est ajoutée dans la deuxième ligne de la deuxième colonne.

Dans la deuxième colonne de la première ligne, nous ajoutons un autre tableau où se trouvera le contenu publicitaire. La même chose est ajoutée dans la première colonne de la deuxième ligne.

Le contenu publicitaire selon la ligne est positionné à droite ou à gauche en utilisant text-align : left, text-align : right.

Edresse de la newsletter

Passons au pied de page de notre newsletter. Elle n’est pas très étendue, il sera donc facile de créer cette vue.

Nous allons créer deux tables. Le premier tableau contiendra trois colonnes centrées avec les images permettant d’envoyer l’e-mail en utilisant le lien approprié pour envoyer l’e-mail à l’adresse donnée : <a href=”mailto:mail@example.com”> et à la page facebook et redo-interactive.  De plus, nous ajoutons une bordure séparant le haut et le bas du tableau.

Le deuxième tableau contiendra une colonne avec du texte dans l’en-tête h4.

Style personnalisé pour Outlook et autres bulletins d’information par courriel

Comment écrire un style personnalisé pour l’envoi d’un courriel ? Tout d’abord, vous devez utiliser des styles simples. Ceux qui sont là depuis un moment. N’utilisez pas de nouvelles fonctionnalités telles que le flexbox ou la grille. Si nous avons des doutes sur le fait que le style fonctionnera avec Outlook ou d’autres clients, nous devons le vérifier sur la liste de support, par exemple ici : Support CSS pour les clients de messagerie de mailchimp.

Je ne discuterai pas des styles que j’ai écrits. Il s’agit de styles de base pour le texte, qui s’afficheront certainement sur tous les clients de messagerie.

La lettre d’information pour Outlook et autres applications de messagerie – télécharger le code prêt

Nous avons ainsi rédigé une newsletter adaptée à toutes les applications de messagerie. Comme vous pouvez le constater, il est important que la présentation de notre bulletin d’information ne soit pas trop compliquée, mais qu’elle reste esthétique et que son contenu soit suffisamment intéressant pour encourager nos destinataires. Si nous compliquons excessivement l’aspect du bulletin d’information, il peut être extrêmement difficile de reproduire le design sur tous les clients de messagerie.

Voir notre newsletter (cliquez).

GAGNEZ LE CODE DE LA NEWSLETTER ! (cliquez).