Suggestions on making commercial HTML mail

Time:2021-10-22

E-mail marketing based on license can not only greatly reduce the cost of marketing and promotion, but also directly and accurately transfer the information to customers.

Today, my research question is how to make an excellent e-mail that is compatible with user vision and e-mail client from the technical aspect.

1. Select HTML or plain text
Some people like simple text, others like rich HTML. How do we choose?
For marketing emails, it is recommended to use HTML format (Figure);

For confirmation / reminder / notification email, it is recommended to use text or simple HTML (Figure).

Why do you use different production methods for these two different types of mail
The content of marketing e-mail is rich and diverse; The content of confirmation email is single and unique;
In marketing email, customers will pay more attention to the richness of content and the beauty of visual effect;
In the confirmation email, we should let the customer see the confirmation information very directly. The complex content and visual effect will only make the customer ignore the main content of the email – the confirmation information;
(the following will focus on the HTML production of marketing e-mail)

2. Basic HTML skills based on table layout + CSS
There are two kinds of Kung Fu, one is from Yang to hardness, and the other is from Yin to softness. Zhang Sanfeng reached the peak because of his good martial arts foundation and solid basic skills in Shaolin. He realized this Taijiquan that can reach both yin and Yang.
The same is true for HTML mail. We know that there are many kinds of mail reading clients today. Traditional outlook, Thunderbird, lotus notes, and online MAC mail, Gmail, Hotmail, etc. have different interpretations of mail. Most online mail systems block the code between < head > < / head > tags.

To make all users with different clients see the same email, it is necessary to master the basic skills of HTML. Some people say div + CSS, others say SEO tags are semantic. It is undeniable that as a web developer, it will be very popular to have these two popular HTML development ideas. However, this is not applicable to mail production. Our purpose is to let customers see the same information content under different email clients, which uses the most original typesetting method: table layout + CSS. Let’s take a look at the current email client’s support for HTML and CSS (Figure):

*Hotmail can parse < style > between < body > < / body >, but also block < style > between < head > < / head >

3. When making HTML mail, you should pay attention to the following points:

  1. Write the style into the HTML tag, not in an external file, nor in the < style > < / style > (Figure);

  2. Add CSS to every content tag, even if it is repetitive and cumbersome
  3. Don’t use CSS to locate HTML element tags;
    It is located by table nesting with a combination of absolute size (pixels) and relative size (percentage).
  4. Don’t insert any JavaScript, flash and some special tags (such as marquee) into the email
    Most email clients will block flash and JavaScript, as well as some special tags and attributes;
  5. Do not use background pictures
    The background image attribute is blocked in most online mail clients. You can’t see any background images in Gmail;
  6. Assign width and height and alt attribute values to each picture;
    The SRC attribute of the picture must use an absolute address:
    correct:<img src=” http://blog.54575.com/logo.gif ”Width = “297” height = “160” ALT = “live well = meaningful” / >
    Error:<img src=”logo.gif” />
  7. Please do not use pictures to mark important contents
    The time, place, content and other information of the exhibition are very important. Considering that the pictures may not be displayed, it is not recommended to display these contents in the pictures;
    Even if it is placed in the picture, please express it in text form in the mail content, and add the content to the alt attribute of the picture.
  8. Use unified UTF-8 coding;

4.Message width, 650px? Or 600px?
As we all know, the current web page width standard is 950 / 960px, which depends on our display resolution;
E-mail is often opened in two ways, software client and online client (Figure).
*Microsoft Outlook 2003

*Netease 163 mailbox

As can be seen from the figure, emails are often not displayed in full screen,
If you continue to use the 960 / 950px standard width of the web page, it is bound to cover part of the content of the email. In this way, there are two horizontal and vertical scroll bars, which is not convenient for customers to browse;
Too narrow width will cause a waste of space (Figure)

So, how much is the best width for HTML mail? Let’s first refer to the width used by the following well-known enterprises in HTML mail production:

Netease Youdao: 600px

QQ member: 650px

Dell home and office: 650px

Cisco Webex:600px

It can be seen that the marketing e-mails of these well-known IT enterprises are 600px and 650px in width,
According to my 4-year experience in EDM and web design, I prefer the latter, i.e. 650px, as the standard width of HTML marketing email.
Advantages of 650px:
When the content of the email is divided into two columns, 650px can be divided into x + 10 + y, where x = left column, y = right column, 10 is the interval, x + y = 640, and 640 can be exactly divided by 20,640=2×2×2×2×2×2×10
When the content of the e-mail is divided into three columns, 650px can be divided into x + 10 + y + 10 + Z. similarly, x + y + Z = 630630630 can be divided by 30,630=3×3×7×10
Why do you want to decompose like this? Please refer to the research on Web rasterization.
That’s why I chose 650px instead of 600px.
Of course, this is only my personal standard, which has not become a unified global standard, but I hope that one day this width can be recognized by the vast majority of HTML mail producers and recipients.