HTML Email Best Practices: Getting the most out of your HTML Email Templates

From design to send there are numerous things you should consider to make your email template successful. Clicking “send” shouldn’t be that scary … the right template will ensure that it isn’t. Join Chris Smith from the iModules Design team as he covers topics ranging from content layout to time-saving build tips.

Transcript

1. 913.888.0772 | imodules.com 913.888.0772 | imodules.com Getting the most out of your HTML Email Templates Presented by Chris Smith, Manager of Design Services
2. Just wait for the new email editor. Seriously, email development is hard … the new editor isn’t. But if you can’t wait then we should probably cover a few things.
3. What I’ll cover: • Some of the major differences between email and web development • You’re so not ready to code if you haven’t thought about these topics first • Dip our toes into the world of HTML email development • Resources that will save your …
4. What I won’t cover: • An in-depth look at the inner workings of the iModules email marketing tool • Responsive email development
5. Email is not the WEB … not convinced? Ask any front-end web developer to build you an email template and watch them cry (or at least complain a whole lot about it).
6. Bippity Boppity Boooooo … There’s a different set of standards between web and email
7. Options? We don’t get no stinking options. 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)
8. You know that won’t work, right? Just because it’s inline doesn’t mean that it’s well supported. Before you venture too far down the crazy train you’ll want to see what kind of support it has. Remember, we are supporting more than just browser based email readers. Here’s a top notch guide to CSS support in email that absolutely needs to be a resource in your toolbox: http://www.campaignmonitor.com/css
9. “I solemnly swear that I am up to no good” Said every email admin that ever used your template
10. Just like celebrities your email looks great in Photoshop, but how does it look out in the real world? • Does your design allow Any level of admin be able to manage the content easily? • Is your layout flexible enough to add, subtract or reposition items of importance? • What will your email look like on mobile? (your template doesn’t have to be responsive to look good on mobile)
11. If you can’t move it, consider removing it. • The number of articles can easily be adjusted to any amount • 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
12. You could also be to blame 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)
13. Should I worry about Outlook users? I mean they’ve been used to BLAH for years. • Don’t kill yourself on every element of the design. Consider using CSS over image based design elements to save your sanity. • Always assume that images will be blocked so make sure you have alt text, font styling and a background color on your image when necessary • 120dpi resolution comes as the standard setting on windows laptops now which can greatly affect how your template renders. If you are putting table based content in make sure to put the widths as the style property. (example: <table style=“width:600px;”>)
14. The First impression is the only impression If you’re going to interrupt their Pokemon Go time, make sure it’s worth their while. The majority of opens will happen once on the users device of choice and then it’s forgotten. You should count on over ½ 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
15. You did see that this was about HTML emails, right?
16. I swear mostly bad things won’t happen if you push that button • HTML will give you 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
17. Tables still? You do know this is 2016 right? OK, the short answer is technically … NO, you don’t have to use tables to do the heavy lifting anymore. But those techniques are very advanced and you still need tables to a degree. Why you should use tables: • Tables still provide reliable structure with a low learning curve • Admins are less likely to break your template when content is table based
18. Three little tags, how scary can that be? The makeup of a basic table <table cellpadding="0" cellspacing="0" border="0“ style=“width:600px;”> </table> <table> = HTML Table <td align="left" style=“width:600px;">…</td> <td> = Table Data or Table Cell <tr> </tr> <tr> = Table Row
19. <table style=“width:400px" … > <tr> <td align="left" valign="top“ style=“width:95px;”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td align="left" valign="top“ style=“width:305px;”> <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> If you like it then you shoulda put a table around it Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.
20. <table style=“width:400px;" … > <tr> <td align="left" valign="top“ style=“width:95px;”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td align="left" valign="top“ style=“width:305px;”> <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> Breaking it down Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.
21. <table style=“width:400px;" … > <tr> <td align="left" valign="top“ style=“width:95px;”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td align="left" valign="top“ style=“width:305px;”> <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> Breaking it down Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.
22. <table style=“width:400px;" … > <tr> <td align="left" valign="top“ style=“width:95px;”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td align="left" valign="top“ style=“width:305px;”> <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> Breaking it down Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.
23. <table style=“width:400px;" … > <tr> <td align="left" valign="top“ style=“width:95px;”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75" /> </td> <td align="left" valign="top“ style=“width:305px;”> <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> Breaking it down Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.
24. <table cellpadding=“0” cellspacing=“0” border=“0” style=“width:400px; border-collapse:collapse;”> <tr> <td align="left" valign="top“ style=“width:95px; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;”> <img src=“http://www.somesite/image.jpg” alt=“Text" width="75“ height=“75” border=“0” style=“display:block;” /> </td> <td align="left" valign="top“ style=“width:305px; 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> Bringing it all together
25. Uh, HELP!!!! When stuff happens … rest assured that there’s help out there. Bookmark these right now, seriously … I’ll wait. 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 http://responsiveemailresources.com/
26. 913.888.0772 | imodules.com 913.888.0772 | imodules.com Questions?