1. 913.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

2. 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

3. Email is not the WEB!

4. This is why we can’t have nice things There’s a different set of standards between web and email

5. Styling that thing Web development has several options to style your content External stylesheets (.css) Internal style blocks ( … ) Inline ( …</element) In email development if you want a consistently rendered template then you really only have one option Inline ( …</element)

6. 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 email http://www.campaignmonitor.com/css

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

8. 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)

9. 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

10. 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)

11. 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

12. 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

13. Yeah yeah yeah, I’m ready to build now

14. 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 #

15. 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

16. Structure it with Tables Why 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 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

17. Learn it, live it, love it! The makeup of a basic table = HTML Table … = Table Data or Table Cell = Table Row

18. Article Title Preview text … Let’s structure some stuff Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

19. Article Title Preview text … Let’s structure some stuff Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

20. Article Title Preview text … Let’s structure some stuff Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

21. Article Title Preview text … Let’s structure some stuff Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

22. Article Title Preview text … Let’s structure some stuff Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus.

23. Article Title Preview text goes here. Lorem ipsum dolor sit amet consectetur adipiscing elit. Nam malesuada elit, at ultricies purus. Let’s structure some stuff

24. 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

25. 913.888.0772 | imodules.com Questions?