March 6, 2017 By Kayla LewkowiczDesigning and coding emails often involves manual, arduous editing processes that are not only mundane and tiresome, but can easily leave room for mistakes. It doesn’t have to be that way. A variety of tools exist for email marketers and developers to automate their email workflow, allowing you to eliminate the mundane—and catch those costly errors before pressing send. As we found in our State of Email Production Report, email programs have a lot of moving parts and production cycles, usually taking less than a week for a single email. That makes it even more…
Designing and coding emails often involves manual, arduous editing processes that are not only mundane and tiresome, but can easily leave room for mistakes.
It doesn’t have to be that way. A variety of tools exist for email marketers and developers to automate their email workflow, allowing you to eliminate the mundane—and catch those costly errors before pressing send.
As we found in our State of Email Production Report, email programs have a lot of moving parts and production cycles, usually taking less than a week for a single email.
That makes it even more important to be as efficient as possible. Here are seven ways you can add automation into your email workflow:
Create standardized templates
Amount of time saved: 30-60 minutes
If you’re looking to streamline your workflow, a template is a good place to start. Swapping out copy or design elements, but keeping critical brand-specific pieces, can kickstart the email creation process. It can be helpful for non-coders, too.
In the State of Email Production survey, the majority of email designers reported only creating one-off email designs for big events, like new products, or key seasonal campaigns such as Black Friday. Using a standardized template the rest of the time creates great production efficiencies.
This is exactly why we built Litmus Community Templates—a collection of elegant, pre-tested templates that cover a range of uses, from account management and e-commerce to launching and marketing products.
Download the Litmus Community TemplatesKickstart your next campaign with one of Litmus’ pre-tested templates. |
Take a shortcut while coding
Utilize Snippets
Amount of time saved: 10-15 minutes
Snippets are modules of reusable code. They’re ideal for elements that are commonly used across email designs, like doctype, bulletproof buttons, and links. Rather than having to re-write the code each time one of these elements is used, you can use a Snippet. This reduces redundancy and potential coding errors for common elements in your email designs.
Let’s take bulletproof buttons as an example. Bulletproof buttons serve as a staple in emails for calls-to-action (CTA). However, each button needs customization for each individual email: Different copy, different links, and different placement.
Here’s the piece of HTML we use for a bulletproof button:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="{align}" bgcolor="{bgcolor}"
<a href="{link}" target="_blank" style="font-size: {font-size}px; color: {color}; text-decoration: {decoration}; padding: {padding}; border: {border}px solid {color}; display: inline-block;">I am a button →
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Snippets solve the problem of constantly re-creating the bulletproof button code by hand, and you can save it in a Snippet library as a shortcut trigger. In this example, we’ll name it ‘bb,’ short for bulletproof button.
Now, whenever you want to add a bulletproof button, you can simply use the shortcut ‘bb’ to generate the code.
You can use Snippets in:
Want even more Snippets? Have some favorites you’d like to share?
Join the Community to search for and contribute snippets from our snippet library.
Utilize Partials
Amount of time saved: 30 min — A few hours, depending on how many email templates you’re updating
Partials are global, dynamic, reusable blocks of code that can be used across multiple emails. Changes made to a Partial will apply to every single email where that Partial is referenced.
Partials work well for code sections such as headers, footers, reset CSS, and commonly used CTAs—anything that is repeated across multiple emails.
For example, at Litmus we use the same header across the majority of our emails:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td bgcolor="#33373e" align="center">
<!--[if (gte mso 9)|(IE)]>
<table width="500" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%" border="0" align="center" style="max-width: 500px;">
<tr>
<td style="padding: 15px 0;" align="center">
<a href="http://litmus.com" target="_blank">
<img src="logo.png" width="130" height="48" alt="Litmus" border="0" style="display: block; color: #ffffff; font-size: 20px; border: 0px;">
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
Instead of using the actual HTML and CSS of the header in the email, we use a Partial reference:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center">
{{header}}
</td>
</tr>
</table>
Note: The above reference is using Handlebars syntax, which is used in Litmus Builder.
Whenever changes to the header are necessary, we can avoid manually modifying each email where the header appears. Instead of updating individual emails, we simply update the Partial, which applies the change to every email where that Partial is used. Partials make managing and maintaining your emails easier, faster, and more scaleable.
In order to use Partials, you need to leverage a build system and static site generator such as Handlebars, Middleman, or Assemble. We highly recommend using Litmus Builder (no setup required) or Lee Munroe’s Grunt Email Workflow to use Partials.
Take code shortcuts with Emmet
Amount of time saved: 10-15 minutes
Emmet is a free add-on for your text editor that allows you to type keyboard shortcuts that are then expanded into full segments of code.
By using Emmet, email creators type less, saving both keystrokes and time when building a campaign. Also, relying on Emmet’s autocompletion means fewer typos and missing tags, leading to more robust emails.
Emmet is available for a variety of text editors and is built into Litmus Builder. Popular with web designers, Emmet has seen increased adoption among email designers looking to streamline their workflows, although usage is still small.
The easiest way to understand Emmet is by looking at an example. Say you want a table with three rows, each containing a table cell with an image above a paragraph of text and a link.
Instead of manually typing—or copying and pasting—each row, table cell, image, paragraph, and link tag, you can condense that down to one line and let Emmet do most of the work for you.
table>tr*3>td>img+p+a
After hitting the TAB button to trigger Emmet, the one line of code above is expanded into full HTML.
<table>
<tr>
<td>
<img src="" alt="" />
<p></p>
<a href=""></a>
</td>
</tr>
<tr>
<td>
<img src="" alt="" />
<p></p>
<a href=""></a>
</td>
</tr>
<tr>
<td>
<img src="" alt="" />
<p></p>
<a href=""></a>
</td>
</tr>
</table>
Eliminate repetitive tasks and build faster
Use a task runner
Amount of time saved: 30-60 minutes
Task runners automate repetitive tasks such as inlining CSS and sending test emails.
According to our 2016 State of Email Production report, 6.7% of email marketers use task runners as part of their email production workflow.
See if a task runner can help you by checking out these options:
Use a static site generator
Amount of time saved: 30 min — A few hours, depending on how many email templates you’re updating
Static site generators are build systems for flat files that allow you to templatize and break down email elements.
This makes it easier for email creators to edit and control those email elements. More than 5% of email marketers are using static site generators as part of their email production workflow.
See if static site generators can help you by checking out these options:
Task runners and static site generators have historically been used as web development tools, but can be used in email to set up a framework that includes layouts, variables, and Partials to help optimize your workflow from end to end.
Preprocessors and postprocessors
Amount of time saved: 10-15 minutes
Preprocessors and postprocessors are essentially a different way of writing CSS. While it’s not a direct time-saver, they can help automate your workflow by changing the format so that it can be rendered by a browser.
A preprocessor converts code written in a preprocessing language into standards-compliant HTML or CSS that can be rendered by a browser.
See if preprocessors can help you by checking out these options:
A postprocessor sanitizes your CSS and converts it into standards-compliant CSS to ensure compatibility across email clients.
Add Automation Into Your Email Workflow Using Litmus
Whether you’re creating templates, using shortcuts like Snippets, Partials, or Emmet, or using task runners to code your email, you can incorporate all kinds of automation into Litmus Builder. Using Litmus, you’ll be able to speed up your production time—allowing you to focus on designing and building great emails.
Listen in on our email automation webinar, or take Litmus for a spin.
Source: 7 Ways To Add Automation Into Your Email Workflow : Litmus