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

Для тега‹img›можно прописать стилевые правила текста, например colorили font-family, которые будут применяться к alt-тексту. Шаблоны можно редактировать и менять их дизайн под стиль своего бренда. На платформе рассылок Sendsay простой и удобный редактор кода. Чтобы в него попасть, кликните «Создать выпуск», выберите Email и среди предложенных вариантов по созданию письма – в HTML-редакторе. Если вы уже пользуетесь Email on Acid, его можно интегрировать в Sendsay. Тогда прямо в интерфейсе редактора будет доступен предпросмотр в разных клиентах, браузерах и устройствах – можно сразу увидеть ошибки в верстке и исправить их.

Rick интегрируется с CRM-системой, сервисами аналитики сайтов, чтобы изучить путь клиента. С помощью Rick можно отследить первые касания клиента с сайтом, когда он совершил покупку и какую роль в принятии решения сыграла рассылка. Компаниям нужно следить за тем, какие картинки и иконки добавляются в рассылки. За верстка писем незаконное использование медиафайлов полагается штраф, поэтому важно использовать визуал только с бесплатных стоков или покупать лицензию на коммерческое использование. Еще одна удобная программа для оформления email-писем и верстки в html, которая упрощает установку и оформление кнопок, изображений и ссылок.

HTML-верстка для email-рассылки

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

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

Оформление письма

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

Самый эффективный вариант проверки – использовать специальные сервисы, например, Litmus и Email on Acid. Они позволяют посмотреть, как будет выглядеть письмо в разных почтовиках, браузерах и устройствах. Рекомендуем скачивать шаблоны только с проверенных ресурсов.

Кнопки

Необходимо использовать изображения в формате JPEG, PNG, BMP и сжимать их для быстрой загрузки. Сервис предоставляет возможность бесплатной рассылки по базе до 200 подписчиков. Здесь размещают реквизиты, контакты, ссылки на соцсети, кнопку «Отписаться». Если у компании есть мобильное приложение, можно дополнить блок ссылками на скачивание. В 100–120 символах уточните, о чем пойдет речь, подкрепите интерес пользователя. Прехедер влияет на открываемость рассылок также как тема.

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

Как создать красивое письмо – инструкция по вёрстке

Чтобы потенциальный клиент мог прочитать письмо с любого девайса, попробуйте прописать медиа-запросы. Это команды, которые приспосабливают макет HTML-письма к экранам разного формата. Минус медиа-запросов — их поддерживают не все почтовые клиенты и сайты. Подробнее об этом способе адаптации писем рассказали https://deveducation.com/ на Хабре. В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему резиновой — мы просто прописываем нужные стилевые правила под определенные разрешения экрана.

Не забывайте размещать яркие кнопки призыва к действию. Соберите шаблон из элементов в редакторе или выберите готовый. Если у вас уже есть сверстанное письмо в html-файле, его можно загрузить на этом этапе. Дескриптор располагается над основной картинкой или текстом. Содержит логотип компании, ссылку на сайт или веб-версию письма, переход в разделы каталога.