Geekly Articles each Day
📜 ⬆️ ⬇️

Layout e-mail newsletters - "pitfalls". Part two

Layout e-mail newsletters - "pitfalls". Part two
Hello, dear habravchane!
Just a couple of days ago, we published the first part of the topic dedicated to the layout of e-mail newsletters, and more specifically, the use of images. The second part is devoted to four more “pitfalls” of typesetting that we were able to detect.

The second stone - "Anchors"


If the distribution of a large volume of several pages, it becomes necessary to navigate within the list. As is known, for such navigation on the html-page are used "anchors". In the right place we prescribe - put the anchor, put a link to this "anchor":.
Consider sending a letter via Outlook Express , Windows Live Mail and Outlook 2007 .

Outlook Express

Windows Live Mail, Outlook 2007

Summary table

We did not manage to achieve the correct operation of anchors in all mail services. Perhaps there is a solution to the problem - we will be grateful if someone tells you. Otherwise, for anchors, it is better to use Windows Live Mail or Outlook 2007 as mail transfer programs.
')
Anchors in e-mail newsletters

Third Stone - Borders and Alignment in Tables


Sometimes it is necessary to put a separator in the distribution list - a horizontal or vertical line. Since mailings are edited using tables, the delimiters, as a rule, are the borders of the cells. However, there is a feature of recognizing such boundaries depending on which mail program is used for sending and through which program the received letter is viewed.

Consider the situation: the table is set only the lower horizontal limit.

Register it this way:
 <table cellspacing="0" cellpadding="0" border="0" width="210" style="width: 210px; border-width:0 0 1px 0; border-style: solid; border-color: #e2e2e2;">

We send via Outlook Express , Windows Live Mail and Outlook 2007 .

The result is obtained in TheBat! :

The boundaries in the tables in the e-mail newsletters

In online services, the problem with borders is visible only in a letter from Outlook 2007 - the outline of the table is drawn completely, and not just the bottom border.

When shipped via Outlook 2007 in conjunction with receipt via TheBat! the principle works: if a table has at least one border, then all borders will be displayed, including internal ones. When received through online services, the situation is similar in yandex.ru. In gmail.com and mail.ru the situation is similar, only the internal borders are not displayed.

As for alignment in the tables, there is one feature when receiving letters in TheBat! .. If the table has align = "center" at the beginning, then EVERYTHING inside the nested tables will be centered. To avoid this, you need to set align = "left" for any nested table.

Summary table

The boundaries in the tables in the e-mail newsletters

Fourth Stone - Indenting


When transferring via Windows Live or Outlook Express, indents are displayed correctly in various mail programs and services. When sending via Outlook 2007, the following problem occurs:
Outlook 2007 wraps the contents of any cell in the table (and the distribution is made up of tables)
 <p class="MsoNormal" style=""></p>
When receiving a letter in the mail service yandex.ru, an increase in all indents in the letter is observed. The explanation is simple: in compiled style
 <p class="MsoNormal" style="">
Margin-top: 15px and margin-bottom: 15px. When layout is necessary to take into account.

Paragraphs in e-mail newsletters

Summary table

Paragraphs in e-mail newsletters

Fifth Stone - Text and Link Style


As a rule, corporate mailings are designed in accordance with the corporate style, which implies the use of certain fonts and colors, including text and links. And here we found 2 problems:

1. "Failure" font

When sending via Outlook Express or Windows Live and receiving letters on yandex.ru, the text font “breaks” if the font tag is used to format the text and there is another table in the table cell before the text.

That is, when using the construction of the form:
 <td><font color="#525252" size="2" face="Arial"> <table><tr><td><font color="#525252" size="4" face="Arial">1</font></td></tr></table> 2 </font></td>


The font of the “text2” block is replaced with a standard one. If you look at the resulting code, you can see:
 <td><font color="#525252" size="2" face="Arial"></font> <table><tr><td><font color="#525252" size="4" face="Arial">1</font></td></tr></table> 2 </td>


The actual closing font tag “wrap” above the table.

Text style in e-mail newsletters

Solution of the problem: use the span tag and prescribe the color, size and typeface through the style attribute. In the articles Layout of mailing lists: an inside view and the layout of mailing lists have already been said about this. So the “breakdown” of the font in the presence of nested tables is another argument in favor of the span.

2. Formatting links

The color and font of the text of the link can be forcedly changed (by setting styles for the link and font inside the link, or by wrapping the link in a span, which is more correct), underlining is, alas, not always. Appearance of mailing from this spoils. Binding of their styles was noticed when sending via Outlook 2007 and receiving in gmail.com, mail.ru, yandex.ru (below are examples with underscores, which should not be in style):

Link style in e-mail newsletters

Summary table

The style of text and links in e-mail newsletters


Summary


Layout mailing - the task is not the easiest. It is possible that there are other "stones" that we simply have not stumbled upon. We will be glad if you share any problems and solutions. The more information, the fewer errors in the future;)

And lastly, we made a common pivot table for the found “pitfalls”. You can see it here .

Source: https://habr.com/ru/post/114619/

More articles:


All Articles