Suggestions on creating business HTML emails

Through permission-based email marketing, not only can the cost of marketing and promotion be greatly reduced, but information can also be delivered directly and accurately to customers.

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

1. Choose HTML or Plain Text
Some people like simple text, some people 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 (picture).

Why do we use different production methods for these two different types of emails? This is based on the following reasons:
The content of marketing emails is rich and diverse; the content of confirmation emails is single and unique;
In marketing emails, customers pay more attention to the richness of the content and the beauty of the visual effects;
In confirmation emails, we want to let customers see the confirmation information very directly. Complex content and visual effects will only make customers ignore the main content of the email - the confirmation information.
(The following will focus on the HTML production of marketing emails)

2. Basic HTML skills based on table layout + CSS <br />There are two kinds of Kung Fu, one is extremely yang and extremely hard, the other is extremely yin and extremely soft. The reason why Zhang Sanfeng reached the pinnacle is because he had a good foundation in martial arts and solid basic Shaolin skills, which enabled him to realize this Tai Chi which is both extremely yin and extremely yang.
The same is true for HTML emails. We know that there are many kinds of email reading clients today, including traditional Outlook, Thunderbird, Lotus Notes, and online Mac Mail, Gmail, Hotmail, etc. The interpretations of emails will be different. Most online email systems will block the codes between the <head></head> tags.

In order to ensure that all users using different clients see the same email, you need to have a very good grasp of the basic skills of HTML. Some people say DIV+CSS, some people say it is SEO tag semantics. It is undeniable that as a web developer, it would be very popular to have these two popular HTML development ideas. However, this does not apply to email production. Our goal is to allow customers to see the same information content in different email clients, which requires the most primitive typesetting method: table layout + CSS. Let's take a look at the current email client support for HTML and CSS (picture):

*Hotmail can parse the <style> between <body></body>, but it also blocks the <style> between <head></head>

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

Write the style inside the HTML tag, not in an independent external file, and do not write it between <style></style> (picture);
Add CSS to every tag with content, even if it is repetitive and cumbersome.
Don’t use CSS to position HTML element tags;
Use a combination of absolute size (pixels) and relative size (percentage) for positioning.
Do not insert any Javascript, Flash or special tags (such as: marquee) into the email.
Most email clients block Flash and Javascript, as well as some special tags and attributes;
Don't use background images
The background-image property is blocked in most online email clients. In Gmail, you can’t see any background images.
Specify width, height and Alt attribute values for each image;
The src attribute of the image must use an absolute address:
Correct: <img src=”http://blog.54575.com/logo.gif” width=”297″ height=”160″ alt=”Live well = meaningfully” />
Error: <img src=”logo.gif” />
Please do not use pictures to indicate important information. 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 pictures.
Even if it is placed in a picture, please express it in the form of text in the email content and add the content to the Alt attribute of the picture.
Use unified utf-8 encoding;

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

*NetEase 163 mailbox

As can be seen from the figure, emails are often not displayed in full screen.
If the standard width of 960/950px of web pages is used, part of the email content will be covered, which will result in two scroll bars, horizontal and vertical, making it inconvenient for customers to browse.
However, a width that is too narrow will result in a waste of space (Figure)

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

NetEase Youdao: 600px

QQ member: 650px

Dell Home & Office: 650px

Cisco Webex: 600px

It can be seen that the marketing emails of these well-known IT companies have two widths: 600px and 650px.
Based on my 4 years of experience in EDM and Web design, I prefer the latter, that is, 650px as the standard width of HTML marketing emails.
Advantages of 650px:
When the content of the email is divided into 2 columns, 650px can be divided into X+10+Y, where X=left column, Y=right column, 10 is the spacing, X+Y=640, and 640 is 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, and 630 is exactly divisible by 30, 630=3×3x7×10 .
To understand why this is broken down, check out this research on web page rasterization.
That’s why I chose 650px instead of 600px.
Of course, this is just my personal standard and it has not yet become a global standard, but I hope that one day this width will be recognized by the vast majority of HTML email creators and recipients.

<<: Website design should pay attention to the sense of color hierarchy

>>: CSS3 analysis of the steps for making Douyin LOGO