Comment nous l’avons fait : Coder les nouveaux modèles d’e-mail de Tuts+

French (Français) translation by Henri Lotin (you can also view the original English article)

Les courriels de Tuts+ (newsletters, recueils, etc.) ont récemment subits une refonte complète, incluant de nouveaux designs et une nouvelle plate-forme. Cette étude de cas vous expliquera comment je les ai codés en HTML et CSS, en me basant sur les designs de la première partie de cette série.

Coup d’envoi

Lorsque le moment est venu de commencer à construire les nouveaux templates d'email de Tuts+, j’ai été assez chanceuse d'être tout à fait familières avec les designs. Au cours de la phase de design, Ian m'avait incluse dans les décisions importantes et m’a posé beaucoup de questions pour s’assurer que nous éviterions tout piège classique concernant les emails. Ce processus a été une excellente base pour moi et j’étais prête à y plonger directement dès que les designs étaient terminés.

Ian m’a envoyé les designs, un aperçu de la mise en pages, un guide pour la présentation de la grille et un guide de style avec toutes les tailles de police nécessaires et les couleurs. J’étais prête à commencer.

Création d’un plan d’attaque

Ma première étape est toujours d'esquisser. Cela vise à identifier tous les modules distincts, en ignorant les différences cosmétiques mineures. Ce procédé me donne un ensemble définitif de modules clés pour construire, de telle sorte que je peux travailler un module à la fois pour mettre en place la structure primaire.

Après les avoir identifié, dans de nombreux cas, je les construirais tous sur une seule page avant de les séparer à un stade ultérieur, mais les mises en page sont assez difficiles à évaluer dans cet état. Au lieu de cela, j’ai développé chaque mise en pages d'après les designs afin qu’ils puissent être examinés et approuvés plus facilement.

En me référant à mon résumé esquissé des modules, j’ai pu garder à l’esprit quand un module pouvait être réutilisable dans plusieurs modèles, et je l'ai généré en conséquence. Plus tard, je mettrais en place des classes sur le corps de chaque variante, comme var-admin et var-digest, me permettant de créer des styles spécifiques à chaque mise en pages particulière.

Début du codage

J’ai commencé en mettant en place certaines variables LESS pour les éléments pour lesquels je savais devoir utiliser encore et encore, comme les mesures et les couleurs.

Un guide pour la plupart des styles typographiques

Certains de mes variables (en syntaxe LESS) sont indiquées ci-dessous.

// Variables
@bg-body: #f2f2f2;
@palette-text: #58595a;
@palette-navy: #212a34;
@palette-design: #c94e4b;
@palette-code: #4cc1be;
@palette-web: #49b293;
@palette-photography: #8360a8;
@palette-game: #72BF40;
@palette-computer: #5d7dba;
@palette-business: #f38844;
@palette-3d: #f95858;
@palette-music: #56a4ca;
@palette-footer: #5a6e7a;
@palette-address: #999999;

@divider-color: #EAEAEA;
@link-color: #136fd2;
@alt-color: @palette-text;

@width: 640px;
@outer-gutter: 53px; 
@content-width: @width - (@outer-gutter * 2);
@grid-unit: 16px;

.rounded(@radius: 1px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
}

J’ai toujours fait précéder mes couleurs avec palette pour les garder ensemble. Cela rend plus facile pour moi de choisir une couleur dans le menu déroulant de suggestion qui apparaît dans Sublime Text :

Mise en place des Webfonts

La prochaine étape importante a été la mise en place des webfonts utilisées dans les designs. La fonte est Roboto disponible sur Google Fonts, alors j’ai ajouté cette balise au <head> du template :

1	<link href='https://fonts.googleapis.com/css?family=Roboto:300,300italic,400,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />

Il est généré par Google Fonts et renvoit vers leur CSS pour les quatre différentes graisses de Roboto que nous utilisons.

J’ai appliqué la police à la balise body et ma main wrapper table pour les clients qui ne tiennent pas compte de la balise body ou la dépouille de sa mise en forme.

1	body,
2	.wrapper {
3	font-family: 'Roboto', sans-serif;
4	}

Ensuite, pour empêcher Outlook 2007-2016 sur Windows d’afficher Times New Roman — car il tend à le faire en présence d'une police de caractère inconnue — j’ai mis en place un code conditionnel uniquement pour Outlook dans le <head> du template :

<!--[if mso]>
<style type="text/css">
 table, div {font-family: sans-serif !important;}
</style>
<![endif]-->

Cela garantit que chaque instance de la webfont est substituée dans Outlook avec une sans-serif. Je l’applique aux tables et divs, seulement deux éléments qui sont utilisés pour contenir des contenus dans le modèle. Il n’est pas nécessaire d’aller à un niveau inférieur, dans la mesure où toutes les autres balises l'hériteront dans Outlook.

Faire en sorte que les mises en pages soient correctes

Ensuite, il fallait passer au codage structurel. J’ai commencé avec le premier module que j’avais esquissé : la masthead. Un défi ici était le logo, parce que pour certains des templates, il semble légèrement différent sur mobile :

Pour y parvenir, sur mobile, j’ai caché le logo principal et le texte en haut. J’ai également caché le logo et ajouté la feuille minuscule comme image d’arrière-plan à la masthead.

.logo img {
  display: none !important;
}
.logo {
  background-image: url(images/leaf@2x.png);
  height: 17px;
  background-position: center center;
  background-size: 15px 17px;
  background-repeat: no-repeat;
}

Basculer certains éléments

La section suivante que j’ai abordée était l’article « hero » dans les mails Digest ; la première partie délicate ici étant les étiquettes (labels). Dans les designs, ils sont apparus à côté du texte d’en-tête sur l'affichage de bureau, mais au-dessus du texte sur l'affichage sur mobile. Pour atteindre cet objectif dans le code, nous pouvons utiliser certaines propriétés d’affichage pour les faire glisser autour.

Tout d’abord, j’ai créé la balise de titre avec le contenu à l’intérieur scindé en deux spans, une pour le texte, une autre pour l’étiquette.

1	<h2><span class="text">Using Curves in Adobe Photoshop</span> <span class="label">FEATURED COURSE</span></h2>

La span .text hérite du stylie de h2, et puis la span .label est stylée séparément pour réduire sa taille et lui donner un arrière-plan de couleur :

.label {
  display: inline-block;
  margin-left: 5px;
  padding: 3px 8px;
  vertical-align: 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  color: #ffffff;
  font-size: 8px;
  line-height: 10px;
  font-style: normal;
  letter-spacing: 0.1em;
}

Puis, à l’aide de requêtes médias, nous permutons les éléments autour des fenêtres d'affichage plus petites :

@media screen and (max-width: 700px) {
  h2 {
    display: table !important;
  }
  h2 .text {
    display: table-footer-group !important;
  }
  h2 .label {
    margin-bottom: 12px !important;
  }
}

Le h2 est notre container, et nous l’avons configuré pour s'afficher sous forme de tableau, afin que nous puissions dire à la span .text d’agir comme pied de page de groupe de ce tableau et de se déplacer vers le bas de la mise en pages. La span .label s'affiche ainsi en haut, et nous ajoutons une marge sous elle pour lui donner une marge de manoeuvre.

Sans surprise, Outlook sur Windows (2007-2016) ne voulais pas afficher les étiquettes correctement, dans la mesure où il ne respecte pas border-radius, ni n’aime ajouter une marge intérieure aux éléments en-ligne. Les résultats n'étaient pas vraiment bons, alors j’ai mis en place certains styles de rechange pour Outlook que j’ai placé dans le code conditionnel dans le template :

<!--[if mso]>
<style type="text/css">
 /* Outlook fix for featured course labels */
 .label {background-color: #ffffff !important; vertical-align: 2px !important; color: #c94e4b !important;}
</style>
<![endif]-->

Cela signifiait que dans Outlook, il apparaîtrait comme texte simple colorié :

Images d'arrière-plan

Le template promotionnel a une caractéristique très particulière : un hero en bord à bord avec une image d’arrière-plan.

Crédit à Marco Goran Romano pour l’image brillante utilisée comme espace réservé

Les images d’arrière-plan dans le courrier électronique ne sont pas prises en charge partout. Les deux principaux clients de messagerie posant des problèmes sont Outlook 2007-2016 (Windows) et Gmail.

Outlook n’affiche pas du tout d'arrière-plans régulier, nécessitant quelques Vector Markup Language spéciaux pour les faire fonctionner. (Stig chez backgrounds.cm de Campaign Monitor est un outil formidable pour générer ce code). Le problème avec lui, cependant, est que vous vous retrouvez avec deux blocs de code : une en HTML et l’autre à VML. C’est risqué quand on sait que d’autres doivent être en mesure de facilement mettre à jour l’image d’arrière-plan : si quelqu'un essaie de faire cela sans lire correctement les instructions, ils ne s'en sortirait probablement pas.

Gmail affiche des images d’arrière-plan, mais il ne respecte pas les propriétés background-size ou background-position, ce qui risque tout à fait de compliquer la création de leur style.

Nous avons regardé le nombre d’abonnés et avont été en mesure de remarquer Outlook : il serait bien que les utilisateurs d’Outlook voient une couleur de secours en aplat au lieu de l’image.

Pour les utilisateurs de Gmail, nous aurions besoin de mettre en place des lignes directrices autour d’une image acceptable lorsque les templates sont utilisés. L'arrière-plan devrait pouvoir être un arrière-plan extensible sans couture, ou mis en place afin qu’il s'affiche toujours bien à 100%, épinglé à l’angle supérieur gauche.

Fait intéressant, Gmail prend en charge les propriétés verticales background-position sur le côté gauche : top left, en bottom left et center left. Malheureusement, vous ne pouvez pas positionner horizontalement, ce qui est généralement ce que vous voulez faire, en le faisant afficher center center.

Sur certains des blocs publicitaires, nous étions en mesure d’avoir des images d’arrière-plan dans Gmail, car elles sont épinglées au bas à gauche. Ces blocs reviennent également sur un aplat de couleur d'arrière-plan dans Outlook.

Navigation dans les marges négatives

J’ai joué autour avec deux façons d’obtenir de la negative top-margin sur la masthead qu'elle fonctionne, où la case blanche du contenu apparaît superposée sur la masthead.

Dans le développement web, vous ajoutez un margin-top négative dans la zone de contenu, empoussiérez vos mains et bouclez votre journée.

En développement d’e-mail, cependant, ce n’est pas possible. Les marges négatives ne sont supportées que par une poignée de clients de messagerie, laissant les plus fréquentes dans la boue (comme Gmail, Yahoo et Outlook.com).

Ceci est toutefois resté notre première option : utiliser une top-margin négative comme une amélioration progressive, qui s’afficherait avec une marge de 0 sur tous les clients non pris en charge (voir ci-dessous à gauche). L’inconvénient est que beaucoup de clients verraient cette version sans marges et la mise en pages aura certainement perdu quelque chose sans cela.

L’autre alternative était de simuler la marge négative en créant un tableau blanc vierge à la bonne hauteur et largeur. L’inconvénient de cette approche est que l’application Gmail montre souvent de minuscules déliés quand vous diminuez la taille d'affichage du contenu sur mobile où il y a un contenu plus léger sur fond sombre ou l’inverse. Ce ne sont pas en fait de véritables lignes ou bordures, juste des problèmes minuscules qui ne peuvent être réparés avec le code. Nous avons décidé d’y aller avec ce scénario, parce qu’il a bénéficié du plus grand nombre de lecteurs, et les déliés étaient généralement imperceptibles. Ainsi, nous avons décidé de garder un oeil sur la question et de le revoir si nous n’étions pas satisfaits des résultats. (Malheureusement ces modèles ne pourraient pas être construits en utilisant la méthode fluid-hybrid parce qu'aussi bien MailChimp que Campaign Monitor posent de gros problèmes ce faisant.)

Chevauchement, avec ligne minuscule de Gmail entre les sections

Préparation pour différentes plateformes

Je savais que je devrais remettre les templates à Ian pour intégration avec plusieurs plateformes d’envoi Email : MailChimp et Campaign Monitor. Étant donné que mon code devrait bien fonctionner avec les deux langages de template, j’ai suivi quelques conseils pour rendre ce processus aussi doux que possible.

NDLR : depuis la phase de conception et de développement nous sommes effectivement passés de MailChimp, pour utiliser seulement Campaign Monitor. Cela dit, les conseils qui suivent sont très utiles !

Styler au niveau le plus élevé possible

Par exemple avec le style de texte, je l’ai appliqué uniquement à la balise <table>, et non à aucun de ses enfants, ainsi si les cellules ou les paragraphes étaient convertis en zones modifiables, il n’y aurait aucun risque de perdre un quelconque style où que ce soit. Les contenus du tableau héritent leur style de texte du parent, dans l’ensemble de tous les clients de messagerie. La seule exception est AOL mail, qui souvent n'hérite pas de la propriété color, sauf si vous la placez sur une cellule individuelle.

Utiliser des paragraphes pour le texte

Les templates de Campaign Monitor requièrent qu'un élément multiline soit défini quand vous voulez un bloc modifiable de texte permettant des sauts de ligne, gras/italique/souligné, texte lié sélectionné et ainsi de suite. Il encapsule également automatiquement tout le texte à l’intérieur de multiline avec une balise p, ce qui peut vraiment casser votre mise en pages, si vous ne l’avez pas autorisée pour les paragraphes. Lorsque vous utilisez un saut de ligne dans Campaign Monitor, il terminera le paragraphe actuel et en commencera un nouveau. MailChimp ne fait pas cela, et lorsque vous créez un saut de ligne il ajoute simplement une balise <br />. Mais il n’a aucun problème avec les paragraphes et respectera tout style de paragraphe que vous avez mis en place, donc il est prudent de s’en servir pour les besoins de Campaign Monitor, sans effets secondaires désagréables pour MailChimp.

Rendre les variantes sélectionnables par l’utilisateur

Un des templates nécessitait de disposer d’un ensemble des différentes rubriques de couleurs pour chaque thème qui pourrait être choisi lors de la création d’une newsletter sous MailChimp. J’ai mis en place une série de styles de titres qui pourraient être choisis dans une liste déroulante dans MailChimp, à l’aide de la syntaxe correcte pour définir leurs blocs de @style :

/**
* @style topic-design
*/
.topic-design {
  color: #c94e4b;
}
.topic-design a {
  color: #c94e4b;
}
/**
* @style topic-code
*/
.topic-code {
  color: #4cc1be;
}
.topic-code a {
  color: #4cc1be;
}
/**
* @style topic-web
*/
.topic-web {
  color: #49b293;
}
.topic-web a {
  color: #49b293;
}
/**
* @style topic-photography
*/
.topic-photography {
  color: #8360a8;
}
.topic-photography a {
  color: #8360a8;
}
/**
* @style topic-game
*/
.topic-game {
  color: #72BF40;
}
.topic-game a {
  color: #72BF40;
}
/**
* @style topic-computer
*/
.topic-computer {
  color: #5d7dba;
}
.topic-computer a {
  color: #5d7dba;
}
/**
* @style topic-business
*/
.topic-business {
  color: #f38844;
}
.topic-business a {
  color: #f38844;
}
/**
* @style topic-3d
*/
.topic-3d {
  color: #f95858;
}
.topic-3d a {
  color: #f95858;
}
/**
* @style topic-music
*/
.topic-music {
  color: #56a4ca;
}
.topic-music a {
  color: #56a4ca;
}

Mais... J’ai fourni cela à Ian qui a découvert que ça n’a pas du tout fonctionné; aucun de ces styles de titres n'apparaissait dans la liste déroulante lorsqu’il éditait le texte. Il l'a retourné dans tous les sens et découvert que MailChimp n’affiche effectivement pas ces options comme des styles de titre sélectionnables, à moins d’avoir une sorte de propriété liées à la police comme font-family ou font-weight.

Ça n'a également pas fonctionné parce que je les ai fourni séparément, et tout code de modèle MailChimp spécial pour les zones modifiables ou styles personnalisés doit apparaître dans le <head> de votre template ; il ne peut pas être un fichier externe. Ainsi, nous avons ajouté une déclaration font-weight: bold à nos styles de titre, balancé le CSS dans l'en-tête et tout a commencé à fonctionner.

Tests finaux et livraison

Maintenant que toutes nos mise en pages avaient été vues et approuvées, les problèmes de tri et de compromis réglés, il était temps de terminer les essais et de préparer tous les fichiers pour le déploiement.

Je me suis mis à faire beaucoup d’essais finaux exténuants dans Litmus et Email on Acid. J’utilise Trello pour garder le suivi des exigences, des tâches et des bogues pour chaque projet, sur lequel je travaille. J’ai travaillé sur mes listes de bugs et de tâches jusqu'à ce qu’il n’y ait rien qui reste, et les fichiers étaient prêts à être déployés.

Il faut aimer Trello pour la gestion des tâches

Mise en place d’un kit de templates

L’équipe Envato voulait être capable de plonger dans le code pour combiner différentes mises en pages, alors je devais fournir clairement les commentaires HTML et CSS, ainsi que m’assurer que le transfert des modules entre templates ne causerait aucune catastrophe majeure.

J’ai configuré chaque template avec sa propre classe de body :

1	<body class="var-admin">
2	<body class="var-digest">
3	<body class="var-newsletter">
4	<body class="var-promotional">

Et ensuite j'ai mis en place une classe qui peut être ajoutée pour passer facilement d’un arrière-plan blanc à un arrière-plan gris :

1	<body class="var-admin grey-background">

Aussi, j'ai séparé des styles spécifiques à la mise en pages (mobiles et desktop) dans des feuilles de style individuelles pour économiser sur la taille du fichier :

1	<link rel="stylesheet" type="text/css" href="css/var-admin.css" />
2	<link rel="stylesheet" type="text/css" href="css/var-digest.css" />
3	<link rel="stylesheet" type="text/css" href="css/var-newsletter.css" />
4	<link rel="stylesheet" type="text/css" href="css/var-promotional.css" />

J’ai donné des instructions pour ajouter un lien vers chaque feuille de style où des éléments de cette mise en pages ont été utilisés. Par exemple, si un module Digest est placé sur le template Newsletter, le lien Digest CSS devrait être ajouté au head du template Newsletter avant de le copier sur le module HTML.

Pour les éléments communs, comme la barre de publicité et les blocs d’annonce, je me suis assurée que le style était complètement indépendant de la mise en pages, afin qu’ils puissent être déplacés librement.

J’ai inclus toutes ces instructions dans un fichier README et l'ai zippé avec tous le code HTML et les images à envoyer.

Expédition

Et puis nous en avions fini ! J’ai tout expédiés à Ian qui a entrepris le reste de l’intégration lui-même. C’est un peu comme se ronger les ongles pour remettre les fichiers de template sans obsessionnellement testé et re-testé lors de l’intégration, mais j’ai eu la foi la plus absolue en Ian, bien sûr !

Une fois que son travail était terminé et qu’il était temps de commencer à envoyer, Ian a envoyé des copies de test à mes comptes Litmus et Email on Acid afin que je puisse avoir un aperçu de rendu et signaler tout problème. Quelques images d’arrière-plan laissés ici et là, que nous avons réparées avant que les templates ne soient enfin prêts à être envoyés.

Dans la prochaine et dernière partie de cette série, nous allons faire passer nos templates statiques au niveau suivant, en montrant comment nous les avons intégré à Campaign Monitor !

Liens connexes

Si vous avez besoin de plus d’inspiration en e-mail HTML, un de nos templates de courrier électronique responsive peut être exactement ce qu’il vous faut.
Creating a Future-Proof Responsive Email Without Media Queries