913.888.0772 | imodules.com html email best practices: the key to a successful email starts with the...
TRANSCRIPT
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
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
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
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