HTML HTML layout: think like a bug

Hello!

Continuing to work on the layout of mailing lists, sometimes I come across new bugs, which I actually want to talk about in this topic. If you do not give a list of past articles, you will not get much, but nevertheless they deserve attention. There are also a few pleasant moments.

Cellspacing

As I wrote more than a year ago , it is worth zeroing out all the indentation for tables, and where indentation is needed, add new cells with a transparent .gif spacer. I decided to simplify my task and play with the basic indentation for the table.

Task: arrange four pictures in a table - two on each row. There should be a gap of 10px between the pictures.

Experimental Solution:

Картинка
Картинка
Картинка
Картинка

Bottom line: failure! In gmail and Yandex.mail (others didn’t even check) indents behave like psychopaths. Everywhere and in different ways.

Working solution:

 
 
 
 
 
Картинка
 
Картинка
 
 
Картинка
 
Картинка
 
 
 
 
 

Note: It is not necessary to set the width and height for empty cells - they will adjust themselves thanks to .gif spacers and cells with width and height. For pictures, of course, you need to ask a lot of things, but I omitted this in this example, because it is not to the point. Everything you need is in the previous topics.

Note 2: The display: block property is set for pictures so that an extra indentation does not appear under the picture. It is also treated with a picture wrapper in

картинка

But this option is not always suitable. Why? This is the fault of mail.ru. But more on that later.

Cellpadding

And here the good news awaits us. You can, at times, not make extra spacers and use the classic Cellpadding for indentation - no bugs have been noticed. Working example according to the principle of the previous task:

Картинка
Картинка
Картинка
Картинка

Why didn't you use this option in the previous task? Everything is simple. Cellpadding gives a double indentation inside the table relative to its outer part.

Mail.ru and the commonplace problem

The guys are definitely great. Not only did they rewrite the mail interface, but they overtook the encoding in UTF. And right, down with KOI-8! But here it was not without incident. There was a small bug that was not there before.

Task: place a picture (or a link with a picture) in a cell that is wider than the picture. Center the picture. Prevent a small indent between the bottom border of the cell and the picture itself.

Previously solved as follows:

Tried like this:

Does not work.

If you do not need to center the picture, then it’s even easier:

Previously, the first option worked everywhere. Now it works everywhere except mail.ru mail. Communicated on this topic with Andrei Sumin , the development manager of the client part in mail.ru, and he recommended using the center tag for alignment. So far I have not had time to test this method in all clients, but nothing prevents us from using this option together with the above at the same time. Andrei also said that the parser eats css very much in layout, but there is nothing to be afraid of. All the techniques I have described work.

"Gif struts evil!" You will get into spam! ”- This is not so.

More than once there was a conversation that the use of .gif struts is poorly perceived by gmail. Allegedly, he considers this a spamming move. Comrade rednaxi also talked about this in this discussion, citing an excerpt from Google ’s official recommendations .

Some senders insert blank tracking pixels in their messages to let them know when the recipient opened the message. We strongly discourage the inclusion of such pixels in a message for two reasons. Firstly, Gmail doesn’t show images by default, so tracking pixels will not be able to reliably tell you that the user has read your message. Secondly, tracking pixels are often used by spammers, so using them can lead to sending your message as spam.

But conducting email campaigns for more than 300,000 recipients, there were no problems with spam when using these most transparent .gifs. The only comment on them is the old versions of the BAT! color transparent pixels black. If you don’t give a damn about this email client, then the gifs are inserted in the right color to merge with the background.

Well, since such a dance

I take this opportunity to note another pleasant phenomenon that does not relate to layout. The topic of unsubscribing from newsletters is completely sucked, and finally it works! At least I see it. More specifically, I often register on various sites and services, and constantly get a bunch of all kinds of mailings in my mailbox. So - if earlier half of the websites required additional authorization for unsubscribing, now it’s really rare! In any case, on the sites to which I am subscribed, but there are not a few of them. Molotok.ru comes out as a lame mare to the sounds of the orchestra. This creation of Runet still requires authorization to unsubscribe. But he’s been in spam for a year now.

UPD: February 1, 2012 background-image is now supported in Gmail. Since February 1 of this year, support for the background-image property has appeared in gmail. Hurrah!