{"id":4117,"date":"2018-06-14T00:00:00","date_gmt":"2018-06-14T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/automate-your-emails-in-two-ways-snippets-vs-partials\/"},"modified":"2020-04-21T14:53:55","modified_gmt":"2020-04-21T14:53:55","slug":"automate-your-emails-in-two-ways-snippets-vs-partials","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/automate-your-emails-in-two-ways-snippets-vs-partials","title":{"rendered":"Automate Your Email Builds in Two Ways: Snippets vs. Partials"},"content":{"rendered":"

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<\/a> (it happens to the best of us).<\/p>\n

It doesn\u2019t have to be that way.<\/p>\n

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.<\/p>\n

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\u2019 2018 State of Email Workflows<\/a>. Another 23% say they build emails using a library of standard email components or modules.<\/p>\n

\"Modular<\/a><\/figure>\n

Tools like snippets<\/a> and partials<\/a> in Litmus Builder<\/a> 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.<\/p>\n

Let\u2019s break down the differences between the two tools and how they can help you automate your workflow\u2014and get to the fun part faster.<\/p>\n

\n\n\n\n
\"\"<\/td>\n\n

The Code Editor Made for Email<\/h2>\n

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

Learn more \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

 <\/p>\n

What are snippets?<\/h2>\n

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\u2019re working on.<\/p>\n

Let\u2019s take the example of a bulletproof button<\/a>:<\/p>\n

\"button-padding-border\"<\/figure>\n

Here\u2019s the piece of HTML we use for a bulletproof button:<\/p>\n

<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n  <tr>\n    <td>\n      <table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n        <tr>\n          <td align=\"{align}\" bgcolor=\"{bgcolor}\"\n            <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;\n            <\/a>\n          <\/td>\n        <\/tr>\n      <\/table>\n    <\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n
Bulletproof buttons serve as a staple in our email designs for our calls-to-action (CTA)<\/a>. 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<\/a> by way of a shortcut trigger. In this example, we\u2019ll name it \u2018bb,\u2019 short for bulletproof button.<\/p>\n
Then, whenever you want to add a bulletproof button, you can use the shortcut trigger \u2018bb.\u2019<\/p>\n
\"bb-gif\"<\/figure>\n
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>\n
<p style=\"Margin: 0; font-size: {fs}; line-height: {lh};\">{text}<\/p><\/code><\/pre>\n
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.)<\/p>\n
\"text-gif\"<\/figure>\n
You can use snippets in:<\/p>\n