Het ontwerpen van e-mail is moeilijk en archaïsch. Inline CSS, tabelontwerp, verschillende CSS-ondersteuning, meerdere apparaten, meerdere clients, de lijst is eindeloos. In deze tutorial leg ik uit hoe je Grunt kunt gebruiken om je workflow te automatiseren en stroomlijnen.

E-mailontwerp-workflow afgebroken

E-mailontwerp is een andere workflow voor webontwerp. Vaak ontwerp je een sjabloon in een geïsoleerde omgeving, met weinig tot geen afhankelijkheden of gedeelde bronnen. U kopieert mogelijk van de ene plaats (lokaal, statisch) naar de andere (ESP, codebase). Het kan moeilijk zijn om je e-mailsjablonen te onderhouden, moeilijk om ze consistent te houden en lastig om samen te werken met teamleden, terwijl je rekening houdt met de verschillende testen en inlining die gedaan moeten worden voordat ze verstuurd worden.

Een probleem dat ik in het verleden heb gehad, is dat telkens wanneer ik een nieuwe e-mailsjabloon nodig had, ik een bestaande sjabloon zou gebruiken en dan hier en daar een paar aanpassingen zou maken. Dit zou leiden tot inconsistente e-mails binnen het product. Dat is gewoon een slechte oefening.

Een ander probleem dat ik tegenkwam, is dat ik denk dat ik klaar ben, dus ik zet de sjabloon door een CSS inliner tool en geef het door aan een ontwikkelaar, alleen voor iemand om een ​​wijziging aan te vragen of een fout te signaleren. De bewerk / inline / kopie-workflow moet dan steeds opnieuw worden herhaald.

Grunt to the Rescue

Tegenwoordig gebruik ik Grunt om mijn e-mailontwerpworkflow te optimaliseren. Het helpt met een paar dingen:

• Het geeft me een kader om in te werken, dus ik kan Sass en templating gebruiken
• Het dient als een standaard voor nieuwe e-mails
• Het helpt mijn e-mails consistent te maken in een project
• Het automatiseert de verschillende taken en tests die ik moet doen voor elke e-mail

Wat is Grunt?

Grunt is een taakloper. Het is een Javascript-bestand dat de taken uitvoert die u wilt dat het een voor een wordt uitgevoerd. Die lijst met dingen die je moet doen die ik hierboven net noemde? We kunnen die in een Grunt-bestand stoppen en alles voor ons laten doen. Perfect voor het uitvoeren van repetitieve taken.

Om Grunt op gang te krijgen, moet je je handen net een beetje vies maken met opdrachten en Javascript. Maar het is heel eenvoudig.

1. Hoe Grunt op gang te komen

Chris Coyier geeft voor het eerst een heel goede tutorial over het opzetten van Grunt. Ik ga over de basis lopen.

Grunt vereist een aantal dingen om aan de gang te gaan. Node, een pakketbeheerder en een grunt-bestand.

Installeer knooppunt

Ga naar de knooppuntsite en volg de instructies om te installeren. 

Maak package.json aan in de map van uw project

Maak een nieuwe map (bijvoorbeeld genaamd e-mail) maak vervolgens een bestand met de naam package.json.

Plak deze JSON in het bestand.

"naam": "emailDesign", "version": "0.1.0", "devDependencies": "grunt": "~ 0.4.5"

Hier vertellen we de pakketmanager van het knooppunt om Grunt, versie 0.4.5 of hoger te gebruiken.

NPM installeren

Om de bovenstaande versie van Grunt te installeren, ga je nu naar de map van je project op de commandoregel en voer je in:

npm installeren

Wanneer u deze opdracht uitvoert, ziet u een node_modules map verschijnt.

Installeer de Grunt Command Line Interface

Voer nog steeds in je e-mailmap de volgende opdracht uit:

npm install -g grunt-cli

Notitie: u moet mogelijk deze opdracht voorafvoegen met sudo  als u wordt gevraagd om het uit te voeren als root / beheerder. 

Nu we dat gedaan hebben, kunnen we nu Grunt-commando's in de commandoregel typen.

Maak je Gruntfile.js

Maak een bestand met de naam Gruntfile.js in uw projectmap en voeg het volgende JavaScript toe:

module.exports = functie (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ( 'default'); ;

Dit zijn de kale botten van wat nodig is voor Grunt om te werken. Nu om meer spannende dingen toe te voegen.

2. Voeg de taken toe aan grunt

Laten we beginnen met iets eenvoudigs, maar van vitaal belang: Inlining CSS. Laten we zeggen dat we een e-mailsjabloon hebben, met CSS in de aanslag. CSS in het hoofd is gemakkelijk (ish) te onderhouden, maar de sjabloon die we eigenlijk willen sturen CSS moet zijn ingekaderd.

Maak de HTML-sjabloon

We gaan een vrij eenvoudige HTML-e-mail gebruiken met de CSS in zijn hoofd. Sla de volgende markup op als email.html in de map van uw project.

     
 
Hallo Wereld!
 
Dit is een e-mailsjabloon.
 
  

Installeer de CSS Inliner-taak

Vervolgens gaan we een CSS inliner-taak gebruiken om elke stijlregel inline op de HTML-elementen zelf te plaatsen. Ik vind deze inliner leuk omdat hij geen andere afhankelijkheden vereist. Ga terug naar je opdrachtregel en voer dit uit:

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

Hiermee wordt de taak grunt-inline-css aan je toegevoegd npm_modules map, evenals de package.json het dossier.

Voeg de taak toe aan uw Grunt-bestand

Voeg vervolgens de taak toe aan uw Gruntfile.js met behulp van dit fragment, boven waar je het ziet grunt.registerTask ( 'default');

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

Voeg vervolgens uw configuratieopties toe binnen de grunt.initConfig () methode:

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

Hier vertellen we inlinecss dat we het bestand "email.html" moeten vinden en "email-inlined.html" moeten uitvoeren. Ten slotte noemen we het vanuit de standaard knoptaak:

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

Het laatste gruntbestand

Je Grunt-bestand zou er nu ongeveer zo uit moeten zien:

module.exports = functie (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']); ;

Run Grunt

Keer terug naar de opdrachtregel en typ knorren en voer het in om het uit te voeren. 

Je zou nu achter moeten blijven met een e-inlined.html bestand met de CSS inline. Als u beide HTML-bestanden in uw browser opent, moeten ze er hetzelfde uitzien.

Ontwerptaken e-mailen

Met een beetje geluk heb je de kracht van Grunt overtuigd bij het automatiseren van je workflow voor e-mailontwerp. Bovendien heeft het volgen van die inleiding je het kader gegeven om nog verder te gaan.

Welke andere e-mailontwerptaken zou u kunnen automatiseren?

• CSS compileren (bij gebruik van SASS of minder)
  
• Inline CSS
• HTML-sjablonen samenstellen (bij gebruik van lay-outs en partials)
  
• Voorvertoning in de browser
  
• Voorvertonen in e-mailclients
  
• Testen met e-mailtest-apps (lakmoes, e-mail op zuur)
  
• Het uploaden van assets naar een publiekelijk beschikbaar CDN
  
• UTM-trackingtags toevoegen aan koppelingen
  
• … de lijst gaat verder
  

Mijn e-mail ontwerp Gruntbestand

Dit is het Gruntbestand, open source op GitHub, dat ik vrij vaak gebruik. Laten we de afzonderlijke taken eens bekijken om te zien wat er daadwerkelijk aan de hand is.

1. Sass / SCSS

Ik beheer mijn CSS graag met SCSS, dus het eerste dat ik Grunt te doen krijg is het compileren van het SCSS-hoofdbestand.

2. Stel HTML samen

Assemble is een statische site-generator. Het compileert de HTML door de belangrijkste lay-out sjabloon (s) en de inhoud voor elke e-mail samen te brengen.

3. Inline CSS

Ik gebruik premailer voor inline CSS. Als je je afvraagt ​​waarom ik de inliner niet van boven gebruik, ontdekte ik dat premailer betere ondersteuning biedt voor mediaquery's. Om mediaquery's te laten werken, willen we dat ze alleen achterblijven in het hoofd, niet in lijn. 

Notitie: premailer heeft afhankelijkheden die ook moeten worden geïnstalleerd, inclusief Ruby en een paar edelstenen.

4. Een testmail verzenden

Om een ​​e-mail naar een inbox te sturen, gebruik ik de API van Mailgun. Dit stuurt de uitgevoerde HTML-e-mail naar mijn inbox, zodat ik het voor mezelf kan zien in welke client ik ook kies.

Dit is ook een handige manier om je sjabloon naar Litmus te sturen als je deze wilt bekijken in andere e-mailclients. Als u dit doet, moet u de ontvanger wijzigen.

5. CDN

Dit is handig als u transactionele e-mails verzendt en u beeldmateriaal ergens moet opslaan. Als u een ESP (e-mailserviceprovider) gebruikt om uw e-mails te verzenden, is de kans groot dat zij uw beeldmateriaal voor u opslaan, dus het is hier geen probleem.

De taken uitvoeren

Voor het uitvoeren van de taken hebben we een aantal commando-opties.

• knorren voert de standaardtaak uit. Dit omvat het compileren van Sass, het samenstellen van sjablonen en het inline plaatsen van de CSS. U kunt vervolgens de uitvoer openen in uw browser.
• grunt send --template = MY_TEMPLATE.html voert de bovenstaande taken uit, evenals het verzenden van de e-mailsjabloon die u opgeeft. Vergeet niet om de Mailgun-instellingen in Gruntfile.js bij te werken.
• grunt cdnify zal opnieuw de standaardtaken uitvoeren, maar zal ook alle lokale afbeeldingsitems uploaden en vervolgens de bestandspaden vervangen door het CDN-pad.
• Merk op dat je ook taken kunt combineren, bijvoorbeeld. grunt cdnify send -template = MY_TEMPLATE.html

Meer taken!

Er zijn meer taken die u mogelijk wilt toevoegen om uw proces te ondersteunen, of misschien wilt u enkele verwijderen. Ga naar de plugin-directory van Grunt om de taken te vinden die uw workflow ondersteunen.

Sjablonen voor transactionele e-mail

Hier zijn enkele sjablonen die ik eerder heb opgesteld.

Met behulp van de hierboven beschreven werkstroom en Gruntfile heb ik een handvol transactionele e-mails opengesteld voor gebruik door dev-teams. Voel je vrij om ze te gebruiken zoals ze zijn, of gebruik ze als standaard voor je eigen e-mailontwerpen.

Nuttige e-mailontwerpen

• Grunt instellen voor je volgende project
• Verbeter uw e-mailworkflow met modulair ontwerp
• E-mail ontwerp workflow
• Een Grunt-workflow voor het ontwerpen en testen van HTML-e-mails
• Responsieve HTML e-mailsjablonen voor startups
  

Conclusie

Veel taken die zijn gekoppeld aan e-mailontwerp kunnen lastig en onhandig zijn. Laat Grunt het harde werk voor je doen en je zult het hele proces veel leuker vinden!