913.888.0772 | imodules.com913.888.0772 | imodules.com

HTML Email Best Practices:The Key to a Successful Email Starts with the Template

Presented by Chris Smith, Manager of Design Services

Things we’ll discover on this journey

• Some of the major differences between email and web development

• Pre-build topics for a better template• Dabble in some HTML• Resources you can’t live without

Email is not the WEB!

This is why we can’t have nice thingsThere’s a different set of standards between web and email

Styling that thing

Web development has several options to style your content• External stylesheets (.css)• Internal style blocks (<style>…</style>)• Inline (<element style=“…”>…</element)

In email development if you want a consistently rendered template then you really only have one option• Inline (<element style=“…”>…</element)

Wah wah wah … you can’t do that

Before you go crazy with your inline styling you’ll want to check and see what kind of support there is for your styling. Remember, we are supporting more than just browser based email readers.

Here’s a top notch guide to CSS support in emailhttp://www.campaignmonitor.com/css

Close that text editor, you’re not ready to code just yet!

Is your design really ready to build?

• Is your layout flexible enough to add, subtract or reposition items of importance?

• With your design, will Any level of admin be able to manage the content easily?

• Can you simplify the design? (complexity = insanity)• What will your email look like on mobile? (you really

don’t have the luxury of opting out of mobile anymore)

Flexibility is all about layout• The number of news articles can

easily be adjusted• Column content can be easily

repositioned

• News items must be added by 3’s to avoid awkward white space• Content position is locked in place

Admins can be good people too

If you’re not considering how admins are going to use your template then you have already failed.

Given the right tools your admins can create content without breaking your beautiful template• Saved Content• News Module (or any community module)

Graceful degradation

A simple design doesn’t mean it can’t have character. • As you do the build consider using CSS over image

based design elements• Always assume that images will be blocked so make

sure you have alt text, font styling and a background color on your images

The First impression is the last impression

Email marketing is an unforgiving beast. The majority of opens will happen once on the users device of choice and then it’s forgotten. You should count on ½ of all opens to be on a mobile device.• Mobile-Aware is just as effective as Responsive• A single column layout is the best place to start

Yeah yeah yeah, I’m ready to build now

Basic styling: iModules’ Skin Builder setup tips

Set a max width of 600 and units to px

Set default styles as a backup

Make sure all hex colors have the #

Say hello to my little friend, the HTML editor

• Better control over the layout and styling of content

• Unnecessary markup will be a thing of the past

• Troubleshooting issues will become much easier

• You’ll never achieve consistency without it

Structure it with TablesWhy should I use tables?

• Tables provide the best structure and reduce the risk of your template breaking

• Styling is more consistent when driven by tables vs. header or paragraph tags

• Tables override a lot of inconsistent formatting from different email readers

Things to think about

• Tables cancel out most of the skin builder font styling

• All styling must be handled inline and mostly on the <td>

• You can, and should, nest tables when necessary to achieve your desired layout. This can be overwhelming at first so stick to easier layouts while learning

Learn it, live it, love it!The makeup of a basic table

<table cellpadding="0" cellspacing="0" border="0">

</table><table> = HTML Table

<td width="600" align="left" style="">…</td>

<td> = Table Data or Table Cell

<tr>

</tr>

<tr> = Table Row

<table width="400" … > <tr> <td width="95" align="left" valign="top“ style=“…”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td width="305" align="left" valign="top“ style=“…”> <table width="100%" … > <tr> <td width="100%" align="left“ style=“…”>Article Title</td> </tr> <tr> <td width="100%" align="left“ style=“…”>Preview text …</td> </tr> </table> </td> </tr></table>

Let’s structure some stuff

Article TitlePreview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

<table width="400" … > <tr> <td width="95" align="left" valign="top“ style=“…”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td width="305" align="left" valign="top“ style=“…”> <table width="100%" … > <tr> <td width="100%" align="left“ style=“…”>Article Title</td> </tr> <tr> <td width="100%" align="left“ style=“…”>Preview text …</td> </tr> </table> </td> </tr></table>

Let’s structure some stuff

Article TitlePreview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

<table width="400" … > <tr> <td width="95" align="left" valign="top“ style=“…”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td width="305" align="left" valign="top“ style=“…”> <table width="100%" … > <tr> <td width="100%" align="left“ style=“…”>Article Title</td> </tr> <tr> <td width="100%" align="left“ style=“…”>Preview text …</td> </tr> </table> </td> </tr></table>

Let’s structure some stuff

Article TitlePreview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

<table width="400" … > <tr> <td width="95" align="left" valign="top“ style=“…”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td width="305" align="left" valign="top“ style=“…”> <table width="100%" … > <tr> <td width="100%" align="left“ style=“…”>Article Title</td> </tr> <tr> <td width="100%" align="left“ style=“…”>Preview text …</td> </tr> </table> </td> </tr></table>

Let’s structure some stuff

Article TitlePreview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

<table width="400" … > <tr> <td width="95" align="left" valign="top“ style=“…”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td width="305" align="left" valign="top“ style=“…”> <table width="100%" … > <tr> <td width="100%" align="left“ style=“…”>Article Title</td> </tr> <tr> <td width="100%" align="left“ style=“…”>Preview text …</td> </tr> </table> </td> </tr></table>

Let’s structure some stuff

Article TitlePreview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

<table width="400“ cellpadding=“0” cellspacing=“0” border=“0” style=“border-collapse:collapse;”> <tr> <td width="95" align="left" valign="top“ style=“padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td width="305" align="left" valign="top“ style=“padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;”> <table width="100%" cellpadding=“0” cellspacing=“0” border=“0” style=“border-collapse:collapse;”> <tr> <td width="100%" align="left“ style=“padding-top:0px; padding-right:10px; padding-bottom:0px; padding-left:10px; font-

family:Arial, Helvetica, sans-serif; font-size:16px; color:#2A61B7;”>Article Title</td> </tr> <tr> <td width="100%" align="left“ style=“padding-top:0px; padding-right:10px; padding-bottom:0px; padding-left:10px; font-

family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333;”> Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus. </td>

</tr> </table> </td> </tr></table>

Let’s structure some stuff

So where do I get started?Must have resources for anyone interested in building email templates

http://www.campaignmonitor.com/css

http://www.campaignmonitor.com/resources/will-it-work/guidelines

https://www.campaignmonitor.com/dev-resources/guides/mobile/

http://www.emailology.org/#2

https://tinypng.com/

http://litmus.com

913.888.0772 | imodules.com913.888.0772 | imodules.com

Questions?