Layout mailing: view from the inside

Hello again!

As far as I can tell, my debut topic about the layout of mailings was useful to a large number of habrovans, and in this I would like not just to give a list of rules and recommendations, but to tell “what? what for? and why?". Any points I can omit, but this is only because they were clearly described in the previous topic.

First of all, I would like to focus on one of the characters, which is often used in the topic - these are “various web interfaces and email clients”. It is a bit tedious to repeat this construction of words every time, and it seems to me that it will be easier to give this one generalizing word. And so reading further, take the word "Demons" (otherwise it is difficult to call them) as "various web interfaces and email clients." Well, let's start!
')

Make my head stylish!

As much as we would like, hedery styles are still banned. The demons are eagerly looking for a type construct

<style> //some css rules... </style> 

and brazenly eat it, honestly speaking, do not go to the exorcist. It is necessary to register all styles inline for each individual element. Especially for evil languages, claiming that the demon mail.ru cuts inline styles I bring proof .

This sign is not very fattening me?

This is by no means a rule, but rather a recommendation, which I would rank as an unspoken standard: for the main table, which is the main construct of the letter, set the widths to 600 and 750 pixels. A smaller value is provided for small cards to subscribers, but the larger one has a lot of text in it (well, or whatever you are sending to your client).

Zero collapse - salvation!

The collapse case is more private than the others. Collapse and reset your tables! For those who do not understand, the plate must be made out as follows:

 <table style="border-collapse:collapse;" cellpadding="0" cellspacing="0"> ... </table> 

Zeroing is necessary in order to avoid incidents. Demons are such demons that each of them considers correct to set their own indentation values, not only for tables, but also for all elements. Moreover, if you set the indentation values ​​to be greater than zero, they simply may not work or work wrong.
As for the special case with a collapse, this measure is simply necessary for a unique MS Outlook, which simply adds single-pixel indents between all the cells of the table, which sometimes hurts our display.

Well, not quite 3.2

No matter how written in such articles that we return to the medieval era of HTML 3.2, it should be noted that it is worth refusing to use the font tag. Why? There are two reasons: technical and human factors. The human is that often the bench is only a typesetter, and its subsequent fate may be unknown. For some reason, in many companies they decided that the newsletter might just be a manager, but they did not think how he would do it. This is where the technical factor flows. Many mailing organization systems have in their repertoire such a thing as a visual editor. What is it made for? In order for a simple manager to make text changes to the layered layout. But the developers of visual editors (not all, but there are such) are not the servants of God either, they made one mistake - the visual editor can cut the font tag, interrupting it with a span . In this case, the conversion of attributes and styles changes with a terrible result! Therefore, only span with inline styles.

I want color #ccc

Will not work! Demons don't like this color format! For both background and text formatting, you need to specify #cccccc. Only full six-digit color coding. In addition, the demons are slightly obvious and take the actual values ​​of the colors red , blue , etc.

Unicode was not taught at school

Nothing can be done, they are so mediocre. No, you can of course send your letters in Unicode or in any other encoding that supports Cyrillic and Latin. The fact is that some demons simply do not accept all Unicode characters. Any umlauts, French, Spanish and Italian symbols, copyrights and trademarks should be escaped in essence. This is where the recent visual editors come in as examples. Many of them, just stupidly screen all that is necessary, for which they thank you separately!

Amazing fact

Everyone honored and adored by Google Mail (I dare not call its interface a demon) also has its flaws in the parser. If you use the image as a link, you need to nullify the border of the image (thanks to Cap), and at the same time set the link itself for text-decoration: none; otherwise the image (oh gods!) will be underlined as a link.

Demonic dogma

Dogmas, as you may know, things are not refutable and are not negotiable and clarify the reasons for their existence, so just read and remember:

• No background image ever under any pretext
• No java-script
• Absolutely forget about absolute positioning.
• Imitate abtsazy and lists, as described in the previous article
• Set target = "_ blank" for links in order not to open sites in the mail daemon window.
• Is always! Remember, always set a link to unsubscribe from the list in the body of the letter! Thank you for this non-target subscribers, and regret the spam filter.

PS The topic does not pretend to be categorical uniqueness with respect to the first post , but I suppose I could open up some moments for the reader from a slightly different side, and someone might like a slightly different presentation of the material. Thanks for attention!