Today, I am studying how to create an excellent email that is compatible with the user's visual and mail client from the technical aspect.
1. Select HTML or text (plain text)
Some people like simple text and others like to read rich HTML. How can we choose?
For marketing emails, we recommend that you use HTML format (image );
For confirmation, reminder, and notification emails, we recommend that you use text or simple HTML to create (image ).
Why are there different production methods for these two different types of emails based on these reasons:
The content of marketing mail is rich and diverse; the content of validation mail is single and unique;
In marketing emails, customers will pay more attention to the richness of content and the aesthetics of visual effects;
In a confirmation mail, we want customers to directly see the confirmation information. The complicated content and visual effect only make customers ignore the main content of the mail-that is, the confirmation information;
(The HTML production of marketing emails will be discussed below)
2. Basic HTML skills based on table layout + CSS
Kung fu can be divided into two types, one to Yang to gang, the other to yin to soft, Zhang Sanfeng's reason for peak creation, because of its good martial arts foundation, Shaolin Basic Skills solid, only to realize this can be Yin, but also to Yang's Taijiquan.
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, and Hotmail, the explanations for emails are different. Most online mail systems block the labels between Code.
To make all users who use different clients see the same email, you must have a good grasp of the basic HTML skills. Some people say that DIV + CSS, some say that Seo logo-signing is righteous, and it is undeniable that as a web developer, there are two popular HTML development ideas that will be delicious. However, this does not apply to email production. Our goal is to allow customers to see the same information content under different mail clients, which uses the most primitive Layout Method: table layout + CSS. Let's take a look at the support of the current mail client for HTML and CSS (figure ):
* Hotmail can parse <style> between <body> </body>, but it also shields <style>
3. Pay attention to the following points during HTML mail:
1. Write styles into the HTML Tag. Do not write styles in an external file or in the <style> </style> code (figure );
2. Add CSS to each content tag, even if it is repetitive and cumbersome.
3. Do not use CSS to locate HTML element tags;
Use a table nested method that combines absolute size (pixel) and relative size (percentage) to locate the position.
4. Do not insert any JavaScript or flash and some effect labels into the email.
Most mail clients shield flash and JavaScript, as well as some special labels and attributes;
5. Do not use background images
The background-image attribute is blocked in most online mail clients, especially Gmail;
6. Specify the width, height, and ALT attribute values for each image;
The image's src attribute must use an absolute address:
Correct:
Error:
7. Do not mark important content with images
The time, place, content, and other information of the exhibition are very important. Considering that the image may not be displayed, we do not recommend that the content be displayed in the image;
Even if you put the content in an image, express it in text format in the email content and add the content to the alt attribute of the image.
8. Use unified UTF-8 encoding;
4. Mail width, pixel PX? Or 600px?
We all know that the current webpage width standard is 950/960 PX, which depends on our display resolution;
E-mails are often opened in two ways: software clients and online clients (figure ).
* Microsoft Outlook 2003
* Netease 163 email
As shown in the figure, emails are often not displayed in full screen,
If you continue to use the 960/950 PX standard width of the webpage, part of the mail content will inevitably be overwritten. In this way, two horizontal and vertical scroll bars will be generated, which is not convenient for customers to browse;
The narrow width will result in a waste of space (figure)
So what is the optimal width for HTML mail? First, let's refer to the width used in HTML mail production by several well-known enterprises:
Netease youdao: 600px
Qq Member: pixel PX
Dell home and office: paipx
Cisco WebEx: 600px
it can be seen that these well-known IT enterprises have two kinds of marketing email widths: 600px and 0000px,
Based on my 4 years of EDM and web design experience, I prefer to select the latter, that is, pixel PX is used as the standard width of HTML marketing mail.
advantages of pixel:
when the mail content is divided into two columns, pixel PX can be divided into x + 10 + Y, where x = left column, y = right column, and 10 is the gap, x + y = 640, while 640 can be divisible by 20, 640 = 2x2x2x2x2x2x10,
when the email content is divided into three columns, pixel PX can be divided into x + 10 + Y + 10 + Z. Similarly, X + Y + z = 630,630 can be divisible by 30, 630 = 3x3x7x10.
this is why I chose pixel PX instead of 600px.
of course, this is only my own standard and has not yet become a globally unified standard, but one day I hope this width will be recognized by the vast majority of HTML email producers and recipients.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
