913.888.0772 | imodules.com913.888.0772 | imodules.com

Building Time-Saving Email TemplatesPresented by Chris Smith, Design Services Team Lead

– It’s flexible enough to add, subtract or reposition items of importance

– Any admin can manage the content– The styling is all in the template– If you’re thinking mobile, think simple & one

column (at first)

Exactly what makes an email templatetime-saving?

Flexibility is all in the design

– The number of articles can easily be adjusted

– Column content can be easily repositioned

– News items must be added by 3’s

– Adding events would cause awkward white space

– Content position is locked in place

– Create a newsletter specific News Listing Type

– Create a hidden Newsletter Admin page in your sitemap and go to that page

– Drop the News Module that utilizes the newsletter listing type on this admin page

Using the News Module to tamethe wild Admin

You can use this pattern code below:<p><strong>[Link][Content Name][/Link]</strong>[Tool Icons]</p><img src="[ThumbnailUrl]" alt="[Content Name]" /><p>[Preview]</p>

Using the News Module to tamethe wild Admin– Turn Content Builder on and edit the News Module pattern

to show thumbnail imagesYour admin page should look similar to this:

– Because we can style the news pattern in the email template we’ve reduced the burden on the admin down to three things:

Using the News Module to tamethe wild AdminWhy go through all the trouble?

• Article Title• Thumbnail Image• Preview Text

Set a max width of 600 and set the unit as pixels

Set default styles as a backup

Make sure all hex colors have the #

Basic stylingSkin Builder setup tips

– You have better control over the layout and styling of content

– You will reduce the amount of unnecessary markup

– Troubleshooting issues will become much easier

– You’ll never achieve consistency without it

Stay calm, we’re going to talk aboutthe HTML editorWhy should I use the HTML editor?

Getting to know HTML Tables

<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

So what is an HTML Table?

Getting to know HTML TablesWhy should I use tables? Things to think aboutTables provide the best structure for your template, reducing the risk of it breaking

Tables provide a more consistent font styling than header and paragraph tags

Tables override a lot of inconsistent formatting from different email readers

Tables cancel out most of the skin builder font styling

All styling must be handled inline

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.

Getting to know HTML Tables

<table width="400" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="95" align="left" valign="top" style="padding:0px; border-collapse:collapse;"> <img src="[ThumbnailUrl]" alt="[Title]" width="75" /> </td> <td width="305" align="left" valign="top" style="padding:0px; border-collapse:collapse;"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%" align="left" style="padding-bottom:8px; border-collapse:collapse; font-weight:bold; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#229bcd;">[Title]</td> </tr> <tr> <td width="100%" align="left" style="padding-bottom:5px; border-collapse:collapse; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#000000;">[Preview Text]</td> </tr> </table> </td> </tr></table>

Remember the News Module?<table width="400" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="95" align="left" valign="top"> <img src="[ThumbnailUrl]" alt="[Title]" width="75" /> </td> <td width="305" align="left" valign="top"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%" align="left">[Title]</td> </tr> <tr> <td width="100%" align="left">[Preview Text]</td> </tr> </table> </td> </tr></table>

<table width="400" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="95" align="left" valign="top"> <img src="[ThumbnailUrl]" alt="[Title]" width="75" /> </td> <td width="305" align="left" valign="top"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%" align="left">[Title]</td> </tr> <tr> <td width="100%" align="left">[Preview Text]</td> </tr> </table> </td> </tr></table>

<table width="400" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="95" align="left" valign="top"> <img src="[ThumbnailUrl]" alt="[Title]" width="75" /> </td> <td width="305" align="left" valign="top"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%" align="left">[Title]</td> </tr> <tr> <td width="100%" align="left">[Preview Text]</td> </tr> </table> </td> </tr></table>

<table width="400" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="95" align="left" valign="top"> <img src="[ThumbnailUrl]" alt="[Title]" width="75" /> </td> <td width="305" align="left" valign="top"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%" align="left">[Title]</td> </tr> <tr> <td width="100%" align="left">[Preview Text]</td> </tr> </table> </td> </tr></table>

<table width="400" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="95" align="left" valign="top"> <img src="[ThumbnailUrl]" alt="[Title]" width="75" /> </td> <td width="305" align="left" valign="top"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="100%" align="left">[Title]</td> </tr> <tr> <td width="100%" align="left">[Preview Text]</td> </tr> </table> </td> </tr></table>

<table width="600" align="center" cellpadding="0" cellspacing="0" border="0" class="mobileTable"> <tr> <td width=“600" align="left" class="mobileCell" style=" "></td> </tr> </table>

Mobile TipsChoose the single column template, apply the basic skin builder settings with one exception: set the width to 100%<style> @media only screen and (max-width: 479px) { table[class="mobileTable"], td[class="mobileCell"] {width:300px!important} }</style>

So where do I get started?Must have resources for anybody that builds email templates

http://www.campaignmonitor.com/css

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

http://www.campaignmonitor.com/guides/mobile

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

http://litmus.com

913.888.0772 | imodules.com913.888.0772 | imodules.com

Questions?