Through license-based email marketing, not only can the cost of marketing and promotion be greatly reduced, but the information can be directly and accurately conveyed to customers.
The question I'm studying today is how to start from the technical aspects and make an excellent email that is compatible with both user vision and email clients.
1. Choose html or plain textSome people like simple text, and some people like to read rich html. How do we choose?
For marketing emails, it is recommended to use the html format to make them (picture);
For confirmation/reminder/information emails, it is recommended to use text or simple html to make them (picture).
Why are there different ways to make 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 aesthetics of visual effects;
In confirmation emails, we want customers to see the confirmation information very directly. The complex content and visual effects will only make customers ignore the main content of the email - that is, the confirmation information;
(The following will focus on the production of marketing emails html)
2. Basic html skills based on table layout + cssThere are two types of kung fu, one is the most yang and the other is the most yin and soft. The reason why Zhang Sanfeng reached the peak is because his martial arts foundation and his basic skills are solid, so he realized this Tai Chi that can be the most yin and yang.
The same is true for html emails. We know that there are many types of email reading clients today, including traditional outlook, thunderbird, lotus notes, online mac mail, gmail, hotmail, etc. The explanations of emails will be different. Most online email systems will block the code between the <head></head> tags.
To make the emails seen by all users with different clients the same, we must master the basic skills of html very well. Some people say div+css, some people say it is semanticization of SEO tags. It is undeniable that as a web developer, it will be very popular to have these two popular html development ideas nowadays, but this does not apply to email production. Our goal is to let customers see the same information content on different email clients, which uses the most original layout method: table layout + css. Let's take a look at the current email client's support for html and css (picture):
*hotmail can parse the <style> between <body></body>, but also block the <style> between <head></head>
3. When doing html email, you should pay attention to the following points:Positioning is done using a table nesting method that combines absolute size (pixel) and relative size (percentage).
Most email clients will block flash and javascript, as well as some special tags and attributes;
The background-image attribute will be blocked in most online email clients. In gmail, you cannot see any background images;
The src attribute of the picture must be used with the absolute address:
Correct: <img src=http://blog.54575.com/logo.gif width=297' height=160' alt=Living well=Making meaningful/
Error: <img src=logo.gif />
Information on the time, location, content and other information of the exhibition are very always necessary. Considering that the pictures may not be displayed, these contents are not recommended to be displayed in the pictures;
Even if it is placed in the picture, please express it in text form in the email content and add the content to the alt attribute of the picture.
Email is often opened through two channels, software client and online client, these two email clients (Figure).
*microsoft outlook 2003
*NetEase 163 Email
As can be seen from the picture, emails are often not displayed in full screen.
If the standard width of the web page is continued to be used, part of the content of the email will inevitably be blocked, thus creating two horizontal and vertical scroll bars, which are inconvenient for customers to browse;
And a width that is too narrow will cause waste of space (picture)
So, what is the best way to set the width of the html email? Let’s first refer to the width used for html mail production by several well-known companies:
NetEase Youdao: 600px
QQ Member: 650px
dell home and office: 650px
cisco webex: 600px
It can be seen that the marketing email widths of these well-known IT companies are 600px and 650px.
And according to my 4 years of experience in edm and web design, I prefer to choose the latter, i.e. 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 gap, x+y=640, and 640 can be divisible by 20, 640=2×2x2x2x2x10,
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 can be divisible by 30, 630=3×3x7×10.
Why do we need to break down this way? Please consult the research on rasterization of web pages.
This is why I chose 650px instead of 600px.
Of course, this is just a standard set by me personally and has not become a global unified standard, but I hope that one day this width will be recognized by the vast majority of html email producers and recipients.