应用HTML撰写简易的电子邮件模板

今日,我想写1个"低技术性"难题。

  话说我定阅了很多了新闻电子邮件(Newsletter),例如JavaScript Weekly。每周收到1封电子邮件,掌握本周的大事。

 有1天,我就在想,是否我也能做1个这样的电子邮件?

  随后,就发现这事不那末非常容易。抛开后台管理和编写工作中,单是是设计方案1个Email样板,就必须很多思绪。

由于这类带文件格式的电子邮件,实际上便是1张网页页面,宣布名字叫做HTML Email。它能否一切正常显示信息,彻底取决于电子邮件顾客端。大多数数的电子邮件顾客端(例如Outlook和Gmail),会过虑HTML设定,让电子邮件相貌全非。

  我发现,撰写HTML Email的小技巧,便是应用15年前的网页页面制做方式。下面便是我梳理的撰写指南。

  1. Doctype

  现阶段,适配性最好是的Doctype是XHTML 1.0 Strict,客观事实上Gmail和Hotmail会删除你的Doctype,换上这个Doctype。

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.  <head>  
  6.   
  7.   <meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />  
  8.   
  9.   <title>HTML Email撰写指南</title>  
  10.   
  11.   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
  12.   
  13.  </head>  
  14.   
  15. </html>  

  应用这个Doctype,也就代表着,不可以应用HTML5的英语的语法。

  2. 合理布局

  网页页面的合理布局(layout)务必应用报表(table)。最先,置放1个最外层的大报表,用来设定情况。

XML/HTML Code拷贝內容到剪贴板
  1. <body style="margin: 0; padding: 0;">  
  2.   
  3.  <table border="1" cellpadding="0" cellspacing="0" width="100%">  
  4.   
  5.   <tr>  
  6.    <td> Hello! </td>  
  7.   </tr>  
  8.   
  9.  </table>  
  10.   
  11. </body>  

  报表的 border 特性等于1, 是以便便捷开发设计。宣布公布的情况下,再把这个特性设为0。

  在里层,置放第2个报表。用来展现內容。第2个table的宽度定为600像素,避免超出顾客端显示信息宽度。

XML/HTML Code拷贝內容到剪贴板
  1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">  
  2.   
  3.  <tr>  
  4.   <td> Row 1 </td>  
  5.  </tr>  
  6.   
  7.  <tr>  
  8.   <td> Row 2 </td>  
  9.  </tr>  
  10.   
  11.  <tr>  
  12.   <td> Row 3 </td>  
  13.  </tr>  
  14.   
  15. </table>  

  电子邮件內容有几个一部分,就设定几行(row)。

  3. 照片

  照片是唯1能够引入的外界資源。别的的外界資源,例如款式表文档、字体样式文档、视頻文档等,1概不可以引入。

  一些顾客端会给照片连接再加边框,要除去边框。

CSS Code拷贝內容到剪贴板
  1.   img {outline:nonetext-decoration:none; -ms-interpolation-mode: bicubic;}   
  2.   
  3.   a img {border:none;}   
  4.   
  5.   <img border="0" style="display:block;">  

  必须留意的是,很多顾客端默认设置无法显示照片(例如Gmail),因此要保证即便沒有照片,关键內容也能被阅读文章。

  4. 行内款式

  全部的CSS标准,最好是都选用行内款式。由于置放在网页页面头顶部的款式,极可能会被顾客端删掉。顾客端对CSS标准的适用状况,请看这里。

  此外,不必选用CSS的简写方式,一些顾客端不适用。例如,不必写成下面这样:

      

XML/HTML Code拷贝內容到剪贴板
  1. style="font: 8px/14px Arial, sans-serif;"  

  假如想表述

     

XML/HTML Code拷贝內容到剪贴板
  1.  <p style="margin: 1em 0;">  

  要写成下面这样:

      

XML/HTML Code拷贝內容到剪贴板
  1. <p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">  

  5. W3C校检和检测专用工具

  要确保最后的编码,可以根据W3C的校检,由于一些顾客端会把不符合格特性剥离。还要应用检测专用工具(1, 2, 3),查询在不一样顾客端显示信息結果。

  推送HTML Email的情况下,不必忘掉MIME种类不可以应用

     

XML/HTML Code拷贝內容到剪贴板
  1.  Content-Type: text/plain;  

  而要应用

      

XML/HTML Code拷贝內容到剪贴板
  1. Content-Type: Multipart/Alternative;  

  推送专用工具能够考虑到应用 MailChimp 和 Campaign Monitor 。

  6. 模版

  应用他人早已做好的模版,是1个非常好的挑选(这里和这里),在网上还能够搜到更多。

  自身开发设计的话,能够参照HTML Email Boilerplate和Emailology。