Litmus Builder Essentials : Meilleures pratiques pour la création de modèles d'e-mail HTML dans Builder

Litmus Builder est un puissant générateur d'e-mails personnalisés pour les e-mails HTML. Nous avons déjà expliqué comment utiliser Builder dans les éditions précédentes de notre série Litmus Builder Essentials (parties un, deux et trois). Aujourd'hui, nous allons vous montrer comment utiliser ces fonctionnalités lors de la création de vos propres modèles HTML.

Comme nous l'avons vu dans la première partie, vous pouvez utiliser n'importe quel nombre de modèles HTML pré-construits et pré-testés pour vos propres campagnes. Chacun sert de bonne base, vous permettant de gagner du temps et de vous concentrer sur ce qui est important : le contenu. Les modèles permettent également aux spécialistes du marketing ou aux concepteurs qui ne codent pas de créer eux-mêmes une excellente campagne d'e-mails.

Cependant, si vous recherchez plus de flexibilité et de personnalisation dans la conception de votre courrier électronique, la création de votre propre modèle à partir de zéro est la voie à suivre.

Lorsque vous êtes dans Builder, cliquez soit sur le bouton Démarrer la construction en haut à gauche ou sur le bouton Créer nouveau sur le côté droit, donnez un titre à votre projet, sélectionnez Créer , puis cliquez sur le bouton Suivant . Dans l'écran Créer un nouvel e-mail , sélectionnez la première option : E-mail vide . Builder créera un nouveau projet de courrier électronique et vous déposera dans l'interface Builder.

Voici les fonctionnalités de Litmus Builder qui facilitent grandement la création de votre propre modèle :

• Inline CSS
• Extraits et partiels
• Quadrillage
• Aperçus par e-mail
• Partage

Utiliser l'inline CSS

L'inliner CSS vous donne la possibilité de séparer votre HTML et votre CSS dans différents onglets de l'interface. Cela garantit que votre code est aussi propre et lisible que possible, vous permettant de naviguer et de mettre à jour rapidement le code de votre modèle. C'est parfait pour les développeurs qui doivent également s'en remettre à des membres moins techniques de l'équipe.

Pour activer l'inline CSS, cliquez sur l'icône d'engrenage sur le côté gauche de votre écran Builder et activez l'option appelée CSS Inline . Vous pouvez basculer entre l'éditeur HTML et CSS à l'aide des options de la barre d'outils de l'éditeur.

L'inliner CSS de Builder est conçu pour vraiment comprendre le courrier électronique. Par exemple, il ne supprime aucun commentaire conditionnel ou pseudo-sélecteur Outlook, et il préserve les entités de caractère et dispose de nombreux outils qui vous permettent d'améliorer votre flux de travail.

Lorsque vous êtes prêt à déplacer votre modèle de Litmus Builder vers votre propre fournisseur de services de messagerie (ESP), cliquez sur le bouton Exporter . À partir de là, vous pouvez synchroniser votre e-mail avec votre ESP, copier le code HTML compilé ou télécharger le code HTML compilé. C'est si facile!

Profitez des extraits et des partiels

Litmus Builder dispose de deux outils spécialement conçus pour rendre la création et l'utilisation de modèles plus rapides et plus faciles : les extraits de code et les partiels . Examinons de plus près comment ils peuvent vous aider à créer de meilleurs modèles.

Extraits

Les extraits de code vous permettent d'enregistrer et de réutiliser des morceaux de code dans tous vos projets Builder. Vous pouvez accéder à vos extraits en utilisant le bouton Insérer .

Si vous n'avez jamais utilisé d'extraits de code auparavant, vous verrez une bibliothèque vide. Heureusement, créer un nouvel extrait est facile à faire !

Dans la bibliothèque d'extraits de code, cliquez sur Gérer les extraits de code. À partir de là, vous sélectionnez Nouvel extrait . Un nouvel écran apparaîtra, dans lequel vous pourrez nommer votre extrait, créer un déclencheur d'extrait pour insérer cet extrait et écrire ou coller le code HTML et/ou CSS que vous souhaitez inclure dans l'extrait.

La clé pour utiliser efficacement les extraits de code est de les créer pour les composants couramment utilisés dans un e-mail et de s'appuyer sur des déclencheurs d'extraits de code pour les insérer.

Par exemple, la plupart des campagnes par e-mail s'appuient sur un texte d'aperçu pour encourager les abonnés à ouvrir un e-mail. Au lieu de saisir manuellement un nouveau composant de texte d'aperçu pour chaque e-mail que vous créez, vous pouvez enregistrer ce composant en tant qu'extrait et le déclencher directement dans l'éditeur de Builder. Dans ce cas, nous pouvons inclure du code dans le nouvel extrait, lui donner un nom et définir son déclencheur sur quelque chose comme pvt .

Maintenant, chaque fois que vous devez appeler cet extrait dans l'éditeur, tapez simplement pvt , immédiatement suivi du bouton de tabulation , et Builder insère le code dans votre modèle.

Vous pouvez même inclure des points d'édition/saut dans votre extrait en enveloppant le texte entre accolades. Les extraits comportant des points d'édition/de saut positionneront automatiquement votre curseur à cet endroit lorsque vous insérez des extraits, ce qui vous permet de modifier rapidement le contenu de l'extrait.

Vous ne savez pas quels extraits inclure dans votre propre bibliothèque ? Consultez notre guide ultime sur l'utilisation d'extraits de code dans la conception d'e-mails pour vous inspirer.

partiels

Semblables aux extraits de code, les partiels vous permettent de collecter des composants de code à utiliser dans les projets Builder. La principale différence entre les extraits et les partiels est que les extraits finissent par être codés en dur dans votre modèle, tandis que Builder extrait les partiels dans votre modèle chaque fois que vous prévisualisez, compilez ou téléchargez votre modèle.

Les partiels sont accessibles en cliquant sur Insérer , puis sur Partiels.

Pour créer un nouveau partiel, cliquez sur Gérer les partiels . Builder ouvrira vos partiels dans une nouvelle fenêtre. De là, sélectionnez Nouveau partiel pour créer un nouveau partiel. Chaque partiel est identifié par le titre du document et peut être inclus dans vos propres modèles en enveloppant le titre du partiel entre des accolades doubles. Par exemple, si nous avons un en- tête nommé partiel, nous pouvons l'appeler dans un document Builder en tapant {{header}} . L'éditeur de code n'affiche que ce court bloc de texte tandis que le partiel est dynamiquement extrait dans votre e-mail.

Vous vous demandez peut-être : « Pourquoi utiliseriez-vous des partiels au lieu d'extraits ? » C'est une excellente question.

Bien que les extraits de code soient très pratiques, la fonction de suppression des partiels est qu'ils sont ajoutés dynamiquement à vos modèles. Étant donné que le code n'est pas réellement ajouté à l'éditeur tant que vous n'avez pas compilé, prévisualisé, téléchargé ou partagé votre modèle, vous pouvez mettre à jour le partiel en un seul endroit et faire en sorte que ces modifications se répercutent sur tous les modèles qui utilisent ce partiel.

Pensez à un pied de page d'e-mail. Souvent, les entreprises doivent mettre à jour les informations contenues dans le pied de page de plusieurs e-mails chaque fois que leur service juridique apporte une modification. Au lieu d'avoir à mettre à jour manuellement des dizaines d'e-mails individuellement, vous pouvez mettre à jour un seul {{footer}} partiel qui est tiré dans tous ces e-mails à la place. La mise à jour de ce partiel met automatiquement à jour tous les modèles, ce qui vous fait gagner beaucoup de temps.

Cela peut être extrêmement utile pour les concepteurs et les développeurs qui font partie d'une équipe plus large. Ils peuvent contrôler les partiels tout en donnant aux spécialistes du marketing l'accès aux modèles contenant le contenu d'un e-mail. Les spécialistes du marketing peuvent mettre à jour ce contenu, tout en conservant des éléments tels que les en-têtes et les pieds de page, ce qui réduit les erreurs et garantit de meilleurs e-mails pour les abonnés.

Utilisez le quadrillage pour une navigation rapide

Alors que l'inline CSS, les extraits et les partiels peuvent aider à accélérer le développement et à faciliter la navigation dans le code, la plupart des e-mails contiennent encore beaucoup de code qui peut être difficile à lire. Au lieu de faire défiler des centaines de lignes de code pour trouver la section qui doit être modifiée, le quadrillage de Builder vous permet de rechercher et de sélectionner rapidement les éléments d'un e-mail sur lesquels vous concentrer.

Pour activer le quadrillage, appuyez sur l'icône d'engrenage dans la barre d'outils des aperçus, puis cliquez sur Basculer le quadrillage . Le quadrillage recouvrira les cases bleues de votre e-mail dans le volet de prévisualisation, mettant en évidence chaque élément individuel de votre modèle d'e-mail. Lorsque le quadrillage est activé, sélectionnez simplement n'importe quel élément et l'éditeur de code naviguera automatiquement vers ce bloc de code, afin que vous puissiez effectuer les mises à jour nécessaires.

Aperçu dans plus de 100 clients de messagerie

Une fois que vous avez commencé à créer vos modèles dans Litmus Builder, l'étape suivante consiste à vous assurer que vos modèles s'affichent correctement dans tous les clients de messagerie nécessaires. Litmus Email Previews rend cela rapide et facile. Dans le volet d'aperçu du générateur d'e-mails, basculez entre l'aperçu du navigateur par défaut et les aperçus d'e-mails . La sélection des aperçus d'e-mails lance une série de tests qui vous permettent de voir à quoi ressemble votre modèle dans plus de 100 clients de messagerie.

Si vous savez que votre audience n'ouvre vos campagnes que dans des clients de messagerie spécifiques, vous pouvez sélectionner les clients dans lesquels vous souhaitez tester en cliquant sur le bouton Choisir les clients dans la vue Aperçus des e-mails. Cela ouvrira une liste de tous les clients disponibles que vous pouvez activer et désactiver. Vous ne savez pas quels clients de messagerie vos abonnés utilisent ? Essayez Litmus Email Analytics pour obtenir un aperçu détaillé du comportement de vos abonnés.

Partagez des modèles avec votre équipe

La dernière étape pour développer des modèles dans Litmus Builder consiste à partager ces modèles avec les membres de l'équipe et les parties prenantes.

Au lieu de copier votre code et vos images sur votre ESP, de configurer une liste de test et d'envoyer manuellement une campagne à cette liste, Litmus Builder dispose d'un panneau de partage complet consacré à l'obtention de commentaires sur vos campagnes.

Dans le panneau de partage, vous disposez d'options pour publier , envoyer par e - mail et intégrer votre modèle. Si vous publiez votre e-mail, vous pouvez choisir de partager uniquement les aperçus des e-mails dans vos clients sélectionnés ou les aperçus HTML et e-mail ensemble.

De cette façon, vous pouvez choisir ce que vous partagez avec chaque partie prenante. Si vous avez juste besoin qu'une partie prenante approuve la conception, partagez uniquement les aperçus afin qu'ils ne soient pas confus par le code HTML. Envoyer un modèle à un autre développeur pour examen ou dépannage ? Partagez à la fois le HTML et les aperçus.

L'option E-mail vous permet d'envoyer rapidement un e-mail de test directement dans votre boîte de réception sans avoir besoin de le télécharger sur votre ESP.

Si vous souhaitez partager votre modèle sur votre blog ou sur la communauté Litmus, utilisez la fonction Intégrer pour intégrer un aperçu en direct de votre modèle sur n'importe quel site Web. Les utilisateurs peuvent même ouvrir le code et commencer à le modifier dans leur propre compte Builder, ce qui permet aux membres de l'équipe d'exprimer rapidement des idées sans affecter votre propre modèle. Les aperçus du constructeur expirent 60 jours après leur création.

Commencez dès aujourd'hui avec Builder

Maintenant que vous savez comment créer des modèles, des extraits de code et des partiels dans Builder, pourquoi ne pas essayer ? C'est l'un des moyens les plus puissants d'accélérer votre flux de travail, tout en garantissant les normes de qualité les plus élevées dans vos propres campagnes.

Déjà client Litmus ? Lancez-vous directement. Sinon, essayez Litmus gratuitement pendant 7 jours et voyez comment Builder peut améliorer votre processus de développement aujourd'hui.

Litmus Builder ne se limite pas à créer des e-mails Créez et testez rapidement le contrôle qualité sur les clients de messagerie qui comptent le plus pour votre public, et profitez de modules et de modèles de messagerie réutilisables pour réduire les erreurs et maintenir la cohérence de la marque. Voir tous les avantages →

En savoir plus dans notre série Litmus Builder Essentials

• Litmus Builder Essentials, Partie 1 : Familiarisez-vous avec notre générateur d'e-mails
• Litmus Builder Essentials, Partie 2 : Créer dans notre générateur d'e-mails
• Litmus Builder Essentials, Partie 3 : Comment les équipes peuvent utiliser notre e-mail Builder
• Vous êtes ici : Litmus Builder Essentials, Partie 4 : Meilleures pratiques pour la création de modèles d'e-mail HTML dans Builder