120 DPI Issue

Shout out to James White for this DPI Scaling Issues Post.

For Text
Apply width and height attributes to all block level tags like <table> and <td>, then declare a matching CSS width and height property in a style. Do not do this to % based widths.

From this
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="300" height="120" align="left" valign="top">CONTENT</td>
  </tr>
</table>

To this
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="300" height="120" align="left" valign="top" style="width:330px; height:120px;">CONTENT</td>
  </tr>
</table>

For Imagery

Replace doctype

From this
<html xmlns="http://www.w3.org/1999/xhtml">

To this
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
Add this before closing </head>

<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG></o:AllowPNG>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->

Animated Gif with Static MSO Image

Animated gif (for everything except MSO)

<!--[if !mso]><!-->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#3a3a3a; padding:0 0 0 0;"><img src="https://camiah.com/wp-content/uploads/2016/08/slice-on-the-guide-9.gif" alt="" width="500" height="281" border="0" style="display:block;" /></td>
  </tr>
</table>
<!--<![endif]-->

Static Image (for MSO)

<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#3a3a3a; padding:0 0 0 0;"><img src="http://placehold.it/500x281" alt="" width="500" height="281" border="0" style="display:block;" /></td>
  </tr>
</table>
<![endif]-->

Deliverability Tips

  1. Let people know exactly what they’ll be receiving before they sign up for your list.
  2. Keep your list clean. When you get bounces, both hard and soft, remove them. Make sure you’re not sending to those email addresses again. List hygiene will help ensure you are a reputable sender. Start List hygiene after your first send.
  3. Send to people that actually signed up for your emails.
  4. Send relevant, interesting, and engaging emails that have a purpose.
  5. Make it easy to unsubscribe. If you are sending like you should, people will be likely to stick around.
  6. Have a clear and useful preference center. Ask about what people like to receive so you can send the right message to the right people.
  7. If you haven’t been sending to a large list for a decent amount of time, throttle the sends for a bit. Throttling sends the email in chunks over a period of time instead of all at once.

Table Tr Td’s Rules for Email

Rule 1: Email is not Web
You’re right, they both use HTML. The difference is in the style of HTML that is used. For Web, divs are used and external css files drive styling and design. For email, tables are used. CSS stylings are coded inline.

Rule 2: Email Clients New and Old
You’re not only designing an email for the latest browser, or the newest phone, you’re designing an email that needs to look good in Outlook and work in Lotus Notes. Lots of rules need to be taken into account.

Rule 3: Create a Clean Template of Code
Starting with a template that you’ve built, approved with the client, and put through the rigors of a render testing will be the best way to head towards success.

Rule 4: CSS needs to be Inline
As mentioned in Rule 1, email code has the CSS styles inline. When viewed the first time, the code looks heavy, but as you work in it, it becomes beautiful.

Rule 5: Nest your Tables
Abandon those colspans and rowspans at the door. You’ve entered Emailland. Nest your tables, then nest again. That structure will allow you to walk by possible rendering issues and never look back.

Rule 6: Validate Validate Validate
Use a trusted source, such as the W3C validator and the Email Validator to make sure your code is not missing anything crucial. A missing tag can ruin the structural integrity of your email.

Rule 7: Render Test with a Passion
Take your render testing personally. Don’t dismiss a structural problem. Use a render testing platform and get as many live devices as you can get your hands on.

Rule 8: Know your Followers
Know where to focus in your coding and design. By knowing where your followers are viewing the email, you can know where to spend your time.

Box Shadow

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td class="boxShadow" 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;">Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1 Column 1</td>
  </tr>
</table>

css

<style type="text/css">
.boxShadow {
	-moz-box-shadow:3px 3px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow:3px 3px 5px rgba(0,0,0,0.3);
	box-shadow:3px 3px 5px rgba(0,0,0,0.3);
}
</style>

Interactive Email

Interactive email happens by driving content through the checking and unchecking of <input> checkboxes.

Note: You can either use type=”checkbox” or type=”radio” depending on your needs.

css

<style type="text/css">
input {
  display: none;
}
label {
  cursor: pointer;
}
#interactiveCheckbox:checked~* .interactiveContent {
  background-color:#98D58E !important;
}
</style>

below the opening <body> tag

<!--[if !mso]><!-->
<input type="checkbox" name="thing" id="interactiveCheckbox" style="display:none !important;">
<!--<![endif]-->

html

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td class="interactiveContent" align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; mso-line-height-rule:exactly; line-height:20px; color:#3a3a3a; padding:20px 20px 20px 20px;"><label for="interactiveCheckbox" style="text-decoration:underline;">click me to change background colors</label></td>
  </tr>
</table>