Modern HTML Email Development

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
20. HTML Email
27. HTML Email • Lots of table • Lots of inline style, no shorthand • Lots of Microsoft stuff • -ms/mso prefixed style • mso conditional comment
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
35. Web Based
37. Mobile Native App
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 অ牦
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.
52. <style> <script>
53. on mail.google.com ?
54. Size in MB 82 74
55. Size in MB 40 20
56. Standardize It?
59. Email Standard Project • by Campaign Monitor founder • No actually update since 2011
64. Process To Develop
 HTML Mail
65. modify html/css send test mail
66. The first time you ever tested your email
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+
78. MailChimp
82. Campaign Monitor
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
93. Email Innovations Summit
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
104. Litmus • The most powerful mail preview service • Mail test/checker • Mail analysis • Paid service
112. Email Market Share
115. MJML
118. MJML • Mailjet Markup Language • by Mailjet • A new markup language for HTML email
120. Components • mj-container • mj-body • mj-column • mj-section • mj-text • …
125. What is MJML • A new markup language • Component with layout meaning • Render to HTML with all necessary tags, inline style, conditional comment
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
131. Image Credit • https://en.wikipedia.org/wiki/Outer_space
132. Thanks
133. Q&A