Le Design d'Emails Avec Grunt C'est Plus Fun

() translation by (you can also view the original English article)

Le design d'emails est compliqué et archaïque. Intégrer votre CSS dans le HTML, utiliser des tables, se battre avec des compatibilités CSS variables, coder pour des terminaux et clients multiples, la liste est sans fin. Dans ce tutoriel, je vais vous montrer comment nous pouvons utiliser Grunt pour automatiser et rationaliser notre workflow.

Un Workflow qui ne marche pas

Dans le design web, le design des emails est un workflow à part. Souvent vous concevez un template dans un environnement isolé, avec peu ou pas de dépendances ni de ressources partagées. Vous pouvez copier un balisage d'un endroit (local, statique) vers un autre (Fournisseur de services de messagerie, base de code). Il peut être difficile d'assurer la maintenance de vos templates d'emails, de garder leur cohérence, et il est parfois compliqué de collaborer avec une équipe, tout ceci sans parler des tests et mises en ligne à faire avant de les envoyer.

Un des problèmes que j'ai rencontrés par le passé est que chaque fois que j'avais besoin d'un nouveau template, je partais d'un template existant que j'adaptais ici ou là. Le résultat était une série d'incohérences dans la production. Disons le tout net : c'est une mauvaise pratique.

Un autre problème courant est que chaque fois que je pense avoir terminé, et que je passe le template dans un outil de mise en ligne et le transmets à un développeur, quelqu'un arrive avec une demande de modification, ou fait remarquer une erreur. Le workflow edit/inline/copy doit être répété encore et encore.

Grunt à la rescousse

Aujourd'hui j'utilise Grunt pour optimiser mon workflow de design d'email et voici ce que cela m'apporte :

j'ai un framework avec lequel travailler, je peux utiliser Sass et le templating
j'ai un boilerplate pour de nouveaux emails
je conserve la cohérence de mes emails à l'intérieur d'un projet
les diverses tâches et tests que je dois réaliser pour chaque email sont automatisées

Qu'est-ce que Grunt ?

Grunt est un outil de réalisation de tâches. C'est un fichier JavaScript qui exécute l'une après l'autre les tâches que vous lui demandez de réaliser. Cette liste de choses que je viens de mentionner ? Nous pouvons les mettre dans un fichier Grunt et lui demander de les exécuter pour nous. Parfait pour les tâches répétitives.

Pour mettre en oeuvre Grunt, il va falloir vous salir un peu les mains avec la console et JavaScript. Mais vous allez voir que c'est assez simple.

1. Comment mettre en route Grunt

Chris Coyier a écrit un excellent tutoriel sur les premiers pas avec Grunt (en français). Je vais passer en revue les basiques.

Pour fonctionner, Grunt a besoin de quelques petites choses. Node, un package manager et un fichier grunt.

Installer Node

Allez sur le site de Node et suivez les instructions d'installation.

Créer un package.json dans le dossier de votre projet

Créez un nouveau dossier (appelé par exemple email) puis créez un fichier appelé package.json.

Copiez-collez ces quelques ligne de JSON dans votre fichier package.json.

{
  "name": "emailDesign",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5"
  }
}

Ici, nous indiquons au package manager de Node d'utiliser Grunt, version 0.4.5 ou au-dessus.

NPM install

Et maintenant pour installer cette version de Grunt allez dans le dossier de votre projet dans la console et tapez :

1	npm install

Quand vous lancerez cette commande, vous remarquerez l'apparition d'un dossier node_modules à l'intérieur de votre dossier email..

Installer Grunt CLI

Toujours dans votre dossier email, lancez la commande suivante :

1	npm install -g grunt-cli

Note: vous devrez peut-être faire précéder la commande de sudo si on vous demande de l'exécuter en tant que root/Administrator.

Une fois que c'est fait, nous pouvons taper des commandes Grunt dans la console.

Créez votre Gruntfile.js

Créez un fichier appelé Gruntfile.js dans le dossier de votre projet et copiez-collez le JavaScript suivant :

module.exports = function(grunt) {

    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json')
    });

    grunt.registerTask('default');

};

On a ici un début de code pour faire fonctionner Grunt. Ajoutons maintenant quelques éléments un peu plus excitants.

2. Ajouter des tâches à Grunt

Commençons avec quelque chose de simple mais de vital : Intégrer le CSS en ligne. Admettons que nous ayons un template d'email avec CSS dans la partie head. La maintenance de CSS dans la partie head est facile, mais le template que nous voulons envoyer doit avoir un CSS en ligne (intégré au HTML).

Créer le Template HTML

Nous allons utiliser un email HTML très basique avec CSS dans le head. Copiez-collez le balisage suivant dans un fichier email.html que vous créerez dans le dossier de votre projet.

<html>
<head>
  <style>
  body{
    background:#f1f1f1;
    font-family: Helvetica;
  }
  .container{
    background:#fff;
    border:1px solid #eee;
    width:500px;
    padding:20px;
    margin:20px auto;
  }
  h1{
    font-size:32px;
    text-align:center;
    font-weight:400;
  }
  </style>
</head>

<body>
  <div class="container">
    <h1>Hello world!</h1>
    <p>This is an email template.</p>
  </div>
</body>
</html>

Installer la tâche CSS Inliner

Ensuite, nous allons installer une tâche CSS inliner pour placer chaque règle de style à l'intérieur des éléments HTML eux-mêmes. J'aime cet inliner car il ne fait appel à aucune autre dépendance. Retournez à votre console et lancez cette commande :

1	npm install grunt-inline-css --save-dev

Cela va ajouter la tâche grunt-inline-css à votre dossier npm_modules et au fichier package.json.

Ajouter la tâche à votre Gruntfile

Ajoutez ensuite la tâche à Gruntfile.js en utilisant ce bout de code, juste au-dessus de grunt.registerTask('default');

1	grunt.loadNpmTasks('grunt-inline-css');

Puis ajoutez vos options de configuration à l'intérieur de la méthode grunt.initConfig() :

inlinecss: {
    main: {
        options: {},
        files: {
            'email-inlined.html': 'email.html'
        }
    }
}

Ici, nous indiquons à inlinecss de trouver le fichier appelé “email.html” et de retourner “email-inlined.html”. Enfin, nous l'appelons, depuis la tâche par défaut de Grunt (default) :

1	grunt.registerTask('default',['inlinecss']);

Le Gruntfile final

Votre Gruntfile devrait maintenant ressembler à ceci :

module.exports = function(grunt) {

    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),

      inlinecss: {
        main: {
          options: {
          },
          files: {
            'email-inlined.html': 'email.html'
          }
        }
      }

    });

    grunt.loadNpmTasks('grunt-inline-css');

    grunt.registerTask('default',['inlinecss']);

};

Lancer Grunt

Revenons à nouveau à la console, et tapons grunt puis appuyons sur enter pour l'envoyer :

Vous devriez maintenant avoir un fichier “email-inlined.html” avec un CSS en ligne. Si vous ouvrez les deux fichiers HTML dans votre navigateur, ils devraient être identiques.

Tâches de Design d'Email

Avec un peu de chance, ceci vous aura convaincus de la puissance de Grunt pour automatiser votre workflow de design d'email. De plus, après avoir suivi cette introduction vous avez un framework vous permettant d'aller encore plus loin.

Quelles autres tâches de design d'email pourriez-vous automatiser ?

Compiler CSS (si vous utilisez SASS ou Less)
Mettre en ligne CSS
Compiler les templates HTML (si vous utiliser des layouts ou des partiels)
Prévisualiser dans le navigateur
Prévisualiser dans les clients mail
Effectuer des tests avec les applis de tests d'email (Litmus, Email on Acid)
Uploader des ressources sur un CDN public
Ajouter des balises de tracking UTM sur les liens
…et la liste continue

Mon Gruntfile de Design d'Email

Voici le Gruntfile, en open-source sur GitHub, que j'utilise souvent. Regardons les tâches individuelles que j'ai l'habitude de réaliser, pour voir ce qui se passe.

1. Sass/SCSS

J'aime bien créer mon CSS à l'aide de SCSS, donc la première chose que je demande à Grunt de faire c'est de compiler le fichier SCSS principal..

2. Assembler HTML

Assemble est un générateur de site statique. Il compile le HTML en assemblant le contenu de chaque email à l'intérieur du ou des principaux templates.

3. CSS en Ligne

J'utilise premailer pour mettre en ligne CSS. Vous vous demandez peut-être pourquoi je n'utilise pas celui dont j'ai parlé précédemment, c'est tout simplement parce que premailer offre une meilleure compatibilité pour les media queries. Si on veut que les media queries fonctionnent, il faut les laisser dans la partie head.

Note: premailer nécessite l'installation de dépendances, dont Ruby et quelques gems.

4. Envoyer un Email Test

Pour envoyer un email j'utilise l'API de Mailgun. Ça me permet d'envoyer l'email dans ma boîte et je peux la consulter à partir de n'importe quel client.

C'est aussi une manière pratique d'envoyer votre template à Litmus si vous voulez le prévisualiser dans d'autres clients email.

5. CDN

C'est pratique si vous envoyez des mails transactionnels et que vous avez besoin de stocker des ressources images quelque part. Si vous utilisez un ESP (Email Service Provider, un fournisseur de services de messagerie) pour envoyer vos emails, il y a des chances qu'ils stockent vos images, dans ce cas ce n'est pas un problème.

Lancer les Tâches

Pour lancer ces tâches dans la console, nous avons plusieurs options.

grunt lance la tâche par défaut. Cela comprend la compilation de Sass, l'assemblage des templates et la mise en ligne de CSS. Nous pouvez ensuite regarder le résultat dans votre navigateur.
grunt send --template=MY_TEMPLATE.html lancera les tâches décrites ci-dessus mais il enverra aussi le template d'email que vous spécifierez. Rappelez-vous de mettre à jour les réglages de Mailgun dans Gruntfile.js.
grunt cdnify lancera elle aussi les tâches par défaut, mais elle uploadera les ressources images locales et remplacera le chemin du fichier par celui du CDN.
Remarquez que vous pouvez aussi combiner ces tâches, par exemple grunt cdnify send —template=MY_TEMPLATE.html

Encore des Tâches !

Vous pouvez ajouter encore bien des tâches à votre workflow, ou vous pouvez en supprimer. Jetez un coup d'oeil à la liste des plugin Grunt pour trouver les tâches qui vous seront utiles.

Templates d'Emails Transactionnels

Voici quelques templates que j'ai préparés à l'avance.

En utilisant le workflow et le Gruntfile précédemment décrits, j'ai mis à disposition en open-source quelques emails transactionnels pour les équipes de développement qui pourraient en avoir besoin. Vous pouvez les utiliser librement tels quels, ou vous en servir comme base pour développer vos propres designs.

Quelques Ressources utiles pour le Design d'Emails

Conclusion

De nombreuses tâches liées au design d'emails peuvent être ardues et tordues. Laissez Grunt faire le sale boulot pour vous et votre workflow redeviendra un vrai plaisir !