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

Responsive E-Mails

303c2b37c0e83e752cbc15c7feb022b8?s=47 Aimeos
August 18, 2019

Responsive E-Mails

You found IE6 was horrible? Then you haven't worked with Outlook & Co!
Learn how you can create responsive easily using MJML

303c2b37c0e83e752cbc15c7feb022b8?s=128

Aimeos

August 18, 2019
Tweet

Transcript

  1. Responsive E-Mails

  2. Web HTML5, CSS3 E-Mail HTML4+, CSS?

  3. Problem …

  4. Gründe Sicherheit + WTF?

  5. Lösung

  6. <!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><!--[if !mso]><!-- → <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-→

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <style type="text/css">#outlook a { padding:0; } .ReadMsgBody { width:100%; } .ExternalClass { width:100%; } .ExternalClass * { line-height:100%; } body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; } table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; } img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none; -ms-interpolation-mode:bicubic; } p { display:block;margin:13px 0; }</style> <!--[if !mso]><!--><style type="text/css">@media only screen and (max-width:480px) { @-ms-viewport { width:320px; } @viewport { width:320px; } }</style> <!--<![endif]--><!--[if mso]><xml><o:OfficeDocumentSettings><o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml> <![endif]--><!--[if lte mso 11]><style type="text/css"> .outlook-group-fix { width:100% !important; }</style>
  7. MJML Foundation

  8. Gründe für MJML Einfacher Kürzere Toolchain Schnellere Ergebnisse API, App,

    NPM, Editor-Plugins, ...
  9. <mjml> <mj-head> ... </mj-head> <mj-body> ... </mj-body> </mjml>

  10. Header

  11. <mj-head> <mj-font name="Noto" href="..." /> <mj-style inline="inline"> .logo img {

    max-width: 300px; margin: auto } .blue-text h1 { color: #103050; } .btn td, .btn a { background-color: #ba9a5a; } </mj-style> </mj-head>
  12. Body

  13. <mj-body> <mj-section> <mj-column> <mj-image css-class="logo" src="..." /> <mj-text css-class="blue-text"> <h1>Hello

    World!</h1> </mj-text> <mj-button css-class="btn" href="..."> Click me</mj-button> </mj-column> </mj-section> </mj-body>
  14. Responsives Spaltenlayout

  15. <mjml> <mj-body> <mj-section> <mj-column>column one</mj-column> <mj-column> column two</mj-column> <mj-column>column three</mj-column>

    </mj-section> </mj-body> </mjml>
  16. Tabellen

  17. <mj-table css-class="order"> <tr> <th></th><th>Name</th> <th>Qty</th><th>Price</th> </tr> <tr> <td><img width="100" src="...</td>

    <td>Demo product</td> <td>1</td><td>100,00 €</td> </tr> </mj-table>
  18. CSS

  19. <mjml> <mj-head> <mj-style inline="inline"> .logo img { max-width: 300px; margin:

    auto } </mj-style> </mj-head> <mj-body> <mj-section><mj-column> <mj-image css-class="logo" src="..." /> </mj-column></mj-section> </mj-body>
  20. <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;"> <tbody><tr><td style="width:550px;"> <img height="auto" src="…"

    style="max-width: 300px; margin: auto; border: 0; display: block; outline: none; text-decoration: none; height: auto; width: 100%;" width="550"> </td></tr></tbody> </table>
  21. Ergebnis

  22. None
  23. Aimeos

  24. Open Source E-Commerce Framework

  25. aimeos.org github.com/aimeos

  26. Laravel Slim a micro framework for PHP

  27. Vollständiges Shopsystem Vergleichbar mit Magento Core

  28. Sendet E-Mails für Zahlungs- und Lieferstatus Produktupdates Abonnements Gutscheine Zugangsdaten

  29. None
  30. Aimeos Twitter: @aimeos facebook.com/Aimeos