Промежуточные тесты html письма в разных почтовых сервисах

html письмоДобрый день, друзья. Я продолжаю пытаться сделать кроссбраузерное html письмо. В прошлой статье я сверстал простенькое письмо без основных стилей и сегодня, я хочу протестировать его в разных почтовых сервисах и программах, для того, чтобы понять, что нужно подправить под конкретный сервис. По мере тестирования я буду править стили и отписывать где, как и почему письмо отображается не корректно.

Пока разбирался с темой стилей для писем, я выяснил, что некоторые почтовые сервисы, все же нормально воспринимают СSS, заданный через <style></style>, но они все равно должны прописываться для каждого элемента и поддерживаются далеко не все свойства - это существенно облегчает работу, но полностью положиться на способ задания стилей таким образом - нельзя. Поэтому следует предусмотреть вариант того, что они не срабатывают.

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

Html структура письма значительно изменила свой вид, по сравнению с той, которая была в первой статье. Я окончательно запутался и решил воспользоваться Dreamweaver (ом), для того, чтобы было нагляднее работать с таблицами.

Начну с плохого. Мне так и не удалось сделать нормальное письмо для Яндекса. Знаю, что многие и читать дальше не будут, но если кто-то может сказать в чем причина, буду очень признателен. Дело в том, что атрибут cellspacing - Яндекс игнорирует. Можно изменить на cellpaddin, но тогда получается немного не такой отступ. Можно изменить подход к реализации данного письма и тогда все получится (позже обязательно займусь этим). В конце статьи расскажу подробнее. В остальном результат довольно неплохой.

Второй вариант письма, также выложу ниже. Но пока можете не качать. Я все равно буду его переделывать. Приступим...

Письму я добавил следующие стили:

<style>
 body, h1 {margin:0; padding:0;}
 img {display:block;}
 #textBody span{font-family: "Arial", "Verdana", sans-serif; font-size: 14px;}
 #wrapper p{color:#ffffff; text-decoration:none; font-family: "Arial", "Verdana", sans-serif; font-size: 14px;}
 #zagolovok h1 a{color:#33BEE5; text-decoration:none; font-family: "Arial", "Verdana", sans-serif; font-size: 24px; font-weight: bold;}
 #textBody a{color:#33BEE5 !important; text-decoration:none; font-family: "Arial", "Verdana", sans-serif; font-size: 14px;}
 #pageLink a{color:#33BEE5; text-decoration:none; font-family: "Arial", "Verdana", sans-serif; font-size: 14px;}
 #wrapper p a{color:#ffffff; text-decoration:none; font-family: "Arial", "Verdana", sans-serif; font-size: 14px;}
</style>

Письмо приобрело следующий вид:

html письмо для рассылки

Я скачал программу Mozilla Thunderbird для того, чтобы иметь возможность вручную разослать письмо на разные почтовые ящики. Конечно, при рассылке вам лучше иметь базу подписчиков, связанную с сервисом почтовой рассылки. Как-нибудь я обязательно рассмотрю подробнее несколько подобных сервисов, ведь не будете вы 10000 подписчикам вручную отправлять письма.

Итак, я отправил свое письмо на gmail, yandex и mail почту, и, как и ожидал, получил кривую верстку. Начну исправлять по порядку.

Открыв письмо в Mail.ru и Gmail  -  я обнаружил, что текст ссылок изменил цвет и размер. Выставились стили, предлагаемые почтовыми сервисами по умолчанию. Так заголовок выглядел в Mail.ru:

как сделать html шаблон письма

Исправить проблему удалось задав стили непосредственно в теге "a" для каждой из ссылок и добавив "!important"

 <a style="color:#33BEE5 !important; text-decoration:none !important; font-size: 24px !important; font-weight: bold !important" href="#">Как закрыть внешние ссылки от индексации</a>

Аналогичная ситуация произошла с текстом, заключенным в теги "p" и "span". Проблема решилась тем же способом. После этого письмо стало отлично смотреться в Mail.ru и Gmail.

Также отлично письмо смотрится в Mozilla Thunderbird:
html письмо в Mozilla Thunderbird

В Outlook 2013 и the bat структура письма осталась качественной, но повлиять на стили шрифтов и ссылок - не получилось, в общем стили - не применились.

Outlook 2013:

html письмо в outlook 2013

The bat:

html письмо в the bat

Пока не знаю, как повлиять на эти вещи, но эксперимент продолжается. Возможно есть какие-то настройки в самих программах, но я специально, пока, не трогал их и тестировал верстку на программах с настройками по умолчанию. В the bat я заметил еще одну особенность, вместо прозрачности он заливает область картинки черным цветом. Необходимо это учитывать при верстке.

А теперь хочу поговорить о Яндекс почте. Смотрите, как отображается в интерфейсе Яндекс, тоже самое письмо, что и в примерах выше:

html письмо в яндекс

Видите? Все прилипло к правому краю и нет отступов между строками. Это то, о чем я говорил в начале статьи. Не работает "cellspacing", но зато работает "callpadding" - это немного иное свойство, которое дает чуточку другой результат. Но если изменить верстку с учетом "cellpading", то можно добиться хорошего результата в популярных почтовых сервисах. Я проверял "cellpadding" - оно отлично работает в gmail, yandex и mail. В любом случае тесты продолжаются и скоро будет новая статья на эту тему.

А на сегодня - все. Всем пока!

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

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

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

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

  1. Мария

    Дмитрий, вы становитесь популярным! случайно забрела на сайт уже второй раз, причём из поиска) Тоже интересна тема рассылок… поделись если есть инфой… нужен сервис для теста шаблона письма желательно бесплатный или за небольшую плату…

  2. Юрий

    Дмитрий! Что бы верстка письма отображалась во всех почтовых сервисах корректно, нужно стили прописывать в самих тегах. Для того, что бы изменить шрифт, нужно прописывать в теге . Я сделал небольшое видео на эту тему. Если интересно, то приглашаю на свой блог. А остальное вы сделали все правильно.

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