Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Email Frameworks: How & Why

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.

Frontend NE

June 01, 2017
Tweet

More Decks by Frontend NE

Other Decks in Technology

Transcript

  1. Hello, my name is Kerri. Web Developer Currently working at

    Opia Ltd kerrisharp.com @kerri_sharp We’re Hiring! Email: [email protected]
  2. ”Your email is not going to look identical in every

    client. And that’s OK." http://foundation.zurb.com/emails/docs/tips-tricks.html
  3. <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>
  4. <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
  5. <mj-column> <mj-text align="center”> <h2>Open Your mind</h2> </mj-text> <mj-image width="100px" height="100px"

    padding="0" src=”[…]/[email protected]" /> <mj-text align="center”> <p> Life-hack your way to bliss with a meditation programme or yoga session. </p> </mj-text> </mj-column>
  6. <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>
  7. <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
  8. 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>
  9. 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