Также есть дополнительный функционал для подбора синонимов, поиска тавтологии или неблагозвучных сочетаний вроде канцеляризмов и штампов. Иногда компьютерная страница содержит столько всего, что адаптировать это на мобильную версию нереально или очень сложно. Стратегия Mobile First предлагает не переводить ПК-версию на мобильную. Философия метода строится на том, что сначала мы прорабатываем мобильный интерфейс, а потом уже версию для ПК. Эта стратегия не бюджетная, обычно она вписывается в долгосрочную маркетинговую стратегию.
Можно делать сложный и красивый дизайн, которого не будет ни у кого другого, добавить форму заказа, игру, опрос, тест и прочие интерактивные элементы. Также с помощью HTML-верстки создаются важные для email-маркетинга письма – подборки с контентом, который создается автоматически с учетом поведения подписчика. Адаптивный дизайн в современном маркетинге – это обязательное условие успешной e-mail рассылки. Одинаково удобное «прочтение» на любом виде устройств, гибкий дизайн, который подстраивается под размер экрана, оптимальное расположение всех кнопок и ссылок. Чтобы понять, как он выглядит и работает, посмотрите пример ниже. В наше время простым электронным письмом, представляющим однообразную страницу с текстом, сложно кого-то заинтересовать.
Шаблоны и сценарии
Многие клиенты и сервисы не поддерживают (или не полностью поддерживают) CSS, которые нужны для DIV-верстки. Некоторые почтовые программы не поддерживают загрузку фоновых изображений (например, MS Outlook). В этом случае email-маркетолог отправляет письмо на свои почтовые ящики, а затем верстка писем смотрит корректность верстки с разных почтовых клиентов и устройств. Не все привычные элементы HTML-кода подойдут для верстки рассылок. Универсальные HTML-теги и атрибуты поддерживаются всеми почтовыми клиентами и браузерами. Используйте их, чтобы письмо везде отображалось одинаково.
Подробнее можно почитать в нашей статье «Гид по дизайну в электронной рассылке». В шаблонах блоки письма уже расставлены определенным образом, https://deveducation.com/ их можно отредактировать. Но вы можете самостоятельно собрать рассылку из элементов в блочном редакторе, если нужно создать свою структуру.
Макет письма
Верстайте адаптивные письма таким образом, чтобы они корректно отображались на тех устройствах и в тех программах, которыми пользуется большинство вашей целевой аудитории. Вы можете вставить сюда свой код, отредактировать его или оставить без изменений. Готовый код можно сохранить как файл, шаблон или отправить текстовую копию по электронной почте. В разных сервисах рассылок свои инструменты, но работают они по схожим принципам.
Верстка письма — это процедура его формирования, целью которой является корректное отображение для всех пользователей. Следуйте описанным выше советам и вы сможете создать качественный шаблон письма, не совершая распространенных ошибок, даже если это ваша первая рассылка. При создании рассылок часто забывают о так называемом тексте превью или прехедере. Прехедер — это небольшой кусочек текста, который подтягивается из тела сообщения, и обычно он отображается под полями с именем отправителя и темой сообщения. Гифки поддерживаются большинством почтовых клиентов, однако Outlook версий с 2007 до 2013 их не поддерживает — программа просто показывает первый кадр.
Как сделать письмо для email-рассылки
Поэтому перед отправкой обязательно нужно проверять корректность настроек и верстки. В редакторе есть набор шаблонов под разные инфоповоды, фильтры для затемнения фона, множество шрифтов и картинки с бесплатных фотостоков. Еще одна незаменимая программа для email-маркетинга для обработки фото, свето- и цветокоррекции, создания шаблонов и графических элементов. Можно работать на разных слоях, делать ресайзы баннеров и многое другое. Для разработки стратегии рассылки понадобятся майнд-карты. Его добавление гарантирует, что адресат получит полноценный контент, независимо от того, на каком устройстве письмо будет открыто.
Перед отправкой проверьте, как письмо будет выглядеть в разных почтовых клиентах. Для этого используйте сервисы litmus.com или mail-tester.com. У почтовых клиентов есть ограничения по размеру верстки писем для email-рассылки – не больше 100 Кб. Если его превысить, то письмо может некорректно отображаться или не отправиться вовсе.
Редактор форм от сервиса рассылок Sendsay
Также разработчики почтового сервиса Google лишь недавно анонсировали поддержку встроенного CSS и media queries. Не используйте в качестве поясняющего текста URL — такие ссылки могут выглядеть как вредоносные копии сайтов, а письмо — как мошенническое. Но во время создания email-рассылки — это самый удачный метод для нормального отображения письма. Не стоит использовать JavaScript, Flash и Active X — зачастую такие письма отправляются в спам. А также для корректного отображения пользуйтесь универсальными тегами и атрибутами.
- Чтобы вас добавили, ваша почта/сайт должны соответствовать куче требований Гугла.
- В наше время простым электронным письмом, представляющим однообразную страницу с текстом, сложно кого-то заинтересовать.
- Веб-дизайнер Массимо Кассандро публиковал на SitePoint полезную инструкцию по созданию адаптивных версий email-сообщений.
- Нужно что-то посложнее – обратитесь к специалистам по созданию дизайна и верстке письма с нуля в HTML-редакторе.
Покажите человеку, что он открыл письмо не зря, содержание стоит внимания. Создавая макет для HTML-верстки, подумайте, насколько сложно реализовать вашу задумку. Например, чем больше блоков разных размеров, тем сложнее.
