DEV Community

loading...

3 tools to enhance your email workflow

JZ
Growth @klaviyo. Craft beer and coffee brewer. Musician. Fitness enthusiast and Troubadour.
・3 min read

Alt text of image

#1 Use a task runner

Gulp's a great tool that allows you to automate any of the development work you find yourself working on each time you build a campaign. For example if you find yourself copy-and-pasting HTML code from a previous email into your next campaign, hitting ⌘+F to replace all of the previous copy with the new version, oh and you want to update the headline font-size - that's another ⌘+F. Aside from being time consuming, this workflow presents ample opportunity for human error - unclosed table cells anyone? Another pain-point in building emails this way is that code errors tend to compound over time; unlike those nice mutual funds these types of gains do not have a positive return.

So how does a task runner help? At its core a task runner will ... automatically run tasks for you; It's as simple as that. What took hours (days for some) will only take minutes, all thanks to a task runner. When setup correctly, these automated workflows also allow you to quickly troubleshoot any errors - e.g. get notified if you're code is missing a closed table cell tags.

See how to setup your Gulp task runner

#2 Leverage templates

So you're already using a task runner? Great, the next step I'd recommend is to incorporate the use of templates. If you truly want to maximize the use of a task runner I highly recommend finding a template language that suits your development needs; I currently use Nunjucks.

These templating languages aren't difficult to use and for the most part are easy to learn. The real power in these templating languages is in their customization. Rather than using some other person's template you can build templates for your needs and easily replicate them. Below is sample for what a basic template can look like:

{% extends "base.html" %}

{% block header %}
<h1>{{ title }}</h1>
{% endblock %}

{% block content %}
<ul>
  {% for name, item in items %}
  <li>{{ name }}: {{ item }}</li>
  {% endfor %}
</ul>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

Did you see that embedded loop!? Your template can include all six rows OR you could simply use one line of code that looks up how many items your .json file is referencing and build the required rows from that - this is clutch when working on multiple projects.

Learn more on how to get started with Nunjucks

#3 Think modules

Remember playing with Legos? Emails are built much like those Lego kits; comprised of multiple pieces each fitting into one another. Take a look at the last email you built - do you see the main areas where your content is housed? A basic email template that includes the following can be broken down into three sections - two if you want to really compress your template.

  • headline
  • hero image
  • body
  • CTA button

Here's how I'd break them down:

- sectionBlock01 (contains headline)
- sectionBlock02 (contains hero image)
- sectionBlock03 (contains body and CTA button)
Enter fullscreen mode Exit fullscreen mode

Using these three sectionBlocks I can build any email in a matter of seconds - regardless of how many rows my sectionBlock03 contains - the loop will take care of the work.

There you have it, 3 tools to enhance your email workflow and get you going on the right track towards becoming an efficient developer.

Discussion (12)

Collapse
kzagoris profile image
Konstantinos Zagoris

For template framework I use mjml.io which it is creating email html compatible code

Collapse
joshzaldana profile image
JZ Author

Oh nice - MJML is another fantastic templating language. I tried it out a while back, but never got into creating custom template themes - are you using MJML for custom work?

Collapse
kzagoris profile image
Konstantinos Zagoris

Yes, for my start up (swaiver.com). The whole email backend (invoices, newsletter campaigns, notifications, etc) is currently being build on mailjet and mlml and we are very satisfied.

Collapse
peter profile image
Peter Kim Frank

This is great, thanks for sharing. I had never heard of Nunjucks.

Collapse
joshzaldana profile image
JZ Author

I hadn't heard of Nunjucks prior to using it - was previously on Handlebars. The language itself is relatively easy to pick up and use. Thanks for the read.

Collapse
michaelgv profile image
Mike

Nunjucks is nice, it reminds me very much of Twig. However, I’ve personally started using the Twig JS implementation recently. Has anyone had a chance to play around with it?

Collapse
joshzaldana profile image
JZ Author

Ah man, I used Twig with my last team; there are definite similarities between the two. I haven't used the JS implementation. What editor are you working from Michael?

Collapse
michaelgv profile image
Mike

I'm usually in vim, but in the rare event I'll open vscode with vim mode.

Thread Thread
joshzaldana profile image
JZ Author • Edited

ooh, nice. Vim's one of the editors I haven't had the chance to try out. It's on my list to do for sure.

Collapse
qm3ster profile image
Mihail Malo

What do you think of the Pug templating language?
There are plugins for all the popular task runners.
The syntax has layouts/mixins/includes.

Collapse
joshzaldana profile image
JZ Author

I haven't used Pug, but interestingly enough shortly after building my workflow I stumbled across an article that highlighted Pug. I take it you use it, Mihail? Similarly to what I asked Michael, what editor are you using?

Collapse
qm3ster profile image
Mihail Malo

You may have also seen Pug under the name Jade, they rebranded.

I shamefully enough use VS Code for now.

I currently use Pug as the template language inside Vue.js .vue single file component files, which means I basically don't use it for templating - no conditionals, no includes, no iteration, no nothing.

I previously used it with Gulp for static (no-js) site generation.

Apparently it's so popular that now even emmet shortcuts work with it.
Not in Vue files for me, but it's terse enough for that not to matter.
A key part of that is that there are no closing tags, so if you want to swap out or rename a tag/component, you don't have to look for the closing tag. Which also means that the file is almost half the lines, easier to overview.
On the other hand, you do have to be careful with indentation, namely exactly one issue: When you press Enter, at what indentation does your editor place you compared to the last line. -1? 0? +1?

There's an even more extreme language called slm wherein you can drop even more parenthesis (everything is optional but permitted, like in stylus stylesheet language; I'd say slm is to Pug as Sass is to SCSS) but it's not as widespread so doesn't have as much of an ecosystem.

The pug syntax is also very similar to the "concise syntax" available in Marko, ebay's UI library/framework.