Concatenate a URL

When you add parameters to a URL, add the first parameter using a question mark (?), and every subsequent parameter using an ampersand (&).

No Parameters
http://tabletrtd.com

One Parameter
http://tabletrtd.com?parameter1

Multiple Parameters
http://tabletrtd.com?parameter1&parameter2&parameter3

Variable Content by ESP

SFMC (ExactTarget)

%%[if emailversion == "V1" then]%%
V1 CONTENT GOES HERE
%%[elseif emailversion == "V2" then]%%
V2 CONTENT GOES HERE
%%[else]%%
DEFAULT CONTENT GOES HERE
%%[endif]%%

Campaign Monitor

[if:emailversion=V1]
V1 CONTENT GOES HERE
[elseif:emailversion=V2]
V2 CONTENT GOES HERE
[else]
DEFAULT CONTENT GOES HERE
[endif]

MailChimp

*|IF:emailversion=V1|*
V1 CONTENT GOES HERE
*|ELSEIF:emailversion=V2|*
V2 CONTENT GOES HERE
*|ELSE:|*
DEFAULT CONTENT GOES HERE
*|END:IF|*

Removing Orphans and Widows

Add a non-breaking space ( ) between the last two words of every paragraph, between words you don’t want to break apart, or a non-breaking hyphen (​) as the hyphen in hyphenated words. This will keep your live text from leaving an orphan/widow hanging out alone (and sad).

Note: Do not use padding, or a tight space to try to fix this for live text. Doing so can cause undesirable effects across email clients.

I am a sentence that might break apart if nobody fixes me.

I am a sentence that might need a non​breaking hyphen.

Buttons (CTAs)

Standard

<table cellpadding="0" cellspacing="0" border="0" width="150">
  <tr>
    <td align="center" valign="middle" height="42" bgcolor="#3a3a3a" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0;"><strong><a href="http://tabletrtd.com/" target="_blank" style="color:#ffffff; text-decoration:none; display:block; padding:10px 10px 10px 10px;">CTA</a></strong></td>
  </tr>
</table>

Rounded

<table cellpadding="0" cellspacing="0" border="0" width="150">
  <tr>
    <td align="center" valign="middle" height="42" bgcolor="#3a3a3a" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border-radius:21px;"><strong><a href="http://tabletrtd.com/" target="_blank" style="color:#ffffff; text-decoration:none; display:block; padding:10px 10px 10px 10px;">CTA</a></strong></td>
  </tr>
</table>

Bordered

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="#3a3a3a" style="padding:2px 2px 2px 2px;">
      <table cellpadding="0" cellspacing="0" border="0" width="150">
        <tr>
          <td align="center" valign="middle" height="42" bgcolor="#a3a3a3" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0;"><strong><a href="http://tabletrtd.com/" target="_blank" style="color:#ffffff; text-decoration:none; display:block; padding:10px 10px 10px 10px;">CTA</a></strong></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Rounded and Bordered

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="#3a3a3a" style="padding:2px 2px 2px 2px; border-radius:25px;">
      <table cellpadding="0" cellspacing="0" border="0" width="150">
        <tr>
          <td align="center" valign="middle" height="42" bgcolor="#a3a3a3" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border-radius:21px;"><strong><a href="http://tabletrtd.com/" target="_blank" style="color:#ffffff; text-decoration:none; display:block; padding:10px 10px 10px 10px;">CTA</a></strong></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Background Image

<table cellpadding="0" cellspacing="0" border="0" width="150">
  <tr>
    <td align="center" valign="middle" height="42" bgcolor="#3a3a3a" background="http://placehold.it/10x10" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0;"><strong><a href="http://tabletrtd.com/" target="_blank" style="color:#ffffff; text-decoration:none; display:block; padding:10px 10px 10px 10px;">CTA</a></strong></td>
  </tr>
</table>

Note: On the PC versions of Outlook only the text is clickable and the background image will not show. The code will fall back gracefully to the background color.

Email Build Checklist
















Responsive Bulletproof Background

Need Stig’s Bulletproof Background to become responsive for mobile? Add this class to the <td> and this css to your media query.

<td class="bgImage" background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
  VML AND CONTENT GOES HERE
</td>

css

<style type="text/css">
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.bgImage {
    background-size: 100% 100% !important;
    height: auto !important;
}
}
</style>

Border

Standard – Add a border to a <td> (instead of a table). Feel free to use shorthand for the CSS on a border.

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" style="border:1px solid #3a3a3a;">
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Bordered Text</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Works Everywhere – This is not really a border border 😉 We are currently really loving this technique.

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" bgcolor="#3a3a3a" style="padding:1px 1px 1px 1px;">
      <table cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td align="left" valign="top" bgcolor="#ffffff" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">Bordered Text</td>
        </tr>
      </table>
    </td>
  </tr>
</table>