Разработка HTML шаблона письма — один из самых ключевых моментов в подготовке рекламной email рассылки. Ваше сообщение должно одинаково хорошо выглядеть в различных браузерах и почтовых клиентах, которые могут отличаться системой обработки HTML и CSS.

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

Поэтому сегодня хочу дать вам 20 советов как избежать наиболее частых ошибок при создании email шаблонов. Данные советы не претендуют на звание HTML справочника для email маркетологов, но, думаю, вам пригодятся.

Я не буду расписывать зачем использовать тот или иной пункт, если это очевидно. Если у вас возникнут вопросы – пишите в комментариях.

ФОРМАТИРОВАНИЕ

1. Создавайте письма вручную.

Дизайнерские программы для работы с HTML, такие как FrontPage, DreamWeaver, HomeSite и различные «WYSIWYG» (What You See Is What You Get) редакторы полны недостатков. Практически все из них вставляют лишний html код (особенно FrontPage), который далее может по-разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML.

1. Избегайте вложенных таблиц
2. Не используйте фоновых рисунков, практически во всех email клиентах они не отображаются
3. Располагайте картинки на своем сервере, вместо включения их в письмо

Некоторые имейл фильтры блокируют письма с вложенными рисунками. Также размер письма может быть значительным, поэтому оно может быть заблокировано сервером. При получении пользователем письма с сервера, оно может долго приниматься его почтовой программой, что, несомненно, может повлиять на его восприятие. Поэтому располагайте изображения на своем хостинге, а в письмо вставляйте ссылку на изображение.

1. Избегайте использования картинок 1х1 пикселей (для подгона размера элементов таблиц).
2. Не используйте CSS

CSS значительно упрощает работу со стилями для вебсайтов, но в случае HTMLписем это может повлиять на корректное отображение письма. Не используйте стили из отдельно прикрепленного файла. Наилучший вариант включить стили в headerчасть письма.

1. Не делайте ширину сообщений более 650 пикселей в ширину
   

В некоторых почтовых программах пользователям придется использовать горизонтальный скроллинг для чтения письма.

1. Размер сообщения должен быть не более 100 кб

USABILITY

1. Проверяйте HTML код на корректность. Для этого существует масса всевозможных отдельных утилит, встроенные чекеры в программах для работы с HTML и, естественно, W3C Validator.
2. Не используйте скрипты в письмах.

Письма могут быть заблокированы фильтрами.

1. Вставляйте в письмо ссылку на Web версию сообщения

В случае, если у пользователя не откроется ваше сообщение в корректном виде, дайте ему возможность прочитать его на вашем сервере. Для этого разместите ссылку на «Веб версию».

1. Используйте alt теги для изображений.

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

1. Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 10 см
2. Используйте горизонтальное расположение текста, не используйте вертикальное
3. Объедините в письме текст и HTML, лучше использовать цвета и стили вместо картинок.

ФУНКЦИОНАЛЬНОСТЬ

1. Вставляйте большое количество ссылок на информацию на вашем сайте.
2. Навигация по вашему email сообщению должна совпадать с типом навигации на вашем сайте.
3. Вставляйте функциональность вроде «Отправить другу» с осторожностью

Многие email программы могут некорректно отображать формы. Лучше использоваться ссылку на страницу вашего сайта, где находится форма «Отправить другу».

1. Добавьте возможность управления подпиской в письмо

Об этом я уже неоднократно писала.

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

Источник – https://www.epochta.ru/blog/articles/20-html-email-advices/