{"id":6564,"date":"2015-11-20T00:00:00","date_gmt":"2015-11-20T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-using-snippets-in-email-design\/"},"modified":"2023-02-27T15:53:48","modified_gmt":"2023-02-27T20:53:48","slug":"the-ultimate-guide-to-using-snippets-in-email-design","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-using-snippets-in-email-design","title":{"rendered":"The Ultimate Guide to Using Snippets in Email Design"},"content":{"rendered":"

Between dozens of email clients, seemingly countless rendering quirks, and changing support for HTML and CSS, coding email campaigns is complex. Unfortunately for email designers, that complexity means email design<\/a> is becoming more time-consuming, so we created the ultimate guide to using snippets in email design.<\/p>\n

At The Email Design Conference, Code School\u2019s Dan Denney<\/a> framed the problem perfectly:<\/p>\n

The biggest challenge in creating emails is not Gmail…it\u2019s time.<\/p><\/blockquote>\n

When it comes to email design, time is of the essence and putting a development workflow in place is crucial. In order to keep up with the rapidly changing demands of email design, it\u2019s increasingly important to make your workflow as efficient as possible.<\/p>\n

So, what can you do to optimize your workflow? One word: Snippets<\/strong>.<\/p>\n

With the help of snippets, you can build emails more easily\u2014and more quickly\u2014than ever before. Spend less time building and troubleshooting emails, and more time creating better email experiences for your subscribers.<\/p>\n

What are snippets?<\/h2>\n

Snippets are email modules<\/a> of reusable code you can use in an email template<\/a> or broader email design system<\/a>. They\u2019re ideal for elements that are commonly used across email designs, like doctype, bulletproof buttons<\/a>, and links. Rather than having to re-write the code each time one of these elements is used, you can use a snippet. Using snippets automates your coding and drastically speeds up development time.<\/p>\n

How to use snippets<\/h2>\n

Regardless of which email editor you\u2019re using to build your emails, you can use snippets to optimize your workflow. Here\u2019s a look at how to use them in the most common editors.<\/p>\n

Dreamweaver<\/h3>\n

In Dreamweaver, you can add or edit snippets by visiting: Windows \u2192 Snippets \u2192 New\/Edit. You can even save your snippets in groups (i.e., table-related snippets, image-related snippets, etc.) for easy searching.<\/p>\n

\"dreamweaver-snippets1\"<\/figure>\n

While coding your email, use snippets by double clicking on the snippet title, clicking insert, or using a keyboard shortcut.<\/p>\n

Litmus Builder<\/h3>\n

Within a Builder project, click on the Snippets icon at the top right of the editor.<\/p>\n

\"litmus-builder-snippets\"<\/figure>\n

You can create and edit new snippets within that interface, and trigger snippets within your code via keyboard shortcuts. You can also add edit points inside of the snippet using {braces}<\/strong>. Once you trigger a snippet, you can automatically jump to pre-defined edit points in the snippet for fast and easy customization.<\/p>\n

\"builder-snippets\"<\/figure>\n

Sublime Text<\/h3>\n

To view existing snippets or add new ones in Sublime Text, visit: Tools \u2192 Snippets\/New Snippet. Each snippet is saved in its own .sublime-snippet file.<\/p>\n

Add snippets into your code through keyboard shortcut triggers. For example, in the code below, the snippet is triggered when \u201chello\u201d is typed within the code. You can also add edit points inside of the snippet using dollar signs in sequential order ($1<\/strong>, $2<\/strong>, etc.).<\/p>\n

<snippet>\n  <content><![CDATA[\n  \/* Insert snippet here *\/\n  ]]><\/content>\n  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->\n  <!-- <tabTrigger>hello<\/tabTrigger> -->\n  <!-- Optional: Set a scope to limit where the snippet will trigger -->\n  <!-- <scope>source.python<\/scope> -->\n<\/snippet>\n<\/code><\/pre>\n
\"sublime-snippets\"<\/figure>\n
Atom<\/h3>\n
View, edit, or add snippets in Atom by visiting: Atom \u2192 Open Your Snippets. Each snippet is saved as its own snippets.cson file.<\/p>\n
Similar to Sublime Text, snippets in Atom work via a keyboard shortcut trigger. You can also add edit points inside of the snippet using dollar signs in sequential order ($1<\/strong>, $2<\/strong>, etc.).<\/p>\n
'Name':\n'prefix': 'tabtrigger'\n'body': \"\"\"\n\/* Insert snippet here *\/\n    \"\"\"\n<\/code><\/pre>\n
\"atom-snippets\"<\/figure>\n
Coda<\/h3>\n
Snippets in Coda are referred to as \u201cClips.\u201d To add or edit a clip, visit: Sidebar \u2192 Clips. Clips can be saved in groups, and they work on a keyboard shortcut trigger. You can also add edit points inside of the snippet by defining custom placeholder points in the UI.<\/p>\n
\"coda-snippets1\"<\/figure>\n
Snippet library<\/h2>\n
Within each editor you can create a library of your snippets. Everything within the library should be up-to-date and pre-tested. As the world of email constantly changes, be sure to frequently test your snippets and add new ones when necessary.<\/p>\n
While there are many more, we’ve assembled a comprehensive list of some of our favorite out-of-the-box snippets to use for email development. Feel free to add them to your snippet library!<\/p>\n
Doctype<\/h3>\n
A doctype tells an email client to render an email in standards or quirks mode. There are two recommended forms of doctypes to use for email. The first is the HTML5 doctype:<\/p>\n
HTML5<\/h4>\n
<!doctype html>\n<\/code><\/pre>\n
XHTML<\/h4>\n
The second is the XHTML doctype:<\/p>\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional \/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\n<\/code><\/pre>\n
Campaign Monitor breaks down which HTML doctypes<\/a> are good to use, and there\u2019s a great discussion about it on the Litmus Community<\/a>, too. If you don’t specify a doctype for your email, email clients will render the email in “quirks mode” which may result in rendering issues.<\/p>\n
Meta Tag<\/h3>\n
If you’re coding your email to be responsive, there are several key meta tags that you should include.<\/p>\n
UTF-8<\/h4>\n
The first recommended meta tag sets the character encoding to utf-8, which is the typical encoding for an email. This can be changed if necessary.<\/p>\n
<meta http-equiv=\"Content-Type\" content=\"text\/html;\" charset=\"utf-8\" \/>\n<\/code><\/pre>\n
Viewport<\/h4>\n
The second recommended meta tag sets the responsiveness for the email.<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/><\/code><\/pre>\n
Windows Phone<\/h4>\n
The third recommended meta tag is specifically to make the email responsive on Windows Phone.<\/p>\n
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/><\/code><\/pre>\n
Tables<\/h3>\n
HTML emails use tables to structure content. Tables can be quite tedious to code by hand, so we’ve developed basic snippets for simple table layouts.<\/p>\n
Table 1×1<\/h4>\n
<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"{width}\" align=\"{align}\" style=\"{style}\">\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
Table 2×1<\/h4>\n
<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"{width}\" align=\"{align}\" style=\"{style}\">\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
Table 3×1<\/h4>\n
<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"{width}\" align=\"{align}\" style=\"{style}\">\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
Table 2×2<\/h4>\n
<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"{width}\" align=\"{align}\" style=\"{style}\">\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
Table 2×3<\/h4>\n
<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"{width}\" align=\"{align}\" style=\"{style}\">\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
Table 3×2<\/h4>\n
<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"{width}\" align=\"{align}\" style=\"{style}\">\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
Table 3×3<\/h4>\n
<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" width=\"{width}\" align=\"{align}\" style=\"{style}\">\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n  <tr>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n    <td align=\"{align}\" style=\"{style}\">{content}<\/td>\n  <\/tr>\n<\/table>\n<\/code><\/pre>\n
Bulletproof Buttons<\/h3>\n
Creating buttons in email is quite the hassle thanks to Outlook rendering<\/a> quirks. There are four recommended types of bulletproof buttons, which display regardless of whether or not images are present.<\/p>\n
VML Button<\/h4>\n
The first bulletproof button method was developed by Stig Morten Myre<\/a> from Campaign Monitor and is a VML-based button approach:<\/p>\n
<div>\n  <!--[if mso]>\n    <v:roundrect xmlns_v=\"urn:schemas-microsoft-com:vml\" xmlns_w=\"urn:schemas-microsoft-com:office:word\" rel=\"noopener\" target=\"_blank\" href=\"{link}\" style=\"height:{height}px;v-text-anchor:middle;width:{width}px;\" arcsize=\"{arcsize}%\" strokecolor=\"#{strokecolor}\" fillcolor=\"{fillcolor}\">\n      <w:anchorlock\/>\n        <center style=\"color:#{color};font-family:{font};font-size:{font-size}px;\">{button text}<\/center>\n    <\/v:roundrect>\n  <![endif]-->\n  <a rel=\"noopener\" target=\"_blank\" href=\"{link}\" style=\"background-color:#{bgcolor};border:{border};border-radius:{border-radius};color:#{color};display:{display};font-family:{font};font-size:{font-size}px;line-height:{line-height}px;text-align:{align};text-decoration:{decoration};width:{width}px;-webkit-text-size-adjust:none;mso-hide:all;\">{button text}<\/a>\n<\/div><\/code><\/pre>\n
Campaign Monitor has also created buttons.cm<\/a>, a simple tool to generate the VML-button code above.<\/p>\n
Padding-Based Button<\/h4>\n
The second method is a live text approach with a padding-based button:<\/p>\n
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n  <tr>\n    <td bgcolor=\"#{bgcolor}\" style=\"padding: {padding}; border-radius:{border-radius};\" align=\"{align}\">\n      <a rel=\"noopener\" target=\"_blank\" href=\"{link}\" target=\"_blank\" style=\"font-size: {font-size}px; font-family: {font}; color: #{color}; text-decoration: {decoration}; display: {display};\">{button text}<\/a>\n    <\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n
The main downside to this button is that it\u2019s not 100% clickable.<\/p>\n
Border-Based Button<\/h4>\n
The third bulletproof button method involves creating a border around the link to make a large clickable area:<\/p>\n
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n  <tr>\n    <td>\n      <a rel=\"noopener\" target=\"_blank\" href=\"{link}\" target=\"_blank\" style=\"font-size: {font-size}px; font-family: {font}; color: #{color}; text-decoration: {decoration}; border-radius: {border-radius}px; -webkit-border-radius: {webkit-border-radius}px; background-color: #{bgcolor}; border-top: {border-top}; border-bottom: {border-bottom}; border-right: {border-right}; border-left: {border-left}; display: inline-block;\">{button text}<\/a>\n    <\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n
The key downside to this method is that Outlook 2007-2013 does not respect border widths on link tags, so it does cause some reduction in the artificial padding of the button.<\/p>\n
Padding+Border-Based Button<\/h4>\n
The final method involves a combination of the padding and border buttons:<\/p>\n
<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n  <tr>\n    <td align=\"{align}\" style=\"border-radius: {border-radius}px;\" bgcolor=\"#{bgcolor}\">\n      <a rel=\"noopener\" target=\"_blank\" href=\"{link}\" target=\"_blank\" style=\"font-size: {font-size}px; font-family: {font}; color: #{color}; text-decoration: {decoration}; border-radius: {border-radius}px; padding: {padding}; border: {border}; display: inline-block;\">{button text}<\/a>\n    <\/td>\n  <\/tr>\n<\/table><\/code><\/pre>\n
This hack is used to avoid the padding rendering issues in Outlook.<\/p>\n
Images<\/h3>\n
There are numerous key factors to consider when using images in email. For example, you must define the height and width in HTML attributes for images to render correctly in Outlook. And, using ALT text<\/a> is extremely important not only for accessibility purposes, but since 43% of users view email with images off<\/a>. Finally, to prevent extra padding and gaps around images, you should set them to display:block;.<\/p>\n
<img src=\"{src}\" width=\"{width}\" height=\"{height}\" border=\"0\" alt=\"{alt}\" style=\"{style}; display: block; border: 0px;\"\/><\/code><\/pre>\n
Links<\/h3>\n
Basic Link<\/h4>\n
When using a link in an email, you\u2019ll need to set inline styles on it, such as font-size, font-family, and text-decoration. Here\u2019s a simple snippet that has these inline styles already in place:<\/p>\n
<a rel=\"noopener\" href=\"#\" style=\"{style}\">{style}<\/a><\/code><\/pre>\n
Remove Blue Links on iOS<\/h4>\n
There are several strategies to removing blue links on iOS<\/a>, but here\u2019s a simple snippet that has uses a single CSS declaration to do so:<\/p>\n
a[x-apple-data-detectors] {\n  color: inherit !important;\n  text-decoration: none !important;\n  font-size: inherit !important;\n  font-family: inherit !important;\n  font-weight: inherit !important;\n  line-height: inherit !important;\n}\n<\/code><\/pre>\n
Hidden Preheader\/Preview Text<\/h3>\n
Preheader or preview text<\/a> is copy pulled in from the body of your email that is typically displayed underneath the from name and subject line in a subscriber\u2019s inbox. Using hidden preheader text is a way to define the copy used, and prevent it from impacting the actual design of the email.<\/p>\n
Here\u2019s the snippet:<\/p>\n
<div style=\"display:none;font-size:1px;color:#{color};line-height:1px;font-family:{font};max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;\">\n  {preheader text}\n<\/div><\/code><\/pre>\n
Media Queries<\/h3>\n
Media queries are a component of cascading style sheets (CSS), the language used to style websites and email campaigns. With media queries, you can fine-tune email designs so that they are more usable across mobile, desktop, and webmail inboxes.<\/p>\n
Here\u2019s a list of all the important media queries you\u2019ll need when designing emails:<\/p>\n
Base Media Query<\/h4>\n
@media screen and ({declaration}) {\n  {content}\n}\n<\/code><\/pre>\n
Max-Width Media Query<\/h4>\n
@media screen and (max-width: {width}) {\n  {content}\n}\n<\/code><\/pre>\n
Min-Width Media Query<\/h4>\n
@media screen and (min-width: {width}) {\n  {content}\n}\n<\/code><\/pre>\n
iPad 1 & 2 + iPad Mini Media Query<\/h4>\n
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {\n  {style}\n}\n<\/code><\/pre>\n
iPad 3 & 4 Media Query<\/h4>\n
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {\n  {style}\n}\n<\/code><\/pre>\n
iPhone 2G\/3G\/3GS Media Query<\/h4>\n
@media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1) {\n  {style}\n}\n<\/code><\/pre>\n
iPhone 4\/4S\/5\/iPhone 6 (zoom view) Media Query<\/h4>\n
@media screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {\n  {style}\n}\n<\/code><\/pre>\n
HTC ONE + SAMSUNG GALAXY S4\/S5 Media Query<\/h4>\n
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {\n  {style}\n}\n<\/code><\/pre>\n
iPhone 6 (standard view) + iPhone 6 Plus (zoom view) Media Query<\/h4>\n
@media screen and (max-device-width: 375px) and (max-device-height: 667px) {\n  {style}\n}\n<\/code><\/pre>\n
iPhone 6 Plus (standard view) Media Query<\/h4>\n
@media screen and (max-device-width: 414px) and (max-device-height: 776px) {\n  {style}\n}\n<\/code><\/pre>\n
Outlook Conditional Comments<\/h3>\n
With the plethora of rendering issues that comes with having to support Outlook, it is sometimes useful to target Outlook with specific styles. Outlook can be targeted using conditional mso comments<\/a> for either HTML or CSS content.<\/p>\n
Microsoft Word rendering<\/h4>\n
<!--[if mso]>\n  {content}\n<![endif]-->\n<\/code><\/pre>\n
Outlook 2000-2013<\/h4>\n
<!--[if (gte mso 9)|(IE)]>\n  {content}\n<![endif]-->\n<\/code><\/pre>\n
More Outlook conditional comments:<\/p>\n