Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Comment nous l’avons fait : Convertir les e-mails Tuts+ en templates Campaign Monitor

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How We Made Our Shiny New Envato Tuts+ Emails.
How We Did It: Building the New Tuts+ Email Templates

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 :

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 :

Ce lien sera différent à chaque fois, nous allons donc le passer en dynamique de CM <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 :

Nous allons utiliser <preferences> et  <unsubscribe> pour rendre cet article dynamique :

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.

tuts email heading
Titre et sous-titre

Autour de la ligne 87, vous le trouverez balisé comme suit :

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 :

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 :

Nous allons rendre ces deux sections dynamiques :

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 :

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 !

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 :

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> :

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 :

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 &amp; 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 !

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.