Why no Standards • Mail client didn’t complete follow entire web standards • For security reason • For application size • Use customized engine or webview
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
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
Premailer • Preflight for HTML email • Convert to inline style • Relative to absolute URL • Check CSS compatibility • Create plain text version • Open Source Project
Disadvantages • Hard to customize • Component is not enough now • Possible to extend or use raw HTML • Some style will be remove • ex: gradient background