Verifying session...

Loymark Email Team Documentation Hub

0
Total Clients
0
Platforms
0
ESP & DF Variables
Acronym Client Name Platform Digital Ops Type Actions

Email Codes Reference

!DOCTYPE & <html> tag

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

Meta Tags

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />

Required Styles

These styles are required, should be added above the media queries

* {
  -webkit-text-size-adjust: none;
}

body {
  margin: 0 !important;
  padding: 0 !important;
}

body, table, td, p, a {
  -ms-text-size-adjust: 100% !important;
  -webkit-text-size-adjust: 100% !important;
}

p {
  margin: 0px !important;
  padding: 0px !important;
}

table, td {
  border-spacing: 0 !important;
  mso-table-lspace: 0 !important;
  mso-table-rspace: 0 !important;
  border-collapse: collapse !important;
}

.ExternalClass * {
  line-height: 100% !important;
}

Media Queries

@media only screen and (max-width: 600px) {
}

Body Tag

The body must have the following styles in order to avoid some spacer and lines issues

<body style="width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust: none; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">

Basic Tags

TABLE:

<table border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;"></table>

TABLE ROW:

<tr></tr>

TABLE DATA:

<td align="left" valign="top"></td>

HYPERLINK:

<a href="#TBD" target="_blank" style="color: #3a6e10; text-decoration: underline;"></a>

IMAGES:

<img src="" alt="" width="" height="" style="display:block;" border="0" />

SUPERSCRIPT:

<sup style="font-size: 10px;line-height: 10px; vertical-align: text-top;">&reg;</sup>

TEXT:

<td align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #363636;">Lorem Ipsum</td>

BOLD:

<strong>Lorem Ipsum</strong>

ITALIC:

<em>Lorem Ipsum</em>

SPACERS:

<td align="left" valign="top" style="padding-top: 10px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;">Lorem Ipsum</td>

Outlook Hacks

These hacks must be added inside the <head></head> tag

<!--[if gte mso 9]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      sup {
        font-size:110% !important;
      }
    </style>
<![endif]-->

Hidden Section

Use this code to hide/show mobile content

<style type="text/css">
.show-for-small {
  display: block !important;
  overflow: visible !important;
  width: auto !important;
  max-height: inherit !important;
}
</style>

<!--[if !mso]><!-->
<tr>
  <td align="center" valign="top">
  <div align="center" class="show-for-small" style="display:none;width:0px;max-height:0px;font-size:0px;line-height:0px;overflow:hidden;mso-hide:all;"> 
  
  </div>
  </td>
</tr>
<!--<![endif]-->

Background Image

<style type="text/css">
.resize-background{
  background-size: cover !important;
}
</style>

<tr>
  <td class="resize-background" valign="top" align="center" style="font-size: 0px; line-height: 0px; background-image: url('images/background.jpg'); height: 265px; background-repeat: no-repeat; background-size: contain; background-color: #1c7a94"> 
  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:265px;">
    <v:fill type="tile" src="images/background.jpg" color="#1c7a94" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
      Content Here!
  <!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
  <![endif]--> 
  </td>
</tr>

Buttons

<tr>
 <td align="center">
  <table border="0" cellpadding="0" cellspacing="0" width="250" style="height:50px;width:250px;min-width:250px;" bgcolor="#ab1d44">
   <tr>
    <td align="center" height="50" style="font-family:Arial, Helvetica, sans-serif;font-size:20px;line-height:1;"> 
      <strong><a href="#TBD" style="text-decoration:none;color:#ffffff;height:50px;line-height:50px;font-size:20px;display:block;" target="_blank">GIVE NOW</a></strong>
    </td>
   </tr>
  </table>
 </td>
</tr>

Email Build Guide

When developing Email Marketing Campaigns, it is essential that your message is received correctly on different devices.

Fundamentals

HTML Structure

Use XHTML 1.0 Transitional. Structure with tables (not flexbox/grid).

Nested Tables: Separate sections by <tr>'s. Use minimum 2 levels of nested tables.

Semantic HTML

  • DO NOT use semantic HTML (header, section, article, nav, etc.)
  • They don't have support in Outlook app
  • If required, use fallbacks with conditionals for Outlook
  • Always prefer traditional tables

Safe Fonts for Email

These are the fonts that render correctly in all major email clients:

  • Arial
  • Helvetica
  • Times New Roman
  • Georgia
  • Tahoma
  • Verdana
  • Courier New
  • Trebuchet MS

Note: Google Fonts can be used but they DO NOT render in most email clients, including Gmail.

Important Concepts

  • Merge Tag: Way to insert dynamic content in your campaigns (example: recipient name)
  • Gift Array: Set of amounts to suggest donations
  • Audience: Set of subscribers in mass sending platforms
  • A/B Testing: Method used to evaluate the best performance of two emails
  • Autoresponder: Message sent automatically after an action
  • CTA (Call to Action): Link or button that motivates an action
  • Open Rate: Percentage of people who opened the email
  • Click-through Rate (CTR): Percentage of clicks over total emails sent
  • Bounce Rate: Emails that were not delivered (soft bounce = temporary, hard bounce = permanent)
  • Conversion Rate: Percentage of users who completed the desired action
  • Unsubscribe Rate: Rate of subscription cancellations
  • Preheader Text: First text in email HTML code, often used as inbox preview
  • Preview Text: Text that appears below the subject line in inbox
  • Responsive Design: Email that adapts to different screen sizes
  • Dynamic Content: Content that changes based on user/segment
  • UTM Parameters: Tracking codes in links for analytics
  • Deliverability: Ability for email to reach inbox (not spam)
  • Drip Campaign: Series of automated emails in sequence
  • Transactional Email: Emails triggered by actions (confirmation, receipt, etc.)
  • Segmentation: Division of audience into specific groups
  • List Hygiene: Cleaning and maintenance of contact list
  • Whitelist: When user adds your email to safe contacts
  • SPF, DKIM, DMARC: Email authentication protocols
  • Spam Score: Score that determines if email is spam
  • Blacklist: List of blocked senders

CSS Guidelines

CSS Inline

All styles for desktop must be inline. Email clients remove CSS in <head> or external files.

For mobile YES use the <style> tag with media queries.

CSS Hierarchy

Specificity order from highest to lowest:

  • 1. Inline CSS: style="..." (highest specificity)
  • 2. #ID: Unique identifiers
  • 3. .CLASS: Reusable classes
  • 4. Tags: a, p, ul, table (lowest specificity)

CSS Selectors

  • Use only CLASS or ID
  • Avoid attribute selectors (Android Gmail error)

Minimum Styles in <style>

* {
  -webkit-text-size-adjust: none !important;
  word-break: keep-all !important;
  hyphens: none !important;
  -ms-hyphens: none !important;
  -webkit-hyphens: none !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
}

body, table, td, p, a {
  -ms-text-size-adjust: 100% !important;
  -webkit-text-size-adjust: 100% !important;
}

p {
  margin: 0px !important;
  padding: 0px !important;
}

table, td {
  border-spacing: 0 !important;
  mso-table-lspace: 0 !important;
  mso-table-rspace: 0 !important;
  border-collapse: collapse !important;
}

.ExternalClass * {
  line-height: 100% !important;
}

Email Structure

Complete Basic Structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<!--[if gte mso 9]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG />
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <style>
      sup {
        font-size:110% !important;
      }
    </style>
<![endif]-->
<style type="text/css">
* {
  -webkit-text-size-adjust: none !important;
  word-break: keep-all !important;
  hyphens: none !important;
  -ms-hyphens: none !important;
  -webkit-hyphens: none !important;
}
body {
  margin: 0 !important;
  padding: 0 !important;
}
body, table, td, p, a {
  -ms-text-size-adjust: 100% !important;
  -webkit-text-size-adjust: 100% !important;
}
p {
  margin: 0px !important;
  padding: 0px !important;
}
table, td {
  border-spacing: 0 !important;
  mso-table-lspace: 0 !important;
  mso-table-rspace: 0 !important;
  border-collapse: collapse !important;
}
.ExternalClass * {
  line-height: 100% !important;
}
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

@media only screen and (max-width: 600px) {
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
.w100 {
  width: 100% !important;
  min-width: initial !important;
}
}
</style>
</head>

<body style="width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust: none; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0;">
<!-- PREVIEW TEXT -->
<p style="display:none;width:0px;height:0px;max-height:0px;mso-hide:all;margin:0px;color:#ffffff;line-height:0px;font-size:0px;"></p>
<p style="display:none;width:0px;height:0px;max-height:0px;mso-hide:all;margin:0px;">&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;</p>
<!-- end PREVIEW TEXT -->
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;background-color: #e6e6e6" width="100%" bgcolor="#e6e6e6">
  <tr>
    <td align="center" valign="top">
      <table class="w100" border="0" cellpadding="0" cellspacing="0" style="width: 600px;background-color: #ffffff" width="600" bgcolor="#ffffff">
        <!--paragraph-->
        <tr>
          <td align="center" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #363636;mso-hyphenate: none;padding: 10px 20px;">
            Text Here
          </td>
        </tr>
        <!--image-->
        <tr>
          <td align="left" valign="top">
            <img src="https://placehold.co/600x400/EEE/31343C" alt="alt text" width="600" height="400" style="display:block;" border="0" />
          </td>
        </tr>
        <!--2 Columns-->
        <tr>
          <td align="left" valign="top">
            <table border="0" cellspacing="0" cellpadding="0" width="300" style="width:300px;float: left" align="left" class="w100">
              <tr>
                <td align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #363636;mso-hyphenate: none;">column 1</td>
              </tr>
            </table>
            <!--[if gte mso 9]></td><td align="left" valign="top"><![endif]-->
            <table border="0" cellspacing="0" cellpadding="0" width="300" style="width:300px;float: right" align="right" class="w100">
              <tr>
                <td align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #363636;mso-hyphenate: none;">column 2</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Width and Dimensions

  • Standard width: 600px for desktop
  • First table: width="100%" (wrapper)
  • Second table: width="600" style="width:600px;" (content)
  • Mobile: Use width: 100% !important in media query

Preview Text

Text that appears after the subject line in inbox:

<p style="display:none;width:0px;height:0px;max-height:0px;mso-hide:all;margin:0px;color:#ffffff;line-height:0px;font-size:0px;"></p>
<p style="display:none;width:0px;height:0px;max-height:0px;mso-hide:all;margin:0px;">&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;</p>

Two Column Layout

<tr>
  <td align="left" valign="top">
    <table border="0" cellspacing="0" cellpadding="0" width="300" style="width:300px;float: left" align="left" class="w100">
      <tr>
        <td align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #363636;mso-hyphenate: none;">
          column 1
        </td>
      </tr>
    </table>
    <!--[if gte mso 9]></td><td align="left" valign="top"><![endif]-->
    <table border="0" cellspacing="0" cellpadding="0" width="300" style="width:300px;float: right" align="right" class="w100">
      <tr>
        <td align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #363636;mso-hyphenate: none;">
          column 2
        </td>
      </tr>
    </table>
  </td>
</tr>

Development Process

Build Process (Step by Step)

  • 1. Analyze design: Identify sections, images, buttons, text
  • 2. Prepare assets: Export images, confirm final copy
  • 3. HTML Structure: Create base tables (wrapper + 600px)
  • 4. Add sections: Create <tr>'s for each design section
  • 5. Insert content: Add text, images, buttons
  • 6. Inline styles: Apply colors, fonts, paddings
  • 7. Mobile styles: Add classes and media queries
  • 8. Testing: Test in Litmus/Email on Acid
  • 9. Validate: HTML and CSS validators
  • 10. Final QA: Outlook, Gmail, Apple Mail, links, personalization

Common Errors

  • Forgetting valign="top": Causes white lines in Outlook
  • Not using display:block on images: Adds space below
  • Padding in wrong place: Only use in <td>, never in <table>
  • Odd line-height: Can cause problems in Outlook
  • Forgetting border="0" in img: Blue border in old Outlook
  • Not adding alt text: Bad for accessibility
  • Target without _blank: Links can exit "view as web page"
  • Using div instead of table: Doesn't work in many clients

Best Practices

  • Rounded images: Add +1px top/bottom (5px if 2X) with Photoshop
  • Don't use align="center" on <table>: Use align="center" on the <td> containing the table
  • Validate code: Do quick HTML and CSS validation when working with code from another dev
  • Use platform code: In Revisions/Updates, download code from platform (clients make internal updates)
  • Use standard mobile classes: .text-center, .hide-m, .resize-image, .pad-l-20 (avoid creating new classes in each build)

Outlook Compatibility

Outlook: Avoid White Lines

  • Change odd line-height → even (13px → 14px)
  • Add valign="top" to all <td>

Ghost break:

<!--[if true]><br> <![endif]-->

MSO Styles in first table:

<table style="mso-line-height-rule: exactly; mso-margin-bottom-alt: 0; mso-margin-top-alt: 0;">

Outlook: Remove Hyphenation

Add mso-hyphenate: none to all text <td>:

<td style="font-family: Arial, sans-serif; mso-hyphenate: none;">Text</td>

Outlook: Remove Joyful Animations

Certain words in Outlook add color-changing animations. Add this class:

.foo span {
  background: inherit !important;
  color: inherit !important;
}

Apply to <td>:

<td class="foo" style="font-family: Arial, sans-serif;">Congratulations</td>

Glossary

Important Websites

ESP & Donation Forms Information

Type:
Platform:
Use search or filters to find variables

Start searching to view results

Use the search bar above or apply filters to find ESP variables and donation form parameters.

Quick tips:
  • Search by platform name (e.g., "Mailchimp")
  • Filter by type (ESP Variables or Donation Forms)
  • Select a specific platform from the dropdown

Send Information

Schedule in Advance

Can Schedule
    Cannot Schedule

      Wait 4 Hours Before Scheduling

        Variables Render in Preview

        With Render
          Without Render

            Timezone Hardcoded

            CST Timezone
              PST Timezone
                EST Timezone
                  MST Timezone

                    Add New Client

                    Separate multiple platforms with commas

                    Add ESP Variable

                    Add DF Parameter

                    Add Send Info

                    Important Codes

                    Code snippets and templates for developers

                    User Management

                    Manage user roles and permissions. Only administrators can access this section.

                    Email Full Name Role Status Last Login Actions
                    Loading users...

                    Audit Log

                    Track all system changes and user actions

                    Date & Time User Action Resource Details Actions

                    Loading audit logs...