限制

  • 基础的HTML+CSS
  • 基于table的布局
  • 简单的语义

注意

  • CSS 样式重置(MS Office| 浏览器客户端 | 超链接)

  • HTML标签的选择

    • div|span && h1-h6 && p|strong|em && img
  • 样式 embedded|inline style

  • CSS选择

    • text: color|font-family|font-size|font-style|font-weight|line-height|text-align
    • block element: margin|padding|width|max-width
  • 图片

    • 响应式
    • 文本说明
    • 格式限制:jpg,png,gif
    • max-width:100%;min-width:X;width:100%; 宽度适应
  • accessibility

    • 视弱|色盲
    • 高对比度|视觉上面的层级|可读性|布局简单可用
    • 少使用图片,用真的文字,这样可以通过辅助工具(NVDA,VoiceOver|JAWS)读出来
    • role=”presentation” - table
    • 语义化标签|图片有文本的alt|标注语言
  • table

    1
    2
    3
    4
    5
    6
    7
    <table border="0" cellpadding="0" cellspacing="0"
    role="presentation" width="100%">
    <tr>
    <td style="styles go here">
    </td>
    </tr>
    </table>
  • 移动端可读

    • 判断版本
    • 媒体探测
  • 交互

    • :hover
    • transition|@keyframes
  • 测试

    • 可以用litmus进行测试
    • caniemail.com
    • Campaignmonitor.com/css
    • Freshinbox.com/resources
    • mjml.io
  • 参考

    • TheBetter.Email/resources