Modern HTML Email Development

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
August 25, 2016

Modern HTML Email Development

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

August 25, 2016
Tweet

Transcript

  1. MODERN HTML EMAIL othree at Modern Web

  2. othree

  3. othree.net blog.

  4. othree speakerdeck.com/

  5. othree github.com/

  6. othree twitter.com/

  7. othree flickr.com/

  8. Outline ତر ༟๕ ʈՈ

  9. Text Email • Older than WWW • SMTP 1982 •

    Lots of use in Japan • Japan feature phone ecosystem • Still very popular today
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. HTML Email

  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. HTML Email • Lots of table • Lots of inline

    style, no shorthand • Lots of Microsoft stuff • -ms/mso prefixed style • mso conditional comment
  28. None
  29. Problems of HTML Email

  30. Lots of Mail Client

  31. Mail Clients • Gmail on web • Gmail on Android

    • Gmail on iOS • Outlook • Apple Mail • Apple Mail on iOS • Thunderbird • Lotus Note • Blackberry • …
  32. 3 Major Type

  33. Desktop Standalone

  34. None
  35. Web Based

  36. None
  37. Mobile Native App

  38. None
  39. Desktop Mobile Web buggy CSS support need table layout need

    responsive layout best CSS support not allow <style> need sandbox
  40. Buggy? • No <style> tag in web mail client •

    No <style>, no media query • No float layout
  41. Buggy? • No JavaScript support • No <video> support in

    almost every client
  42. Desktop Mobile Web

  43. Desktop Mobile Web 牦 অ OK

  44. Desktop Mobile Web 牦 অ OK OK অ牦

  45. None
  46. None
  47. Problems • Lots of environment • Uncommon behavior

  48. More Problems • Lots of environment • Uncommon behavior •

    No debugging tool • No document • No standard
  49. Why no Standards • Mail client didn’t complete follow entire

    web standards • For security reason • For application size • Use customized engine or webview
  50. When Microsoft releases a new version of Outlook that’s STILL

    powered by Word.
  51. None
  52. <style> <script>

  53. on mail.google.com ?

  54. Size in MB 82 74

  55. Size in MB 40 20

  56. Standardize It?

  57. None
  58. None
  59. Email Standard Project • by Campaign Monitor founder • No

    actually update since 2011
  60. None
  61. None
  62. None
  63. None
  64. Process To Develop
 HTML Mail

  65. modify html/css send test mail

  66. The first time you ever tested your email

  67. None
  68. Coding Mobile First Email • Basic layout, 3 level of

    <div> • Media query and display: table; for desktop standalone • Special hack for outlook.com • Conditional Comment <table> for outlook • CSS Calc for web client responsive
  69. HTML email, The Final Frontier of F2E

  70. લਓ୓ߥ੒Ռ

  71. Documents

  72. Document • No standards • But we have lot of

    document wrote by pioneers • Nettuts+ • Campaign Monitor • Litmus
  73. Nettuts+

  74. None
  75. None
  76. None
  77. None
  78. MailChimp

  79. None
  80. None
  81. None
  82. Campaign Monitor

  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. Will It Work • CSS Support • Email Design Guidelines

    • Email Client Stats • Video in Email • Best Widths • Image Blocking • Using Forms in Email • Alt Attributes • Flash in Email • Symbols in Subject Lines • Web Fonts
  90. Conferences

  91. The Email Design Conference

  92. None
  93. Email Innovations Summit

  94. None
  95. None
  96. None
  97. Tools

  98. Premailer • Preflight for HTML email • Convert to inline

    style • Relative to absolute URL • Check CSS compatibility • Create plain text version • Open Source Project
  99. None
  100. None
  101. None
  102. None
  103. None
  104. Litmus • The most powerful mail preview service • Mail

    test/checker • Mail analysis • Paid service
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. Email Market Share

  113. None
  114. None
  115. MJML

  116. None
  117. None
  118. MJML • Mailjet Markup Language • by Mailjet • A

    new markup language for HTML email
  119. None
  120. Components • mj-container • mj-body • mj-column • mj-section •

    mj-text • …
  121. None
  122. None
  123. None
  124. None
  125. What is MJML • A new markup language • Component

    with layout meaning • Render to HTML with all necessary tags, inline style, conditional comment
  126. None
  127. Behind the Scene • Based on React • Easy to

    extend • MJML app by Electron
  128. Advantages • No need to understand mail client issues •

    Easy to learn • Easy to edit and preview with App • Open source • Extensible
  129. Disadvantages • Hard to customize • Component is not enough

    now • Possible to extend or use raw HTML • Some style will be remove • ex: gradient background
  130. None
  131. Image Credit • https://en.wikipedia.org/wiki/Outer_space

  132. Thanks

  133. Q&A