Table of Contents
Format encoding
text
Pictures
Links
outlook rules
Home Web Front-end HTML Tutorial What should you pay attention to when writing edm in html?

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

Apr 22, 2017 am 10:04 AM
html

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.

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 of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Two Point Museum: All Exhibits And Where To Find Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

How do you parse and process HTML/XML in PHP? How do you parse and process HTML/XML in PHP? Feb 07, 2025 am 11:57 AM

This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

See all articles