Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

background

Recently, WE have made the requirement of inviting members to join the company’s product to send email messages. Email messages are HTML pages displayed in various email clients, which have many compatibility problems. The content of this paper is mainly the summary of the need to pay attention to in the process of email development, collation and summary of the collected email information, as well as suggestions for developing high-quality email.

What is an email

In our daily work, we often need to send emails for registration confirmation, marketing promotion and so on. We need to send HTML emails, which is the email EDM. Writing HTML mail is very different from writing HTML pages, because HTML mail is not hosted on your own server and is presented through a mail server. Mainstream mailboxes tend to filter the HTML messages they receive in the background, strictly filtering the JS code, including all the event listening properties, such as onclick, onmouseover, etc. CSS code is also partially filtered. This is based on email security considerations.

Low quality mail letters👎

  • Blog gardenComment notice: Although the content of the email is concise and to the point, the style of the email sent by the official website lacks authority and is easy to be ignored.
  • Some advertisement mail: the style typesetting layout is messy, can recognize at a glance is spam🗑“Without any desire to read carefully.

High quality mail letters👍

  • SegmentFaultComment notice: Also as a technology blog site, the eye-catching theme style in addition to highlighting the authority of the official, but also to achieve the role of brand promotion.
  • Frontend FocusSubscribe to email: Subject,bannerThe hierarchical structure of the list of articles enables readers to locate the content they are interested in clearly and quickly, and the neat style can also attract more readers to subscribe.

Achieve high quality mail messages

Implementation effect

First, I’ll show you the implementation effect of a sample template for the mail message, which consists of tips at the top and footer of the page as well as the body content. In the main content, some elements have only one column of content, some elements have two left and right columns, and some elements have three left, middle and right columns, which basically meet the actual development needs, and we can refer to the implementation.

🔗 online preview: dragonir.github. IO /start-html-…

Code implementation

Global styling code can be added in the 

<style type="text/css">
 body.#header h1.#header h2.p {margin: 0; padding: 0; }#main {border: 1px solid #cfcece; }a {color: #2d95ec; }img {display: block; }#top-message p.#bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
 #header h1 {color: #ffffff ! important; font-family: "Lucida Grande"."Lucida Sans"."Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0! important; padding-bottom: 0; }
 #header h2 {color: #ffffff ! important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 ! important; padding-bottom: 0; }
 #header p {color: #ffffff ! important; font-family: "Lucida Grande"."Lucida Sans"."Lucida Sans Unicode", sans-serif; font-size: 12px;  }
 h1.h2.h3.h4.h5.h6 {margin: 0 0 0.8 em 0; }h3 {font-size: 28px; color: # 444444 ! important; font-family: Arial, Helvetica, sans-serif; }
 h4 {font-size: 22px; color: #2d95ec ! important; font-family: Arial, Helvetica, sans-serif; }
 h5 {font-size: 18px; color: # 444444 ! important; font-family: Arial, Helvetica, sans-serif; }
 p {font-size: 12px; color: # 444444 ! important; font-family: "Lucida Grande"."Lucida Sans"."Lucida Sans Unicode", sans-serif; line-height: 1.5; }
</style>
Copy the code

As shown in the sample code below, the HTML uses a table layout to make it as compatible with all mail clients as possible. The page parent container is a table element, its three children are also table elements, the first id=”top-message” and the third is used to display the prompt at the top and footer of the page, the second table id=”main” is the body of the mail, Each of its child modules is also a table element, and the content of the page is mostly populated with TR and TD elements.

<body>
  <table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>
    <table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">
      <tr>
        <td align="center">
          <p>Having trouble previewing in mailbox?<a href="#">Open it in a browser</a></p>
        </td>
      </tr>
    </table><! -- top message -->
    <table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">
      <tr>
        <td>
          <table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">
            <tr>
              <td width="570" bgcolor="2d95ec"><h1>Communitech Venture Services</h1></td>
            </tr>
            <tr>
              <td width="570" bgcolor="2d95ec"><h2 style="color:#ffffff! important">News and Events</h2></td>
            </tr>
            <tr>
              <td width="570" align="right" bgcolor="2d95ec"><p>October 2021</p></td>
            </tr>
          </table><! -- header -->
        </td>
      </tr><! -- header -->
      <tr>
        <td></td>
      </tr>
      <tr>
        <td>
          <table id="content-1" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td width="170" valign="top">
                <table cellpadding="5" cellspacing="0">
                  <tr><td bgcolor="ffffff"><img src="https://tricell.fun/email/images/example/emoji.png" width="160" /></td></tr></table>
              </td>
              <td width="15"></td>
              <td width="375" valign="top" colspan="3">
                <h3>All New Site Design</h3>
                <h4>It's 150% Better and 40% More Efficient!</h4>
              </td>
            </tr>
          </table><! -- content 1 -->
        </td>
      </tr><! -- content 1 -->
      <tr>
        <td>
          <table id="content-2" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p></td>
            </tr>
          </table><! -- content-2 -->
        </td>
      </tr><! -- content-2 -->
      <tr>
        <td height="30"><img src="https://tricell.fun/email/images/example/blank.png" /></td>
      </tr>
      <! -- omit intermediate similar module -->
      <tr>
        <td>
          <table id="content-6" cellpadding="0" cellspacing="0" align="center">
            <p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
            <p align="center"><a href="#">CALL TO ACTION</a></p>
          </table>
        </td>
      </tr><! -- content-6 -->
    </table><! -- main -->
    <table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">
      <tr>
        <td align="center">
          <p>You are receiving this email 📧 because you have subscribed to our website for updates!</p>
          <p><a href="#">unsubscribe</a> | <a href="#">Recommend to friends</a> | <a href="#">View it in a browser</a></p>
        </td>
      </tr>
    </table><! -- top message -->
  </td></tr></table><! -- wrapper -->
</body>
Copy the code

🔗 Full code: github.com/dragonir/st…

Test high quality mail messages

Once the mail page has been developed, you need to test it in different mailboxes to find the style bugs in different mail clients. Netease Mailbox has the function of adding codes. We can directly paste the developed email codes into emails and then send them to other mailboxes for testing. QQ mailbox also has the function of uploading HTML documents directly. (It was available when I tested it in 2020 last year, but the interface reported an error 😓 when I uploaded it today.) Mailbox 189 used to have the function of adding codes, but when I tested it today, I found that this function had been offline, possibly for security reasons 😓.

High quality mail code writing principles

This section summarizes the issues that need to be paid attention to during the development of the above email. Knowing these rules in advance can improve the development efficiency and avoid some detdetments 😊.

  1. Page width: 600px to 800px recommended, 800px Max.

  2. Page layout: When creating an email page, do not use CSS + DIV, use table layout.

  3. Styles: When defining text or image styles, do not use external CSS styles. Instead, write the styles in < TD > or .

<td style="The font-family: Arial; font-size:12px; color:#000000;” >text</td>
<font style="The font-family: Arial; font-size:12px; color:#000000;” >text</font> <! -- Abandoned -->
Copy the code

The CSS style of 💡 external chain will not be read in the mail, and the outgoing mail will lose the style.

  1. Dynamic content: Instead of Flash, Java, Javascript, Frames, i-Frames, ActiveX, and DHTML, use GIFs if the images on your page must be dynamic.

  2. Tags: Other than

    tags such as body, meta, and HTML can be ignored. The email system will filter them out.

  3. Background image: When you have a background image, the background inside the style content can be set to color, but img is filtered, which means you cannot set the background image using CSS. But you can just write it in code. Such as:

<table background="Background. GIF" cellspacing="0" cellpadding="0">
Copy the code

💡 When you view an email in Outlook, the background image is not displayed, and the absolute address is required.

  1. List style: if the text content is written in

  2. , the style should be written in
      as much as possible. In sohu, the style written in < TD > or will be filtered. There is no problem in other mailboxes.

  3. The img element sets the width: All images should be set to height and width. This is crucial. Add Alt attributes to key images.

The 💡 Alt attribute causes the message to indicate the image content before the image is loaded.

  1. Do not set mouse events: do not set mouseover events such as onMouseOut and onMouseOver in the email content. After being sent to the email, it will be filtered and will not display the content correctly.

  2. Don’t return to line feed: Put the same text in the same element as possible. If there are multiple paragraphs of text, do not use a carriage return to break the line, as this will cause the tag to double the line height in the message.

  3. Add an alternative WEB page: Create a WEB page that matches the content of the message, and then prompt a link at the top of the message if you cannot view the content of the message, click here to view it. In this way, even if the mailbox client is abnormal, the correct content can be viewed through the link.

  4. Compressed size: TRY not to exceed 50KB for HTML code and images.

💡 different mailboxes have different acceptance criteria. Some mailboxes exceeding 50kb are identified as spam. In the example, in order to show the effect, I randomly found the image, the volume is relatively large 😂.

  1. Limit the number of images: When creating AN HTML email, keep the number of links to no more than 10. If all images in a template have the same link address, you can combine all the small images into one large image.

  2. Use absolute paths: All hyperlinks in the mail template use absolute addresses to ensure that the recipient can view the content when clicking on the hyperlink.

  3. The font-family attribute can be omitted: the font-family attribute is not necessary. If the font-family attribute is present and the value is empty, it will be blocked as spam by QQ mailbox.

  4. Center display: When creating a template, set the width of the table to 100% if you want all email content to be center left and right.

  5. Avoid direct display of url in email: do not show url in the text of the page, some email will be blocked as spam, website can be written in the A tag.

  6. File name in lower case: Unless otherwise requested, all file names of images should be in lower case.

  7. Avoid images that are too small: don’t use images that are too small in your email. Outlook2007 doesn’t display images that are 1 pixel high very well, and there will be cracks

  8. Margins can be left in clipping: When clipping, you can leave some margin for text areas if you need to. Since the default line spacing and word spacing in Outlook is larger than in normal web pages, reserving margins prevents unnecessary line breaks and image gaps.

  9. Use

    line breaks: Do not use

    marks between paragraphs due to hotmail mailbox reception problems, use

    instead.

  10. Recommended inline style: Due to Compatibility issues with Gmail, if td has text, if you want to define the text style, you must write style inline style in TD to define the font.

  11. Style = “word-break:break-all; , which does not spread the table, forcing the text to break a newline.

  12. Plain text: The subject line should be no longer than 18 words and each line should be no longer than 34 words.

The appendix

The following lists the support for HTML tags and CSS attributes in some foreign email clients. As for the domestic mailbox client, according to the development experience, generally compatible with Outlook mailbox mail, most of them are compatible with domestic mailbox.

Image block

Images can be used to detect the opening rate of emails and the validity of email addresses. By default, many email clients block pictures in emails, requiring users to click again to display the pictures.

Blocking Issue AOL Gmail Hotmail Yahoo! Outlook 2000/XP Outlook 2003 Outlook Express w/SP2 Outlook Express w/o SP2
External link pictures are shielded by default ✔ ✔ ❌ ❌ ❌ ✔ ✔ ❌
Whether the user can set whether to block pictures ✔ ❌ ✔ ✔ ✔ ✔ ✔ ✔
Can a user click a button to display an image in an email ✔ ✔ ✔ ❌ ❌ ✔ ✔ ◯
Whether the sender displays the picture by default in the user’s contact list ✔ ❌ ✔ ❌ ✔ ✔ ✔ ✔
If the sender is in the ISP whitelist, the picture will be displayed by default ✔ ◯ ✔ ❌ ◯ ◯ ◯ ◯
Whether the Alt attribute is displayed when the image is blocked ❌ ✔ ❌ ❌ ❌ ❌ ❌ ◯
Preview shows Windows theme styles ❌ ❌ ❌ ❌ ✔ ✔ ✔ ✔

Email client pairCSSSupport for

<style>The label

gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
<head>In the<style>The label ❌ ❌ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
<body>In the<style>The label ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌

<link>The label

gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
<head>In the<link>The label ❌ ❌ ❌ ❌ ✔ ✔ ✔ ✔ ✔ ✔ ❌
<body>In the<link>The label ❌ ❌ ❌ ❌ ✔ ✔ ✔ ✔ ✔ ✔ ❌

CSSThe selector

gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
* ❌ ❌ ❌ ❌ ✔ ✔ ✔ ✔ ✔ ✔ ❌
e ❌ ❌ ❌ ❌ ✔ ✔ ✔ ✔ ✔ ✔ ❌
e > f ❌ ❌ ✔ ❌ ❌ ❌ ❌ ✔ ✔ ✔ ❌
e:link ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
e:active,e:hover ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
e:focus ❌ ❌ ✔ ❌ ❌ ❌ ❌ ✔ ✔ ✔ ❌
e + f ❌ ✔ ✔ ❌ ❌ ❌ ❌ ✔ ✔ ❌ ❌
e [foo] ❌ ✔ ✔ ❌ ❌ ❌ ❌ ✔ ✔ ❌ ❌
e.className ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
e#id ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
e:first-line ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
e:first-letter ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌

CSSattribute

gmail Hotmail Yahoo Live Mail Outlook/OE AOL Lotus Notes Thunderbird Mac Email Entourage Eudora
background-color ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
background-image ❌ ✔ ✔ ❌ ✔ * ✔ ✔ ✔ ✔ ✔ ❌
background-position ❌ ❌ ❌ ❌ ✔ * ✔ ❌ ✔ ✔ ✔ ❌
background-repeat ❌ ✔ ✔ ❌ ✔ * ✔ ❌ ✔ ✔ ✔ ❌
border ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
border-collapse ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ❌ ❌
border-spacing ✔ ❌ ✔ ❌ ❌ ❌ ❌ ✔ ✔ ❌ ❌
bottom ❌ ✔ ✔ ❌ ✔ ✔ ❌ ✔ ✔ ✔ ❌
caption-side ✔ ❌ ✔ ❌ ❌ ❌ ❌ ✔ ❌ ❌ ❌
clip ❌ ✔ ✔ ❌ ✔ ✔ ❌ ✔ ✔ ✔ ❌
color ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌
cursor ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ❌ ❌
direction ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌ ❌
display ❌ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌ ❌
empty-cells ✔ ❌ ✔ ❌ ❌ ❌ ❌ ✔ ✔ ❌ ❌
filter ❌ ❌ ✔ ✔ ❌ ❌ ❌ ❌ ❌ ❌ ❌
float ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
font-family ❌ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌
font-size ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌
font-style ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌
font-variant ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
font-weight ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌
height ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
left ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
letter-spacing ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
line-height ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
list-style-image ❌ ✔ ✔ ❌ ✔ ✔ ❌ ✔ ✔ ✔ ❌
list-style-position ✔ ❌ ❌ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
list-style-type ✔ ❌ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌
margin ✔ ❌ ✔ ❌ ✔ ✔ ❌ ✔ ✔ ✔ ❌
opacity ❌ ❌ ✔ ✔ ❌ ❌ ❌ ✔ ✔ ❌ ❌
overflow ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
padding ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
position ❌ ❌ ❌ ❌ ✔ ✔ ❌ ✔ ✔ ✔ ❌
right ❌ ✔ ✔ ❌ ✔ ✔ ❌ ✔ ✔ ✔ ❌
table-layout ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
text-align ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌
text-decoration ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ❌
text-indent ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
text-transform ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
top ❌ ✔ ✔ ❌ ✔ ✔ ❌ ✔ ✔ ✔ ❌
vertical-align ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
visibility ❌ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
white-space ✔ ✔ ✔ ❌ ❌ ❌ ❌ ✔ ✔ ✔ ❌
width ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
word-spacing ✔ ✔ ✔ ✔ ✔ ✔ ❌ ✔ ✔ ✔ ❌
z-index ❌ ✔ ✔ ❌ ✔ ✔ ❌ ✔ ✔ ✔ ❌

💡 Symbol Description:

  • ✔: support.
  • ❌: Not supported.
  • ◯: unknown.
  • *: don’t beMicrosoft Outlook 2007Support.

More high-quality mail

Using a higher-quality design draft and adding design elements such as GIFs can create higher-quality emails. Here are a few email designs THAT I’ve found attractive while browsing Dribbble. In the case of no designer in the project, we can also browse the design website to find development inspiration, to achieve the real full link full stack development 🌟.

The resources

  • [1]. dribbble
  • [2]. Suggestions and specifications for Email page code writing