Many of us may subscribe to some newsletters to get update about their site or information about a topic such as JavaScript Weekly, we may receive an email every week or every month to know what's happening there.
The email we receive is just a simple HTML page but with an Email format called HTML Email. It seems it's simple to write this kind of HTML Email. But the thing is it's not so easy. It takes much effort by just designing an Email template.
Whether the HTML Email can be displayed normally depends completely on the mail client. Most mail clients such as Outlook and Gmail will filter the HTML settings which can distort the display of Email.
The trick to write HTML Email is we need to use the web design method used 15 years ago. Here is a guide of how to write HTML Email.
1. Doctype
Now the most compatible doctype is XHTML 1.0 Strict, in fact Gmail and Hotmail will remove your Doctype and change it to :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 　<head> 　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 　　<title>HTML Email Guide</title> 　　<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 　</head> </html>
With this Doctype it means we cannot use HTML5 syntax.
2. Layout
We need to use table to do webpage layout. First, place a big table at the outer side to set the background.
<body style="margin: 0; padding: 0;"> 　<table border="1" cellpadding="0" cellspacing="0" width="100%"> 　　<tr> 　　　<td> Hello! </td> 　　</tr> 　</table> </body>
The border attribute of the table should be 1 to ease the development. When in production we need to change it to 0.
In the inner side, we put another table to display the content. The second table can have a width of 600px to avoid width overflow.
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;"> 　<tr> 　　<td> Row 1 </td> 　</tr> 　<tr> 　　<td> Row 2 </td> 　</tr> 　<tr> 　　<td> Row 3 </td> 　</tr> </table>
3. Image
Image is the only referable external resource. Other resource such as stylesheet, fonts or videos cannot be used. Some mail clients may add border to images, to remove border, need to set:
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}
a img {border:none;}
<img border="0" style="display:block;">
Some mail clients don't display images by default, so you need to make sure the contents are readable even if without images.
4. Inline style
Had better to put all CSS in inline style mode since the CSS styles put at the header may be removed by mail clients. The support of different mail clients about CSS can be referred here.
Avoid using simplified CSS properties, some clients don't support the,. For example, don't write below code:
style="font: 8px/14px Arial, sans-serif;"
If you want to write:
<p style="margin: 1em 0;">
write it as :
<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">
5. W3C Validation and Testing tool
We can use these 3 tools (1, 2, 3) to ensure the HTML codes conforming to W3C standard. Also when sending email, the content type should be Content-Type: Multipart/Alternative; instead of Content-Type: text/plain;
You may use MailChimp and Campaign Monitor to send Email.
6. Template
It's a good choice to use templates created by others. You can develop your own template as well using HTML Email Boilerplate and Emailology。
7. References
- Sean Powell，Say Hello to the HTML Email Boilerplate
- Nicole Merlin，Build an HTML Email Template From Scratch
- Nicole Merlin， What You Should Know About HTML Email
Author : 阮一峰 Source : http://www.ruanyifeng.com/blog/2013/06/html_email.html
