Наталья Устименко

Head of Direct Marketing

Оптимизация дизайна и вёрстки шаблонов email писем

Очень часто допускается ошибка, что для email рассылки нет единого шаблона писем, который бы отлично воспринимался всеми почтовиками. Неправильно свёрстанные письма могут не только снизить вашу репутацию, но и вызвать недоверие у получателей.

Создание шаблонов email писем

Хотите, чтобы ваши email рассылки были успешными? Выполните следующие рекомендации для шаблонов email писем и обеспечьте себе их доставляемость, а также увеличение конверсии за счёт прочтений.

Делайте шаблон простым

Оформление должно быть простым и в то же время запоминающимся. Иногда достаточно одного логотипа в шаблоне, чтобы уже быть узнаваемым для клиента и при этом не отвлекать от основной информации.

Дизайн шаблона писем от youTube

Слишком яркие и контрастные цвета могут только раздражать читателя и вызывать желание закрыть письмо. Чем меньше элементов в письме, тем проще проследить за их поведением при тестировании.

Придерживайтесь ширины 65 символов

Это гарантирует, что пользователи почтовых клиентов, таких как Outlook, смогут просматривать письма только в вертикальной панели предварительного просмотра, без горизонтальной прокрутки. Вы можете выбрать один из наших стандартных шаблонов, чтобы наверняка не прогадать с размером. Если вам захочется чего-то более изысканного, мы бесплатно можем подготовить персональный шаблон, с учётом всех ваших пожеланий.

Конечно, 65 символов могут быть разными по ширине. Но речь идет об ориентире, а не о супер правиле. Если в пикселях, то ограничтесь 500-600px.

Соблюдайте правила отписки

Необходимо включать опцию «отписаться» в каждом письме. Это не просто уважение к подписчикам, а обязательное условие для любой рассылки. Не менее важно указывать, что подписчик сам подписался на вашу рассылку.

Футер шаблона письма от ЛитРес

Некоторые иностранные сервисы рассылок даже не сохраняют шаблон письма, если он не включает в себя этот элемент. Если же вы забудете о ссылке отписки в системе eSputnik  — она подставится в письмо автоматически. Есть "умельцы" которые стараются сделать такую ссылку максимально незаметной, например, белой на белом. Но если подписчик не увидит этой ссылки, а получать писем не хочет, он пометит письмо как спам и всеравно получать их не будет. Но только кому от этого хуже?

Будьте внимательны с дизайнерскими шаблонами

Когда вы редактируете код шаблона, используйте программное обеспечение, например Sublime Text 2, Dreamweaver или блокнот. Программы вроде WYSIWYG обычно вставляют дополнительный код, что может отрицательно сказаться при просмотре в некоторых почтовых клиентах. Лучше прописывайте весь код вручную или, после использования программ, удаляйте всё лишнее. Опять же, в eSputnik есть встроенный реактор HTML со встроенной подсветкой синтаксиса и форматированием.

Добавляйте дизайн с таблицами

Хотя это не лучшие практики для веб-страниц, но для html писем они могут быть необходимы. Иногда это единственный  способ для корректного отображения вашего дизайна во всех почтовых клиентах, но всё же лучше обходится без больших уровней вложенных таблиц. Мы делаем это автоматически подгоняя код Вашего письма до близкого к идеальному.

Откажитесь от сложных тегов colspan и rowspan

Далеко не все почтовики правильно отобразят письма, в таблицах которых имеются теги colspan и rowspan — они будут вносить свои поправки в ваши шаблоны. Точнее сказать, одна программа покажет ваше письмо более-менее правильно — Lotus Notes. А у вас многие клиенты пользуются этим email клиентом? Вряд ли :)

Избегайте атрибутов тега

 

Некоторые почтовые клиенты игнорируют тег


. Если вы хотите, чтобы ваше письмо было с определённым цветным фоном, лучше добавьте таблицу с шириной 100% и выравниванием по центру, а основное содержание разместите во вложенной таблице.

 

Используйте встроенный CSS

Многие почтовики, как Gmail, Hotmail, Mail.ru  и т.д. будут вырезать из вашего кода теги, так что используйте встроенный CSS вместо этого.

К сожалению, поддержка CSS-свойств почтовыми клиентами не достигла уровня современных браузеров. Чтобы письмо правильно отображалось у всех получателей, используйте следующий набор поддерживаемых стилей:

Примеры встроенного CSS

Сейчас мы готовим материал, в котором дадим сравненительную характеристику о том, как все стили работают в наиболее популярных почтовых программах для России и Украины.

Избегайте сокращений в CSS

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

Например, сокращения в CSS :


 

 

Лучше заменить на:


 

 

Не используйте внешние CSS классы

Всё, что начинается с

4.0 из 5 на основе 106 оценок

Наталья Устименко

Head of Direct Marketing

Автор 300+ статей в блоге eSputnik и телеграм канала "Маркетинг ТОП". Спикер отраслевых конференций, преподаватель на курсах емейл-маркетинга.

Комментарии 0