Share
Progettare la posta elettronica è difficile e arcaico. Inlining CSS, design di tabelle, supporto CSS diverso, più dispositivi, più client, la lista è infinita. In questo tutorial spiegherò come utilizzare Grunt per automatizzare e ottimizzare il flusso di lavoro.
La progettazione di email è un flusso di lavoro diverso dal web design. Spesso stai progettando un modello in un ambiente isolato, con poche o nessuna dipendenza o risorse condivise. È possibile che si copi il markup da un posto (locale, statico) a un altro (ESP, codebase). Può essere difficile mantenere i tuoi modelli di email, è difficile mantenerli coerenti e difficili da collaborare con i membri del team, il tutto tenendo a mente i vari test e l'inlining che devono essere eseguiti prima che vengano inviati.
Un problema che ho avuto in passato è ogni volta che ho bisogno di un nuovo modello di email, vorrei prendere un modello esistente e apportare qualche modifica qua e là. Ciò comporterebbe l'invio di e-mail incoerenti attraverso il prodotto. Che è solo una cattiva pratica.
Un altro problema che ho riscontrato è che ho finito, quindi metto il modello attraverso uno strumento inliner CSS e lo porto a uno sviluppatore, solo per qualcuno che richiede una modifica o segnala un errore. Il flusso di lavoro di modifica / in linea / copia deve quindi essere ripetuto ancora e ancora.
Oggi uso Grunt per ottimizzare il flusso di lavoro del mio progetto di email. Aiuta con alcune cose:
Grunt è un corridore compito. È un file Javascript che esegue le attività che si desidera eseguire una dopo l'altra. Quella lista di cose che devi fare ho appena menzionato sopra? Possiamo metterli in un file Grunt e farlo fare tutti per noi. Perfetto per eseguire attività ripetitive.
Per far funzionare Grunt dovrai mettere le mani un po 'sporche con la roba da riga di comando e Javascript. Ma è molto semplice.
Chris Coyier offre un ottimo tutorial sull'impostazione di Grunt per la prima volta. Ho intenzione di scavalcare le basi.
Grunt richiede un paio di cose per andare avanti. Nodo, un gestore di pacchetti e un file grunt.
Vai al sito del nodo e segui le istruzioni per l'installazione.
Crea una nuova cartella (ad esempio chiamata e-mail) quindi creare un file denominato package.json.
Incolla questo JSON nel file.
"nome": "emailDesign", "versione": "0.1.0", "devDependencies": "grunt": "~ 0.4.5"
Qui stiamo dicendo al gestore di pacchetti del nodo di utilizzare Grunt, versione 0.4.5 o successiva.
Ora per installare la versione precedente di Grunt, vai alla directory del tuo progetto nella riga di comando e inserisci:
installazione di npm
Quando esegui questo comando, noterai a node_modules cartella appare.
Sempre nella tua directory di posta elettronica, esegui il seguente comando:
npm install -g grunt-cli
Nota: potrebbe essere necessario anteporre questo comando con sudo se ti viene chiesto di eseguirlo come root / amministratore.
Fatto ciò, ora possiamo digitare comandi Grunt nella riga di comando.
Crea un file chiamato Gruntfile.js nella cartella del progetto e includi il seguente codice JavaScript:
Accentsconagua
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ( 'default'); ;Questa è l'essenza di ciò che è necessario per far funzionare Grunt. Ora per aggiungere altre cose eccitanti.
Iniziamo con qualcosa di semplice, ma vitale: Inlining CSS. Diciamo che abbiamo un modello di email, con CSS in testa. Il CSS in testa è facile (ish) da mantenere, ma il modello che vogliamo effettivamente inviare dovrebbe avere CSS in linea.
Utilizzeremo un'e-mail HTML di base con il CSS in testa. Salva il seguente markup come email.html nella directory del tuo progetto.
Ciao mondo!
Questo è un modello di email.
Quindi utilizzeremo un'attività inliner CSS per posizionare ogni regola di stile in linea sugli elementi HTML stessi. Mi piace questo inliner in quanto non richiede altre dipendenze. Torna alla tua riga di comando ed esegui questo:
npm installa grunt-inline-css --save-dev
Questo aggiungerà l'attività grunt-in-line-css al tuo npm_modules cartella, così come il package.json file.
Quindi aggiungi l'attività al tuo Gruntfile.js usando questo frammento, sopra dove vedi grunt.registerTask ( 'default');
grunt.loadNpmTasks ( 'grunt-inline-css');
Quindi aggiungere le opzioni di configurazione, all'interno del grunt.initConfig () metodo:
inlinecss: main: options: , files: 'email-inlined.html': 'email.html'
Qui stiamo dicendo a inlinecss di trovare il file "email.html" e di inviare "email -inlined.html". Infine, lo chiamiamo dal task predefinito grunt:
grunt.registerTask ( 'default', [ 'inlinecss']);
Il tuo Gruntfile dovrebbe ora assomigliare a questo:
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), inlinecss: main: opzioni: , file: 'email -inlined.html' : 'email.html'); grunt.loadNpmTasks ( 'grunt-inline-css'); grunt.registerTask ( 'default', [ 'inlinecss']); ;Tornando ancora alla riga di comando, digitare grugnito ed entra per eseguirlo.
Ora dovresti essere lasciato con un email-inlined.html file che ha il css in linea. Se apri entrambi i file HTML nel tuo browser, dovrebbero avere lo stesso aspetto.
Con una fortuna che ti avrà convinto dei poteri di Grunt nell'automatizzare il tuo flusso di lavoro di progettazione della posta elettronica. Inoltre, in seguito a questa introduzione, è stato fornito il quadro per andare ancora oltre.
Quali altre attività di progettazione della posta elettronica potresti automatizzare?
Questo è il Gruntfile, open-source su GitHub, che uso molto spesso. Diamo un'occhiata ai singoli compiti per vedere cosa sta realmente accadendo.
Mi piace gestire il mio CSS usando SCSS, quindi la prima cosa che devo fare a Grunt è compilare il file SCSS principale.
Assemble è un generatore di sito statico. Compila l'HTML riunendo i modelli di layout principali e il contenuto di ciascuna email.
Sto usando premailer per CSS incorporato. Se ti stai chiedendo perché non sto usando l'inliner dall'alto, ho trovato che il premailer ha un supporto migliore per le query multimediali. Affinché le query sui media funzionino, desideriamo che siano lasciate sole in testa, non in linea.
Nota: premailer ha delle dipendenze che devono essere installate, tra cui Ruby e un paio di gemme.
Per inviare un'e-mail a una casella di posta in arrivo sto utilizzando l'API di Mailgun. Questo invia l'e-mail HTML in uscita alla mia casella di posta in arrivo in modo che possa vederlo da solo nel client che scelgo.
Questo è anche un modo utile per inviare il modello a Litmus se si desidera visualizzarlo in anteprima in altri client di posta elettronica. Fare così è una questione di cambiare il destinatario.
Questo è utile se si inviano e-mail transazionali e è necessario memorizzare le risorse immagine da qualche parte. Se stai utilizzando un ESP (Email Service Provider) per inviare le tue e-mail, c'è una buona possibilità che memorizzino le tue risorse immagine per te, quindi non è un problema in questo caso.
Per eseguire le attività abbiamo una serie di opzioni di comando.
grugnito esegue l'attività predefinita. Ciò include la compilazione di Sass, l'assemblaggio di modelli e l'inlining del CSS. È quindi possibile aprire l'output nel browser.grunt send --template = MY_TEMPLATE.html eseguirà le attività di cui sopra e invierà il modello di email specificato. Ricordati di aggiornare le impostazioni di Mailgun in Gruntfile.js.grunt cdnify eseguirà nuovamente le attività predefinite, ma caricherà anche eventuali risorse immagine locali, quindi sostituirà i percorsi dei file con il percorso CDN.grunt cdnify send -template = MY_TEMPLATE.html Ci sono più attività che potresti voler aggiungere per aiutare il tuo processo, o potresti volerle rimuovere. Dirigiti verso la directory dei plugin di Grunt per trovare le attività che aiutano il tuo flusso di lavoro.
Ecco alcuni modelli che ho preparato in precedenza.
Usando il flusso di lavoro e Gruntfile delineati sopra, ho aperto una serie di email transazionali per i team di sviluppo da utilizzare. Sentiti libero di usarli come sono, o usali come un piano d'appoggio per i tuoi progetti di email.
Molte attività associate alla progettazione di e-mail possono essere ardue e imbarazzanti. Lascia che Grunt faccia il duro lavoro per te e troverai l'intero processo molto più piacevole!
