Tips-n-Tricks верстки html рассылок в 2015 году

Давно не верстал html рассылки, а тут подвернулась задачка. Решил написать себе руководство-напоминание о том, как обойти основные грабли при верстке html рассылок.

На что стоит обратить внимание?

Никаких нестандартных шрифтов
Никакого подключения внешних стилей или использования тега style
Откажитесь от margin. Прием выравнивания блочного элемента по центру страницы
1
margin: 0 auto;

не работает в некоторых клиентах (например, в Outlook), которые вырезают все пользовательские объявления отступов margin, а для некоторых элементов (например, paragraph) выставляют значения верхнего и нижнего отступа 1.35em.

Общие стили пропишите в атрибут style тега body

<body
	style="
	    margin: 0;
	    padding: 0;
	    background: #ffffff;
	    font-family: Arial, sans;
	    font-size: 14px;
	"
>

Используйте в качестве каркасов таблицы и только таблицы

<table 
    class="pad_null" 
    width="600" 
    border="0" 
    cellpadding="0" 
    cellspacing="0" 
    style="
        border-collapse:collapse; 
        width: 600px; 
        background: #fff; 
    "
>

вот что по этому поводу пишут на Хабре

ещё раз — лэйаут на таблицах (никакого позиционирования средствами css, никаких float’ов, clear’ов и пр.), причём, mail.ru автоматически добавляет довольно внушительные padding’и для всех td, это также надо учитывать (например, если одна картинка порезана на куски и распихана по разным ячейкам — добиться их бесшовного соединения будет невозомжно)… но, хвала богам, мы можем использовать класс из стилей самого mail.ru, обнуляющий паддинги, он так и называется — pad_null! спасибо, rybyakov!;

Базовая ширина контентной части для html рассылки составляет 600px
1
2
3
4
5
6
<table
class="pad_null"
width="600"
border="0"
...
>
Вертикальные отступы можно делать при помощи пустых div-ов нужной высоты, например:

1	<div style="height: 30px;"></div>

или вспомнить старый прием с прозрачными GIF изображениями, например:

1	<img src="dummy.gif" alt="" width="100%" height="30">

при этом, сам файл dummy.gif может иметь размеры 1х1 пиксель

Нельзя использовать в качестве фона изображения

1	background: url(...) no-repeat;

Такой стиль не сработает. Вернее, он сработает в некоторых версиях онлайн сервисов, например, Gmail. но расчитывать на это css свойство для отображение картинок не стоит.

Нельзя задавать цвета в сокращенном шестнадцатеричном формате #fff работать не будет, нужно писать #ffffff

Обтекание текстом картинки не работает, для этого нужно использовать вложенную таблицу, например:

 <table>
 	<tr>
 		<td><img src="some.jpg" alt=""></td>
 		<td>
 			— Доктор, я не могу больше! Куда бы я ни посмотрел, 
 			о чём бы ни подумал, мне везде мерещится одно — шрифты, шрифты, шрифты!
	— Да не переживайте вы так. Сядьте, успокойтесь, выпейте чаю, 
	съешьте ещё этих мягких французских булок…
</td>
 	</tr>
 </table>

тестировать верстку во всех популярных почтовых онлайн сервисах, но я бы ограничился таким набором:
- Gmail
- Yandex
- MailRu

протестировать верстку в десктопных клиентах, например Microsof Outlook, Mail Mac OS и др.
протестировать верстку в мобильных клиентах и обратить внимание на клиенты от Gmail под Android и родной iOS (возможно прийдется уменьшить ширину с 600px до ~500-550px)