Construire un Modèle HTML d’Email Soi-Même

La meilleure manière de comprendre son fonctionnement est de le réaliser soi-même en partant de rien. Aujourd’hui, nous allons réaliser le design d’un email, en construisant son modèle HTML à partir de zéro.

La meilleure manière de comprendre son fonctionnement est de le réaliser soi-même en partant de rien. Aujourd’hui, nous allons réaliser le design d’un email, en construisant son modèle HTML à partir de zéro.

Pour démarrer

Pour commencer, il convient de mentionner où j’ai obtenu mes sources.

• Les merveilleuses icones 2D sont de Pierre Borodin obtenus sur Dribbble
• Les caractères sont Oil Can, Source Sans Pro et Mission Script
• Les icones de réseaux sociaux sont Metrize Icons

Maintenant, comme nous en avons discuté dans le précédent tutoriel, vous avez besoin de commencer votre email HTML par un doctype XHTML :

De cette façon, nous pouvons commencer à construire le reste de la structure.

Création du contenu et du tableau principal

Premièrement, nous allons ajouter une structure globale pour notre e-mail, en commençant par la balise . Nous allons mettre un “margin” et un “padding” à zéro sur la balise body pour ne pas avoir des espaces indésirables.

Nous allons aussi ajouter un tableau avec une largeur de 100%. Cela agit comme un véritable “body” pour notre email, parce qu’appliquer du style sur la balise body n’est pas entièrement supporté. Si vous voulez ajouter une couleur de fond au ‘body’ de votre email, vous aurez besoin d’ajouter cela à ce tableau principal.

Définissez votre “cellpadding” et “cellspacing” à zéro pour ne pas avoir des espaces indésirables.

Note: Nous allons laisser border="1" sur tous nos tableaux, afin que nous puissions voir le squelette de notre “layout” au fur et à mesure. Nous les supprimerons à la fin avec un simple Rechercher & Remplacer.

Hello!

Si un attribut existe en HTML, utilisez le à la place du CSS

Maintenant placez un tableau centré de 600 pixels de large à l’intérieur de la table conteneur. 600 pixels est une largeur maximale de sécurité pour vos emails afin de l’afficher confortablement dans la plupart des bureaux et clients webmail avec la plupart des résolutions d’écrans.

Mettre cette largeur en utilisant de l’HTML au lieu du CSS, avec l’utilisation de l’attribut width. La règle d’or en developement d’email HTML est : si un attribut existe en HTML, utilise le à la place du CSS.

Nous allons remplacer notre petit bonjour ‘Hello!’ par ce tableau:

Hello!

Nous allons aussi ajouter un style avec une propriété “inline” qui mettra la propriété border-collapse en collapse. Si vous ne faites pas cela, les versions les plus récentes de Outlook ajouteront un petit espace entre votre tableau et votre bordure.

Création de la structure et de l’en-tête

Dans notre design nous pouvons voir que cet email est divisé en 3 sections logiques, donc nous allons créer une ligne pour chacun.

Dupliquons la première rangée que nous avons déjà créée, en effet il nous en faut 3 au total. J’ai changé le texte à l’intérieur de chaque rangée afin de les identifier facilement.

Row 1

Row 2

Row 3

Maintenant nous allons mettre de la couleur dans chacune selon le design. Comme bgcolor est un attribut HTML valide, nous allons l’utiliser pour appliquer la couleur de fond à la place du CSS. Rappelez vous de toujours utiliser les six caractères de votre code hexadécimal, puisque le code sur 3 caractères ne fonctionne pas tout le temps.

Row 1

Row 2

Row 3

Ok, sur la prochaine partie nous allons porter l’attention sur la rangée 1. Nous allons ajuster le “padding” dans la cellule et ensuite insérer notre image.

Utilisation du Padding

Quand vous utilisez le padding dans un email, vous devez toujours spécifier chaque valeur indépendamment (top, right, bottom et left) autrement vous pouvez avoir des résultats imprévisibles. Je trouve qu’il est acceptable d’utiliser la sténographie, i.e. padding: 10px 10px 8px 5px;, mais si vous avez un problème vous pouvez choisir de l’écrire dans sa version longue, i.e. padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;.

Si vous avez des problèmes encore plus grand avec le “padding” (par exemple, si votre plateforme d’envoi casse votre CSS), ne l’utilisez pas du tout. Utilisez simplement des cellules vides pour créer des espaces. Il n’y a pas besoin d’utiliser des GIF d’espacement, juste faites attention d’ajouter style="line-height: 0; font-size: 0;" à votre cellule, placez un   à l’intérieur et donnez lui une hauteur ou largeur implicite. Comme cet exemple:

Notez aussi qu’il est sûre d’utiliser les “padding” sur les balises TD mais pas sur les balises P ou DIV. Elles se comportent beaucoup de manière imprévisible.

Donc, nous allons utiliser de la CSS “inline” pour ajouter du “padding” à la cellule. Ensuite nous insèrerons notre image, en ajoutant le texte alt et style="display:block;" qui est une solution pour ne pas ajouter des anomalies sous l’image dans certains clients email. Nous allons centrer l’image en ajoutant align="center" à votre balise td. Nous allons aussi ajouter une balise alt qui est important quand votre email est initialement chargé qui, dans la plupart des cas, le sera avec images désactivées.

Note: Si le contenu de votre en-tête est réellement important dans votre message, n’utilisez pas un en-tête avec image-only. Rappelez vous, les images sont bloquées par défaut dans la plupart des clients, donc s’il y a un aspect de votre email qui est primordial, ne jamais l’inclure sous forme d’image. Dans cet exemple, cependant, mon en-tête est assez superflu.

Création de la zone de contenu

D’abord, nous allons ajouter un “padding” à la cellule du milieu ainsi l’intérieur du tableau aura de l’espace autour, selon notre design.

Maintenant nous allons ajouter un tableau avec 3 rangées pour votre contenu principal — 1 pour le titre, 1 pour le texte d’introduction, et 1 pour la rangée avec 2 colonnes. Nous allons définir la largeur du tableau à 100% plutôt que d’utiliser une valeur en pixel parce que cela nous aidera un peu plus loin si nous voulons faire un email “responsive”. Si vous avez toujours une largeur en pixel sur les balises, vous allez finir avec beaucoup de valeur à surcharger dans les “media queries”. Si la largeur de vos tableaux imbriqués sont basés sur un pourcentage, alors quand vous ajustez la largeur de l’élément parent, tout s’adaptera correctement.

Maintenant nous allons ajouter notre contenu, et ajouter un padding à la cellule du milieu.

Lorem ipsum dolor sit amet!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

Row 3

Maintenant nous allons ajouter nos 2 colonnes de contenu à la rangée 3. Parce que nous voulons un ‘margin’ entre ces 2 cellules, mais le margin n’est pas supporté, nous allons créer un tableau à 3 colonnes avec une cellule vide entre les 2 colonnes extérieures.

Autant que possible le mettre en pourcentage, quand vous avez un contenu qui a une taille spécifique, cela peut être une astuce de la convertir en pourcentage (dans cet exemple, la colonne serait de 48.1% qui pourrait devenir confus). Pour cette raison, comme nos 2 images font 260px de large, nous créerons des colonnes qui ont aussi 260px de large, avec un margin de 20px dans la cellule du milieu. (Cela fera un total de 540px, qui est la largeur de 600px de notre tableau moins le padding de 30px de chaque côté.) Soyez sure de mettre à zéro votre taille de police (font-size) et la hauteur de ligne (line-height) et un caractère espace non sécable   dans la marge de la cellule.

Nous allons aussi mettre l’attribut valign à "top" pour les 2 cellules ainsi elles seront alignées vers le haut, même si une colonne a plus de texte que les autres. L’alignement vertical par défaut est "middle".

Column 1

Column 2

Maintenant allons ajouter nos images et contenu dans ces colonnes. Comme nous avons besoin de plusieurs rangées, nous allons imbriqué un autre tableau parce que nous ne pouvons pas utiliser les attributs colspan ou rowspan. Nous allons aussi ajouter du padding entre les images et le copier dans chaque colonne.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

Nous venons de mettre une largeur aux images en utilisant de l’HTML à 100% de la largeur de la colonne. Cela, encore, est nécessaire si nous voulons que cette email soit responsive, nous devons seulement utiliser media queries pour changer la largeur de l’élément parent. Nous devons surcharger la hauteur en pixels parce que utiliser style="height: auto" ne fonctionne pas partout (toux toux, Outlook). Donc nous utiliserons le pixel. Cela signifie que nous devrons mettre  height: auto!important sur ces images en utilisant les media queries afin de surcharger la valeur en pixel, mais nous pourrions aussi faire cela avec une simple classe. Comme nous mettons la largeur en percentage, nous n’aurons pas besoin de la surcharger. Moins de chose sont à surcharger, meilleur c’est.

Le pied de page

Maintenant nous allons ajouter notre padding à la rangée pied de page.

A l’intérieur de la cellule, nous allons imbriqué un autre tableau pour avoir nos 2 colonnes.

Column 1

Column 2

Nous allons créer un autre petit tableau pour vos icones de réseaux sociaux. Nous allons mettre la cellule parente à align="right". Soyez certain d’avoir mis border="0" sur les liens d’images (pour éviter la bordure du lien en bleu) et ne pas oublier display:block.

Maintenant nous allons ajouter notre texte et ajouter une largeur à nos cellules, juste pour être sure, même s’il y a beaucoup d’espace blanc entre eux. Nous allons mettre cette cellule à 75% et l’autre à 25%.

Et voilà nous l’avons fait! Votre layout est terminé.

Validation

Lancez un test sur le validateur W3C pour être sûre que rien n’est mauvais ou cassé. Si vous avez suivi le tutoriel dans son intégralité, il vous dira que tout est OK.

Ensuite nous allons lancer un test avec Litmus pour être sure que la structure de votre email fonctionne parfaitement. Ci dessous un exemple de test:

Mettre du style sur votre texte

Votre première rangée est le titre. Nous utiliserons la balise pour créer un texte gras parce que, comme vous le savais déjà, si cela existe en HTML, nous l’utiliserons à la place du CSS.

Nous allons ajouter le style inline suivant à toutes les autres cellules de texte:

Ensuite nous avons besoin d’appliquer du style sur le texte du pied de page, et nous aurons aussi besoin d’arranger votre lien de désinscription. Nous allons mettre du style sur le texte de votre lien de désinscription en utilisant le CSS et la balise HTML . Ce couple est le meilleur moyen pour s’assurer que vos liens ne s’affichent jamais avec un contour bleu par défaut.

Et voilà nous l’avons fait! Tout est prêt. C’est le moment d’enlever les bordures et voir le beau résultat. Remplacez chaque occurrence de border="1" par border="0".

A ce stade, il semble un peu triste flottant dans le vide, donc allez au dessus de votre premier tableau de largeur 600px et ajoutez:

Maintenant il ne ressemble plus à cela, il ne semble plus flotter. Comme une touche finale, je vais ajouter 30px de padding en bas de chaque première cellule, pour prévenir vos email de s’arrêter brutalement en bas des clients emails (comme Apple Mail), et 10px de padding en haut, donc votre entête bleu aura un peu de marge de manœuvre.