Mon flux de travail de développement de messagerie HTML actuel

HTML Email Development Workflow: Un guide pratique pour améliorer l'efficacité

Chaque développeur Web a sa propre façon de travailler unique: éditeurs préférés, outils auxiliaires, processus de projet personnel, etc. Pour les projets importants ou complexes, un chemin de développement clair est crucial, ce qui permet de gagner du temps et minimise les erreurs.

Ceci est particulièrement important dans les projets de courrier électronique HTML dans mon expérience. Le courrier électronique nécessite de nombreuses tâches répétitives qui ne sont pas particulièrement complexes en elles-mêmes (du moins pas toujours), mais peuvent devenir difficiles en raison du grand nombre d'éléments et de tâches qui doivent être vérifiés.

Ici, je vais essayer d'expliquer mon flux de travail de développement de messagerie HTML personnel. J'espère que vous pourrez choisir les sections que vous aimez.

Points clés

• L'auteur souligne l'importance d'un chemin de développement clair dans les projets de messagerie HTML pour gagner du temps et minimiser les erreurs causées par un grand nombre de tâches répétitives.
• L'utilisation de préprocesseurs, tels que Jade pour HTML et moins pour CSS, peut simplifier le processus de développement en réduisant le besoin d'un code long, en particulier en termes de tables imbriquées. Il est recommandé d'utiliser des outils tels que Codekit et Coda pour compiler les fichiers et l'aperçu en temps réel.
• Il est recommandé d'utiliser le package Gulp Email Builder pour automatiser les dernières étapes du workflow, y compris l'inclinaison ou l'intégration de fichiers CSS, les tests avec l'API des décisions décisifs et l'envoi de courriels de test supplémentaires.
• Un bon flux de travail de développement de messagerie HTML peut augmenter considérablement la productivité. Le flux de travail de l'auteur comprend la création de tests locaux, les tests en ligne CSS et automatisés à l'aide de Gulp Email Builder. La personnalisation de ces étapes est encouragée pour répondre à vos préférences et besoins personnels.

flux de travail de développement des e-mails typique

Le flux de travail de développement des e-mails classique se compose de trois étapes principales:

• Création (effectuer des tests locaux préliminaires)
• CSS en ligne
• Tester

Le test final (en utilisant CSS en ligne) est l'étape la plus longue, car nous devrons peut-être le répéter plusieurs fois. Les tâches "CSS en ligne" et "test" nécessitent un travail et une attention supplémentaires: premièrement, vous devez faire attention à distinguer la copie de travail d'origine de la copie en ligne. De plus, le test final vous oblige à envoyer un HTML en ligne à divers comptes pour vérifier votre conception par rapport à divers clients de messagerie.

Envoi du code par e-mail est un peu délicat, car la plupart des clients ne vous permettent pas de composer des e-mails en collant du code HTML dans le corps (le seul que je connaisse est Thunderbird). Mais chaque test nécessite de nombreuses opérations pour rédiger des e-mails, CSS en ligne, code de pâte, etc.

Si vous avez un compte de lit d'essai (Litmus, Email sur Acid, Campaign Monitor ou autres), vous pouvez simplifier la tâche de test final en soumettant un code en ligne au banc d'essai, mais pour des tests plus précis, vous devez toujours envoyer des codes par mail. Dans le passé, j'ai utilisé un petit script PHP pour envoyer des e-mails de test, ce qui a fait gagner du temps, mais nécessitait toujours la répétition de certaines tâches.

Retour à CSS, vous devrez peut-être travailler sur deux fichiers: un pour en ligne et un pour l'intégration (pour les clients qui prennent en charge les requêtes multimédias).

Vous devez modifier le CSS directement dans le fichier HTML, puis démarrer l'outil en ligne (tel que l'outil MailChimp Inline), et enfin intégrer le deuxième CSS dans le fichier en ligne (il est ennuyeux de simplement l'écrire!)

Nous pouvons maintenant consulter notre plan de workflow plus en détail:

Pour obtenir un flux de travail vraiment efficace, de nombreux problèmes restent non résolus, avec des étapes beaucoup plus répétitives que les étapes créatives, ce qui conduit rarement à de bons résultats.

Heureusement, nous avons encore des moyens d'utiliser: le préprocesseur et le coureur de tâche.

Ajouter le préprocesseur HTML et CSS

Lorsque j'ai commencé à utiliser des préprocesseurs, j'ai immédiatement réalisé à quel point ils sont utiles pour le développement des e-mails. Pour HTML et CSS, les préprocesseurs peuvent facilement simplifier le besoin d'un code long (en particulier HTML).

J'utilise principalement Jade pour HTML et moins pour CSS, mais vous pouvez choisir la technologie que vous aimez. Jade est très utile lorsqu'il s'agit d'un code en double et déroutant, tels que des tables imbriquées. Veuillez consulter les exemples de table imbriqués à trois couches suivants.

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

Le code de jade qui produit le même code est comme suit:

table(width="100%" )
  tbody
    tr
      td(width="100%")
        table( align="center")
          tbody
            tr
              td(width="100%")
                table(width="100%")
                  tbody
                    tr
                      td cell 1
                      td cell 2
                      td cell 3

Comme vous pouvez le voir, il n'y a plus de problème avec les balises non clôturées, le code est facile à lire.

Avec Jade, vous pouvez créer des modèles complexes et créer votre propre bibliothèque d'énions de code pour réutiliser le code dans plus de projets. Pour moins ou Sass, vous pouvez faire de même.

Vous pouvez compiler des fichiers avec Gulp ou Grunt, mais pour un aperçu rapide de votre travail, j'ai trouvé que Coda et Codekit fournissent les meilleures solutions.

La tâche "test local" dans notre flux de travail nous fournit des commentaires initiaux sur le travail et, surtout, il ne nécessite pas d'autres actions.

Codekit compile notre jade et moins de fichiers sur Save et peut prévisualiser votre projet en temps réel. CODA, d'autre part, vous permet de modifier les fichiers et de prévisualiser automatiquement les fichiers compilés dans une fenêtre séparée:

Toutes ces étapes sont entièrement automatisées, et vous pouvez concentrer votre travail sur la conception plutôt que sur ces tâches moins amusantes et répétitives.

Maintenant, nous avons des fichiers de jade et moins de création, ainsi que des fichiers HTML et CSS compilés pour l'aperçu. La prochaine étape consiste à tout assembler pour les tests finaux.

Test rapide avec Gulp

J'ai regardé beaucoup de scripts Gulp ou Grunt pour automatiser les dernières étapes du workflow. NPM propose de nombreuses solutions, mais à la fin, j'ai choisi le package Gulp Email Builder. Ce package est la version Gulp d'un projet plus grand, et il a également une version grogn si vous préférez.

Email Builder vous permet de connecter ou d'intégrer des fichiers CSS, de tester à l'aide de l'API décisif et d'envoyer des e-mails de test supplémentaires.

Pour utiliser le constructeur de messagerie, bien sûr, vous devez installer Gulp. J'ai couvert cela dans mon article "Personnaliser les icônes bootstrap avec Gulp", afin que vous puissiez consulter le message pour obtenir de l'aide. De plus, vous pouvez lire l'article d'Etienne Margraff sur Gulp et Grunt Workflows.

En plus du constructeur de messagerie, nous utiliserons également le package Gulp-Replace, vous devrez donc également l'installer.

Comme pour chaque tâche Gulp, nous devons définir Gulpfile.js:

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

Tout d'abord, nous incluons tous les packages requis et définissons quatre variables:

• Current_Date est une chaîne représentant la date actuelle;
• email_subject
• Remote_imgs_basepath est l'URL du dossier distant contenant notre image. Je l'utilise pour effectuer des tests locaux en définissant des chemins relatifs pour l'image (afin que je puisse facilement apporter toutes les modifications nécessaires), mais le test final (et envoyer une tâche) nécessite que l'image soit téléchargée dans le dossier distant, donc j'utilise donc Gulp Remplacez pour que toutes les propriétés SRC changent vers Remote_IMGS_BASEPATH
• email_builder_options est un objet utilisé pour configurer le Builder de messagerie

Dans cet exemple, l'objet email_builder_options a trois éléments, et vous pouvez consulter la page de core e-mail pour une liste complète de toutes les options disponibles.

Le premier élément EncodeSpecialChars garantit que tous les caractères spéciaux sont codés dans leur forme numérique HTML.

L'élément EmailTest est utilisé pour configurer les tests de messagerie. Il nécessite certains paramètres:

• Courriel: les adresses e-mail séparées par virgule auxquelles nous envoyons des e-mails de test. J'ai un compte pour chaque service de messagerie qui doit être testé (Gmail, Outlook, Yahoo, etc.) pour les vérifier rapidement dans leurs pages de messagerie Web et leurs applications mobiles.
• Sujet: le sujet du courrier (notez que j'ai ajouté la variable actuelle_date pour identifier rapidement la version sur laquelle je travaille).
• Transport: l'expéditeur doit effectuer le paramètre

Si vous utilisez Gmail comme paramètre de transport, vous devez activer "Autoriser les applications moins sécurisées" dans les paramètres de votre compte Google, sinon la tâche d'envoi échouera (il vaut mieux ne pas utiliser votre compte personnel pour cela):

Le troisième paramètre vous permet de configurer des tests sur la plate-forme en direct (bien sûr, vous avez besoin d'un compte décisif). Vous devez indiquer les paramètres de votre compte, les sujets facultatifs (qui seront utilisés pour les tests groupés si vous effectuez plusieurs tests) et une liste de clients de messagerie à tester.

Pour ajouter un client, vous devez utiliser son pour tester le code d'application . Vous pouvez obtenir ce code à partir du champ Application_code du fichier https://litmus.com/emails/clients.xml (notez que vous devez être connecté pour accéder à ce fichier).

Dans l'exemple ci-dessus, la ligne

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

Dites aux litums de tester nos e-mails à l'aide de l'application Gmail (Android), Gmail (Explorer) et iPhone 5S (iOS7).

Les résultats peuvent être visualisés sur le tournesol, tout comme ceux faits à la main:

Bien sûr, si vous souhaitez simplement effectuer des tests de messagerie, vous pouvez supprimer le paramètre Litmus de Email_Builder_Options.

Les dernières lignes du gulpfile font tout le travail:

• Nous avons d'abord dit à Gulp de faire notre travail en utilisant le fichier explore_and_taste.html (il s'agit du HTML généré par Codekit à partir de notre fichier Jade, que nous venons d'utiliser pour le premier aperçu)
• En utilisant le module Remplacer , tous les chemins locaux seront remplacés par le chemin distant que nous définissons plus tôt (remplacer (/ src = "imgs // g, 'src ="' rote_imgs_basepath))
• Enfin, exécutez la tâche EmailBuilder, envoyez le test au tournesol et à l'adresse e-mail et enregistrez le fichier prêt à l'enfant.

Où est le fichier CSS?

Le constructeur de messagerie simplifie vraiment cette tâche. Vous pouvez les gérer en ajoutant simplement des attributs de données aux liens ou aux balises de style:

• liens ou balises de style sans attributs de données seront inclus
• s'ils ont un attribut de données, les règles CSS seront intégrées
• Enfin, Data-Embed-Inigore vous permet de définir quelques règles CSS à des fins de développement uniquement (elles seront ignorées lorsqu'elles seront traitées).

De même, CODA simplifie le traitement de Gulp, vous permettant d'utiliser son application de terminal interne:

Conclusion

Maintenant, nous pouvons enfin reprogrammer notre flux de travail:

Vous pouvez personnaliser chaque étape en fonction de vos besoins, utiliser un autre éditeur au lieu de Codekit, utiliser Grunt au lieu de Gulp, utiliser Sass au lieu de moins, et plus. Quelle que soit la technologie que vous choisissez, un tel flux de travail peut vraiment augmenter votre productivité.

Si vous avez votre propre flux de travail de messagerie HTML et comment il diffère de ceux couverts dans ce tutoriel, veuillez me le faire savoir dans les commentaires.

Les questions fréquemment posées sur le développement des e-mails HTML

Quelles sont les meilleures pratiques pour le développement des e-mails HTML?

Le développement des e-mails HTML est un processus complexe qui nécessite une compréhension approfondie des principes de codage et de conception. Certaines meilleures pratiques incluent l'utilisation de CSS en ligne pour vous assurer que votre style est correctement appliqué, en utilisant des tables pour disposer pour assurer la compatibilité avec tous les clients de messagerie et tester vos e-mails sur plusieurs plates-formes et appareils pour s'assurer qu'ils sont tous bien. En outre, il est important de garder le code concis et ordonné, d'utiliser des balises ALT pour les images et d'inclure une version en texte brut de l'e-mail pour les utilisateurs qui ne peuvent pas ou ne souhaitent pas afficher les e-mails HTML.

Comment apprendre le développement des e-mails HTML?

Il existe de nombreuses ressources disponibles pour l'apprentissage du développement des e-mails HTML. Les cours en ligne offerts par Udemy et Skillshare peuvent fournir une introduction complète au sujet. De plus, les blogs et les articles sur SitePoint et le courrier électronique sur l'acide peuvent fournir des conseils et des idées précieux. La pratique est également critique - essayez de créer votre propre e-mail à partir de zéro pour comprendre le processus.

De quels outils de développement de messagerie HTML ai-je besoin?

HTML Le développement des e-mails nécessite un éditeur de texte pour écrire du code, un client de messagerie pour tester les e-mails et éventuellement un outil de conception pour créer des dispositions de messagerie. Pour ces outils, il existe de nombreuses options gratuites et payantes, vous pouvez donc choisir celle qui convient le mieux à vos besoins et à votre budget.

Comment rendre mon e-mail HTML réactif?

Rendre votre réactif par e-mail HTML inclut l'utilisation des requêtes multimédias pour ajuster votre disposition en fonction de la taille de l'écran de l'appareil que vous visualisez votre e-mail. Cela peut inclure la modification de la taille de l'image, l'ajustement de la disposition de la table, etc. Il existe de nombreuses ressources disponibles en ligne pour vous guider tout au long du processus.

Quels sont les défis courants dans le développement de courriels HTML?

Certains défis courants dans le développement de courriels HTML comprennent la gestion des incohérences entre les différents clients de messagerie, la garantie de vos e-mails sur une variété d'appareils et le maintien de votre code concis et ordonné. De plus, équilibrer une exigence de conception attrayante avec les limites du codage par e-mail peut également être difficile.

Comment tester mon e-mail HTML?

Tester votre e-mail HTML est une partie importante du processus de développement. Cela peut être fait en vous envoyant un e-mail et en le visualisant sur différents appareils et clients de messagerie. Il existe également des outils en ligne qui peuvent simuler différents appareils et clients de messagerie pour vous.

Comment utiliser les formulaires dans le développement de courriels HTML?

Les tableaux

sont un outil clé du développement de courriels HTML car ils fournissent un moyen de créer des dispositions compatibles avec tous les clients de messagerie. Cela comprend la création d'une structure de type grille pour votre e-mail à l'aide de balises de table HTML, puis de placer votre contenu dans cette structure.

Comment utiliser CSS en ligne dans le développement de courriels HTML?

CSS en ligne implique de placer vos styles CSS directement dans des balises HTML, plutôt que dans une feuille de style séparée. Ceci est important dans le développement des e-mails HTML, car certains clients de messagerie ne prennent pas en charge les feuilles de style externes. Pour utiliser CSS en ligne, incluez simplement votre style dans la propriété "style" de la balise HTML.

Comment inclure des images dans mon e-mail HTML?

Les images peuvent être incluses dans les e-mails HTML en spécifiant l'URL de l'image à l'aide de la balise "IMG" et de l'attribut "SRC". Il est également important d'inclure un attribut "Alt" pour fournir une description de texte de l'image aux utilisateurs qui ne peuvent pas ou ne veulent pas le visualiser.

Comment créer une version en texte brut de l'e-mail HTML?

La création d'une version en texte brut d'un e-mail HTML comprend la suppression de toutes les balises HTML et ne laissant que du contenu texte. Cela peut être fait manuellement, ou il existe des outils en ligne qui peuvent le faire pour vous. Les versions en texte brut contenant des e-mails sont importantes pour les utilisateurs qui préfèrent ne pas afficher les e-mails HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!