Modern HTML Email Development

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