Home  >  Article  >  Web Front-end  >  What should you pay attention to when writing edm in html?

What should you pay attention to when writing edm in html?

零下一度
零下一度Original
2017-04-22 10:04:431459browse

This article mainly introduces a summary of things to note when writing EDM in HTML (generally what you need to pay attention to when sending emails). Friends in need can refer to

Format encoding

1. Page width Please set it within 600 to 800px and the length within 1024px.

2. Please use utf-8 for HTML encoding.

3. HTML code should be within 15KB. (Each mailbox has different reception standards. If it exceeds 15KB, your email is likely to go into the trash)

4. Please use a table for layout. Only place one picture in the same , such as . All images must have a defined width and height. The same paragraph of text is placed in the same .

5. If you need the email to be displayed in the center, please set align="center" in the table.

6. Word files cannot be converted directly into HTML format, otherwise the encoding will be irregular.

7. Do not use the css style of external links to define text and pictures (the css styles of external links will not be read in emails, so emails sent out will cause your The style of the email content is lost), the correct writing method is: Text.

8. Do not use flash, Java, JavaScript, frames, iframe, activeX and DHTML. If the pictures on the page must be dynamic, please convert the flash file into a gif animation. But in outlook2007, gif It will not be displayed normally because Outlook2007 limits gif animation.

9. Do not use tags such as body, meta and html other than

. Some email systems will filter these out.

10. The background image code is written as follows:

, but please note that Outlook does not support background images. Not recognized.

11. Do not have "onmouseover" or "onmouseout". Even if it is set in , it will be filtered after being sent to the mailbox, and the content displayed after the mouse is set cannot be displayed.

12. The font-family attribute cannot be empty, otherwise it will be blocked as spam by QQ.

13. If there is a blank space on the inside edge or top and bottom of the email template, do not use padding. You must use standard td to set the blank spacing. Otherwise, each mailbox will be parsed differently.

14. Notes on defining line-height in yahoo mailbox: line-height needs to be defined in a block-level element. If there is a p tag in td, line-height must also be defined in p. Whether it is td or p, if there is a hyperlink, line-height must be defined in the a tag. If line-height is only defined in td or p, yahoo mailbox will not be able to recognize the line height in a.

15. Set background-color where there is a background image to prevent it from being displayed more beautifully when the background image is not displayed.

16. Use float, margin, and padding sparingly. Absolute positioning cannot be used. , use

text

#1 to clear floating words. 1. The email subject should be limited to 18 words and avoid using special symbols. It is easy to produce garbled characters.

2. Do not include information with website address in the subject and content of the email, such as "xxx.com wishes you a happy new year". If the customer's brand awareness is relatively high, the company's name can be added to the theme, such as: "NIKE Sports Fashion".

3. The text content and layout should be as concise as possible and highlight the theme to achieve a higher click-through rate.

4. Do not use sensitive and promotional words like the following: free, discount, special offer, special price, low price, cheap, cheap, video, make money, group hair, get rich, get rich, agent, salary, Dating, payment, business opportunities, magic weapons, treasure books, secrets, intelligence, secrets, secrecy, top secrets, mysteries, secrets, etc. If necessary, please turn sensitive words into pictures.

5. If you send more than 200,000 emails, the theme content needs to be changed. If you send more than 2 million emails, consider redesigning.

6. The text should define the font style as much as possible. The default font style of each mailbox is different. In order to achieve the effect you want, the font style must be completely defined.

Pictures

1. Use pictures as much as possible to avoid text being displayed differently in various mainstream mailboxes. For example, in QQ mailbox, if it is not set in the code, the text in the mail cannot be automatically wrapped, and the font of the mail content in gmail mailbox will be automatically enlarged, which is inconsistent with the originally set character size.

2. The entire page should be limited to 8 pictures, and each picture should not exceed 15KB.

3. Please do not write the image address as a local path, for example: (in this way, the recipient will not be able to see you if you send an email. picture of).

4. The image name cannot contain ad characters, otherwise the image will be displayed as "filtered advertisement" after uploading.

5. If there is only one picture in the entire email template, be sure to cut it into 2-3 small pictures and retain some text appropriately.

6. The requirements for Gmail and QQ mailboxes have changed again. The attributes of images must be completely defined, for example style="vertical-align:top;" here must be defined, otherwise there will be gaps, deformation and other abnormal display between the pictures.

7. Add the alt attribute to the img tag, so that when the user receives the email, even if some mailboxes hide the image, they can still see the content in the alt. For example: display content to let customers know the content of the email And attract customers to click on the displayed image.

Links

1. The number of links cannot exceed 10. If the link addresses of all pictures are the same, please merge all small pictures into one large picture.

2. Please write the link as an absolute address. (To ensure that recipients can view your content properly when they click on the link).

3. The length of the link address cannot exceed 255 characters, which may result in untraceability or link errors.

4. Do not use the map function (map) to link pictures. This function will cause the email to be classified as spam by most mailboxes.

5. To prevent users from being unable to browse the email images they receive, please create a web page with the same content as the email, and then indicate at the top of the email: "If you cannot view the email content, please click here." , link to a web page with the same content as a visiting friend.

6. The risk of website address links appearing in the text being blocked as spam is extremely high. For example: for links like http://xxx.com, it is recommended to write "XXX Company" text and add the link, or It is to make the URL into an image and add a link.

7. It is best not to use special symbols in the link to avoid email parsing errors.

8. The link code should be as short as possible. If the code is too long, it will increase the template size and affect the email sending effect.

outlook rules

1. The tag cannot be recognized. If you want to define several tds with the same width, you can write the specific width in the specific td. For example.

2. The padding of inline elements cannot be recognized. For example, , the content in the a tag is not recognized. It won't be 40px from the left. Padding can be defined in td.

3. The vertical-align of inline elements cannot be recognized. For example, , this image will not be the same as To align the row elements at the bottom, you can write .

4. If td contains a table, the styles of labels defined in the child table will only display the styles defined in the child table correctly, and the styles in the parent table will not be displayed correctly. Note: If there is an a tag in the table, the color style of the content in the a tag must be defined in the a tag. Defining it in the parent td or the table where it is located is invalid.

5. If there is a gap between td and td, use . If you write it like this, there will be no gap between td. There are intervals. There will be no spaces if you use . If there is a gap between td, they must be separated by  . But if it is a table, the content in

will have blank lines above and below.

6. The width of the p tag is not recognized. For example,

, the content in the p tag will not automatically wrap at 320px. Content will wrap at the width limit only if has a width set.

7. If you want to use the

tag, you must consider the line height between the upper and lower lines of the

tag itself.

8. Setting margin in is invalid, whether it is margin-left, margin-right, margin-top or margin-boottom.

9. When or is set, the image will break away from the document flow and have margin or padding set on its parent element. It cannot be moved down, left or right.

10. In outlook, if the nested picture is too long, it will cause abnormal display. You can cut the picture into several shorter pictures and then layout them.

Also, when sending an email template, try to paste the source code in the format. If you forward it too many times, you may lose the style!

The above is the detailed content of What should you pay attention to when writing edm in html?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn