Верстка рассылок

Плотно некоторое время занимался версткой рассылок недавно. Прямо как в прошлом оказался. 90-е года вернулись.

Первое правило. Забудьте о div-ах. Таблицы и только таблицы.

Есть такая табличка http://www.campaignmonitor.com/css/, которая показывает на сколько поддерживаются стандарты в е-mail клиентах. Правда если вы делаете рассылку еще и для русскоязычного сегмента (mail.ru, yandex.ru), то забудьте и о этих правилах.

Самый коварный оказался веб-интерфейс mail.ru. Все сss он форматирует и вы ничего хорошего в результате не получите.

И еще несколько правил которые для себя обозначил:

Для mail.ru на таблицах используйте class=”pad_null”

В самом css mail.ru есть это правило. Правило обнуляет все паддинги в таблицах. Хоть какое-то слабое утешение.

Верстаете для русскоязычного сегмента? Забудьте о padding

Паддинги задаются так. Берем прозрачный гиф. И с помощью распорок делаем все отступы.

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<table cellspacing="0" cellpadding="0" width="650">
<tr>
	<td colspan="3"><img src="tr.gif" width="650" height="18" alt="" /></td>
</tr>
<tr>
	<td><img src="tr.gif" width="74" height="1" alt="" /></td>
	<td width="100%">
		<font face="Segoe UI,Arial,Helvetica" size="2" color="#000000" style="font-size:14px; font-family:Segoe UI,Arial,Helvetica; line-height:18px">Наше кулинарное путешествие по Италии вместе</font>
	</td>
	<td><img src="tr.gif" width="40" height="1" alt="" /></td>
</tr>
<tr>
	<td colspan="3"><img src="tr.gif" width="650" height="30" alt="" /></td>
</tr>
</table>

Не забывайте о теге font

Все шрифтовое оформление надо задавать в теге .

1

<font face="Segoe UI,Arial,Helvetica" size="2" color="#000000" style="font-size:14px; font-family:Segoe UI,Arial,Helvetica; line-height:18px">Наше кулинарное путешествие по Италии вместе</font>

1

Пример <a href="#" style="color:#63ac1f; text-decoration:none"><font color="#63ac1f"><u>ссылки</u></font></a> в тексте