HTML-шаблон для писем: опыт ExpertSender

До написания статьи у нас был шаблон, состоящий из ~100 строк кода, который использовался для каждого емейла. Мы редко вносили какие-то обновления в него, потому что новые возможности в вёрстке писем случаются не так часто. Он содержал множество лайфхаков, которые помогали адекватно отображать письма на всех почтовиках, включая Outlook, выравнивать их по центру в Gmail, убирать отступы в iOS и т.д.

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

Важные теги

Теперь я расскажу, что в итоге оставил в шаблоне и для чего.

<meta charset="UTF-8">

Объясняет браузеру / почтовику, при помощи какой кодировки ему необходимо рендерить символы. Если не указать, то вместо контента у вас могут отображаться странные символы вместо букв.

<title>${MessageSubject}</title>

Уточню, что ${MessageSubject} сработает только в ExpertSender. Это динамическая переменная, подтягивающая тему сообщения в title, который может потребоваться в веб-версии письма.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Благодаря этому мета-тегу будет работать адаптация на мобильных устройствах. Он указывает браузеру / приложению, что один пиксель устройства равен одному пикселю вёрстки, но это очень грубое объяснение. Подробнее можно почитать вот тут.

Для тега body мы указываем внешние и внутренние отступы по нулю. Полностью это поможет убрать отступы только в стандартной программе почты для iOS, а в остальных почтовых программах вроде Яндекс.Почта, Gmail, Mail.ru или Outlook  всё равно останутся небольшие отступы по бокам, с которыми на данный момент бороться не получается.

<meta name="x-apple-disable-message-reformatting">

Старые версии стандартной программы почты для iOS-устройств отдаляли превью у ваших писем. Как мы видим, тут письмо не во всю ширину и не по центру, а эта строчка в сумме со свойством padding:0 у тега body решает проблему.

<!--[if !mso]><!-->
	<div style="display:block !important;font-size:0px;font-color:#ffffff;"> 
<!--	Скрытый прехэдер-->
	</div>
<!--<![endif]-->

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

Контентная часть шаблона

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

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top" bgcolor="#ffffff">

Далее нужно создать уже таблицу для контентной части. Рекомендуемая контентная ширина письма – 600 пикселей. Давайте разберёмся, откуда появилась эта цифра.

Все мы заинтересованы делать адаптивные письма, верно? К счастью, для планшета письма адаптировать уже не нужно, так как 600 пикселей туда точно поместятся, а вот для телефонов нужно, и нужно учесть все существующие модели. Чтобы это сделать, требуется ориентироваться вплоть до минимальной. На данный момент самой маленькой шириной экрана обладает iPhone 5 и SE – это 320 пикселей, и ими пользуется ещё немалый процент людей. Адаптация писем строится на перестроении блоков, а эти блоки очень часто имеют одинаковые размеры.

Если этот блок будет больше 320 пикселей, то он не поместится на экран 5-го Айфона и просто будет пропорционально уменьшаться, уменьшая шрифты и всё остальное.  Есть ещё один нюанс: почтовики оставляют боковые отступы, потому мы стараемся не делать ширину блока больше 300 пикселей, и как я говорил ранее, блоки часто делят пополам по дизайну. И вот – 300х2 = 600 пикселей.

Да и помимо почтовиков в самом дизайне писем бывают отступы до контентной части.

В Яндекс.Почте можно настроить вид входящих сообщений столбиком, а открытие письма – сбоку. Если в этом почтовике открыть письмо на стандартном мониторе ноутбука шириной 1366, то место для превью будет ~630 пикселей. Если письмо шире, может перестроиться, и часть пользователей в веб-интерфейсе увидят уже его мобильную версию.

Мы обычно берём ширину чуть больше, а именно – 660, потому что по дизайну очень часто там оказывается цветовая заливка, а контентную часть помещаем в 91-процентную таблицу, которая равна 600 пикселям.

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 660px">
<tr><td align="center" valign="top" bgcolor="#ffffff" >
		
</td></tr>
</table>

Если мы так и вставим таблицу с ограничением максимальной ширины таблицы при помощи свойства max-width:660px, то Outlook не посчитает это свойство и растянет таблицу на всю ширину экрана, так как он считает атрибут width=»100%». В то же время, если мы укажем атрибутом width=»660″, то письмо перестанет быть адаптивным. В качестве решения для нашего шаблона добавляем условие if (gte mso 9)|(IE). То есть, если движок Outlook, то добавьте таблицу с фиксированной шириной и будет вам счастье.

Внутри этой таблицы размещаем таблицу со свойством max-width: 660px, которая нормально отработает на всех остальных почтовиках.

Новый шаблон

В итоге у нас получится вот такой код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta charset="UTF-8">
	<title>${MessageSubject}</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="x-apple-disable-message-reformatting">
	<style>
		html { -webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
		@media (max-width:480px) {
			/* тут будут медиа-запросы */
		}
	</style>
</head>
<body style="margin: 0; padding: 0">
	<!--[if !mso]><!-->
	<div style="display:block !important;font-size:0px;font-color:#ffffff;"> 
<!--	Скрытый прехэдер-->
	</div>
	<!--<![endif]-->
	
	
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top" bgcolor="#ffffff">

	<!--[if (gte mso 9)|(IE)]>
	<table width="660" border="0" cellspacing="0" cellpadding="0">
	<tr><td align="center">
	<![endif]-->
	
	<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width: 660px">
	<tr><td align="center" valign="top" bgcolor="#ffffff" >
		
	</td></tr>
	</table>
	
	<!--[if (gte mso 9)|(IE)]>
	</td></tr>
	</table>
	<![endif]-->
	
</td></tr>
</table>

</body>
</html>

Мы протестировали шаблон всеми возможными средствами и можем с полной уверенностью заявить: работает! Копируйте код, используйте в своих письмах, мы только за 🙂

А если возникнут вопросы или появятся предложения по улучшению шаблона, пишите. С радостью всё обсудим! 

Как настроить интеграцию ExpertSender и SMS.RU


Помните историю клиента, который отправлял пуш-напоминания о вебинаре через ExpertSender? Если не помните или нет времени читать, краткий саммари: ExpertSender может гибко, быстро и бесплатно интегрироваться вообще с любыми сервисами.

Интеграция ExpertSender c OneSignal

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

Клиенту для настройки не нужно делать ничего, кроме как сказать персональному менеджеру: «̶Л̶а̶р̶и̶с̶у̶ ̶И̶в̶а̶н̶о̶в̶н̶у̶ Интеграцию с SMS.RU хочу!»

Мы, как джин из бутылки, исполним желание — сами всё настроим и расскажем, как это сделать. А для закрепления опишем процесс в статье.

По- прежнему готовы ответить на все вопросы про интеграции, которые вас интересуют. 

Задача

Отправить пользователям  смс о предстоящем вебинаре.

Решение

Настроили кампанию, которая стартует по расписанию. Как только наступает указанное в событии «Начало» время, API-запрос инициирует отправку сначала пуш, а потом смс-сообщения через SMS.RU.

Как настроили

В блоке «API-запрос» указали следующее:

Метод запроса: Get

Адрес запроса: в нашем случае выглядел так: https://sms.ru/sms/send?api_id=48…5&to=*[subscriber_attribute_tel]*&json=1&msg=13:00 МСК:  Тема вебинара + ссылка на вебинар с UTM-метками

Где: 

Api_id — это уникальный ключ для авторизации, который можно найти в личном кабинете SMS.RU, на главной странице, во вкладке «API» или «Инструкция».

to=*[subscriber_attribute_tel]* — переменная для ввода номера телефона.

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

json=1 — системный параметр по умолчанию.

msg — контент сообщения.

Не забыли протестировать и отправить запрос на тестовый номер 🙂

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

Как настроить аватары для почтовых интерфейсов?

Что такое «аватар»

Аватар — это изображение слева от имени отправителя, которое видят все пользователи, получающие ваши сообщения.

Зачем он нужен

Это изображение помогает сразу идентифицировать ваше письмо среди десятка других.

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

Как настроить

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

Mail.ru

Добавить аватар для Mail.ru можно в постмастере, там, где вы проверяете репутацию почтового отправителя. Если вы ещё не отправляли рассылки и не подтвердили почтовый домен в постмастере, это нужно сделать.

Для того чтобы добавить аватар в Mail.ru, зайдите в раздел настройки и нажмите «Изменить аватар».

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

Изображение должно соответствовать следующим требованиям:

— Должно иметь формат *.png;

— Оставаться четким и геометрически ровным при уменьшении до размеров 32х32, 45х45, 90х90*;

— Не терять целостности при скруглении углов;

— Иметь непрозрачный фон (картинки с прозрачным фоном не поддерживаются);

— Не нарушать Пользовательское соглашение сервиса Mail.ru;

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

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

В mail.ru аватар будет настроен для домена, а не для емейл-адреса, в отличие от настроек для Gmail или Yandex.

Gmail

Фавикон для Gmail устанавливается в настройках адреса, с которого вы отправляете рассылки. Если вы рассылаете с корпоративного адреса, и у него нет отдельного Google аккаунта, добавьте этот адрес как дополнительный в уже существующем аккаунте.

Для этого нужно зайти в «Управление аккаунтом Google» > «Личные данные» > «Контактная почта» > «Электронная почта» > «Расширенные настройки» > «Дополнительные адреса электронной почты».

Чтобы добавить аватар, нажмите на шестерёнку в правом верхнем углу и зайдите в «Настройки».

В пункте «Моя картинка» нажмите на ссылку «О себе».

В следующем окне вы сможете изменить картинку.

Ещё один способ загрузить аватар — нажать на логотип в правом верхнем углу.

У Google нет требований к изображениям, как у mail.ru — вы можете загружать изображение любого разрешения и формата, и оно сразу установится.

Yandex

Для настройки аватара зайдите на сайт Gravatar через аккаунт WordPress или Google.

Для доменов Gmail и Mail.ru и других почтовых доменов этот сервис тоже подходит 🙂

В разделе «Мои граватары» добавьте адрес, с которого вы отправляете рассылки. На эту почту будет отправлена ссылка для подтверждения.

После того, как емейл появился в списке, внизу страницы нажмите на «Add a new image» и загрузите нужное изображение.

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

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

Изображение должно весит не больше 1 МБ, — больше у Gravatar нет требований по формату и разрешению.

Теперь нужно набраться терпения, модерация Yandex может занять время.

В Gravatar аватар привязывается к отдельному адресу, поэтому, если аватары нужны для нескольких адресов, процедуру нужно повторить.

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

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

Зачем мне прогревать домен?

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

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

Что нужно сделать перед началом прогрева

  • Настроить/проверить настройки SPF и DKIM
  • Проверить, что настроены постмастера
  • Убедиться, что в вашей базе подписчиков емейлы, которые:

— подписались на рассылку не более трёх месяцев назад,

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

Как прописать DNS настройки и зачем они нужны можно прочитать здесь

Создаем сегмент

Он нужен, потому что первое время необходимо учитывать структуру доменов для рассылок:

  • Русские домены – максимум 16000 сообщений в день
  • Gmail – максимум 2000 сообщений в день
  • Yahoo – максимум 2000 сообщений в день
  • Hotmail/msn.com/live.com – максимум 4000 сообщений в день

Общее количество сообщений в день: максимум 24000.

Соберем сегмент, на который сделаем первую рассылку. Сегмент 1 будет отбирать пользователей Gmail.

Сегмент 2 найдет 16000 подписчиков с русскими доменами.

Аналогичным образом выделим пользователей с другими доменами.

Отправляем первое письмо

Первое письмо мы отправим на Сегмент 1 и Сегмент 2. Нам потребуется отредактировать эти сегменты после первой отправки, поэтому поставим на это письмо тег «прогрев». 

Вот так:

Сегмент1:

Сегмент 2:

Все следующие письма в период прогрева будем отправлять на Сегмент 1 и Сегмент 2. И не будем забывать ставить этим письмам тег «прогрев» 🙂

Сколько должен длиться прогрев

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

В течение прогрева можно постепенно увеличивать размеры сегментов.

Gmail — не более, чем на 10% за каждую отправку. А русские домены — не более, чем на 30%.

Главное, регулярно отправлять приблизительно одинаковые объемы писем, тогда почтовые провайдеры не сочтут вас злостным спамером 🙂

За какими показателями рассылок нужно следить?

После каждой рассылки проверяйте основные показатели: 

  • Процент доставленных сообщений
  • Процент ошибок
  • Процент жалоб

Допустимые значения:

  • Доставленные — не менее 95%
  • Ошибки доставки — не более 5%
  • Жалобы — не более 0,4%

Эти показатели по всему аккаунту отображаются в главном меню на панели индикаторов в виде вот таких круглых индикаторов.

А детальную информацию можно посмотреть в сводных отчетах или в отчетах по сообщениям.

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

Тайм-менеджмент в ExpertSender

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

(далее…)
Согласен

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