Con Grunt il Lavoro di Design Delle Email Torna ad Essere Divertente

Italian (Italiano) translation by Stefano Balbo (you can also view the original English article)

Il design delle email è difficile e antiquato. CSS in linea, layout a tabelle, supporto CSS disomogeneo, molteplici device, molteplici client, la lista delle problematiche è infinita. In questo tutorial vi spiegherò come usare Grunt per aiutarvi a razionalizzare e automatizzare questo flusso di lavoro.

Un flusso di lavoro che non funziona

Il design di una email segue un flusso di lavoro diverso dal design web. Spesso vi trovate a lavorare al vostro template in un ambiente di sviluppo isolato, con dipendenze e risorse condivise pari a zero, o quasi. Vi sarà capitato di fare copia-incolla del markup da un ambiente (locale, file statici) ad un altro (ESP, codebase). Fare manutenzione sui vari template non è banale, è difficile mantenerli consistenti ed è scomodo condividerli con i colleghi. Il tutto senza dimenticare i numerosi test e modifiche che immancabilmente precedono la spedizione di ogni email.

Un problema che avevo in passato è che ogni volta che mi serviva un nuovo template per una email, partivo da un template già esistente e apportavo qua e là le modifiche necessarie. Questo portava all'inconsistenza delle varie email rispetto al brand o al prodotto. Ed è un sicuramente un male.

Un altro problema comune è che, quando credo di aver finito e passo il template attraverso un tool di inliner CSS per poi consegnarlo ad un developer, capita che qualcuno richieda una notifica o noti un errore. A quel punto bisogna ripetere i passaggi precedenti, per tutte le volte che è necessario .

Grunt ci viene a salvare

Oggi uso Grunt per ottimizzare il mio email design workflow, con i seguenti vantaggi

Mi permette di lavorare su un framework, e posso usare Sass e dei template
Funziona da boilerplate per ogni nuova email
Mi aiuta a mantenere consistenza tra le email di un determinato progetto
Automatizza i vari task e test che devo fare ogni volta che creo una email

Che cos'è Grunt?

Grunt è un task runner. è un file Javascript che lancia i task che definiamo, uno dopo l'altro. Un esempio? La lista di attività legate al design delle email di cui ho parlato poco sopra può diventare un unico file e Grunt se ne occuperà al posto tuo. Perfetto per lanciare task ripetitivi.

Per installare e usare Grunt dovrete sporcarvi un po' le mani con il javascript e la riga di comando. Ma è tutto molto semplice.

1. Come Installare e configurare Grunt

Chris Coyier ha scritto un ottimo tutorial su come fare il setup di Grunt per la prima volta. Quindi farò solo alcuni accenni basilari.

Grunt necessita di un paio di cose per funzionare. Node, un package manager e un file grunt.

Installare Node

Andate sul sito di Node e seguite le istruzioni per installarlo.

Creare un file package.json nella vostra cartella di progetto.

Create una nuova cartella (es: email) e al suo interno create un file package.json.

Incollate questo codice JSON e salvate il file.

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

Qui stiamo dicendo al package manager node di usare Grunt, version 0.4.5 o superiore.

NPM install

Ora, per installare la suddetta versione di Grunt, posizionatevi nella vostra cartella di progetto e lanciate, da riga di comando:

1	npm install

Dopo aver lanciato il comando apparirà la nuova cartella node_modules.

Installare l'interfaccia a riga di comando di Grunt

Rimanendo nella vostra cartella "email", lanciate il seguente comando:

1	npm install -g grunt-cli

Nota: Se in risposta vi viene chiesto di eseguire il comando come root/amministratore, aggiungete sudo prima della suddetta riga.

Fatto questo, ora potete usare i comandi di Grunt direttamente dalla riga di comando.

Creare il vostro Gruntfile.js

Create nella vostra cartella un file a nome Gruntfile.js e incollateci il seguente JavaScript:

module.exports = function(grunt) {

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

    grunt.registerTask('default');

};

Questa è l'infrastruttura minima necessaria per lavorare con Grunt. Ora aggiungiamo le cose interessanti.

2.Aggiungere dei Tasks a Grunt

Cominciamo con qualcosa di semplice ma vitale: L'Inlining dei CSS. Ipotizziamo di avere un template email, con il CSS nell'head. Il CSS nell'head è più o meno semplice da mantenere, ma l'email che vogliamo spedire dovrebbe avere il CSS in linea.

Creazione del template html

Prendiamo come esempio l'HTML di una email molto semplice, con del CSS nell'head. Salvate il seguente markup in email.html dentro la vostra cartella di progetto.

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

Installazione del task CSS Inliner

Ora utlizziamo un CSS inliner task per spostare gli stili in linea, dentro agli specifici tag HTML. Consiglio questo inliner perch&eacute non richiede altre dipendenze. Ritornate sulla riga di comando e lanciate:

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

questo aggiungerà il task grunt-inline-css alla vostra cartella npm_modules e al file package.json.

Aggiungere un task al vostro file Grunt

Il prossimo passo è aggiungere il task al vostro Gruntfile.js usando questo snippet, da inserire prima della riga grunt.registerTask('default');

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

Aggiungete anche le opzioni di configurazione, all'interno del metodogrunt.initConfig():

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

In questo modo diciamo a inlinecss di cercare il file “email.html” e di generare “email-inlined.html”. A questo punto, lo richiamiamo dal task default di Grunt:

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

Il file Grunt completo

Il vostro file grunt adesso dovrebbe avere questo aspetto:

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']);

};

Lanciare Grunt

Ritorniamo nuovamente alla riga di comando, scrivete grunt e date invio.

Dovreste ora avere il vostro file “email-inlined.html” con il CSS in linea. aprendo entrambi i file via browser dovrebbero essere visualmente identici.

I task per il design delle email

Con un po' di fortuna questo esempio vi ha dimostrato la potenza di Grunt applicata al flusso di lavoro del design delle email. In più, questa breve introduzione vi mette a disposizione un framework per andare anche oltre.

Quali altri task del design delle email potete automatizzare?

Compilare il CSS (se usate SASS o Less)
creare il CSS in linea
Compilazione dei template HTML (se usate dei layout composti da più di un file)
Visualizzare un'anteprima su browser
Visualizzare un'anteprima sui client email
Lanciare dei test con delle app specifiche per il debug, ad es:(Litmus, Email on Acid)
Upload del materiale su una CDN pubblica
Aggiungere il tracking UTM ai link
…e molto altro

Il mio Gruntfile per il design delle email

Questo è il mio Gruntfile, in open-source su Github, e lo uso spesso. Diamo un'occhiata ai singoli task per vedere che cosa fa.

1. Sass/SCSS

gestisco i miei CSS con SCSS, quindi la prima cosa che chiedo a grunt è di compilare il file SCSS principale.

2. Composizione dell'HTML

Assemble è un generatore di siti statici. compila l'HTML unendo il template con il layout e il contenuto testuale della email.

3. CSS in linea

Uso premailer per fare l'inlining dei CSS. Se vi state chiedendo perch&eacute non uso l'inliner che ho suggerito prima, è perch&eacute premailer ha secondo me un miglior supporto per le media queries. Le media query, per funzionare, è meglio che restino nell'head e non devono finire in linea.

Nota: premailer necessita di altre dipendenze installate, tra cui Ruby e un paio di gem.

4. Invio delle Email di test

Per spedire le email uso le API di Mailgun. L'email HTML viene spedita alla mia casella e posso testarla con i vari client di posta che desidero.

Questo è anche un buon metodo per spedire i vostri template a Litmus se volete una preview su un client che non avete a disposizione. è sufficiente cambiare il destinatario della mail.

5. CDN

Utile se utilizzate email transazionali e avete bisogno di salvare gli asset grafici da qualche parte. Se invece usate un ESP (Email Service Provider) per spedire, con buona probabilità si occuperà di salvare le immagini al posto vostro, e in quel caso non dovreste avere problemi.

Lanciare i Task

Per lanciare i task abbiamo una serie di comandi disponibili.

grunt lancia il task default. Questo include la compilazione del Sass, assemblaggio del template e l'inlining dei CSS. L'output è visualizzabile su browser.
grunt send --template=MY_TEMPLATE.html Lancia i suddetti task, e in più spedisce il template email specificato. Ricordate di modificare i setting di Mailgun nel file Gruntfile.js.
grunt cdnify lancerà di nuovo i task default, ed inoltre caricherà su CDN gli asset grafici locali, sostituendo i percorsi ai file con gli url così generati dalla CDN.
Vi faccio notare che è possibile combinare i task su un'unica riga, es: grunt cdnify send —template=MY_TEMPLATE.html

Altri Task ancora!

Ci sono dei task che probabilmente vorrete aggiungere al vostro processo, o forse vorrete rimuoverne qualcuno rispetto agli esempi. Andando sulla lista dei plugin di Grunt troverete i task adatti al vostro flusso di lavoro.

Template per email transazionali

Ecco alcuni template che ho preparato in passato.

Usando Grunt e il flusso di lavoro che vi ho raccontato, ho rilasciato una serie di template open-source per email transazionali ad utilizzo di qualunque sviluppatore. Siete liberi di usarli, o usarli come boilerplate per le vostre future email.

Risorse utili per l'Email Design

Conclusioni

Molti task relativi all'email design possono essere scomodi e complicati. Lasciamo che sia Grunt a fare il lavoro ripetitivo, e riscoprirete di poter lavorare sul design con soddisfazione!