Comment créer un modèle d'e-mail avec HTML et CSS ?

En tant que concepteurs et développeurs, un jour, votre client vous demandera un modèle d'e-mail pour sa newsletter. Je dois dire que les modèles d'e-mails ne sont pas si excitants simplement parce qu'il y a un grand écart dans la prise en charge du HTML et du CSS. Vous pensez qu'à l'ère d'aujourd'hui, ce ne serait pas le cas, car nous allons de l'avant avec HTML5 et CSS3. Cependant, je suis triste de dire que lorsqu'il s'agit de rendre des e-mails, ce n'est de loin pas le cas.

La première chose à garder à l'esprit lors de la création d'un modèle d'e-mail HTML est le fait que tous les styles CSS doivent être effectués en ligne. Dans tous les autres cas, c'est un très grand non-non. Mais, comme il y a très peu de support pour le CSS externe et même le CSS dans la tête, l'inline est le moyen de le faire. De plus - et je suis sûr que vous en avez déjà entendu parler - le modèle doit être créé avec des TABLES, pas des DIV. Encore une fois, c'est malheureux, mais c'est la voie à suivre. Étant donné que les e-mails ne sont pas si volumineux dans l'ensemble, les concevoir et les créer n'est pas difficile - c'est juste ennuyeux par rapport à la conception Web ou mobile.

La conception

 Recommandé pour vous : Comment accélérer votre processus de conception à l'aide de frameworks CSS modernes ?

La structure

Dans le corps de la page HTML, collez le code ci-dessous. En regardant simplement le code, vous pouvez voir qu'il n'y a pas grand-chose dans la structure de cet e-mail. C'est en fait une très bonne chose car les e-mails ne doivent jamais être complexes. Jusqu'à présent, il existe également une infime quantité de style uniquement celle qui spécifie la largeur totale du tableau et qu'il n'y a rien entre les cellules du tableau.

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

Le style

Bon, maintenant nous allons ajouter du CSS dans le contenu du document. Ce n'est rien d'extraordinaire, juste une réinitialisation et une définition de couleur et de style de lien. Je serais très prudent avec le CSS que vous mettez ici car il est souvent ignoré par les clients de messagerie.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

Le contenu

Le temps est venu de remplir les tableaux de contenu. Vous pouvez trouver les images dans le fichier fourni ci-dessus - au début de ce didacticiel. Vous devez maintenant remplir tout le texte et les images qui doivent figurer dans cet e-mail. Veuillez noter que dans le didacticiel, vous n'avez pas besoin de lier les hyperliens à quoi que ce soit et vous êtes également libre d'utiliser vos propres images. Jusqu'à présent dans le code, j'ai défini la largeur des trois images juste pour m'assurer que leur taille est définie.

Il y a quelque chose dont j'ai besoin que vous soyez extrêmement conscient : les images sont idéales pour les e-mails tant qu'elles sont a : de petite taille et b : ont une balise alt qui les décrit bien. Je suis sûr que vous savez que pour que les images apparaissent dans un e-mail, le destinataire de cet e-mail doit autoriser les images à apparaître. S'ils ne le font pas, rien ne leur dit à quoi ils doivent s'attendre. C'est aussi un problème d'accessibilité si vous ne fournissez pas de description pour les utilisateurs aveugles. Cependant, c'est une autre histoire. Donc, la leçon est la suivante : utilisez toujours une petite image avec une balise alt !

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

Le style en ligne

La toute dernière chose que nous ferons est de fournir le style CSS en ligne pour ce modèle d'e-mail HTML. C'est ce qui fait l'apparence de l'e-mail, comme vous pouvez le voir jusqu'à présent, cet e-mail n'a pas du tout été beau. Je vais diviser cette partie en petits morceaux afin qu'elle ne devienne pas trop écrasante.

 Vous pourriez également aimer : 7 conseils utiles pour rendre votre ligne d'objet de courrier électronique plus cliquable.

Corps

Tout d'abord, définissons la couleur d'arrière-plan de toute la page d'e-mail ainsi que la taille et la couleur de police par défaut.

 <body bgcolor="#f7d973" ></body>

Tableau

La prochaine chose à faire est de centrer le contenu de l'e-mail et de lui fournir sa propre couleur d'arrière-plan afin qu'elle se démarque.

Première ligne – En-tête

Il se passe beaucoup de choses dans la cellule du premier rang. Veuillez noter que le style en ligne est sur le <td> et non sur le <tr>. Ce que nous faisons ici est une nouvelle couleur de fond pour correspondre à celle du logo. De plus, il y a aussi du rembourrage et de l'alignement. Maintenant, je change la couleur du texte en blanc car le texte alternatif sera noir par défaut. Vous ne pourrez pas le voir sur ce fond, donc je m'assure que vous le pouvez en changeant la couleur du texte. Cela peut vous sembler inutile, mais comme je l'ai dit, c'est très crucial pour les personnes qui n'ont pas d'images autorisées par défaut.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

Deuxième rang

Dans la ligne, il n'y a, encore une fois, qu'une seule cellule qui s'étend sur deux colonnes. Cette cellule est légèrement manipulée en y ajoutant un rembourrage et une ligne de séparation en bas pour séparer son contenu de la ligne ci-dessous. Nous avons aussi un gros titre qui prend de la place dans les marges. Et c'est tout pour cette rangée.

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Troisième rangée

Pour les deux cellules ici, nous définissons à la fois la largeur et le rembourrage. Ils sont exactement les mêmes, de sorte que les cellules sont divisées uniformément en deux. En plus de cela, il n'y a rien d'autre car les cellules sont remplies d'une image et d'un texte à ce sujet.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Quatrième rangée

Il s'agit de loin de la section la plus stylisée de ce modèle d'e-mail HTML. Comme vous pouvez le voir par le code ci-dessous, il se passe beaucoup de choses. Tout d'abord, toute la ligne reçoit une nouvelle couleur d'arrière-plan et une nouvelle couleur de texte pour s'assurer que le texte est visible, tout comme dans l'en-tête. Les première et deuxième cellules et leur contenu reçoivent exactement les mêmes changements de style. Tout d'abord, la cellule elle-même reçoit un nouveau fond et une nouvelle couleur de texte. Ensuite, le lien dans son en-tête est changé en jaune. Enfin, le dernier paragraphe est souligné et pour ajouter une certaine séparation, une marge est également ajoutée. Comme je l'ai dit, la deuxième cellule et son contenu reçoivent exactement la même stylisation.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 Et enfin, le pied de page. Il se passe très peu de choses ici; juste un peu d'espacement via le rembourrage et c'est tout !






<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Derniers mots

Ce didacticiel est un peu long, mais j'espère que vous comprenez maintenant ce qu'il faut pour créer un modèle d'e-mail HTML à partir de zéro. Ce n'est pas un concept compliqué mais cela peut être fastidieux. Maintenant, c'est à votre tour de sortir et de commencer à créer des e-mails incroyables et haut de gamme ! Vous pouvez combiner plusieurs techniques de création d'un modèle d'e-mail pour le rendre plus unique.
Cet article est écrit par Hannah Butler. Elle travaille comme développeur web et designer. D'ailleurs, elle aime partager son expérience sous forme d'articles. Dans ce cas, elle a sa propre section sur le site WriteMyPaper4Me.co. À l'avenir, elle va commencer à écrire un blog afin de décrire ses méthodes de travail aux autres.