Share
Proiectarea e-mailurilor este greoaie și arhaică. Includerea CSS, designul tabelului, suportul CSS variat, dispozitive multiple, clienți multipli, lista este nesfârșită. În acest tutorial vă voi explica cum puteți utiliza Grunt pentru a ajuta la automatizarea și eficientizarea fluxului de lucru.
Designul de e-mail este un flux de lucru diferit pentru designul web. Deseori, proiectați un șablon într-un mediu izolat, cu foarte puține dependențe sau resurse partajate. Este posibil să copiați marcarea dintr-un loc (local, static) într-un altul (ESP, codebase). Poate fi dificil să vă păstrați șabloanele de e-mail, greu de păstrat coerente și dificil de colaborat cu membrii echipei, toate în același timp ținând cont de diversele teste și inliniri care trebuie făcute înainte de a fi trimise.
O problemă pe care am avut-o în trecut este de fiecare dată când aveam nevoie de un nou șablon de e-mail, mi-aș lua un șablon existent, apoi am făcut câteva schimbări aici și acolo. Acest lucru ar duce la e-mailuri inconsistente în cadrul produsului. Care este doar o practică proastă.
O altă problemă pe care am întâlnit-o este că cred că am terminat, așadar, am pus șablonul printr-un instrument CSS inliner și l-am predat unui dezvoltator, doar pentru cineva care a solicitat o schimbare sau a subliniat o eroare. Modul de editare / editare / copiere trebuie repetat din nou și din nou.
În zilele noastre folosesc Grunt pentru a-mi optimiza fluxul de lucru pentru designul de e-mail. Ajută la câteva lucruri:
Grunt este un alergător. Este un fișier Javascript care execută sarcinile pe care doriți să le ruleze unul după altul. Acea listă de lucruri pe care trebuie să o faceți, tocmai am menționat mai sus? Putem să le punem într-un dosar Grunt și să facem asta pentru noi. Perfect pentru executarea sarcinilor repetitive.
Pentru ca Grunt să fie pus în funcțiune, va trebui să vă faceți mâinile puțin murdare cu linii de comandă și Javascript. Dar este foarte direct înainte.
Chris Coyier dă un tutorial foarte bun pentru înființarea Grunt pentru prima dată. Voi trece peste elementele de bază.
Grunt are nevoie de câteva lucruri pentru a merge. Nod, un manager de pachete și un fișier de grămadă.
Accesați site-ul Nod și urmați instrucțiunile de instalat.
Creați un dosar nou (de ex e-mail) apoi creați un fișier numit package.json.
Inserați acest JSON în fișier.
"nume": "emailDesign", "versiune": "0.1.0", "devDependencies": "grunt": "~ 0.4.5"
Aici îi spunem managerului de pachete de noduri să folosească Grunt, versiunea 0.4.5 sau mai recentă.
Acum, pentru a instala versiunea de mai sus a lui Grunt, mergeți la directorul proiectului în linia de comandă și introduceți:
npm install
Când executați această comandă, veți observa o node_modules apare folderul.
Încă în directorul dvs. de e-mail, executați următoarea comandă:
npm instalare -g grunt-cli
Notă: este posibil să aveți nevoie să pregătiți această comandă cu sudo dacă vi se cere să-l rulați ca root / Administrator.
După ce am făcut asta, putem introduce comenzile Grunt în linia de comandă.
Creați un fișier numit Gruntfile.js în dosarul proiectului și includeți următorul cod JavaScript:
Accentsconagua
modul.exports = funcție (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ( 'default'); ;Acestea sunt oasele goale a ceea ce este necesar ca Grunt să lucreze. Acum, pentru a adăuga mai multe lucruri interesante.
Să începem cu ceva simplu, dar vital: Includerea CSS. Să presupunem că avem un șablon de e-mail, cu CSS în cap. CSS în cap este ușor (ish) de a menține, dar șablonul pe care noi vrem de fapt trimite ar trebui să aibă CSS inline.
Vom folosi un e-mail HTML destul de simplu cu CSS-ul în cap. Salvați următorul marcaj ca email.html în directorul proiectului dvs..
Salut Lume!
Acesta este un șablon de e-mail.
Apoi vom folosi o sarcină CSS inliner pentru a plasa fiecare regulă de stil în linie în elementele HTML. Îmi place acest inliner, deoarece nu necesită alte dependențe. Întoarceți-vă la linia de comandă și rulați-o:
npm instalează grunt-inline-css -save-dev
Aceasta va adăuga sarcina grunt-inline-css la dvs. npm_modules dosar, precum și package.json fişier.
Apoi adăugați sarcina la dvs. Gruntfile.js utilizând acest fragment, de mai sus unde vedeți grunt.registerTask ( 'default');
grunt.loadNpmTasks ( 'groh-inline-css');
Apoi adăugați opțiunile de config, în cadrul grunt.initConfig () metodă:
inlinecss: main: opțiuni: , fișiere: 'email-inlined.html': 'email.html'
Aici vom spune inlinecss să găsiți fișierul numit "email.html" și să ieșiți "email-inlined.html". În cele din urmă, o numim din sarcina prestabilită de bază:
grunt.registerTask ( 'default', [ 'inlinecss']);
Gruntfile dvs. ar trebui să pară așa:
(punt: puntul: : 'email.html'); grunt.loadNpmTasks ( 'groh-inline-css'); grunt.registerTask ( 'default', [ 'inlinecss']); ;
Revenind din nou la linia de comandă, tastați mormăit și introduceți-l pentru al rula.
Ar trebui să rămâi acum cu un e-mail-inlined.html fișier care are css inline. Dacă deschideți ambele fișiere HTML în browserul dvs., acestea ar trebui să arate la fel.
Cu orice noroc care v-ar fi convins de puterile lui Grunt în automatizarea fluxului de lucru de proiectare a e-mailurilor. În plus, în urma acestei introduceri, ați oferit cadrul pentru a merge mai departe.
Ce alte sarcini de proiectare a e-mail-ului ar putea să automatizezi?
Acesta este Gruntfile, deschis de la GitHub, pe care îl folosesc destul de des. Să aruncăm o privire asupra sarcinilor individuale pentru a vedea ce se întâmplă de fapt.
Îmi place să-mi gestionez CSS folosind SCSS, așa că primul lucru pe care îl fac Grunt este să compilez fișierul principal SCSS.
Asamblarea este un generator de site-uri statice. Acesta compilează codul HTML prin reunirea șabloanelor principale de aspect și a conținutului pentru fiecare e-mail.
Folosesc premailer pentru inline CSS. Dacă vă întrebați de ce nu folosesc inlinerul de sus, am constatat că premailer are un suport mai bun pentru interogările media. Pentru ca interogările mass-media să funcționeze, dorim ca ele să fie lăsate singure în cap, fără a fi înclinate.
Notă: premailer are dependențe care trebuie, de asemenea, să fie instalate, inclusiv Ruby și o pereche de pietre prețioase.
Pentru a trimite un e-mail la o căsuță poștală, folosesc API-ul lui Mailgun. Aceasta trimite e-mailurile HTML expediate în căsuța de e-mail, pentru a le putea vedea pentru mine în oricare client pe care îl aleg.
Acesta este, de asemenea, un mod util de a trimite șablonul dvs. la Litmus dacă doriți să îl previzualizați în alți clienți de e-mail. A face acest lucru este o chestiune de schimbare a destinatarului.
Acest lucru este util dacă trimiteți e-mailuri tranzacționale și trebuie să stocați activele imaginilor undeva. Dacă utilizați un furnizor de servicii de e-mail (ESP) pentru a vă trimite e-mailurile, există șanse mari să stocheze imaginile dvs. pentru dvs., deci nu este o problemă în acest caz.
Pentru a executa sarcinile avem un număr de opțiuni de comandă.
mormăit execută sarcina implicită. Aceasta include compilarea Sass, asamblarea șabloanelor și inscrierea în CSS. Apoi puteți deschide ieșirea în browser.grunt trimite --template = MY_TEMPLATE.html va executa sarcinile de mai sus, precum și va trimite șablonul de e-mail pe care îl specificați. Nu uitați să actualizați setările Mailgun în Gruntfile.js.cdnify grunt va rula din nou sarcinile implicite, dar va încărca, de asemenea, orice active de imagine locale, apoi va înlocui căile de fișiere cu calea CDN.grunt cdnify trimite -template = MY_TEMPLATE.html Există mai multe sarcini pe care ați putea dori să le adăugați pentru a vă ajuta procesul, sau ați putea dori să eliminați unele. Folosiți directorul plugin pentru a găsi sarcinile care vă ajută fluxul de lucru.
Iată câteva șabloane pe care le-am pregătit mai devreme.
Folosind fluxul de lucru și Gruntfile prezentat mai sus, am deschis o sursă de emailuri tranzacționale pentru echipele de lucru pentru a le utiliza. Simțiți-vă liber să le folosiți așa cum este, sau să le utilizați ca o boilerplate pentru propriile proiecte de e-mail.
Multe dintre sarcinile asociate cu design-ul de e-mail pot fi grele și ciudate. Lăsați Grunt să facă munca grea pentru dvs. și veți găsi întregul proces mult mai plăcut!
