HTML layout: think like a bug

Hello!

Continuing to work on the layout of mailing lists, I sometimes come across new bugs, which I actually want to talk about in this topic. If you do not provide a list of past articles, it will not be many, but nevertheless they deserve attention. There is also a bit of pleasant moments.

Cellspacing

As I wrote more than a year ago , it is worth zeroing all indents for tables, and where indents are needed, add new cells with a transparent .gif spacer. I decided to simplify my task and play around with basic indents for the table.
')
Task: arrange four pictures in the table - two on each row. There should be a 10px gap between the pictures.

Experimental solution:

<table cellpadding="0" cellspacing="10" style="border:#666666 1px solid;"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> 

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

Working solution:

 <table cellpadding="0" cellspacing="10" style="border:#666666 1px solid;"> <tr> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;"></td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td></td> <td>&nbsp;</td> <td></td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td></td> <td>&nbsp;</td> <td></td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td width="10" height="10"><img src="blank.gif" width="10" height="10" style="display:block;"></td> </tr> </table> 

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

Note 2: For the pictures, the display: block property is set so that an extra indent under the picture does not appear. It is also treated with a picture wrapper.

 <div style="line-height:0;"></div> 

But this option is not always suitable. Why? This is the fault of mail.ru. But this will be further.

Cellpadding

And here we have the good news. It is possible, at times, not to fence the extra spacers and use the classic Cellpadding for indents - no bugs were noticed. Working example based on the principle of the previous problem:

 <table cellpadding="10" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> 

Why did not use this option in the previous task? It's simple. Cellpadding gives a double indent inside the table relative to its outer part.

Mail.ru and the banal problem

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

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

Previously solved as follows:

 <table width="600" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <div style="line-height:0;"><img src="1450823215153325277735" width="200" height="100" alt=""/></div> </td> </tr> </table> 

I tried this:

 <table width="600" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <div style="line-height:0; text-align:center;"><img src="1450823215153325277735" width="200" height="100" alt=""/></div> </td> </tr> </table> 

Does not work.

If you don’t need to center the picture, it’s even easier:

 <table width="200" cellpadding="0" cellspacing="0" style="border:#666666 1px solid;"> <tr> <td align="center"> <img src="1450823215153325277735" width="200" height="100" alt="" style="display:block;"/> </td> </tr> </table> 

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

"Gif strut evil! You get into spam! ”- This is not so

Not once was the conversation that using .gif spacers is poorly perceived by gmail. Allegedly, he considers it a spamming move. Comrade rednaxi in this discussion also talked about this, citing an excerpt from the official recommendations of Google.

Some senders insert empty tracking pixels into their messages, allowing them to know when the recipient has opened the message. We strongly advise against including such pixels in a message for two reasons. First, Gmail does not display 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 result in sending your message to spam.

But conducting email campaigns to more than 300,000 recipients had no problems with spam using these most transparent .gifs. The only comment about them is the old versions of the BAT! paint transparent pixels black. If you do not care about this e-mail client, the gifs are inserted in the right color to blend into the background.

Well, since such a dance

Taking this opportunity, I will note one more pleasant phenomenon that does not concern the layout. The topic of unsubscribing from newsletters is utterly sucked, and finally works! At least I see it. More specifically, I often register on various sites and services, and constantly get a bunch of various mailings in my inbox. So, if earlier, to unsubscribe, half of the sites required additional authorizations, now it is really a rarity! In the latter case, on the sites to which I subscribed, but there are not a few of them. Molotok.ru comes out as a lame mare to the sound of an orchestra. This creation of the Runet still requires authorization to unsubscribe. But he has nothing in my spam for a year now.

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