Pull to refresh

Верстка почтовых рассылок

CSS *Email layout *
Sandbox
Tutorial
Привет, Хабр!

В этой статье я бы хотел поделиться своими познаниями в кроссбраузерной и кроссмейлерной верстке почтовых рассылок. Под словом кроссмейлерность подразумевается — корректное отображение верстки во всех почтовых клиентах. Я считаю, что статья вполне актуальна, в виду того, что на хабре эта тема несколько раз освещалась, но некоторые нюансы были неточными, а другие просто устарели. По долгу службы я долгое время занимался версткой html расылок по всему миру, и приведенные ниже правила будут касаться следующих почтовых клиентов и веб-интерфейсов: MS Outlook 2003-2010, mail.ru, rabmler почта, Яндекс почта, Gmail, Yahoo! Mail (Classic), Thunderbird 2.0-3.0, Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5.

Основа


Блочная верстка? Прийдется об этом забыть. Раз уж мы нацелились на крайне широкую целевую аудиторию подписчиков, возвращаемся к лучшим традициям HTML 3.2, только немного хуже. В качестве "каркаса" нашего письма будет выступать таблица. "Внезапно!", скажете вы? Но это так. Теперь главная особенность, которая касается не только таблиц, а всех элементнов верстки: необходимо обнулять все внешние и внутренние отступы у таблиц, списков, абзацев — вобщем у всего, у чего могут быть отступы. Почему? Все из-за того, что у каждого почтового клиента свой взгляд на то, какие отступы по умолчанию имеют элементы. Но самое печальное то, что некоторые клиенты вовсе игнорируют margin и padding. Казалось бы, делов то — прописываем в head:
<style>
*{
padding:0;
margin:0;
}
</style>

Но и тут не все так просто. Некоторые разработчики почтовиков люди сообразительные, они понимают, что письма нужны для текста, а не для разноцветных рюшечек, и просто напросто отключили поддержку стилей, в приведенной выше конструкции. А это значит, что стили будет необходимо прописыать inline для каждого отдельно взятого элемента. Следовательно у каждой таблицы нужно обнулять атрибуты cellpadding и cellspacing, а так же коллапсировать таблицу. У абзацев и списков обнулять ничего не нужно, потому что мы их не будем использовать, мы будем их имитировать.

Что делать с отступами


Складывается малоприятная картина — мы обнуляем все отступы. Как быть дальше? Тут к нам приходит на помощь blank.gif — тот самый однопиксельный прозрачный .gif, благодаря которому мы и будем строить нашу верстку. Орудовать прийдется этим малым, а так же таблицами и еще раз таблицами. Дальше приведу пример двухколоночной верстки в абзацами и списками.
<table cellpadding="0" cellspacing="0" width="800" align="center" style="border-collapse:collapse;">
<tr>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- эта колонка выступает в роли отступа --> 
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
</table>
</td>
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- эта колонка выступает в роли отступа --> 
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;">
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
<tr><td valign="top" style="height:20px;"><img src="blank.gif" style="height:20px;"></td></tr>
<tr><td valign="top" align="center" style="width:40px;">•</td><td>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</td></tr>
</table>
</td> 
<td style="width:20px;"><img src="blank.gif" style="width:20px;"></td> <!-- эта колонка выступает в роли отступа --> 
</tr> 
</table>

В результате этого кода получается таблица в две колонки. В первой колонке мы видим имитацию абзацев текста, в правой — имитацию списка типа ul. Все отступы в примере выполнены при помощи задания высоты/ширины ячейки таблицы, а также задания ширины/высоты прозрачного однопиксельного изображения. Этот blank дает нам "эффект подпорки", благодаря которому в верстке ничего не поедет.


Форматирование текста


Как уже было сказано, общие стили для всего файла не используются и оформление необходимо задавать inline для каждого отдельного элемента. О теге font нужно забыть вовсе. Причина кроется в том, что перед массовой рассылкой исходный код может попасть в руки коварного визуального редактора, который переломает все font на span, причем на свой лад, что неблагоприятно скажется на картине в целом. Правило с тегом font не критично, но обязательно в большинстве случаев, так как, например, в больших компаниях html-технолог лишь отвечает за конструкцию кода, но никак не за последующее его путешествие к адресату, где по пути нас и поджидают визуальные редакторы сервисов массовой рассылки.
Оформлять текст через атрибут style тега p так же нелогично, так как прийдется обнулять отступы абзаца, в то время как мы решили абзацы имитировать. Поэтому за стилизацию у нас отвечает span и только span. В атрибуте style нашего оформителя мы указываем такие параметры, как: font-family, font-size и color — обязательно в формате #xxxxxx или фактическом, например red. Не все почтовики адекватно воспринимают цвет типа #990, такие конструкции просто игнорируются.
Наклонность, начертание и прочее можно указывать через стили inline, но так же не будет ошибкой воспользоваться такими тегами, как b, i, u. strong и др. — тут разницы нет.


Гиперссылки


Прежде всего о форматировании ссылок. Каждую отдельно взятую ссылку необходимо обернуть в span, указав для него все необходимые стили, и в тоже время продублировать все те же самые стили в атрибут style самой ссылки. Ссылка так же может находиться посреди текста, и для того, чтобы не быть многословным, просто приведу пример того, как нужно оформить ссылку в тексте.
<span style="font-family:Arial; font-size:12px; color:#404040;">Neque porro quisquam est qui</span> <span style="font-family:Arial; font-size:12px; color:#0077c0;"><a style="font-family:Arial; font-size:12px; color:#0077c0;" href="%%url%%">dolorem ipsum quia</a></span> <span style="font-family:Arial; font-size:12px; color:#404040;">dolor sit amet, consectetur, adipisci veli</span>

Для всех ссылок устанавливаем значение _blank атрибута target, мы же не хотим открывать страницы в окне почтовика? Такое наблюдается далеко не везде, но лучше перестраховаться.


Изображения


Об изображениях скажу не много, но это также немаловажно. Для всех изображений необходимо установить ширину и высоту равной фактической. Это можно реализовать через атрибуты width и height, а так же через css в атрибуте style тега img — разницы нет. Искажения в размерах допускать не стоит, т.к. результат может оказаться плачевным для большинства почтовиков.
Хотелось бы заметить, что в том случае, если картинка является ссылкой, то для изображения нужно обнулить border через стили или атрибут border тега img, а для самой ссылки стоит установить text-decoration:none; иначе картинка может оказаться подчеркнутой.


Фон


Фон в виде цвета можно указывать для тела документа, таблицы и ее ячеек в формате #xxxxxx или фактически, например — red. Причина этого объяснялась выше. Фон в виде картинок — табу. Не железное, конечно, но все же рекомендую отказаться. Большинство клиентов и интерфейсов просто это не поддерживают. Тоже самое касается абсолютного позиционирования чего либо, а так же скриптов — забудьте об этом.


Итог


Подведя итоги к вышеописанному можно сказать, что верстка писем будет пострашнее всеми нами обожаемого Internet Explorer 6, хотя тут дело не в танцах с бубном, а скорей в дотошности и терпении. Следовательно если вы действительно любите верстать, вас не напрягает монотонная работа, вы не пренебрегаете внимательностью и соблюдаете приведенные в статье правила, ваши подписчики будут довольны. Удачи в работе и спасибо за внимание!

UPD: В опровержение этого комментария рекомендую к прочтению мой следующий пост.
Tags: htmlhtml 3.2версткаcssрассылкикроссбраузерностьпочтаверстка почтовых рассылок
Hubs: CSS Email layout
Total votes 150: ↑146 and ↓4 +142
Comments 81
Comments Comments 81

Popular right now