$30 off During Our Annual Pro Sale. View Details »

Modern HTML Email Development

othree
August 25, 2016

Modern HTML Email Development

othree

August 25, 2016
Tweet

More Decks by othree

Other Decks in Programming

Transcript

  1. MODERN HTML
    EMAIL
    othree at Modern Web

    View Slide

  2. othree

    View Slide

  3. othree.net
    blog.

    View Slide

  4. othree
    speakerdeck.com/

    View Slide

  5. othree
    github.com/

    View Slide

  6. othree
    twitter.com/

    View Slide

  7. othree
    flickr.com/

    View Slide

  8. Outline
    ତر
    ༟๕
    ʈՈ

    View Slide

  9. Text Email
    • Older than WWW
    • SMTP 1982
    • Lots of use in Japan
    • Japan feature phone ecosystem
    • Still very popular today

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. HTML Email

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. HTML Email
    • Lots of table
    • Lots of inline style, no shorthand
    • Lots of Microsoft stuff
    • -ms/mso prefixed style
    • mso conditional comment

    View Slide

  28. View Slide

  29. Problems of
    HTML Email

    View Slide

  30. Lots of Mail Client

    View Slide

  31. Mail Clients
    • Gmail on web
    • Gmail on Android
    • Gmail on iOS
    • Outlook
    • Apple Mail
    • Apple Mail on iOS
    • Thunderbird
    • Lotus Note
    • Blackberry
    • …

    View Slide

  32. 3 Major Type

    View Slide

  33. Desktop Standalone

    View Slide

  34. View Slide

  35. Web Based

    View Slide

  36. View Slide

  37. Mobile Native App

    View Slide

  38. View Slide

  39. Desktop Mobile Web
    buggy CSS support
    need table layout
    need responsive layout
    best CSS support
    not allow <br/>need sandbox<br/>

    View Slide

  40. Buggy?
    • No tag in web mail client<br/>• No <style>, no media query<br/>• No float layout<br/>

    View Slide

  41. Buggy?
    • No JavaScript support
    • No support in almost every client

    View Slide

  42. Desktop
    Mobile Web

    View Slide

  43. Desktop
    Mobile Web


    OK

    View Slide

  44. Desktop
    Mobile Web


    OK
    OK অ牦

    View Slide

  45. View Slide

  46. View Slide

  47. Problems
    • Lots of environment
    • Uncommon behavior

    View Slide

  48. More Problems
    • Lots of environment
    • Uncommon behavior
    • No debugging tool
    • No document
    • No standard

    View Slide

  49. Why no Standards
    • Mail client didn’t complete follow entire
    web standards
    • For security reason
    • For application size
    • Use customized engine or webview

    View Slide

  50. When Microsoft releases a new version of
    Outlook that’s STILL powered by Word.

    View Slide

  51. View Slide

  52. <br/><script><br/>

    View Slide

  53. on mail.google.com ?

    View Slide

  54. Size in MB
    82 74

    View Slide

  55. Size in MB
    40 20

    View Slide

  56. Standardize It?

    View Slide

  57. View Slide

  58. View Slide

  59. Email Standard Project
    • by Campaign Monitor founder
    • No actually update since 2011

    View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. Process To Develop

    HTML Mail

    View Slide

  65. modify html/css
    send test mail

    View Slide

  66. The first time you ever tested your email

    View Slide

  67. View Slide

  68. Coding Mobile First Email
    • Basic layout, 3 level of
    • Media query and display: table; for
    desktop standalone
    • Special hack for outlook.com
    • Conditional Comment for outlook
    • CSS Calc for web client responsive

    View Slide

  69. HTML email,
    The Final Frontier of F2E

    View Slide

  70. લਓ୓ߥ੒Ռ

    View Slide

  71. Documents

    View Slide

  72. Document
    • No standards
    • But we have lot of document wrote by
    pioneers
    • Nettuts+
    • Campaign Monitor
    • Litmus

    View Slide

  73. Nettuts+

    View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. MailChimp

    View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. Campaign Monitor

    View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. View Slide

  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

    View Slide

  90. Conferences

    View Slide

  91. The Email Design Conference

    View Slide

  92. View Slide

  93. Email Innovations Summit

    View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  97. Tools

    View Slide

  98. Premailer
    • Preflight for HTML email
    • Convert to inline style
    • Relative to absolute URL
    • Check CSS compatibility
    • Create plain text version
    • Open Source Project

    View Slide

  99. View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. Litmus
    • The most powerful mail preview service
    • Mail test/checker
    • Mail analysis
    • Paid service

    View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. View Slide

  111. View Slide

  112. Email Market Share

    View Slide

  113. View Slide

  114. View Slide

  115. MJML

    View Slide

  116. View Slide

  117. View Slide

  118. MJML
    • Mailjet Markup Language
    • by Mailjet
    • A new markup language for HTML email

    View Slide

  119. View Slide

  120. Components
    • mj-container
    • mj-body
    • mj-column
    • mj-section
    • mj-text
    • …

    View Slide

  121. View Slide

  122. View Slide

  123. View Slide

  124. View Slide

  125. What is MJML
    • A new markup language
    • Component with layout meaning
    • Render to HTML with all necessary tags,
    inline style, conditional comment

    View Slide

  126. View Slide

  127. Behind the Scene
    • Based on React
    • Easy to extend
    • MJML app by Electron

    View Slide

  128. Advantages
    • No need to understand mail client issues
    • Easy to learn
    • Easy to edit and preview with App
    • Open source
    • Extensible

    View Slide

  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

    View Slide

  130. View Slide

  131. Image Credit
    • https://en.wikipedia.org/wiki/Outer_space

    View Slide

  132. Thanks

    View Slide

  133. Q&A

    View Slide