Layout mailing
Hi, Habr!
In this article I would like to share my knowledge in the cross-browser and cross-mailer layout of mailing lists. The word crossmeulernost means the correct display of the layout in all mail clients. I believe that the article is quite relevant, since this topic was covered several times in Habré, but some nuances were inaccurate, while others were simply outdated. On duty, I was engaged in the layout of html mailings all over the world for a long time, and the following rules will apply to the following email clients and web interfaces: MS Outlook 2003-2010, mail.ru, rabmler mail, Yandex mail, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.
Block layout? I'll have to forget about it. Since we are aiming at a very wide target audience of subscribers, we return to the best traditions of HTML 3.2, only a little worse. As the "frame" of our letter will be the table. "Suddenly!", You say? But it is so. Now the main feature that concerns not only tables, but all elemental layouts: it is necessary to zero all external and internal indents for tables, lists, paragraphs - in general, everything that may have indents. Why? All due to the fact that each email client has its own view on which indents have elements by default. But the saddest thing is that some customers ignore margin and padding at all. It would seem that business - we register in the head :
But here it is not so simple. Some postal developers are quick-witted people, they understand that letters are needed for text, not for multi-colored ryushechek, and simply simply turned off support for styles in the above design. This means that the styles will need to be written inline for each individual element. Therefore, each table needs to reset cellpadding and cellspacing attributes, as well as collapse the table. Nothing is needed for paragraphs and lists, because we will not use them, we will imitate them.
')
A rather unpleasant picture is emerging - we reset all indents. What to do next? Here comes to the rescue blank.gif - the one-pixel transparent .gif, thanks to which we will build our layout. It will have to wield this small, as well as tables and tables again. Further I will give an example of two-column layout in paragraphs and lists.
As a result of this code, the table is obtained in two columns. In the first column we see an imitation of paragraphs of the text, in the right - an imitation of a list of the ul type. All indents in the example are made with the help of setting the height / width of the table cell, as well as setting the width / height of the transparent single-pixel image. This blank gives us a "backup effect", thanks to which nothing will go in the layout.
As already mentioned, common styles for the entire file are not used and the design needs to be set inline for each individual element. About the font tag you need to forget at all. The reason lies in the fact that before mass distribution, the source code can fall into the hands of an insidious visual editor that breaks all the font on the span , and in its own way, which adversely affects the picture as a whole. The rule with the font tag is not critical, but it is necessary in most cases, since, for example, in large companies, the html technologist is only responsible for the design of the code, but not for his subsequent journey to the addressee, where the mass media visual service editors are waiting for us mailing.
Making the text through the style attribute of the p tag is also illogical, since it will have to reset the paragraph indents, while we decided to imitate the paragraphs. Therefore, we are responsible for styling span and only span . In the style attribute of our designer, we specify such parameters as: font-family , font-size and color — necessarily in the format #xxxxxx or actual, for example red . Not all mailers perceive color type # 990 adequately, such constructions are simply ignored.
Inclination, style, etc. can be specified through inline styles, but it will also not be a mistake to use tags such as b , i , u . strong and others - there is no difference.
First of all, about formatting links. Each individual link must be wrapped in a span , indicating all the necessary styles for it, and at the same time duplicate all the same styles in the style attribute of the link itself. The link can also be in the middle of the text, and in order not to be verbose, just give an example of how you need to make a link in the text.
For all links, set the _blank attribute to the target attribute, but we don’t want to open pages in the mailer window? This is observed far from everywhere, but it is better to be safe.
I will not say much about the images, but this is also important. For all images it is necessary to set the width and height equal to the actual. This can be done through the width and height attributes, as well as through the css in the style attribute of the img tag - there is no difference. Distortion in size should not be allowed, because The result can be deplorable for most mailers.
I would like to note that if the picture is a link, then for the image you need to nullify the border using the img tag's styles or the border attribute, and for the link itself you should set text-decoration: none; otherwise, the picture may be underlined.
The background in the form of a color can be specified for the body of the document, the table and its cells in the format #xxxxxx or in fact, for example - red . The reason for this was explained above. Background in the form of pictures - taboo. Not iron, of course, but still I recommend to refuse. Most clients and interfaces simply do not support this. The same goes for absolute positioning of something, as well as scripts - forget about it.
Summing up the above, we can say that the layout of letters will be more terrible than all of us adored by Internet Explorer 6, although this is not a matter of dancing with a tambourine, but rather of meticulousness and patience. Therefore, if you really like to typeset, monotonous work does not bother you, you do not neglect attentiveness and follow the rules given in the article, your subscribers will be satisfied. Good luck in your work and thank you for your attention!
UPD: In rebuttal of this comment, I recommend reading my next post.
In this article I would like to share my knowledge in the cross-browser and cross-mailer layout of mailing lists. The word crossmeulernost means the correct display of the layout in all mail clients. I believe that the article is quite relevant, since this topic was covered several times in Habré, but some nuances were inaccurate, while others were simply outdated. On duty, I was engaged in the layout of html mailings all over the world for a long time, and the following rules will apply to the following email clients and web interfaces: MS Outlook 2003-2010, mail.ru, rabmler mail, Yandex mail, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.
The foundation
Block layout? I'll have to forget about it. Since we are aiming at a very wide target audience of subscribers, we return to the best traditions of HTML 3.2, only a little worse. As the "frame" of our letter will be the table. "Suddenly!", You say? But it is so. Now the main feature that concerns not only tables, but all elemental layouts: it is necessary to zero all external and internal indents for tables, lists, paragraphs - in general, everything that may have indents. Why? All due to the fact that each email client has its own view on which indents have elements by default. But the saddest thing is that some customers ignore margin and padding at all. It would seem that business - we register in the head :
<style> *{ padding:0; margin:0; } </style> But here it is not so simple. Some postal developers are quick-witted people, they understand that letters are needed for text, not for multi-colored ryushechek, and simply simply turned off support for styles in the above design. This means that the styles will need to be written inline for each individual element. Therefore, each table needs to reset cellpadding and cellspacing attributes, as well as collapse the table. Nothing is needed for paragraphs and lists, because we will not use them, we will imitate them.
')
What to do with indents
A rather unpleasant picture is emerging - we reset all indents. What to do next? Here comes to the rescue blank.gif - the one-pixel transparent .gif, thanks to which we will build our layout. It will have to wield this small, as well as tables and tables again. Further I will give an example of two-column layout in paragraphs and lists.
<table cellpadding="0" cellspacing="0" width="800" align="center" style="border-collapse:collapse;"> <tr> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- --> <td> <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;"> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> </table> </td> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- --> <td> <table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;"> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> <tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr> <tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr> </table> </td> <td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- --> </tr> </table> As a result of this code, the table is obtained in two columns. In the first column we see an imitation of paragraphs of the text, in the right - an imitation of a list of the ul type. All indents in the example are made with the help of setting the height / width of the table cell, as well as setting the width / height of the transparent single-pixel image. This blank gives us a "backup effect", thanks to which nothing will go in the layout.
Text formatting
As already mentioned, common styles for the entire file are not used and the design needs to be set inline for each individual element. About the font tag you need to forget at all. The reason lies in the fact that before mass distribution, the source code can fall into the hands of an insidious visual editor that breaks all the font on the span , and in its own way, which adversely affects the picture as a whole. The rule with the font tag is not critical, but it is necessary in most cases, since, for example, in large companies, the html technologist is only responsible for the design of the code, but not for his subsequent journey to the addressee, where the mass media visual service editors are waiting for us mailing.
Making the text through the style attribute of the p tag is also illogical, since it will have to reset the paragraph indents, while we decided to imitate the paragraphs. Therefore, we are responsible for styling span and only span . In the style attribute of our designer, we specify such parameters as: font-family , font-size and color — necessarily in the format #xxxxxx or actual, for example red . Not all mailers perceive color type # 990 adequately, such constructions are simply ignored.
Inclination, style, etc. can be specified through inline styles, but it will also not be a mistake to use tags such as b , i , u . strong and others - there is no difference.
Hyperlinks
First of all, about formatting links. Each individual link must be wrapped in a span , indicating all the necessary styles for it, and at the same time duplicate all the same styles in the style attribute of the link itself. The link can also be in the middle of the text, and in order not to be verbose, just give an example of how you need to make a link in the text.
<span style="font-family:Arial; font-size:12px; color:#404040;">Neque porro quisquam est qui</span> <span style="font-family:Arial; font-size:12px; color:#0077c0;"><a style="font-family:Arial; font-size:12px; color:#0077c0;" href="%%url%%">dolorem ipsum quia</a></span> <span style="font-family:Arial; font-size:12px; color:#404040;">dolor sit amet, consectetur, adipisci veli</span> For all links, set the _blank attribute to the target attribute, but we don’t want to open pages in the mailer window? This is observed far from everywhere, but it is better to be safe.
Images
I will not say much about the images, but this is also important. For all images it is necessary to set the width and height equal to the actual. This can be done through the width and height attributes, as well as through the css in the style attribute of the img tag - there is no difference. Distortion in size should not be allowed, because The result can be deplorable for most mailers.
I would like to note that if the picture is a link, then for the image you need to nullify the border using the img tag's styles or the border attribute, and for the link itself you should set text-decoration: none; otherwise, the picture may be underlined.
Background
The background in the form of a color can be specified for the body of the document, the table and its cells in the format #xxxxxx or in fact, for example - red . The reason for this was explained above. Background in the form of pictures - taboo. Not iron, of course, but still I recommend to refuse. Most clients and interfaces simply do not support this. The same goes for absolute positioning of something, as well as scripts - forget about it.
Total
Summing up the above, we can say that the layout of letters will be more terrible than all of us adored by Internet Explorer 6, although this is not a matter of dancing with a tambourine, but rather of meticulousness and patience. Therefore, if you really like to typeset, monotonous work does not bother you, you do not neglect attentiveness and follow the rules given in the article, your subscribers will be satisfied. Good luck in your work and thank you for your attention!
UPD: In rebuttal of this comment, I recommend reading my next post.
Source: https://habr.com/ru/post/112163/
All Articles