Layout of mailing lists: an inside look

Hello again!

As far as I can tell, my debut topic on the layout of mailings was useful to a large number of Habrovites, and in this I would like not only to give a list of rules and recommendations, but to say “what? what for? and why?". I can omit any points, 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 that is often used in the topic - these are “various web interfaces and email clients”. It’s a little 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 as you read further, take the word “Demons” (it’s difficult to name them differently) as “various web interfaces and email clients”. Well, let's get started!

Make my head stylish!

As much as we would not like, heder styles are still banned. Demons eagerly look for a type construct in the letter code

and brazenly eat it, honestly, don’t go to the exorcist. You need to register all inline styles for each individual element. Especially for the evil languages ​​that claim that the mail.ru daemon cuts inline styles I quote proof .

Does this plate not really make me fat?

This is by no means a rule, but rather a recommendation that I would rank as an unwritten standard: for the main table, which is the main construction of the letter, set the width values ​​to 600 and 750 pixels. A smaller value is provided for small postcards to subscribers, while a larger letter carries a lot of text (well, or whatever you send to your client there).

Zero Collapse - Salvation!

The collapse case is more particular than others. Collapse and reset your tables! For those who do not understand, the tablet should be issued as follows:

...

Zeroing is necessary in order to avoid incidents. Demons are such demons that each of them considers it right to set their indentation values, not only for tables, but for all elements. Moreover, if you set the indentation values ​​to more than zero, they simply may not work or work wrong.
As for the particular case of collapse, this measure is simply necessary for the unique MS Outlook, which will simply add one-pixel indentation between all cells of the table, which sometimes harms our display.

Well, not quite 3.2

No matter how it is written in such articles that we return to the medieval era of HTML 3.2, it should be noted that it is worth abandoning the use of the font tag. Why? There are two reasons: technical and human factors. The human thing is that often a milestone is only making up a layout, and its further fate may not be known. For some reason, many companies decided that it was just a manager who could send out the newsletter, but they did not think how he would do it. Here the technical factor also follows. Many mailing list systems have such a thing as a visual editor in their repertoire. What is it made for? In order for a simple manager to make textual changes to the layout. But the developers of visual editors (not all, but there are some) are also not servants of God, they made one mistake - the visual editor can cut the font tag , interrupting it to span. At the same time, the conversion of attributes and styles changes with a terrible result! Therefore, only span with inline styles.

I want the color #ccc

Will not work! Demons do not favor this color format! For both background and text formatting, #cccccc must be specified. Only full six-digit color coding. In addition, daemons are slightly obvious and take actual color values ​​like red , blue , etc.

Unicode taught to demons at school

There is nothing to be done, they are such mediocrity. No, of course you can send your letters in Unicode or in any other encoding that supports Cyrillic and Latin letters. The fact is that some demons simply do not accept all Unicode characters. All kinds of umlauts, French, Spanish and Italian symbols, copyrights and trademarks must be screened in essence. Here come the recently cited visual editors as an example. Many of them are just stupidly screening everything that is necessary, for which special thanks to them!

Surprising but true

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

Demonic dogma

Dogmas, as you can know, things are not refutable and are not subject to discussion and clarification of the reasons for their existence, so just read and remember:

• No background images ever, under any pretext
• No java script
• Forget about absolute positioning
• Simulate paragraphs and lists as described in a previous article
• Set target = "_ blank" for links so as not to open sites in the mail daemon window.
• Is always! Remember, always set the link to unsubscribe from the newsletter in the body of the letter! Non-target subscribers will thank you for this, and a spam filter will regret it.

PS Topic does not pretend to be categorically unique with respect to the first post , but I suppose I could open some moments for the reader from a slightly different side, and someone may like a slightly different presentation of the material. Thanks for attention!