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. 2.
  2. 9.

    Text Email • Older than WWW • SMTP 1982 •

    Lots of use in Japan • Japan feature phone ecosystem • Still very popular today
  3. 10.
  4. 11.
  5. 12.
  6. 13.
  7. 14.
  8. 15.
  9. 16.
  10. 17.
  11. 18.
  12. 19.
  13. 21.
  14. 22.
  15. 23.
  16. 24.
  17. 25.
  18. 26.
  19. 27.

    HTML Email • Lots of table • Lots of inline

    style, no shorthand • Lots of Microsoft stuff • -ms/mso prefixed style • mso conditional comment
  20. 28.
  21. 31.

    Mail Clients • Gmail on web • Gmail on Android

    • Gmail on iOS • Outlook • Apple Mail • Apple Mail on iOS • Thunderbird • Lotus Note • Blackberry • …
  22. 34.
  23. 35.
  24. 36.
  25. 38.
  26. 39.

    Desktop Mobile Web buggy CSS support need table layout need

    responsive layout best CSS support not allow <style> need sandbox
  27. 40.

    Buggy? • No <style> tag in web mail client •

    No <style>, no media query • No float layout
  28. 45.
  29. 46.
  30. 48.

    More Problems • Lots of environment • Uncommon behavior •

    No debugging tool • No document • No standard
  31. 49.

    Why no Standards • Mail client didn’t complete follow entire

    web standards • For security reason • For application size • Use customized engine or webview
  32. 51.
  33. 57.
  34. 58.
  35. 60.
  36. 61.
  37. 62.
  38. 63.
  39. 67.
  40. 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
  41. 71.
  42. 72.

    Document • No standards • But we have lot of

    document wrote by pioneers • Nettuts+ • Campaign Monitor • Litmus
  43. 73.
  44. 74.
  45. 75.
  46. 76.
  47. 77.
  48. 78.
  49. 79.
  50. 80.
  51. 81.
  52. 83.
  53. 84.
  54. 85.
  55. 86.
  56. 87.
  57. 88.
  58. 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
  59. 92.
  60. 94.
  61. 95.
  62. 96.
  63. 97.
  64. 98.

    Premailer • Preflight for HTML email • Convert to inline

    style • Relative to absolute URL • Check CSS compatibility • Create plain text version • Open Source Project
  65. 99.
  66. 100.
  67. 101.
  68. 102.
  69. 103.
  70. 104.

    Litmus • The most powerful mail preview service • Mail

    test/checker • Mail analysis • Paid service
  71. 105.
  72. 106.
  73. 107.
  74. 108.
  75. 109.
  76. 110.
  77. 111.
  78. 113.
  79. 114.
  80. 115.
  81. 116.
  82. 117.
  83. 118.

    MJML • Mailjet Markup Language • by Mailjet • A

    new markup language for HTML email
  84. 119.
  85. 121.
  86. 122.
  87. 123.
  88. 124.
  89. 125.

    What is MJML • A new markup language • Component

    with layout meaning • Render to HTML with all necessary tags, inline style, conditional comment
  90. 126.
  91. 127.

    Behind the Scene • Based on React • Easy to

    extend • MJML app by Electron
  92. 128.

    Advantages • No need to understand mail client issues •

    Easy to learn • Easy to edit and preview with App • Open source • Extensible
  93. 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
  94. 130.
  95. 132.
  96. 133.

    Q&A