Suggestions on how to create business HTML emails_HTML/Xhtml_Web page production

Through permission-based email marketing, you can not only greatly reduce marketing and promotion costs, but also directly and accurately deliver information to customers.

The question I am researching today is how to start from the technical aspect to create an excellent email that is compatible with both user vision and email clients.

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

For confirmation/reminder/notification emails, it is recommended to use text or simple HTML to create them (picture).

Why different production methods are used for these two different types of emails? This is based on these reasons:
The content of marketing emails is rich and diverse; the content of confirmation emails is single and unique;
In marketing emails, customers will pay more attention to the richness of content and the beauty of visual effects;
In confirmation emails, we want customers to see the confirmation information, complex content and visual effects very directly It will only cause customers to ignore the main content of the email - that is, the confirmation message;
(The HTML production of marketing emails will be discussed below)

2. Basic HTML skills based on table layout CSS
There are two types of kung fu, one is yang to strong, the other is yin to soft. The reason why Zhang Sanfeng reached the top is because of his martial arts With a good foundation and solid basic Shaolin skills, I realized that Tai Chi can reach both yin and yang.
The same is true for HTML emails. We know that there are many email reading clients today, such as traditional Outlook, Thunderbird, Lotus Notes, and online Mac Mail, Gmail, Hotmail, etc. The interpretation of emails will be different. Most Online email systems will block the code between the tags.

To make all users using different clients see the same emails, you need to master the basic skills of HTML very well. Some people say DIV CSS, and some people say it is SEO tag semantics. It is undeniable that as a web developer, it will be very popular to have these two popular HTML development ideas, but this does not apply to email production. Our goal is to allow customers to see the same information content under different email clients, which uses the most primitive typesetting method: table layout CSS. Let’s take a look at the support for HTML and CSS in current email clients (picture):

*Hotmail can parse the (picture);

Add CSS inside each content tag, even if it is repetitive and cumbersome

Do not use CSS to position HTML element tags;
Use a table nesting method that combines absolute size (pixels) and relative size (percentage) for positioning.

Do not 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;

Do not use background images
The background-image attribute will be blocked in most online email clients. In Gmail, you cannot see any background images;

Specify the width, height and Alt attribute value for each image;
The src attribute of the image must use an absolute address:
Correct:
Error:

Please do not mark important content with pictures
The time, location, 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 an image, please express it in text form in the email content and add the content to the Alt attribute of the image.

Use unified utf-8 encoding;

4.The width of the email, 650px? Or 600px?
We all know that the current width standard of web pages is 950/960px, which depends on our monitor resolution rate;
Emails are often opened through two ways, software clients and online clients, these two email clients (picture).
*Microsoft Outlook 2003

*NetEase 163 Email

As can be seen from the picture, emails are often not displayed in full screen.
If you continue to use the 960/950px standard width of the web page, it will inevitably cause part of the email content to be covered, thus creating two horizontal and vertical views. A scroll bar makes it inconvenient for customers to browse;
and too narrow a width will cause a waste of space (picture)

So, what is the optimal width for HTML emails? Let’s first refer to the width used by several well-known companies when producing HTML emails:

NetEase Youdao: 600px

QQ member: 650px

Dell Home & Office: 650px

Cisco Webex: 600px

It can be seen that the marketing email widths of these well-known IT companies are only two types: 600px and 650px.
According to my 4 years of EDM and Web design experience, I am more inclined to choose the latter, that is, 650px as the standard for HTML marketing emails. width.
Advantages of 650px:
When the email content is divided into 2 columns, 650px can be divided into X 10 Y, where X = left column, Y = right column, 10 is the gap, X Y = 640, and 640 Exactly divisible by 20, 640=2×2x2×2x2×2x10,
When the content of the email is divided into 3 columns, 650px can be divided into X 10 Y 10 Z, similarly, X Y Z= 630, 630 is exactly divisible by 30, 630=3×3x7×10.
Why is it decomposed in this way? Please check the research on web page rasterization.
This is why I chose 650px instead of 600px.
Of course, this is just my personal standard and has not yet become a globally unified standard, but I hope that one day this width will be recognized by the vast majority of HTML email producers and recipients.