Верстка красивого html письма | Финальная версия

верстка красивого html письмаДобрый день. Вчера снова сел за оптимизацию 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.

Соблюдая эти правила мне удалось создать такое письмо:

Красивое html письмо

Изменений практически никаких, по сравнению с прошлой версией, не произошло. Поменял пару значений и добавил одну пустую строку. Теперь, письмо одинаково хорошо смотрится в Gmail, Яндекс, Mail и Rambler почте. Аналогично в Mozilla Thunderbird. В Outlook и The bat структура письма сохраняется, но стили шрифтов теряются. Об этом я писал в статье о промежуточных тестах своего html письма. Надеюсь мои рекомендации помогут и вам сверстать красивое html письмо для вашей рассылки. А на сегодня - все. Пока!

Скачать исходник

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 3

  1. Олег

    Отличная статья про верстку письма. А кто делает дизайн письма, нашел отличную статью для них http://css-_html.ru/stati/tak-sozdaetsya-dizajn-htlm-pisma/

  2. Юлия

    Добрый день! Не понятно, что делать дальше с кодом и картинками. Куда их вставлять?

    • dimadv7

      Здравствуйте. Некоторые почтовые клиенты и сервисы для рассылки почты позволяют создавать письма с использование html. Вот туда и вставлять код. А картинки лежат у вас на сервере.

Добавить комментарий