Email marketing EDM template creation specifications

Recently, I am working on some activity projects. From time to time, there will be an email sending page (EDM for short). After numerous tests, I will summarize the following EDM production standards, I would like to share with you the hope to help you.

Part 1 Mail template Overview

1,Mail type:

1) News subscription; Generally, most text content, each text segment has corresponding links for clicking, and a small number of images are added for embellishment, the top of the template is marked with a significant company logo and mail content. The bottom of the template contains the company's contact information, disclaimer, and other topics. The mail is usually greater than 50 K.

2) Product subscription; generally, the image content is dominant, and the image has corresponding links for clicking. The purpose is to introduce the latest product or activity information in a targeted manner. Because the image format is dominant, the email size is usually within 20 kb.

Note: The above types of templates use the standard HTML language and insert images and links with absolute address links.

 2,Mail template display size:

Considering the different resolution of the current display, it is generally recommended that the display width of the mail template be between PX and PX; the template height is around PX (that is, you need to scroll the screen once to view all the content ).

Optimal template size: display width400px-800pxThe template height is within one screen. 

3,The standard email template must include the following: 

1)Standard Header and footer Application
It must contain a guide entry that cannot be normally displayed for the email, such:

If you cannot browse this email, clickHere;

In addition, it is recommended that you add the sender to the contact list.

Must contain obviousUnsubscribeLink ID (the Unsubscription link can be provided directly by the sending system or linked to the Unsubscription link provided by the user );

2)Other header and footer applications:

Indicates the main purpose of the email

Email Unsubscription

Select subscription content

Modify subscription mailbox

Privacy Protection description

Enterprise Service Standards

Note:Mainstream browsers used by netizens currently include:

Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Internet Explorer 9, Internet Explorer, green, Google Chrome, and Firefox, with a coverage rate of over 90%. After modification to the template creation specifications, the above browsers can display the template normally.

Part 2 static page creation 

I,Content Proportion

In the mail template, the image and text should have a balanced proportion. From the judgment mechanism of the portal, the proportion of text in the mail bodyMore reasonableThe less likely it is to be identified as spam, especially Netease. We recommend that youNon-effective textAre displayed in text format.

II,Cropping Method 

1,Page creation methods are currently dividedTableAndDivTwo methods

To ensure that the mail template displays the same results in different mail clients, the table format must be used for cutting. The DIV format is not fully supported by the mail client because of some attributes, this method is not suitable for EDM mail template cutting. Different mail clients or online browsers have different interpretations of the CSS model, which may cause dislocation or layout confusion. Therefore, we recommend that you avoid this method. At the same time, do not use a single table to repeat colspan multiple times. It may be determined by the mail client that the structure is too complex and classified as spam. It is also easy to disrupt the layout and affect user browsing.

 

2,When you cut an image, optimize the image as much as possible without affecting image distortion.

After the image is optimized, the capacity is reduced to ensure that you can see the images you are interested in when opening the email in the shortest time to improve the reading rate of the email template. In addition, when there is an animation on the page, you can export animations as GIF images. For Flash animations on pages, most mail clients do not currently support normal display.

 3,The height and width of the inserted image must be defined.

Generally, width and height are used to define the height and width of an image. However, in the QQ mailbox, the height and width of all images on the page are cleared, resulting in page display deformation; therefore, we recommend that you define the image height and width in style, for example, style = "width: XXX; Height: XXX ".

 4,Do not use background images

In outlook, the background image cannot be displayed, and other mail clients can correctly display the background image.

 5,Image URL

The map tag is not used. Because the map tag cannot be clicked normally in outlook, you cannot open the URL pointed to by this link.

 6,Not usedWordConvertedHtmlFile as template

The conversion of word will insert a lot of useless information in HTML.Code, Leading to problems such as display disorder and blocking of emails. At the same time, we recommend that you manually convert Word documents to HTML pages and add relevant images to attract customers' attention.

III,CSSStyle Definition

 1,CSSThere are two ways to add a style:

1) external call style;

2) Internal call style;

3) define styles in HTML tags.

 2,Elaborate on the above content separately

1) An external call style refers to the name and path of the style sheet file written in

<Head>

<Link href=”all.css "rel =" stylesheet "/>

</Head>

2) An internal call style refers to the style definition starting with <style> and ending with </style> in the header of the page. For example:

<Head>

<Style>

Body {

Font-family: Arial, Helvetica, sans-serif;

Font-size: 12px;

Margin: 0 auto;

Padding: 0px;

Color: #000000;

}

</Style>

</Head>

3) Defining styles in HTML tags means writing style definitions directly in HTML Tag tags. For example:

<Span style = "font-family: Arial; font-size: 12px; color: # 6f6e6e"> Text Information </span>

The first and second methods are commonly used to create web pages, but some definitions of the two methods in the mail client will not take effect. The third method shows the highest compatibility in the mail client, but the manual creation is cumbersome. Therefore, the system integrates the "Web page capture" function, the capture function automatically converts the first and second web pages into the style definition mode of the third web page, thus ensuring the maximum compatibility of template display.

3,Others

ALT value-define ALT in the main image to mark the text content in the image. When the image cannot be normally displayed, you can still see the topic content to be conveyed in the image.

When <style> </style> is called on the page, do not use labels with default styles, such as <H2>, <ul>, <li>, <p>, or <ol>, prevent page layout confusion when <style> </style> is isolated.

All links in the template must use absolute paths. The link length of an email sent by EDM mail marketing cannot exceed 255 characters, and cannot contain spaces or Chinese characters, otherwise, the connection may fail to be traced; do not use tags for image links; otherwise, the email client may regard the link as spam, or even be directly blocked by the email operator. The text in the template cannot use a large font; otherwise, it may be determined as spam by the mail client.

Part 3 test the page

 After the page is created, you need to upload itWebDedicated server

During the test, the page capture is divided:

(1) URL capturing (URL capturing is a function designed by the system to provide template display compatibility. We recommend that you use it)

(2) HTML code copying requires that all links or references on the webpage use absolute addresses; otherwise, images on the webpage cannot be normally displayed in the email ;)

Part 4 view email

 Three possible email template sending situations

1. Enter the inbox;

2. Email is sent to the garbage bin;

3. Rejected emails;

 After the preceding situation occurs, we recommend that you adjust the email as follows:

1. Change the email subject as appropriate;

2. Delete politically sensitive words or pornographic or marketing words that may be prescribed by the State in the template;

3. The template content is arranged in a mix of text and images;

4. Delete unnecessary links in the template. The number of links in the email is not too large. We recommend that you delete fewer than 10 links;

Part 5 Experience Summary

 Portal rules are constantly updated. When we cannot grasp the accurate rule information, we can summarize the solution by sending problems in experience each time. The following are some common or hard-to-find problems.

 Question 1:

Correct syntax <a href = "http://www.hyattonthebund.cn/?target=_blank>

A <A> link is divided into three parts by a hard carriage return. Users often do this, especially Word users.

Question 2:

<TD width = "127"> <a href = "Blank target =" _ blank "> </a> <a href = "http://www.hyatt.com/hyatt/reservations/flow1/corpcheckavailability.jsp" target =" _ blank ">

A link corresponds to two <A> but the second <A> is not over. ie will not report an error, but it will accumulate much less, resulting in large mail volumes and heavier server load.

 Question 3:

<TD width = "147"> </TD>

There are only images in TD, and the old system will add a space before </TD>, which causes image split. Solution: manually clear spaces in the Code Section after capturing the Template

 Question 4:

The correct syntax of mailto,

<A href = "mailto: joe55@sogou.com">Joe55@sogou.com>

 Question 5:

For English-only mail, the UTF-8 character set must be used for sending, reducing the unreadable issue caused by Character Set Issues.

 Other experiences:

 1-use the color block as much as possible for template creation to make effects similar to those of illustrations. Use less and use GIF to reduce the size and reduce the sending burden.

2-when opening the template, check the Js in it and try to remove JS as much as possible, because some clients will report errors, especially Outlook

3-try to redo the customer template in DW instead of HTML directly generated by PS

4-in case of image cracks, you need to manually draw a table in DW and manually add images to solve the problem.

5-only one IMG can exist in one <TD> </TD>. If there are three, the problems mentioned in the preceding 4 may easily occur, if there are three graphs to solve the problem in one TD, create a table with three columns and one row, and put the three graphs in separate columns.

6-special symbols ●, á, Qu, and so on should be replaced by standard XHTML such as & #8226;

7-try not to display any problems in the background image Outlook

8-errors may occur when the system captures the template. Try to find the problem from the code mode.

9-Link Opening Method: _ blank

10-creating links without using map

11-css nearby writing

<P style = "color: #718685; font-family: Arial, Helvetica,>

Text text </P>

Note:The creation of the email template will change with the update of the portal rules. Please note that.

[Personal supplement]

Different email Receiving Software (for example, outlook2003, outlook2007, and Foxmail) also requires some attention.

1. It is best to define the font size in the TD of each table.

2. the font size and color of <p> </P> are defined in P.

3. If the child table in the table has a margin: 0 auto; this style is useless, we recommend that you write all the margin: 0px 15px;