Добрый день. Вчера снова сел за оптимизацию html письма, и наконец-то мне удалось получить одинаковый внешний вид в 4 лидирующих (в русскоязычном обществе) почтовых системах. Это Mail.ru, Яндекс Почта, Rambler и Gmail.
Все началось с того, что я решил разобраться в особенностях создания и верстки html письма. Мне хотелось понять, что же такого особенного в этом деле и почему возникло столько слухов о том, что это очень трудное мероприятие.
Почитав немного на Хабре и других ресурсах, я принялся за верстку первого в своей жизни html письма. Задача оказалась не из легких. Действительно, существует масса нюансов, которые необходимо учесть при верстке. А добивающим фактором для меня стала табличная верстка, о которой я ничего не знал. Но по-другому - нельзя. Дело в том, что почтовые сервисы либо вырезают все стили, либо воспринимают только некоторые из них.
Так, нельзя пользоваться margin, padding, float. То есть основными стилями для создания, например, 3 колоночного макета. Кроме того, это означат, что блочная верстка отпадает сама собой.
Для того, чтобы добавить отступы можно воспользоваться cellspacing - аналог margin и cellpadding - аналог padding. Значение задается цифрой в пикселях, но без указания размерности. Например, так:
cellpadding="30"
Но Яндекс, почему-то игнорирует cellspacing! Это создает много неудобств, но можно найти решение :) В какой-то момент, хотел бросить. Возмущает то, что мы, верстальщики и так вынуждены прибегнуть к верстке 90 годов, а они и в этом случае поддерживаю не все атрибуты. Вообщем хотелось, чтоб все вдруг забили на почту, тогда бы разработчики зашевелились и привели бы все к единому стандарту.
Представляете, я чуть не дошел до того, чтобы отступ задать прозрачной картинкой :) Но решение получилось не на много оригинальней, в одном из случаев пришлось поставить :)
Как я уже говорил, задать стили таким способом: <style> </style> - не очень хорошая идея, некоторые почтовые сервисы вырезают это тег. Поэтому, рекомендую дублировать все стили непосредственно в тег, которому необходимо что-то поменять:
<p><a style="color:#33BEE5 !important; text-decoration:none !important; font-size: 14px !important;" href="#" title="читать продолжение на smartlanding">Читать далее</a></p>
Некоторые почтовые программы вырезают тег font, поэтому используем font-family и font-size; И не употребляйте сокращенные записи свойств и цветов. Кстати, если кто не в курсе, то фоновый цвет задается так:
bgcolor="ffffff"
Еще, некоторые почтовые клиенты и сервисы стараются сами переопределить стили. Например, цвет ссылок и размер шрифта. Для того, чтобы этого не возникало пришлось прописывать !important:
<td scope="col" width="405"> <h1> <a style="color:#33BEE5 !important; text-decoration:none !important; font-size: 24px !important; font-weight: bold !important; line-height:1.5;" href="#"> Как закрыть внешние ссылки от индексации </a </h1> </td>
Для того, чтобы отобразить картинки в письме, я залил их на свой сайт и прописал пути к ним. Как видите, все прекрасно работает, но в некоторых почтовых клиентах может быть отключен показ картинок, об этом следует позаботиться.
Поставьте соответствующий фон под картинками и пропишите alt. Кроме того, не рекомендую использовать картинки с прозрачностью, так как The bat, не воспринимает их, и заливает область с картинкой черным фоном. (Смотрится - ужасно). Но я не стал менять картинки на jpeg.
Соблюдая эти правила мне удалось создать такое письмо:
Изменений практически никаких, по сравнению с прошлой версией, не произошло. Поменял пару значений и добавил одну пустую строку. Теперь, письмо одинаково хорошо смотрится в Gmail, Яндекс, Mail и Rambler почте. Аналогично в Mozilla Thunderbird. В Outlook и The bat структура письма сохраняется, но стили шрифтов теряются. Об этом я писал в статье о промежуточных тестах своего html письма. Надеюсь мои рекомендации помогут и вам сверстать красивое html письмо для вашей рассылки. А на сегодня - все. Пока!
4 комментария
Отличная статья про верстку письма.
Добрый день! Не понятно, что делать дальше с кодом и картинками. Куда их вставлять?
Здравствуйте. Некоторые почтовые клиенты и сервисы для рассылки почты позволяют создавать письма с использование html. Вот туда и вставлять код. А картинки лежат у вас на сервере.
Но письмо не адаптивное и не будет смотреться на мобильных, прийдется скролить