Верстка HTML писем: думай как баг

Всем привет!

Продолжая работать над версткой почтовых рассылок, порой натыкаюсь на новые баги, о которых, собственно и хочу рассказать в этом топике. Если не приводить список из прошлых статей, то получится не много, но тем не менее они заслуживают внимания. Так же есть чуточку приятных моментов.

Cellspacing

Как я уже писал более года назад, стОит обнулять все отступы для таблиц, и там где нужны отступы — добавлять новые ячейки с прозрачной .gif распоркой. Я решил упростить себе задачу и поиграться с базовыми отступами для таблицы.

Задача: расположить четыре картинки в таблице — по две на каждой строке. Между картинками должен быть зазор в 10px.

Экспериментальное решение:

<table cellpadding="0" cellspacing="10" style="border:#666666 1px solid;">
<tr>
<td>Картинка</td>
<td>Картинка</td>
</tr>
<tr>
<td>Картинка</td>
<td>Картинка</td>
</tr>
</table>

Итог: провал! В gmail и Яндекс.почте (другие даже не стал проверять) отступы ведут себя как психопаты. Везде и по разному.

Рабочее решение:

<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>

Примечание: Ширину и высоту необязательно задавать для пустых ячеек — они сами подстроятся благодаря .gif распоркам и ячейкам с шириной и высотой. Для картинок разумеется надо много чего задавать, но это я опустил в данном примере, т.к. это не по существу. Все необходимое есть в предыдущих топиках.

Примечание №2: Для картинок установлено свойство display:block для того, чтобы не появлялся лишний отступ под картинкой. Так же это лечится оберткой картинки в

<div style="line-height:0;">картинка</div>

Но этот вариант не всегда подходит. Почему? В этом виноват mail.ru. Но об этом будет дальше.

Cellpadding

А вот тут нас ожидает хорошая новость. Можно, порой, не городить лишние распорки и использовать для отступов классический Cellpadding — багов замечено не было. Рабочий пример по принципу предыдущей задачи:

<table cellpadding="10" cellspacing="0" style="border:#666666 1px solid;">
<tr>
<td>Картинка</td>
<td>Картинка</td>
</tr>
<tr>
<td>Картинка</td>
<td>Картинка</td>
</tr>
</table>

Почему не использовал этот вариант в предыдущей задаче? Все просто. Cellpadding дает двойной отступ внутри таблицы относительно ее внешней части.

Mail.ru и банальная проблема

Ребята определенно молодцы. Не только переписали интерфейс почты, но кодировочку в UTF перегнали. И правильно, долой KOI-8! Но и тут не обошлось без происшествий. Появился маленький баг, которого раньше не было.

Задача: расположить картинку(или ссылку с картинкой) в ячейке, которая шире картинки. Отцентрировать картинку. Не допустить появления небольшого отступа между нижней границей ячейки и самой картинкой.

Раньше решалось так:

<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>

Пробовал так:

<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>

Не работает.

Если картинку центрировать не нужно, то еще проще:

<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>

Раньше первый вариант работал везде. Теперь работает везде кроме mail.ru почты. Общался на эту тему с Андреем Суминым — руководителем разработки клиентской части в mail.ru, и он порекомендовал использовать тег center для выравнивания. Пока не успел протестировать этот способ во всех клиентах, но ничто не мешает использовать этот вариант вместе с вышеуказанными одновременно. Так же Андрей сообщил, что парсер очень сильно кушает css в верстке, но бояться нечего. Все описанные мной приемы работают.

«Gif распорки зло! Попадешь в спам!» — Это не так

Не раз был разговор о том, что использование .gif распорок плохо воспринимается gmail. Якобы он считает это спамерским ходом. Товарищ rednaxi в этом обсуждении так же об этом говорил, приводя выдержку из официальных рекомендаций гугла.

Некоторые отправители вставляют в свои сообщения пустые пиксели слежения, позволяющие им узнать, когда получатель открыл сообщение. Мы настоятельно не рекомендуем включать такие пиксели в сообщение по двум причинам. Во-первых, Gmail по умолчанию не показывает изображения, поэтому пиксели слежения не смогут достоверно сообщить вам о том, что пользователь прочел ваше сообщение. Во-вторых, пиксели слежения часто применяются спамерами, поэтому их использование может привести к отправке вашего сообщения в спам.

Но проводя почтовые кампании на более, чем 300000 получателей проблем со спамом не было при использовании этих самых прозрачных .gif'ов. Единственное замечание относительно них — старые версии the BAT! окрашивают прозрачные пиксели в черный цвет. Если вам не плевать на этот почтовый клиент, то гифы вставляются нужного цвета, чтоб сливались с фоном.

Ну, раз такая пляска

Пользуясь случаем отмечу еще одно приятное явление, не касающееся верстки. Тема отписки от рассылок обсосана донельзя, и наконец работает! По крайней мере я это вижу. Если конкретнее, то я частенько регистрируюсь на различных сайтах и сервисах, и постоянно получаю кучу всевозможных рассылок в свой ящик. Так вот — если раньше для отписки половина сайтов требовала дополнительных авторизаций, то теперь это действительно редкость! Во сяком случае на сайтах, на которые я подписан, а их не мало. В качестве хромой кобылы под звуки оркестра выходит Molotok.ru. Это творение рунета по прежнему требует авторизацию для отписки. Но ничего он у меня уже год в спам попадает.

UPD: 1 February 2012 background-image is now supported in Gmail. С первого февраля этого года в gmail появилась поддержка свойства background-image. Ура!