Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to automate your email design workflow with task runners & Grunt.js

452521c3fd3cbad0609ba4a685feef7c?s=47 Lee Munroe
August 28, 2015

How to automate your email design workflow with task runners & Grunt.js

As email designers we know building HTML email isn't straight forward. There are endless tasks required to create a seamless email experience for our end users. However in today's world we can use some of our favorite front-end development tools to help optimize our workflow and save our sanity. We'll cover:

* What task runners and build systems are
* An introduction to Grunt.js and how to use it
* Using a Grunt.js workflow to fully automate your email build process
* How to compile HTML, inline CSS/Sass, compress and upload images, and test your emails with Litmus by running just one command

Presented at Litmus Email Design Conference, Boston 2015

452521c3fd3cbad0609ba4a685feef7c?s=128

Lee Munroe

August 28, 2015
Tweet

Transcript

  1. HOW TO AUTOMATE YOUR EMAIL DESIGN WORKFLOW WITH TASK RUNNERS

    @leemunroe
  2. @leemunroe

  3. @leemunroe

  4. @leemunroe

  5. @leemunroe

  6. British Isles @leemunroe

  7. Great Britain @leemunroe

  8. Ireland @leemunroe

  9. Northern Ireland @leemunroe

  10. United Kingdom @leemunroe

  11. @leemunroe

  12. @leemunroe

  13. @leemunroe

  14. @leemunroe

  15. @leemunroe

  16. @leemunroe

  17. @leemunroe

  18. @leemunroe

  19. @leemunroe

  20. @leemunroe

  21. 12 HOURS @leemunroe

  22. 12 HOURS 2½ HOURS @leemunroe

  23. @leemunroe

  24. WRITE HTML @leemunroe

  25. COMPILE TEMPLATES @leemunroe

  26. INLINE CSS @leemunroe

  27. PLAIN TEXT @leemunroe

  28. COMPRESS IMAGES @leemunroe

  29. UPLOAD IMAGES @leemunroe

  30. ADD TRACKING @leemunroe

  31. SEND TO MYSELF @leemunroe

  32. SEND TO COLLEAGUE @leemunroe

  33. SEND TO LITMUS @leemunroe

  34. COPY & PASTE @leemunroe

  35. "Hey, can you make the logo bigger?" @leemunroe

  36. @leemunroe

  37. Bill Gates, Founder Microsoft @leemunroe

  38. "I choose a lazy person to do a hard job.

    Because a lazy person will find an easy way to do it." @leemunroe
  39. I'M LAZY @leemunroe

  40. @leemunroe

  41. WHY USE A TASK RUNNER? AUTOMATION @leemunroe

  42. GRUNT.JS @leemunroe

  43. @leemunroe

  44. @leemunroe

  45. @leemunroe

  46. PRECURSORS @leemunroe

  47. Command Line @leemunroe

  48. j.mp/intro-to-command-line @leemunroe

  49. nodejs.org/download @leemunroe

  50. $ npm install -g grunt-cli @leemunroe

  51. HOW TO INLINE CSS AUTOMATICALLY USING GRUNT.JS @leemunroe

  52. @leemunroe

  53. @leemunroe

  54. @leemunroe

  55. @leemunroe

  56. @leemunroe

  57. @leemunroe

  58. @leemunroe

  59. @leemunroe

  60. @leemunroe

  61. @leemunroe

  62. @leemunroe

  63. @leemunroe

  64. @leemunroe

  65. gruntjs.com/plugins @leemunroe

  66. $ npm install grunt-inline-css --save-dev @leemunroe

  67. @leemunroe

  68. @leemunroe

  69. @leemunroe

  70. @leemunroe

  71. @leemunroe

  72. @leemunroe

  73. $ grunt @leemunroe

  74. @leemunroe

  75. @leemunroe

  76. @leemunroe

  77. github.com/leemunroe/grunt-demo @leemunroe

  78. @leemunroe

  79. @leemunroe

  80. @leemunroe

  81. WORKFLOW @leemunroe

  82. HOW TO AUTOMATE YOUR EMAIL TEMPLATE SYSTEM USING GRUNT.JS @leemunroe

  83. @leemunroe

  84. github.com/leemunroe/grunt-email-workflow @leemunroe

  85. github.com/leemunroe/grunt-email-workflow @leemunroe

  86. @leemunroe

  87. @leemunroe

  88. @leemunroe

  89. @leemunroe

  90. @leemunroe

  91. PUSH TO YOUR TEMPLATE HOST @leemunroe

  92. SINGLE SOURCE OF TRUTH @leemunroe

  93. COMMON GOTCHAS @leemunroe

  94. SOURCE: HTTP://CDN-AK.F.ST-HATENA.COM/IMAGES/FOTOLIFE/T/ TYOSHIKAWA1106/20150115/20150115212956.PNG @leemunroe

  95. $ sudo npm install ... @leemunroe

  96. @leemunroe

  97. @leemunroe

  98. $ npm install @leemunroe

  99. @leemunroe

  100. DOWNSIDES ▸ Learning curve ▸ Lack of creativity ▸ Lose

    control ▸ Command line / dependencies @leemunroe
  101. ADVANTAGES ▸ DRY (Don't Repeat Yourself) Automation ▸ Single source

    of truth ▸ Consistency ▸ Not locked in ▸ More time for other stuff @leemunroe
  102. Task runners take your email design workflow to 88mph @leemunroe

  103. @leemunroe @leemunroe

  104. RESOURCES REFERENCED * Grunt Email Workflow (github.com/leemunroe/grunt-email-workflow) * Grunt Inline

    CSS Demo (github.com/leemunroe/grunt-demo) * Mailgun (mailgun.com) * Rackspace (rackspace.com) * Litmus (litmus.com/lp/mailgun) * Assemble (assemble.io) * Grunt (gruntjs.com) * Gulp (gulpjs.com) * Sendwithus (sendwithus.com) * Ink (zurb.com/ink) * Command Line (j.mp/intro-to-command-line) @leemunroe