Нужно что-то посложнее – обратитесь к специалистам по созданию дизайна и верстке письма с нуля в HTML-редакторе. Рассказываем, как сделать email, который правильно откроется на любом устройстве. Какие обязательные требования к верстке нужно соблюдать.
Она предусматривает возможность одинаково успешного отображения электронного письма как на стационарном ПК, так и на любом мобильном устройстве. Сегодня эта тема является очень актуальной, так как более половины рассылок открываются и прочитываются со смартфонов или планшетов. Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений. К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки.
Верстка адаптивных элементов
Итак, подведем итог про особенности работы в HTML-редакторе. Адаптивная верстка – боль верстальщиков, потому что экраны бывают разные и нужно сделать верстку, которая будет максимально хорошо адаптироваться под каждый из них. Слева – код, который задает дизайн письма, справа – вид письма для получателя.
В рекламных рассылках дескриптор позволяет клиенту сразу перейти на сайт, не читая письмо полностью. Такая верстка позволяет сделать сложный дизайн письма, добавить интерактивные элементы и персональные подборки. Один минус — Mail.ru и Яндекс.Почта на этих сайтах нет.
Тестирование рассылки
Для верстальщиков в вебе таблицы — это пережитки 90-х годов. Но в email-рассылках только этот способ подходит для нормального отображения письма. Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная вёрстка — залог того, что письмо не «разъедется» и нормально отобразится на всех платформах. Но прежде чем отправить его покорять интернет, проконтролируем, как отображается верстка.
Вариант создания резиновой верстки в письмах — использовать оборачивающие дивы с указанием максимальной ширины max-width. Так как Outlook не поддерживает это правило, под него прописываются специальная инструкция-комментарий, в которой верстка писем заключена табличная верстка. Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text. Некоторые почтовые программы по умолчанию показывают картинки, а некоторые их блокируют.
«Честно» — авторская рассылка от редакции Unisender
Ширина контентной части, желательно, должна быть не больше 600 пикселей — это самый удобный размер для большинства устройств и легко подстраивается под каждое письмо. Если неправильно выстроить ширину, то письмо может «расплыться». Фон может быть абсолютно любого цвета и размера — тут никаких ограничений нет. Для верстки почтовых рассылок подходит доктайп 4.01 (поддерживает все актуальные элементы и атрибуты) и кодировка UTF-8 (наиболее распространенная общепринятая кодировка). Во второй части экрана письмо отобразится таким, каким его увидит получатель. В статье вас ждет пошаговая инструкция ― расскажем про все инструменты верстки, а также как самостоятельно собрать письмо в сервисе почтовых рассылок.
Аналогичного результата можно добиться еще одним способов – посредством гибридной и эластичной верстки email. В этом случае расположение контента изменяется с учетом экрана устройства, на котором он загружается. Чтобы сверстать рассылку, мало знать базовые правила HTML и CSS. Вы можете создать идеальное письмо и отправить его покорять интернет, но почтовым графическим движкам не понравится, как вписаны атрибуты, и все «полетит». Используйте стандартные системные шрифты для отображения текстов писем — это самое простое и надежное решение.
Это значит, что нельзя создать письмо с нестандартным оформлением. Это можно сделать только с помощью HTML-верстки, о которой мы поговорим в следующем разделе. Максимальный эффект достигается только при качественной работе профессионалов на каждой стадии.
- Пренебречь каким-то почтовым сервисом – потерять покупателя, а этого не хочет никто.
- Чтобы заинтересовать пользователя, письмо для рассылки должно быть красиво оформлено.
- Универсальные HTML-теги и атрибуты поддерживаются всеми почтовыми клиентами и браузерами.
- Например, в информационной рассылке не будет кнопок СТА.
- Эффективный email-маркетинг невозможен без анализа статистики писем.
У крупных почтовых провайдеров типа Gmail есть собственная статистика по каждому домену. В ней учитывается открытия, клики, информация о количестве недоставленных https://deveducation.com/ писем и жалоб на спам, общая репутация домена. В каждом постмастере нужно регистрироваться отдельно, самые крупные – Gmail и Mail.ru.