1. 913.888.0772 | imodules.com Mobile Email Templates: It’s time to go responsive! Presented by Chris Smith, Design Services Team Lead

2. Why bother with mobile?

3. Methods for our mobile madness Mobile Friendly (Aware) Narrow Template Fluid Layout Responsive or Adaptive

4. Responsive techniques Table alignment

5. Responsive techniques Table alignment Display block td {display:block;}

6. Where do I start? Determine the basic structure of your template If you’re just starting to design your new template keep it simple, if you don’t …

7. You’re going to feel like this

8. The easy part Choose the Mobile Ready layout that best fits with your basic structure Always start with the “Create New” design template

9. The hard part It’s not magic … it’s just CSS 1.Email Client Specific Styles – Forces Outlook into submission 2.Reset Styles – Standard resets that apply to all email readers 3.Mobile Styles – Media queries!

10. Code breakdown Content @media only screen and (max-device-width: 320px) { table[class=“mobileHeaderWidth”], td[class=“mobileHeaderCell”] { width:320px!important;} td[class=“mobileHeaderCell”] { display:block!important;} }

11. Code breakdown Content @media only screen and (max-device-width: 320px) { table[class=“mobileHeaderWidth”], td[class=“mobileHeaderCell”] { width:320px!important;} td[class=“mobileHeaderCell”] { display:block!important;} }

12. Code breakdown Content @media only screen and (max-device-width: 320px) { table[class=“mobileHeaderWidth”], td[class=“mobileHeaderCell”] { width:320px!important;} td[class=“mobileHeaderCell”] { display:block!important;} }

13. Table Code breakdown Content @media only screen and (max-device-width: 320px) { table[class=“mobileHeaderWidth”], td[class=“mobileHeaderCell”] { width:320px!important;} td[class=“mobileHeaderCell”] { display:block!important;} } !

14. What in the world do I do with images? CSS works from the top down, so apply your styles to the larger media query and let it trickle down to the smaller one @media only screen and (max-device-width: 720px) { img[class=“mFullImage”] { width:100%!important; height:auto!important;} }

15. Padding, what happened? … you used to play so nicely Desktop table box model 400px table width 10px of padding on all sides, the table still = 400px 400px

16. Padding, what happened? … you used to play so nicely Desktop table box model 400px table width 10px of padding on all sides, the table still = 400px Mobile increases the overall size to 420px 400px 420px

17. Padding, what happened? … you used to play so nicely So what can you do to fix the broken box model? Add this to your css and cry with joy! td {box-sizing:border-box; }

18. Working with Attribute Selectors What to do when your classes are applied to various elements? Hide on mobile the rest of the table Instead of doing: @media only screen and (max-device-width: 720px) { span[class=“mHide”], table[class=“mHide”] { display:none!important; } }

19. Working with Attribute Selectors What to do when your classes are applied to various elements? Hide on mobile the rest of the table Do: @media only screen and (max-device-width: 720px) { *[class=“mHide”] { display:none!important; } }

20. Some final tips 1.Use the News Module 2.Seriously, use the News Module 3.You can also use the “Patterned Content Module” … aka the News Module

21. 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/guides/mobile http://responsiveemailresources.com/ http://litmus.com

22. 913.888.0772 | imodules.com Questions?