Как делать email-рассылки и не косячить: практические советы

Html-вёрстка писем в платформах рассылок

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

UniSender

При создании письма выбираете html-редактор или загрузку своего кода.

Можно загрузить письмо с кодом из файла в форматах rar, zip, 7z и html или web-страницу с письмом — там уже есть все стили, нужные картинки и другие файлы, относящиеся к рассылке, которые подгрузятся автоматически. В интерфейсе после загрузки архива письмо будет таким, каким его увидят подписчики. Если нужно что-то поправить в коде письма (добавить или убрать теги, ссылки и так далее), переходим в источник.

Попадаем в html-редактор с цветовой подсветкой, вносим необходимые правки.

В UniSender можно вставить свой код — если вы в нём уверены и править не собираетесь.

MailChimp

В интерфейсе создания письма выбираем вариант Code your own → Paste in code.

Дальше мы переходим на экран загрузки кода.

SendPulse

На этой платформе также можно загрузить письмо файлом (html, htm, zip, rar и 7z), ссылкой или кодом.

Так выглядит макет письма после загрузки:

А ещё у SendPulse есть упрощённый html-редактор, который работает по принципу текстового редактора. И выглядит так же.

Marketo

Задаём имя письма и выбираем black template. После этого в редакторе нажимаем Edit Code. После чего вставляем код и можем сохранять его с помощью кнопки Save.

Klaviyo

Создаем новую кампанию, выбираем Or code your own html content.

После чего откроется редактор кода, куда можно скопировать html и нажать Save в правом верхнем углу.

Пользуйтесь на здоровье!

Подписывайтесь на наш Телеграм-канал «Маркетинг за три минуты», где мы делимся интересными материалами про онлайн-маркетинг в формате постов-трёхминуток. А если вы хотите поболтать и поделиться своими мыслями, приходите к нам в Чат Солдат.

Что нужно знать в конце?

• Соотношение изображений и текста в письмах должно быть 30/70 %
• Не выделяйте текст в слишком яркие цвета (#ff0000, #4CFF00 и т.п.). О том, что задавать цвет шрифта, близкий к фону не стоит и упоминать – это избитый и давно не работающий трюк.
• Слишком большое количество текста, написанного в верхнем регистре (с учетом text-transform: uppercase;) или повторение нескольких восклицательных знаков подряд, так же увеличивают вероятность попадания в спам.
• Не пишите много текста большим шрифтом. Рекомендуемый размер font-size не более 12pt=16px и не менее 7pt=11px
• Ну и конечно валидный HTML/CSS ещё никто не отменял.

Дизайн хедера

Хедер — это блок вверху письма, над главной картинкой. Здесь обычно размещают логотип, ссылки на разделы сайта, контактную информацию. Хедер помогает идентифицировать письмо: читатель видит имя бренда в поле «от кого», а открыв письмо, видит логотип:

Идентификация бренда в поле отправителя и хедере письма

Как не надо

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

Но если разместить еще и ссылки на соцсети, как в примере ниже, есть риск отвлечь внимание читателя от основного сообщения. Плюс ссылки в несколько строк занимают много места:

Перегруженный хедер письма

2. Картинки плохого качества в хедере портят внешний вид письма и создают впечатление любительского дизайна рассылки:

Плохое качество картинки в шапке письма

Как надо

1. Выделите главную информацию, которая соотносится с темой письма. Например, в рассылке сервиса покупки билетов Busfor.ua есть логотип с подписью и ссылка для подбора билетов:

2. Добавьте в хедер настроения, используя праздничную или сезонную атрибутику. Небольшие обновления делают рассылку интереснее для постоянных читателей. Например, магазин одежды в своей новогодней рассылке добавил в логотип шапку Санта-Клауса:

Новогодний атрибут в хедере письма

Сбор информации

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

Все сведения, которые мы собираем о Вас:

• Ваш адрес электронной почты (email);
• Ваши анкетные данные (имя; номер телефона);
• ту информацию, которую Вы сами решите передать нам через формы ввода/обратной связи;

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

Внедряем CSS

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

Как добавить CSS в нашу рассылку? Есть 3 варианта.

1. Заключить тег style внутри head или body. Наверно, это один из самых простых и популярных способов, который прекрасно работает как в письмах, так и на страницах сайтов. Но главные его минут – это перегруженность кода, в результате чего становится сложно найти нужный элемент и отредактировать его. В общем, если хотите облегчить себе дальнейшую работу, второй и третий способы специально для вас.

2. «Прячем» стили CSS в отдельном файле и даем на него ссылку в HTML-документе с помощью тега link. Простой способ, стили подгружаются довольно быстро, основной код остается «прозрачным», понятным.

3. Размещаем стили в нашем письме инлайн, т.е. встраиваем его в структуре HTML-документа в качестве атрибута. Да, это неудобно. Да, для простоты придется воспользоваться дополнительной программой или сервисом, внедряющей стили в код. Но неоспоримым преимуществом такого способа является то, что такие стили будут читаться на любом устройстве или приложении.

Сравним использование плагина для Фигмы с другими способами вёрстки

Родительская таблица

В любом случае, максимальную ширину письма следует ограничивать.Для большинства веб интерфейсов достаточно указать параметр max-width, который и решит данную задачу. Но Outlook данный параметр игнорирует. Поэтому для версий Outlook 2003-2013, а также Lotus следует все обернуть в таблицу созданную специально для него, а также чтобы исключить проблем в устаревшей версии Safari, необходимо добавить div с ограничением максимальной ширины:

    <!-->    <table width="600" border="0" cellspacing="0" cellpadding="0">      <tr><td><!-->      <div style="max-width:600px;">        ...      </div>        <!-->     </td></tr>    </table><!-->

А также следует у родительской таблицы задать класс, ширину которого описать в области head. При этом следует прописать параметр для мобильных устройств:

<style type="text/css">
@media only screen and (max-device-width: 600px), only screen and (max-width: 600px) { 
table{
    width:100% !important;
    max-width:700px;
}
}
.table600{
    width:600px;
}
</style>

Как вы видите, это несколько противоречит тому, что было написано в предыдущей статье об использовании style. Дело в том, что почти все веб-интерфейсы игнорируют данный параметр (вернее — вырезают), а вот мобильные почтовые клиенты по-умолчанию  интерпретируют корректно (приложение Почта на Android до версии 5.0 и приложение Mail на iOS).Это нам дает некоторую свободу в использовании дополнительных плюшек для мобильных устройств.

Изображения в дизайне письма рассылки

Как не надо

1. Нельзя делать рассылку, состоящую только из одних картинок или сплошной картинкой. По результатам исследования, 43% пользователей Gmail читают почту с отключенными изображениями. Содержание письма должно оставаться понятным, если в нем будет только текст.

2. Светлый и неконтрастный шрифт читается плохо. Такой текст при наложении на пеструю фотографию будет сливаться с фоном:

Белый текст на светлой фотографии читается плохо

3. Не используйте изображения больше необходимых размеров. Например, если ширина блока 300 px, то не нужно брать для него картинку шириной 1200 px.

Как надо

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

Чтобы оптимизировать изображения для писем можете воспользоваться этими сервисами: Squoosh, TinyPNG.

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

3. Увеличивайте размер иконок в два раза, чтобы у пользователей iPhone и Macbook с Retina экраном они отображались в хорошем качестве. Например, если в рассылку нужно добавить иконку размером 70×20, на сервер ее загружают в размере 140×40. А потом уменьшают, указав в коде атрибут .

Важно! Учтите, если уменьшаете картинки таким образом, то меняете только ее размер, но не вес. Картинка с большим весом может плохо грузиться на устройстве

Поэтому обращаем ваше внимание еще раз: оптимизируйте изображения перед тем, как добавить их в письмо

4. Делайте картинки кликабельными. Если вы посмотрите на карту кликов своей рассылки, то заметите, что читатели часто нажимают на картинки. Поэтому указывайте для картинок ссылки на нужные разделы сайта.

5. Выбирайте картинки хорошего качества — на бесплатных фотостоках или сделанные вами.

Адаптивная верстка

На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них.

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

Система подстраивания письма под размер экрана реализована с помощью стилей и тега center, который находится сразу после основной таблицы письма. Получается, что весь контент оборачивается тегом center:

Если по горизонтали находится больше одного блока и эти блоки должны стать друг под другом при изменении ширины, то их необходимо оборачивать в тег span со стилями:

Общая структура разметки будет выглядеть следующим образом:

Таким образом у нас есть общая таблица размером в 600px и внутри два блока по 300px (300px + 300px = 600px). Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер 2 становится под блоком номер 1.

Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега center и span подставлять обычные таблицы:

Можно использовать правило (a)media для адаптивной верстки, но от этого способа мы пока отказались из-за малой поддержки почтовых клиентов этого свойства.Статья взята с сайта: http://habrahabr.ru/

Типы вёрсток

рассылке триггерных писем

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

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

Мастер-шаблон для банка

1. Описательный блок с картинками

Можно использовать для разных целей: описать условия акции или вставить фотографии сотрудников с именем и должностью.

2. Описательный блок с иконками

Этот блок часто используется для описания этапов, например, как в примере — «Что ждет участников квеста». По сути выполняет ту же роль, что и предыдущий блок.

3. Блок с шагами

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

4. Таблицы

Банки часто отправляют клиента сводки по карте или по счету. Лучше всего такие материалы смотрятся в формате таблицы.

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

Если таблица большая, можно её сократить и добавить ссылку на скачивание.

У любого банка есть дебетовые или кредитные карты, так что без этого блока никак.

Блок на случай, если банку надо рассказать о своих преимуществах.

7. Блок со статьями

Если банк ведёт блог, надо предусмотреть разные варианты блоков с новостями и постами из блога. Мы предложили несколько вариантов.

Первый — с графическими картинками и кнопками. Здесь мы ограничены количеством строк: чтобы смотрелось гармонично, в разных новостях они должны быть равны:

Второй вариант — с ссылками в тексте. Мы отказались от кнопок, чтобы не перегружать новость и добавить больше текста. Якорный объект — картинка:

В третьем варианте мы не используем картинки и поэтому не ограничены в количестве символов. Разное количество текста смотрится гармонично:

Подойдёт для важной информации: например, когда начинается или заканчивается срок действия карты

9. Блок с баннером

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

Общий доступ к личной информации

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

Адаптивная верстка

• Около половины всех писем в мире открывают с мобильных устройств, и эти цифры растут.
• По данным проекта Email Client Market Share доля iPhone на рынке почтовых клиентов составляет 31%, у iPad 11%, а у Android 4% — это больше 45%, а ведь есть еще Windows Mobile и другие ОС.
• Исследователи из MailChimp обнаружили, что число кликов на ссылки в адаптивных письмах за последнее время выросло почти на 15% — с 2,7 до 3,1%.

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

Одноколоночное письмо на десктопе и смартфоне

<table cellspacing="0" cellpadding="0" border="0" width="600">
	<!-- тут текст письма -->
</table>
@media screen and (max-width:480px) {
	table {
		width: 100%!important;
	}
}

Также нужно будет адаптировать размеры изображений и размер шрифта  — и все.

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

Сделать это можно с помощью вложенных таблиц. Считается, что этот подход — более надежный способ добиться поддержки различных почтовых клиентов. Главная «фишка» здесь в использовании атрибута для расположения таблиц по горизонтали. У каждого элемента должна быть конкретная ширина, и сумма ширин всех элементов должна равняться ширине контейнера:

С уменьшением ширины экрана устройств необходимо изменять размер контейнера и обеспечивать стопроцентную ширину таблиц и колонок:

table {
	width: 600px;
}
table {
	width: 180px;
}
table {
	width: 30px;
	height:30px;
}
@media only screen and (max-width: 480px) {
	table {
		width: 420px!important;
	}
table {
		width: 100%!important;
	}
}

Массимо Кассандро залил этот код на Codepen — это специальная песочница, в которой можно протестировать пример, подставляя собственные данные.

Эта техника позволяет добиться того, что письмо будет отображаться в большинстве почтовых клиентов. Возможно вы заметили странное написание селекторов класса вместо привычного — это специальный хак для работы с почтовым сервисом Yahoo. Дело в том, что он некорректно работает с CSS с медиазапросами и данный хак позволяет игнорировать эти стили.

Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text.

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

table {
	width: 600px;
}
table td {
	height:100px;
	width:200px;
}
@media only screen and (max-width: 480px) {
	table {
		width: 440px!important;
	}
table td {
		width:100%!important;
		display: block!important;
	}
}

Здесь можно поиграть с примером кода на Codepen.

В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему резиновой — мы просто прописываем нужные стилевые правила под определенные разрешения экрана. Плюс этот способ не сработает в мобильных почтовых клиентах, таких как Яндекс.Почта и Mail.ru под iOS и Android, которые не поддерживают медиазапросы.

Дизайн шаблона email рассылки — общие рекомендации

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

Как не надо

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

2. Не используйте корпоративный цвет как основной, если он слишком яркий. Кажется логичным оформить шапку и плашки в цветах компании. Но если такого цвета слишком много, письмо тяжело читать:

Слишком много красного цвета в шаблоне письма

3. Не оформляйте текст картинкой, потому что:

• картинка может не отобразиться;
• сложно менять макет — придется просить дизайнера переделывать картинку;
• если на картинке промокод, читатель не сможет его скопировать и вставить, нужно перенабирать;
• кроме того, если оформить картинкой все письмо, почтовые сервисы могут отправить его в спам.

4. Не делайте фон пестрым, иначе сложно читать основной текст:

Пестрый фон отвлекает от текста письма

5. Не пренебрегайте профессиональной версткой. Неаккуратно сверстанное письмо портит впечатление о компании. Кроме того, письма, набранные Caps Lock, кричащим цветом и разными шрифтами, чаще отправляют в спам почтовые сервисы. В примере ниже дизайн письма выглядит неаккуратно: нет выравнивания по одному краю, используется три размера шрифта, красный цвет в призыве к действию и нагромождение ссылок:

Форматирование письма выглядит слишком пестрым

Как надо

1. Разработайте корпоративный шаблон в стилистике сайта или на основе брендбука. Это не только работает на узнаваемость компании, но и повышает доверие.

3. Создайте несколько шаблонов для разных типов писем. Благодаря этому вы сэкономите время при запуске рассылок. Например, издательство «МИФ» использует два типа шаблона. Первый — для дайджестов:

Шаблон для дайджеста статей

Второй шаблон — для промо-рассылок:

Шаблон для промо-рассылки

4

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

Цветовые акценты в корпоративном шаблоне

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

Шаблон с основной информацией в первом экране прокрутки

7. Чередуйте текстовые блоки и картинки. Это нужно для лучшей доставляемости писем, когда вы только начинаете делать рассылки и у вашего домена еще не сформирована положительная репутация отправителя. Есть советы придерживаться соотношения 80:20 или 60:40. То есть чтобы в письме было 80% текста и 20% картинок.

Гармоничная верстка рассылки издательства «МИФ»

Чек-лист по тестированию верстки:

• Валидация. Проверяем код на валидность с помощью редактора Brackets с расширением HTMLHint
• Автоматическое тестирование. Тестируем верстку с помощью специальных сервисов, которые эмулируют работу разных почтовиков: Litmus, Emailonacid.
• Ручное тестирование. Отправляем сверстанное письмо на тестовых список адресов разных почтовых провайдеров. Проверяем веб и мобильную версии на разных устройствах и в разных почтовиках.

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

Однако если при тестировании всплыл какой-то баг, не стоит впадать в панику. Большинство проблем, с которыми ко мне неоднократно обращались клиенты ExpertSender, легко чинятся.

Мастер-шаблон для интернет-магазина

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

Мы сделали варианты с иконками и без. И текст, и иконки можно менять.

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

4. Товарная сетка

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

Когда колонки две или три, текст хорошо ложится в блоки и можно добавить дополнительную информацию о товаре (материал, размер, вес).

Такую сетку используют для различных триггеров и регулярных рассылок. Она подходит для динамического контента, когда товары подтягиваются автоматически.

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

Также нужны варианты отображений цен со скидками и без, если такие товары предусмотрены на сайте.

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

6. Товарная сетка с одним товаром

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

8. Блок с корзиной

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

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

9. Блок с категориями товаров

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

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

10. Второстепенный баннер

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

Как видите, каждый мастер-шаблон индивидуален, но при этом есть чёткие правила. Главное, понять, что потребуется в рассылках именно вам.

И так, подведем небольшой итог по данной статье:

Верстая адаптивное письмо следует помнить:

1. параметры ширины должны быть указаны в процентах (если блок не является «плавающим»)
2. максимальная ширина блока, вместе со всеми внешними рамками и отступами не должна превышать 320px
3. Outlook не воспринимает блочную структуру, для него нужно прописывать спец.теги, где описывать табличную структуру.
4. Outlook.com(hotmail) плавающие блоки интерпретирует как инлайновые. поэтому не следует оставлять лишние пробелы и символы переноса строки
5. приложение Gmail не поддерживает медиа-запросы (также как приложение от mail.ru, yandex.ru и большинство других)

Похожие записи:

Как открыть фермерское хозяйство Альфа банк москва для юридических лиц Секта успеха: как «бизнес-молодость» зарабатывает миллионы долларов на эмоциях the village сходил на тренинг «бизнес-молодости», пообщался с её основателями и клиентами, чтобы разобраться в секрете популярности компании Бесплатные курсы с трудоустройством — бесплатный факультет «нескончаемый» больничный лист: что делать работодателю, если работник болеет много и часто Как изменить название ооо. пошаговая инструкция