Crutches at layout of mailings
Hi% username%!
I am glad that my previous topics about the layout of mailings were useful to you. If I am right, I would also like to tell you about crutches in the layout, which were revealed by me in collaboration with colleagues from Unisender . I also allow myself to repeat a couple of times, for the simple reason that this topic will be a cheat sheet for the crutch maker of the layout of mailings. Well under cat.
As it has already become accepted in the topics about mailings, I cite a bibliography for those who have missed something:
As already stated, the Gmail parser has the ability to underline image links. It is treated simply by canceling the decoration of the link:
')
Very strange bug, but it has a place to be. It consists in duplicating the BR tags in a block according to this principle. If we have a design:
then the parser interprets it like this:
Well, we will treat it like this:
in this case dubbing will not occur, and we carry out the transfer of the lines by placing each line in a separate block.
Note: in the codes, I replaced the brackets with the BR tags, because the habraparser eats these tags.
This mailer is even more mysterious than mail.ru. The parser chooses some links in the letter by the unknown principle and converts them from:
Here is such a thing:
which leads to the fact that the link is not drawn by inline merges, but by styles of the yshortcuts class of the span tag. Breeding is simple - you can break the rule for making styles in head. In the document header, we declare the class yshortcuts, and duplicate the link styles there. For especially non-attentive ones, I repeat - the class is assigned to the span tag, and not the link itself.
The problem is that all the links turn red when hovering. Probably - Yandex corporate identity. Head styles do not solve the problem. Crutch did not find, but I will be grateful to the one who will share the decision.
And in the comments user note shows a really working solution to the problem.
I also wrote about this, but I repeat that it is necessary to collapse tables to eliminate indentation between cells, which can adversely affect the appearance of a letter with an abundance of colors or graphics. The design is simple:
I personally did not come across it myself, but I often received information that the old versions of Bat did not hawk transparent .gif files. Or rather, just paint over transparent pixels with black. As a solution to the problem - the use of hyphae with the replacement of transparent pixels with the background color. The same applies to single-pixel .gif spacers - we make it not transparent, but with the background color of the place where it is inserted into the document.
If you do not specify the width and height of the images, the user will not see alt'ov on unloaded images. In addition, compliance with the established image size does not break the layout when disconnecting images.
On the one hand, sometimes crutches are besyat, but on the other hand, there are not so many of them, and it will not be a huge task to observe all of the above with layout. Thank you for your attention, and good luck with your work!
I am glad that my previous topics about the layout of mailings were useful to you. If I am right, I would also like to tell you about crutches in the layout, which were revealed by me in collaboration with colleagues from Unisender . I also allow myself to repeat a couple of times, for the simple reason that this topic will be a cheat sheet for the crutch maker of the layout of mailings. Well under cat.
As it has already become accepted in the topics about mailings, I cite a bibliography for those who have missed something:
- Layout mailing
- With the layout of mailing lists everything is not so bad
- Layout mailing: view from the inside
- Layout mailing: debriefing
- Layout e-mail newsletters - "pitfalls". Part one. Pictures
- Layout e-mail newsletters - "pitfalls". Part two
Gmail
As already stated, the Gmail parser has the ability to underline image links. It is treated simply by canceling the decoration of the link:
')
<a href="" style="text-decoration:none;" target="_blank"><img src="__" border="0" width="" height="" alt=""/></a> Mail Mail.ru
Very strange bug, but it has a place to be. It consists in duplicating the BR tags in a block according to this principle. If we have a design:
<span style="font-family:Arial; font-size:12px; color:#666666;">Lorem[br/]ipsum[br/]dolor[br/]sit amet</span> then the parser interprets it like this:
<span style="font-family:Arial; font-size:12px; color:#666666;">Lorem[br/]ipsum[br/]dolor[br/]sit amet[br/][br/][br/]</span> Well, we will treat it like this:
<div><span style="font-family:Arial; font-size:12px; color:#666666;">Lorem</span></div> <div><span style="font-family:Arial; font-size:12px; color:#666666;">ipsum</span></div> <div><span style="font-family:Arial; font-size:12px; color:#666666;">dolor</span></div> <div><span style="font-family:Arial; font-size:12px; color:#666666;">sit amet</span></div> in this case dubbing will not occur, and we carry out the transfer of the lines by placing each line in a separate block.
Note: in the codes, I replaced the brackets with the BR tags, because the habraparser eats these tags.
Yahoo Mail
This mailer is even more mysterious than mail.ru. The parser chooses some links in the letter by the unknown principle and converts them from:
<a href="" target="_blank" style="font-family:Arial; font-size:12px; color:#666666;"></a> Here is such a thing:
<a href="" target="_blank" style="font-family:Arial; font-size:12px; color:#666666;"><span class="yshortcuts"></span></a> which leads to the fact that the link is not drawn by inline merges, but by styles of the yshortcuts class of the span tag. Breeding is simple - you can break the rule for making styles in head. In the document header, we declare the class yshortcuts, and duplicate the link styles there. For especially non-attentive ones, I repeat - the class is assigned to the span tag, and not the link itself.
Yandex Mail
The problem is that all the links turn red when hovering. Probably - Yandex corporate identity. Head styles do not solve the problem. Crutch did not find, but I will be grateful to the one who will share the decision.
And in the comments user note shows a really working solution to the problem.
Outlook Express
I also wrote about this, but I repeat that it is necessary to collapse tables to eliminate indentation between cells, which can adversely affect the appearance of a letter with an abundance of colors or graphics. The design is simple:
<table style="border-collapse:collapse;">...</table> The Bat!
I personally did not come across it myself, but I often received information that the old versions of Bat did not hawk transparent .gif files. Or rather, just paint over transparent pixels with black. As a solution to the problem - the use of hyphae with the replacement of transparent pixels with the background color. The same applies to single-pixel .gif spacers - we make it not transparent, but with the background color of the place where it is inserted into the document.
Out of format
If you do not specify the width and height of the images, the user will not see alt'ov on unloaded images. In addition, compliance with the established image size does not break the layout when disconnecting images.
Total
On the one hand, sometimes crutches are besyat, but on the other hand, there are not so many of them, and it will not be a huge task to observe all of the above with layout. Thank you for your attention, and good luck with your work!
Source: https://habr.com/ru/post/115962/
All Articles