search
HomeWeb Front-endHTML TutorialWhat should you pay attention to when writing edm in 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 What should you pay attention to when writing edm in html?. 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: What should you pay attention to when writing edm in html? (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, What should you pay attention to when writing edm in html?, this image will not be the same as To align the row elements at the bottom, you can write

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

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 What should you pay attention to when writing edm in html? or What should you pay attention to when writing edm in html? 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
What is the difference between an HTML tag and an HTML attribute?What is the difference between an HTML tag and an HTML attribute?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

The Future of HTML: Evolution and TrendsThe Future of HTML: Evolution and TrendsMay 13, 2025 am 12:01 AM

The future of HTML will develop in a more semantic, functional and modular direction. 1) Semanticization will make the tag describe the content more clearly, improving SEO and barrier-free access. 2) Functionalization will introduce new elements and attributes to meet user needs. 3) Modularity will support component development and improve code reusability.

Why are HTML attributes important for web development?Why are HTML attributes important for web development?May 12, 2025 am 12:01 AM

HTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese

What is the purpose of the alt attribute? Why is it important?What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AM

The alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.

HTML, CSS, and JavaScript: Examples and Practical ApplicationsHTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.

How do you set the lang attribute on the  tag? Why is this important?How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AM

Setting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.

What is the purpose of HTML attributes?What is the purpose of HTML attributes?May 07, 2025 am 12:01 AM

HTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform

How do you create a list in HTML?How do you create a list in HTML?May 06, 2025 am 12:01 AM

TocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.

See all articles

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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools