Main points of EDM production

EDM is an abbreviation for email Direct Marketing, although it is also HTML, but unlike the HTML we use on the Web page, because of security reasons, each major email service provider-level mail client will be the content of the message to some extent, will not follow the original HTML display you wrote

Avoid junk mail

Even if the message is done beautifully, the mailbox is automatically recognized as junk e-mail, each mailbox has its own spam identification rules, to understand how to avoid the EDM as spam, about this is a classic question about how to let their server sent messages not by Gmail, Hotmail, 163, QQ and other mailbox into the Trash box?

Most of the server settings, send frequency, etc., the front-end need to pay attention to the main message content part

1. Graphic ratio, picture proportion is too large or simply transduction composed of e-mail messages called spam probability is very large, most mailboxes on the size of the picture is also limited, the general picture of more than 150k almost all mailboxes will not be loaded by default in the message of the picture, this is also a place to note
2. Headings, with links in the title, or obviously promotional words such as invoices, promotions, free keywords are also easily judged as spam
3. The content of large areas of yellow, red accent, or the size of large text is also the basis for judging spam messages
4. Link, picture address try to use short and meaningful characters
5. Messages containing attachments or JS code will also increase the probability of being identified as spam
6. Title characters all uppercase, with too many exclamation points and so on is also junk e-mail flag

Common spam keywords include: invoices, rich, rich, generation, wages, friends, payments, business opportunities, magic, treasure, and so on, as well as politically sensitive words

Basic guidelines

There are several basic guidelines that are different from the page when writing an EDM

Control width

Because Outlook is still the overlord of the mail client, the default interface mail section width for the general screen around 800px, so do not set the message content too wide, 700px is a good choice

Table layout

This is almost the EDM and ordinary page HTML the biggest difference, because each mailbox to div+css this set of layout of the resolution problem is very large, the basic mailbox will resolve the confusion, so the old table layout of the superior choice

This means that there are only a few elements in the EDM table, TR, TD, Span, IMG, a, metering avoids using div, p, or other tags

One thing to note about using table layouts is that not all mailboxes support the colspan, rowspan properties and try to use table nesting to solve

Content outside the body is almost useless.

We know that the full HTML includes the DOCTYPE declaration, the HTML tag, the head tag and its contents, the body tag, and the same structure for the mailbox that displays the message content in an IFRAME, but some messages (Gmail) include the EDM directly in the Div. This is extremely harsh on safety requirements, followed by several key points of the basic reason it's safe

Security reasons the mailbox will default to the above-mentioned structure to delete processing, so in some cases write almost no effect, do not attempt to the head tag within the meta or other content (such as really many overseas users, Gmail will be deleted), as far as possible to write content in the body, Even many of the EDM suggestions are written from the table, directly discarding doctype, HTML, head, body tags

Use inline styles whenever possible

Writing HTML can not be separated from CSS,EDM does not support the external style file, which said the head tag is very likely to be deleted, so do not try to write a style tag inside the head tag.

Is it safe to write a style tag inside the body? No, the typical Gmail mailbox will remove all the style tags inside the EDM, which means that only CSS within the inline style property is the only reliable style information

You can use attributes without styling

It is not safe to use the style attribute, many mailboxes will be forced to change the properties of a particular label, such as setting all TD to line-height 1.2, using the Style property is not insurance, so when there are attributes to implement the style of the use of attributes, the common attributes are

Table

• Width
• BgColor
• Align

Td

• Align
• valign
• BgColor
• Height
• Width

Img

• Width
• Height

For bold fonts We can use b tags instead of CSSfont-weight

Style writing

The EDM style writing also has a lot of surprising places

Support for attributes

The lack of CSS support for the EDM is shocking, with almost all of the supported text-and background-color-related attributes in common support, and we can see the specific support situation in the Ultimate guide to CSS

• Gmail doesn't support all style tags.

• Slightly advanced selector Yahoo and Gmail generally do not support, this for the domestic market students can also accept the international market is tragic

• Text-related CSS2 basic support, but font-size , font-family Basic client has a default value, insurance, write their own; text-indent only for block elements, basic use TD padding can solve

• Background support is better than color, do not add a background image for the EDM, most mailboxes do not support

• box-related border support is good, height and width also basic can, padding and margin support is not satisfactory, a good suggestion is not to use margin, mainly on the empty, TD with width and height to solve spacing problems with its padding

• Location, display-related basic EDM is rarely designed, do not use the float, position properties

If you want to write a message that looks good on each mailbox, you can use a very limited CSS, perhaps see here to understand why many of the EDM code looks very bad, but this is not finished, the "It's just the beginning", which is often seen in American dramas

Inheritance and shorthand

In the writing of the page when the use of CSS inheritance and shorthand will bring us a lot of convenience, but to the EDM, everything must be no!

The first is inheritance, in fact, the inheritance rules are still valid, but most mailboxes will have a set of their own rules, for example line-height , if our element is not set, it will be in the form of inline style automatically added, which makes us can not easily rely on inheritance rules, all the almost problematic TD to write

style="color:#333;font-size:12px;font-family:Arial;line-height:1.5;"

And then a shorthand question.

padding:4px;border:solid 1px #999;

Similar code is common, but given the particularity of the EDM, it is recommended that you do not write this, color code should be written in six-bit, rather than shorthand for 3-bit

padding-top:4px;padding-......border-width:1px;border-style:style;border-color:#999999;

The particularity of the element table

• As mentioned above colspan , rowspan attributes are not well supported, so try to use table nesting to solve such problems
• All the table must write several properties,, cellpadding cellspacing border , different browsers, mailboxes on this default value is different, written as we want
• When table uses border, add Border-collapse property value to collapse
• Using bgcolor the background color that defines table
• TD content defaults to horizontal left-aligned, vertically-centered alignment
• TD has a very rich set of properties for its, size, background

Img

• Do not load the picture by default, Gmail non-address book mail pictures are not loaded by default, so write the width, height and alt attribute
• Only include the picture TD line-height set to 0, otherwise there will be gaps, in the picture side by side especially obvious, many people also suggest to set the style display:block , although the same can be achieved, but not recommended
• Most of the time, the mailbox will be framed for the picture by default, and the property will be border set to 0 if not required.

P

With the P tag less, Hotmail filters out the margin of P tags and then adds the value of the Hotmail system defaults; Qqmail will set a line-height value for P

DOCTYPE

If you must use full HTML (which is actually useful, especially for responsive EDM), try to use the

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Main points of EDM production