Rake in the layout of HTML letters

Quite often, our customers arrange regular newsletters. Almost always they are not satisfied with the text mailing or simple design of HTML mailings. Our designers are creative with might and main, and then we fill in bumps when we lay out their layouts with the correct display in a variety of email clients.

Below is a list of the features we encountered and the ways to resolve them (I did not manage to sort them out, so everything goes as a single list)

• In order to avoid problems with encodings - typeset into UTF-8, in HEAD you need to specify <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8 ">;
• Mail.ru, Yandex and Rambler emails cut out all css, so you need to typeset using HTML3.2;
• Mail.ru makes large indents for the elements so that they do not need to wrap the letter in <div id = "mailsub">;
• Mail.ru (and it looks like Yandex) turns indents (\ t) in code into & nbsp; therefore, the code should not be fought with tabs;
• In the text version, you cannot use html entities, because this is a text version, not HTML. Also, in the text version, unicode characters that are not found in windows-1251 cannot be used, since mail.ru why then recodes the letter in this encoding;
• Outlook 2007 does not allow the use of background images. We really found 1 hack - you can specify the background-image for the body. Then this Outlook will show the background. But the hack does not work if we use background-position or background-repeat. In web clients, this background will not be shown, so you need to duplicate its indication - in the style of the body for Outlook, and in the background of the “root” table for the web of clients;
• Outlook 2007 makes the fields on top of items of type "div". The “table” with “cellpadding = 0 cellspacing = 0” does not have such fields;
• In the latest Disney newsletters, we had to completely abandon the use of background images, because at the same time there were problems with positioning pictures over the background and making the main layout consisting of a set of pictures inside the table. The text is also included in the pictures, links are placed using the areamap areamap cannot be used , because You cannot click on such links in Gmail. It is necessary to cut the letter into pictures and save them to the table;
• In Gmail, if a picture, which is the only one in a cell of the table, appears 3px indent from the bottom, you can eliminate it by specifying style = "display: block" for this picture;
• In the Rambler, the pictures specified in the message body are merged onto their server with the substitution of links, respectively, if you watch the email sent from your servers, http authorizations closed from outside, then the pictures will not be displayed;
• In Yandex, if the body of the letter is placed inside {strip} (all line breaks are cut out), then in the body of the letter there are incomprehensible hyphens that can fall on the value of the src or href attribute. In this case, the pictures may not be displayed, and the links - not open;
• In order for IE6 at the bottom of the pictures to not display a 3px indent, it is necessary that there are no whitespace characters between the picture tag and the close cell tag (it is allowed to use a comment like this:
  <td>
  <img src = "" alt = "" /> <! -
  -> </ td>
• Outlook 2007 sometimes does not resize stretched images. One-to-one pictures should be used as indicated in the layout;
• Sometimes they happen in Outlook 2007 when a picture placed inside some td that has a given colspan or rowspan is cropped along the extension of the border line of the neighboring cells that are joined by colspan or rowspan. In this case, a part of the whole image-picture is displayed. The problem was not solved without cutting the combined cell into several single cells and crushing the problem picture into several parts, each of which would occupy one simple table cell;
• On some Outlook installations, a letter without line breaks starts to bruise in a very strange way. Separate tables can be made without hyphenation, but very long lines should be avoided;
• In The Bat! when using transparent hyphae, transparent points are replaced with black ones. Therefore, the “transparent” struts should be filled with the background color on which they are located

')
When I mention the name of a mail host, I mean its web interface, not POP / IMAP

The second item from this list is described in more detail in the topic “10 recommendations on html-layout of emails”