Automate Your Email Builds in Two Ways: Snippets vs. Partials

8 min read

Designing and coding emails often involves manual, arduous editing processes that are not only mundane and tiresome, but can easily leave room for a mistake (it happens to the best of us).

It doesn’t have to be that way.

The percentage of marketers that code emails from scratch or copy and paste content from one email to another has been falling in recent years. Instead, marketers are embracing email coding approaches that involve the potential for less error.

For example, nearly 18% of email marketers say that when building a new email, they reuse the same header and footer and largely build emails using snippets of code from previous emails, according to Litmus’ 2018 State of Email Workflows. Another 23% say they build emails using a library of standard email components or modules.

Modular Email Templates and WYSIWYG Editors on the Rise

Tools like snippets and partials in Litmus Builder are key to these less risky approaches. They can speed up your email development workflow, allowing you to focus more on other parts of email creation.

Let’s break down the differences between the two tools and how they can help you automate your workflow—and get to the fun part faster.

The Code Editor Made for Email

Preview your email as you code, and build better emails faster with Litmus Builder, the web-based editor built specifically for email.

Learn more →

 

What are snippets?

Snippets quickly generate HTML or CSS and allow you to customize and edit that code for an individual email. This reduces redundancy and potential coding errors for common elements in your email designs, such as images or bulletproof buttons. Rather than having to re-write the code each time you use one of these elements, you can use a snippet to automatically generate that piece of code inside the email you’re working on.

Let’s take the example of a bulletproof button:

button-padding-border

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 rel="noopener" target="_blank" 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 &rarr;
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Bulletproof buttons serve as a staple in our email designs for our calls-to-action (CTA). However, each button needs customization for each individual email: different copy, a different link, and different placement. Snippets solve the problem of constantly re-creating the bulletproof button code by hand, saving it in our Snippet library by way of a shortcut trigger. In this example, we’ll name it ‘bb,’ short for bulletproof button.

Then, whenever you want to add a bulletproof button, you can use the shortcut trigger ‘bb.’

bb-gif

We can even incorporate edit points to allow for quicker customization. Edit points define the various places that require customization in an individual snippet so that you can edit faster:

<p style="Margin: 0; font-size: {fs}; line-height: {lh};">{text}</p>

In the example above, once we trigger the snippet, the editor will automatically jump to the first edit point of {fs}. That way you can edit that content and jump to the next edit point (in this example {lh}) by hitting tab instead of scrolling to find every place you need to customize. (Just remember, every editor handles edit points syntax differently.)

text-gif

You can use snippets in:

For more on using code shortening and snippets, watch this talk from The Email Design Conference 2015:

Or dive deeper into how to use snippets with this blog post.

What are partials?

Partials are global, dynamic, reusable blocks of code that can be used across multiple emails. Partials live globally and any change made to a partial will apply to every single email where that partial is referenced.

Partials work well for items such as headers, footers, reset CSS, and commonly used CTAs—anything that you need to reuse across multiple emails, but the content does not change for those individual components.

Usage of partials has been steadily increasing, spurred by the growth in the use of automated emails, which benefit greatly from the use of partials.

Partials Usage Increasing

Let’s take an example of a header for an email. We use this same header across all of our emails at Litmus:

partial1

We can take the code of this header:

<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 rel="noopener" target="_blank" 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>

And create a partial for this header. Instead of using the actual HTML and CSS of the header in the email, we can 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.

Now, whenever we need make a change or update to our header, instead of manually going into every single email that uses that component and updating the HTML and CSS one-by-one (our worst nightmare), we can simply update the partial. Updating it then applies that change to every email where that partial is used. It makes managing and maintaining your emails much easier, faster, and more scaleable.

partials

In order to use partials, you need to be leveraging a build system and static site generator such as Handlebars, Middleman, or Assemble. Without having one of these tools in place, you cannot use partials or leverage its functionality. These generators support the functionality of partials by automatically compiling the partial syntax references into their final outputted HTML file that is valid to use for email. We highly recommend using Litmus Builder (no setup required) or Lee Munroe’s Grunt Email Workflow (Grunt-based task runner workflow) to use partials.

So again, what’s the difference?

Snippets live in an individual email, whereas partials are global and dynamic. You can customize snippets in individual emails, but you can’t customize a partial—any change you make to it will apply to every email in which it is used.

What happens when we flip-flop our examples above?

Let’s make the header a snippet.

We could certainly do this, but this would require us to manually output a snippet of the header in every single email build. Additionally, snippets are not dynamic like partials, meaning there is no link between them. Making an update to a snippet does not update any of your previous snippets, only future ones. That means that once you’ve made a snippet, you have to use HTML or CSS to make manual edits in every single email to customize it. Not so ideal for a header that you want to be the same in every email! Therefore, a partial is more ideal for this use case of a header.

Let’s make the bulletproof button a partial.

If we made the bulletproof button a partial, this means that the button copy, link, and styling will be the same for every single email in which you use that button partial. If you ever want to update and customize that button copy, link, or styling in an individual email, you won’t be able to do this with a partial because any update you make happens across every email. It’s better to use partials in modular components with static content, such as headers or footers, and use a snippet to implement something customizable like a button.

Find out more about how to use partials in your email workflow with this blog post.

Automate Your Emails With Snippets and Partials

Both tools come in handy when it comes time to build your next email campaign. Don’t have Litmus Builder yet? No worries. Try it today—free:

Automate your workflow →

Kevin Mandeville

Kevin Mandeville was a Product Manager at Litmus