French (Français) translation by Henri Lotin (you can also view the original English article)
Dans les deux premières parties de cette série d’études de cas, nous avons vu comment les nouveaux e-mails Envato Tuts+ ont été conçus, puis conçus comme livrables statiques HTML/CSS. Dans cette dernière pièce du puzzle, je vais vous montrer comment nous avons converti les fichiers en des templates Campaign Monitor.
À ce stade, il y avait deux membres de l’équipe impliqués dans le processus : Cameron et moi. Cam s'est chargée d’intégrer les digests dans Campaign Monitor, j’ai géré les newsletters, ce que je vais expliquer dans ce post.
1. Préparez vos fichiers
Nicole a livré une série de fichiers à la fin du processus de construction, y compris HTML, CSS et les actifs d’image. Ensemble, ils se sont occupés d'un certain nombre de types d’e-mail différents, alors je devais gérer les seuls petits éléments nécessaires pour le template de newsletter et travailler à partir de là.
Astuce : Téléchargez les fichiers source si vous voulez suivre le déroulement du travail.
Hero local
Actuellement, les chemins d’accès dans les fichiers sont tous relatifs. Il y a quelques liens vers des fichiers CSS, quelques liens dans les images, et ils pointent tous sur des répertoires de fichiers locaux, comme nous le voyons. Par exemple :
1 |
<!-- Stylesheets -->
|
2 |
<link rel="stylesheet" type="text/css" href="css/styles.css" /> |
3 |
<link rel="stylesheet" type="text/css" href="css/var-newsletter.css" /> |
4 |
|
5 |
<!-- Optional - for selectable topic colours -->
|
6 |
<link rel="stylesheet" type="text/css" href="css/topics.css" /> |
Lorsque nous envoyons nos fichiers à la fin du tutoriel, Campaign Monitor reconnaîtra tous ces chemins d’accès et les modifiera en conséquence.
2. Commencez par le haut
Notre processus est le suivant : nous allons prendre toutes les parties statiques de notre template d’e-mail et les échanger contre des extraits dynamiques dans la mesure du possible. En défilant vers le bas, le premier coupable que j’ai trouvé est autour de la ligne 73 : un lien vers la version web :
1 |
Something not looking right? <a href="#">View the web version</a> |
Ce lien sera différent à chaque fois, nous allons donc le passer en dynamique de CM <webversion> :
1 |
Something not looking right? <webversion>View the web version</webversion> |
Aussi facile que ça. Suivant !
3. Les liens les plus importants
Le <webversion> dont nous venons de prendre soin est l’un des quelques liens importants mis à disposition par Campaign Monitor. Alors que nous sommes dans l’ambiance, nous allons faire usage d’un ou deux autres. Le paragraphe de préférences de courriel peut être trouvé autour de la ligne 346 et ressemble à ceci :
1 |
<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <a href="#">update your email preferences</a> or <a href="#">unsubscribe</a>.</p> |
Nous allons utiliser <preferences> et <unsubscribe> pour rendre cet article dynamique :
1 |
<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <preferences>update your email preferences</preferences> or <unsubscribe>unsubscribe</unsubscribe>.</p> |
Il y a quelques autres liens importants, tel que <forwardtoafriend>, mais nous ne l'utiliserons pas dans ce cas.
4. Lignes isolées
La chose suivante à laquelle nous devons assister est le titre principal du message.
Autour de la ligne 87, vous le trouverez balisé comme suit :
1 |
<p class="heading h1">Translation Project Newsletter</p> |
2 |
<p class="heading h2">Month 20XX</p> |
Les paragraphes, avec des classes de heading et h1 ou h2 (merci courriel HTML). Chacun d'entre eux doit être modifiable à partir de Campaign Monitor, donc, étant donné que nous n'aurons qu'à modifier le contenu du texte et rien d’autre, nous pouvons utiliser l'élément <singleline> du template :
1 |
<p class="heading h1"> |
2 |
<singleline label='Newsletter title'>Translation Project Newsletter</singleline> |
3 |
</p>
|
4 |
<p class="heading h2"> |
5 |
<singleline label='Newsletter subtitle'>Month 20XX</singleline> |
6 |
</p>
|
Les paragraphes restent parfaitement intacts, nous allons juste ajouter une zone modifiable dans chacun d’eux. Chaque singleline possède un attribut label facultatif, qui s’affichera utilement dans l’éditeur de Campaign Monitor :
5. Multi lignes
Pour le contenu qui est un peu plus complexe que les titres et les inter-titres, nous allons utiliser l'élément <multiline>. À la ligne 134, vous trouverez le contenu de notre « premier article » que nous utiliserons comme introduction pour chaque email :
1 |
<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p> |
2 |
|
3 |
<p>Ian Yates<br /> |
4 |
<strong>Editor, Envato Tuts+</strong></p> |
Nous allons rendre ces deux sections dynamiques :
1 |
<multiline label='Intro blurb'> |
2 |
<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p> |
3 |
</multiline>
|
4 |
|
5 |
<multiline label='Your friendly host'> |
6 |
<p>Ian Yates<br /> |
7 |
<strong>Editor, Envato Tuts+</strong></p> |
8 |
</multiline>
|
Elles suivent le même schéma que précédemment : les zones modifiables, avec des étiquettes en option – mais cette fois elles nous autorisent un éditeur WYSIWYG :
6. Images modifiables
Faites défiler jusqu'à la ligne 168 et vous trouverez une image dans une cellule de tableau, toute seule :
1 |
<td class="image"> |
2 |
<img src="images/onecol3.jpg" width="514" alt="" /> |
3 |
</td>
|
Cela fera partie d’une section répétitive (que nous allons traiter dans une minute) nous allons donc d’abord rendre cette image dynamique. Je n’aime pas utiliser le mot « simplement » dans les didacticiels, mais dans ce cas, je le ferai glisser : ajoutez simplement l’attribut editable à la balise d’image. Fait !
1 |
<td class="image"> |
2 |
<img editable src="images/onecol3.jpg" width="514" label="section image" alt="" /> |
3 |
</td>
|
L’attribut width est nécessaire, mais le src (qui nous donne une image par défaut) est facultatif, comme c’est le cas de notre ami l’attribut label.
Avec cela, l’éditeur nous permet de supprimer l’image par défaut, en envoyer une nouvelle, ajouter du texte alt et (surtout) d’ajouter un lien.
« Les données brutes disent : les e-mails avec images convertissent presque deux fois mieux. » – Chris Hexton, PDG et Co-fondateur de Vero
Remarque : Gardez à l’esprit que si nous choisissons de faire disparaître l’image totalement, la balise conteneur restera. Cela peut entraîner de grandes surfaces avec marge intérieure sans contenu, alors envisagez comment baliser vos images lors du design.
7. Zones répétitives
Cette image fait partie d’un article que nous voulons capable d'être répétée autant de fois que nécessaire. Ça commence à la ligne 146 et se termine à la ligne 176, avec les commentaires :
1 |
<!-- Repeatable Article, Stroked at Top -->
|
2 |
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> |
3 |
|
4 |
</table>
|
5 |
<!-- END Repeatable Article, Stroked at Top -->
|
Comme nous l’avons fait précédemment avec d’autres zones, nous devons mettre le titre de cette section à l'intérieur d'une <singleline> et le contenu dans un <multiline>, donc il faut le faire avant d’aller plus loin.
Pour rendre toute cette partie répétitive, nous enveloppons les éléments nécessaires dans un élément <repeater> :
1 |
<!-- Repeatable Article, Stroked at Top -->
|
2 |
<repeater>
|
3 |
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> |
4 |
|
5 |
</table>
|
6 |
</repeater>
|
7 |
<!-- END Repeatable Article, Stroked at Top -->
|
Cela nous donnera quelques contrôles supplémentaires dans l’éditeur de Campaign Monitor, ce qui nous permet de reproduire la section, la déplacer (utile pour réorganiser), ou la supprimer.
Remarque : le <repeater> doit contenir soit un <singleline>, un <multiline>, ou un <img editable>.
Autre remarque : vous ne pouvez pas imbriquer des éléments <repeater> dans d'autres !
8. Mise en pages
Maintenant pour une section répétitive avec une différence. C’est une section de sujets précis, et chaque sujet en a un, avec la couleur de rubrique appropriée.
Dans le cas de notre newsletter de projet de traduction, parfois nous pourrions disposer d’une section de Photographie & Video, Code, ainsi que le Développement de jeu. Parfois nous pouvons ignorer le Code. Parfois, nous pourrions présenter tous les neuf thèmes. Alors, quelle est la meilleure manière d'organiser cela ? C'est ainsi qu'entre en jeu l'élément <layout>.
Nous pouvons utiliser plusieurs éléments de mise en pages au sein d’un même bloc <repeater>, afin que chaque fois que nous devions dupliquer le bloc il nous est donné un choix de mise en pages. Dans notre cas, nous voulons choisir parmi les rubriques disponibles, donc notre balisage ressemblera un peu à ceci :
1 |
<repeater>
|
2 |
|
3 |
<layout label='Topic: PHOTOGRAPHY & VIDEO'></layout> |
4 |
<layout label='Topic: WEB DESIGN'></layout> |
5 |
<layout label='Topic: DESIGN & ILLUSTRATION'></layout> |
6 |
<layout label='Topic: CODE'></layout> |
7 |
|
8 |
... |
9 |
|
10 |
</repeater>
|
Là vous verrez les éléments de mise en pages, chacun avec une étiquette unique.
Important : n'utilisez pas d'entités HTML avec séquence d’échappement (comme & plutôt que &) dans les étiquettes de mise en pages.
Début de la ligne 183 en encapsulant notre bloc de sujet dans un <repeater>. Ensuite enveloppez chacun des blocs du sujet dans un élément <layout label=''>, en veillant à leur attribuer des étiquettes uniques.
Maintenant, une fois que nous avons tout envoyé sur Campaign Monitor, l’éditeur va nous donner toutes nos options de mise en pages lorsqu’on veut répéter une section :
9. Envoyer sur Campaign Monitor
Tout notre gros oeuvrel est fait, maintenant nous avons besoin d'envoyer nos fichiers sur Campaign Monitor pour pouvoir utiliser notre template dans une campagne par courriel !
Dans votre tableau de bord Campaign Monitor aller à Templates > Import.
Ensuite, entrez un nom pour votre template, sélectionnez votre fichier HTML terminé, puis sélectionnez tous les autres actifs nécessaires (CSS et images) comme une archive zip.
Pour que vos fichiers soient téléchargés et traités prendra un moment. Les styles seront optimisés (certains en-ligne, d'autres injectés dans le <head> du code HTML), et les chemins d’accès seront actualisés. Quand cela est fait, votre template sera disponible à sélectionner lorsque vous démarrez une nouvelle campagne !
Conclusion
Ceci termine cette étude de cas d'e-mail ; une perspective de comment nous avons conçu et construit les e-mails d’Envato Tuts+. J’espère que vous avez apprécié la suite du processus, et si vous avez besoin d’inspiration de courriel pour votre prochain projet, assurez-vous de vérifier les derniers templates d'e-mail disponibles sur Envato Market !
