Responsive Email Frameworks: How & Why

Kerri Mark Sharp talks us through 'Responsive Email Frameworks: How & Why'. He discusses a couple of modern frameworks for responsive email templates (MJML and Zurb's Foundation for Emails), how and why to use them, and what makes them better than the multitude of boilerplate templates that are out there.

Transcript

1. Responsive Email Frameworks How & Why Kerri Mark Sharp Frontend NE, June 2017
2. Hello, my name is Kerri. Web Developer Currently working at Opia Ltd kerrisharp.com @kerri_sharp We’re Hiring! Email: kerri.sharp@opia-sp.com
3. ”Your email is not going to look identical in every client. And that’s OK." http://foundation.zurb.com/emails/docs/tips-tricks.html
4. Why Email Frameworks? • Save time • Extra features • Enhanced compatibility
5. Save time through re-use (Once you’ve learned the syntax…)
6. Make use of extra features (Still no Flash support…)
7. Enhanced compatibility (Word 97 might be pushing it though…)
8. How?
9. Email Framework Workflow • Abstract complexity • Compile & Inline • Test & Send
10. MJML Mailjet Markup Language
11. <mj-section background-url=”[…]valley.jpg" background-size="cover" background-repeat="no-repeat" padding="90px 20px 90px 20px” > <mj-column> <mj-text align="center" font-family="Oswald, Arial, sans-serif" color="white" font-size="64" text-transform="uppercase” line-height=”62px" padding-bottom="0” > Hello World Inc <sup class="trademark">&reg;</sup> </mj-text> </mj-column> </mj-section>
12. <mj-button align="center" inner-padding="15px 20px" padding="0px 30px" background-color="#4c1a71" border-radius="0px" font-size="18px" font-family="Oswald, Arial, sans-serif" text-transform="uppercase" href="http://kerrisharp.com/hello" > Find your nearest Hello World store </mj-button> Mobile Desktop
13. <mj-column> <mj-text align="center”> <h2>Open Your mind</h2> </mj-text> <mj-image width="100px" height="100px" padding="0" src=”[…]/step-1@2x.png" /> <mj-text align="center”> <p> Life-hack your way to bliss with a meditation programme or yoga session. </p> </mj-text> </mj-column>
14. Foundation for Emails 2 Zurb Foundation
15. <wrapper> <container> <row class="collapse hero" bgcolor="#4c1a71” > <columns small="12" large="12" valign="middle” > <h1 class="text-center”> Hello World Inc <sup class="trademark">&reg;</sup> </h1> </columns> </row> </container> </wrapper>
16. <p class="text-center”> Go to <a href="http://kerrisharp.com/hello" target="_blank"> www.helloworld.io/store </a> or visit your nearest store and redeem your &pound;10 discount code on your new lifestyle upgrade. </p> <spacer size="20"></spacer> <center> <button href=http://kerrisharp.com/hello> Find your nearest Hello World store </button> </center> <spacer size="20"></spacer> Mobile Desktop
17. content.html {{>segment_col_3 title="Open Your mind" step="1" content="Life-hack your way to bliss with a meditation programme or yoga session." }} segment_col_3.html <columns small="12" large="3"> <h2 class="text-center segment"> {{title}} </h2> <spacer size="28"></spacer> <center> <img src="{{img-url}}step-{{step}}2x.png" width="100px" height="100px" /> </center> <spacer size="15"></spacer> <p class="text-center segment"> {{content}} </p> </columns>
18. Comparisons
19. MJML Desktop (Chrome) Foundation Desktop (Chrome)
20. MJML Mobile (Chrome) Foundation Mobile (Chrome)
21. Testing
22. MJML iPad Foundation iPad
23. MJML iPhone 6 Foundation iPhone 6
24. MJML Yahoo (Chrome) Foundation Yahoo (Chrome)
25. MJML Gmail (Chrome) Foundation Gmail (Chrome)
26. MJML Outlook (2010) Foundation Outlook (2010)
27. MJML Outlook (2007) Foundation Outlook (2007)
28. Try it out for yourself https://github.com/kerrisharp/email-frameworks
29. Further Reading • Dave Horan’s ‘Zurb Foundation for Emails’ YouTube series • ‘Creating your own MJML component’ by Nicolas Garnier • ‘Diving Deeper into MJML’ by Zhuo-Fei Hui • MarkdownMail for Laravel
30. Thank you! Kerri Mark Sharp @kerri_sharp github.com/kerrisharp