Представьте: ваше письмо готово и выглядит одинаково красиво на всех устройствах. Вот только это далеко от реальности: различные почтовые программы — Gmail, Яндекс.Почта и т. п.) по-разному отображают один и тот же HTML-код. Поэтому задача верстальщика — не просто перевести дизайн шаблона в код, но и сделать так, чтобы рассылка везде выглядела хорошо. Об этом и поговорим.
Табличная вёрстка
Создать HTML-вёрстку писем для email-рассылки — не то же самое, что создать HTML-вёрстку сайта или лендинга. В email только табличная вёрстка позволяет рассылке нормально отображаться. Всё потому, что сообщения могут открываться в почтовых клиентах и браузерах такого года выпуска, которые не поддерживают новые версии HTML. Поэтому письма, где использована табличная вёрстка — залог того, что они хорошо отобразятся везде.
По сути, HTML-вёрстка для email-рассылки — это набор таблиц, которые находятся в других таблицах. Мы заглянули в вёрстку и использовали внутренние значения border, заменив их на 1:
Особенности и ограничения вёрстки электронных рассылок
Тег <style>
Этот тег задаёт стили CSS для HTML-вёрстки писем для рассылки — шрифты, цвета, расположение отдельных блоков и других визуальных элементов.
Важная информация: style поддерживается не всеми почтовыми клиентами (вот простая таблица, которая это показывает). Поэтому и медиазапросы могут обернуться проблемами — они будут работать не везде.
Сокращённая форма стилей
Так как не все почтовые клиенты поддерживают тег <style>, все стили нужно инлайнить — писать их в атрибуте и не в сокращённой форме, а в полной. Сравните два варианта:
Сокращённая форма
h1 {
color: #fff;
}
Полная форма
h1 {
color: #ffffff;
}
Нам нужен второй. Кстати, для инлайна стилей и «перевода» сокращённой формы в полную можно использовать инлайнеры — такой сервис уже встроен в Letteros.
Шрифты
Шрифты в вёрстке имейлов — тот случай, когда лучше не отступать от классики и использовать только стандартные веб-шрифты. Вот стандартный список шрифтов, применяемых для HTML-писем:
font-family: Arial, Helvetica, sans-serif;
font-family: Arial Black, Gadget, sans-serif;
font-family: Georgia, serif;
font-family: MS Sans Serif, Geneva, sans-serif;
font-family: MS Serif, New York, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: Times New Roman, Times, serif;
font-family: Trebuchet MS, Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif.
Если подключаются другие шрифты, нужно помнить, что это будет работать только в тех почтовиках, где поддерживается тег <style>.
Размер HTML-кода
Стоит знать: почтовый клиент Gmail обрезает email, код HTML которых превышает 100 кб. Так пользователи увидят слова «Письмо показано не полностью» и ссылку на полный текст:
Чтобы email не обрезались, нужно сокращать их код до 100 кб. Для этого можно использовать Минификатор кода — он сжимает код в одну строку и убирает все лишние символы. Так можно сэкономить около 20% килобайт.
Изображения
Чтобы все изображения (в том числе и фоновые) в письме отобразились корректно, главное использовать только следующие форматы — jpg, gif и png.
Технических ограничений по весу изображений в шаблонах писем нет. Но при мобильном интернете после клика по теме письма очень «тяжёлые» картинки будут долго открываться. Поэтому картинки для баннера должны весить не больше 150 килобайт, а все остальные — не больше 50.
Чтобы сжать картинку до нужно размера, можно воспользоваться специальными сервисами — Optimizilla и TinyPNG. Или встроенным сервисом в Letteros.
JavaScript
Почтовые клиенты не дают верстальщикам использование JavaScript. Но внедрить в цепочки писем интерактивные элементы можно с помощью технологии AMP. Подставлять свой JavaScript в AMP-письма нельзя, а значит, они будут безопасны. Вот полезная статья — она познакомит вас с технологией.
Работает AMP пока не везде: Gmail, Mail.Ru, Yahoo! Mail технологию уже освоили, а вот Яндекс ещё нет, и в его почтовых сервисах AMP-функционал отображаться не будет.
Опросы
В письмах бывают опросы, а в них — чекбоксы, галочки, поля для ввода и другие детали, которые не поддерживаются в вёрстке. Как их сделать?
Первый способ — это NPS-опрос с одним закрытым вопросом в стиле «Оцените нашу работу от 1 до 10». Результаты покажут, как подписчик оценил работу, почитав ваше письмо:
Второй способ подходит для открытых вопросов: на кнопку (или в любом другом месте) в рассылке вешается ссылка на опрос в Google Forms.
Третий вариант — нечто среднее между первыми двумя. Просто вставляем в электронное письмо вопрос с несколькими кнопками ответа — и пользователь переходит на сайт, где ответ на первый вопрос уже дан, но есть ещё несколько неотвеченных.
Добавление в календарь
Подписчик может добавить в свой календарь событие из рассылки — вот как это работает:
- Получает рассылку с анонсом события.
- Нажимает на кнопку «Добавить в календарь».
- Календарь автоматически открывается и предлагает добавить событие.
Чтобы всё получилось, нужно сделать календарь публичным, открыть доступ на событие для всех, скопировать ссылку и последнее — отправить её пользователям. Это работает со всеми популярными типами календарей: Google, Яндекс, Yahoo!, Mail.ru, Outlook или iOS. В этой статье есть подробная инструкция.
Счётчики обратного отсчёта
Таймер обратного отсчёта — отличный инструмент, чтобы напомнить в цепочке промописем: нужно поторопиться.
Чтобы таймер работал корректно, его лучше сверстать скриптом — либо собственным, либо использовать сервисы Sendtric или MotionMail.
Отступы в вёрстке рассылок
Отступы — одни из основных элементов вёрстки, и часто в письмах с ними возникают проблемы. Поэтому поговорим и о них тоже.
Свойство padding устанавливает внутренние отступы со всех сторон элемента. Но вертикальный отступ внутри структуры body можно задать и с помощью пустой таблицы с указанием высоты самого отступа.
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="10" style="font-size: 0; line-height: 10px;"></td></tr></table>
Font-size обнуляем. Ещё вариант — отбивка отступа линией. Вот такой:
Её код:
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" valign="top" style="border-top-width:1px;border-top-style:solid;border-top-color:#E7E7E7;"></td></tr></table>
Это таблица, у которой нет никакой размерности. Значение border-top-width как раз и указывает на линию толщиной 1px серого цвета border-top-color, а значение border-top-style задаёт линии сплошной стиль solid. Есть ещё несколько значений, которые можно использовать:
- none обнуляет линию;
- dotted состоит из набора точек;
- dashed указывает на пунктирную линию;
- double создаёт двойную линию;
- groove для эффекта вдавленной линии;
- ridge отвечает за рельефную линию;
- inset и outset определяют трёхмерную линию.
Margin же в CSS определяет внешний отступ на всех четырёх сторонах элемента:
margin-top, margin-right, margin-bottom и margin-left.
Осталось самое интересное — мобильная адаптация.
Мобильная адаптация
Адаптивностью называют возможность письма подстраиваться под ширину экрана. Так, чтобы текст был читабельным, а картинки — оптимального размера.
Для этого нужно указывать размер каждого блока в процентах, а не использовать пиксели — и HTML-вёрстка email-писем подстроится под разные экраны. Такой подход называют резиновым.
Перестраивающиеся блоки
Картинки на мобильных устройствах уменьшаются пропорционально ширине экрана. Как это работает:
В адаптивной вёрстке элементы рассылки на экране мобильного перестраиваются друг под друга по умолчанию:
Раз — и картинка уехала вниз.
Два перестраивающихся блока
По сути, два перестраивающихся блока — это два блока div, которым задано свойство display со значением inline. Оно определяет, что элемент будет отображаться как встроенный инлайн-блок.
Инлайн-блоки занимают всю заданную ширину контейнера. Соответственно, если использовать ширину письма в 600px, то два одинаковых контейнера будут по 300px. Вот пример кода:
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top" style="font-size: 0px;"><!-- Item --><div style="display: inline-block;vertical-align:top;width:300px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr><td align="center" valign="middle" style="font-size: 14px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top">контент</td></tr></table></td></tr></table></div><!-- Item END--><!--[if (gte mso 9)|(IE)]></td><td valign="top" style="width: 300px;"><![endif]--><!-- Item --><div style="display: inline-block;vertical-align:top;width:300px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr><td align="center" valign="middle" style="font-size: 14px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top">контент</td></tr></table></td></tr></table></div><!-- Item END--></td></tr></table>
Cellpadding и cellspacing, естественно, обнуляем, а td align задаём center. Закрывает код первого блока условный комментарий для Outlook — хотя ему вообще не нужны перестроения, ведь это десктопный почтовик. Но иначе он не увидит закрывающий тег </td> в первом контейнере.
Второй блок — почти такой же, только с условным комментарием для Outlook.
В итоге таблица выглядит так:
контент | контент |
|---|
А если экран сузится даже на один пиксель, блоки перестроятся. Пример:
контент |
|---|
контент |
Если же необходимо задать и использовать разную ширину ячеек, действуйте так:
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top" style="font-size: 0px;"><!-- Item --><div style="display: inline-block;vertical-align:top;max-width:400px;width:100%"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr><td align="center" valign="middle" style="font-size: 14px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top">контент</td></tr></table></td></tr></table></div><!-- Item END--><!--[if (gte mso 9)|(IE)]></td><td valign="top" style="width: 200px;"><![endif]--><!-- Item --><div style="display: inline-block;vertical-align:top; width:200px"><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;"><tr><td align="center" valign="middle" style="font-size: 14px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center" valign="top">контент</td></tr></table></td></tr></table></div><!-- Item END--></td></tr></table>
Здесь width превратился в max-width, потому что размер стал больше 300px: если задать жёстко ширину, экран «упрётся» в 400px. Теперь наша таблица выглядит так:
контент | контент |
|---|
А так — при перестроении:
контент | |
|---|---|
контент |
То же самое и с баннерами. Часто контент баннера разделён на две стороны: слева — текст, справа — картинка:
При адаптации баннер может перестраиваться по-разному — правая колонка может «уйти» под другую:
Но можно и наоборот — чтобы сначала текст, после — изображение. Так мы добрались до обратного перестроения блоков.
Обратное перестроение блоков
Такая вёрстка для email-рассылки работает примерно так же, но есть одно но: атрибут dir. Он используется для задания направления:
- ltr (Left To Right) — текст отображается слева направо;
- rtl (Right To Left) — справа налево.
Код начинается с table border, далее tr служит контейнером для создания строки таблицы:
<table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td dir="rtl" align="center" style="font-size: 0px;"><!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td width="300" style="width: 300px;" dir="rtl"><![endif]--><!-- Item --><div style="display: inline-block; vertical-align: top; width: 300px;"><table width="100%" cellpadding="0" cellspacing="0" border="0" dir="ltr"><tr><td align="center" style="font-size: 14px;">Блок 2</td></tr></table></div><!-- Item END--><!--[if (gte mso 9)|(IE)]></td><td width="300" style="width: 300px;"><![endif]--><!-- Item --><div style="display: inline-block; vertical-align: top; width: 300px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" dir="ltr"><tr><td align="center" style="font-size: 14px;">Блок 1</td></tr></table></div><!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr></table>
Здесь td align выравнивает содержимое ячейки по горизонтали. Вот пример, как код отобразится на большом экране:
Блок 1 | Блок 2 |
|---|
А так — на мобильном:
Блок 2 |
|---|
Блок 1 |
Как видим, это два тега div, но читаться они будут в обратную сторону. Плюс появился условный комментарий для Outlook, чтобы он увидел заданное направление.
Адаптация изображений
Здесь существует правило: для всех изображений шириной больше 300px не нужно использовать и прописывать фиксированную высоту. Когда высота не прописана в коде, система самостоятельно её вычислит пропорционально размеру картинки.
Чтобы картинка шириной больше 300px начала адаптироваться и не ломала вёрстку, в стилях прописываем ширину в процентном соотношении (100%), и максимальную ширину картинки img (600px), используя резиновый подход:
<span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 16px;color:#000000;"><img src="creative-main.png" width="600" alt="Альтернативный текст" border="0"style="display: block; width: 100%; max-width: 600px"/></span>
Десктопные версии (в том числе Outlook) увидят запись width=600 и покажут баннер шириной 600px. Google читает запись width: 100%; max-width: 600px и отобразит изображение на всю ширину, но не более 600px. Так получится масштабирование изображения, которое не помешает адаптироваться всему остальному контенту письма.
Кстати, не забудьте в alt прописать альтернативный текст — без него никуда.
Масштабирование кнопок
Бывает, что кнопки растягивают на всю ширину экрана:
Вот как будет масштабироваться такая кнопка в мобильной версии:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%;"><tr><td align="center" valign="middle" height="50" bgcolor="#000"style="height: 50px; display: block; background-color: #000000;"><!--[if gte mso 9]><table border="0" cellspacing="0" cellpadding="0"><tr><td nowrap align="center" valign="middle" height="50" style="padding: 0 30px;"><![endif]--><a href="#" target="_blank"style="font-family: Arial, Helvetica, sans-serif; font-size: 24px; line-height: 50px; color: #ffffff; white-space: nowrap; font-weight: normal; text-decoration: none; display: block; padding: 0 30px;">Текст кнопки</a><!--[if gte mso 9]></td></tr></table><![endif]--></td></tr></table>
Чуть разберём: height и line-height здесь одинаковые, также как background и bgcolor. Target задано свойство _blank — так страница загрузится в новом окне браузера.
Важно, чтобы высота строки соответствовала высоте кнопки, а её текст был меньше 300px в ширину. Если будет больше — текст либо сломает адаптацию, упёршись в края кнопки при сужении [при наличии свойства white-space со значением nowrap], либо неминуемо перестроится и вылезет за пределы кнопки.
Тёмная тема
Как это работает? Всё просто: при включении Dark Mode фон страницы становится тёмным, а шрифт — светлым.
Некоторые почтовики делают прямую инверсию «белый — чёрный», а некоторые «подбирают» тёмный аналог. Так, если фон верстается картинкой, происходит инверсия цвета текста, что может повлиять на его читабельность. Важно, что разные сервисы по-разному работают с тёмной темой и результат будет отличаться.
Возьмём, к примеру, чёрный текст на белом фоне. В тёмной теме происходит инверсия и всё выглядит так, как будто так и было. Но если фон верстается картинкой, в тёмной теме чёрный текст инвертируется в белый, а вот фон уже не изменится. И тогда белый текст на белом фоне просто потеряется.
Единственное решение этой проблемы — добавить прозрачности на этапе дизайна. Отдельный макет для тёмной темы делать не нужно, но дизайнер может себя проверить: создать затемнённый блок и посмотреть, как на него ляжет баннер в тёмной теме.
Ещё лучше — сделать фон таким цветом, на котором будет хорошо читаться как белый текст, так и чёрный:
Если фон будет верстаться кодом, его цвет тоже будет инвертироваться. Однако какие-то градиенты нужно верстать картинкой: прямой градиент из двух цветов легко сверстать кодом, но если он более сложный — уже не получится и придётся использовать классический баннер.
Чёрно-белые или серые иконки, которые используются в дизайне письма, должны быть с обводкой в цвет фона (1–1,5 px). В светлой теме её не будет видно, зато в тёмной — ещё как. Это же правило относится к нестандартным шрифтам, которые используются в заголовках.
Если кнопку верстать кодом, она тоже будет инвертироваться. Когда в светлой теме у кнопки есть обводка, этого можно избежать: верстать кнопки картинками, добавляя заливку в цвет фона. В светлой теме это будет выглядеть как обводка, а в тёмной — как обычная кнопка. Рекомендуем использовать этот приём.
Как сделать так, чтобы вёрстка точно не «поехала»
Есть решение: собрать цепочку электронных писем в конструкторе Letteros и использовать для этого шаблон. Это модульный редактор, благодаря которому можно создать вёрстку шаблона письма без верстальщика и знаний HTML.
Платформа показывает отображение письма на огромном количестве (100+) популярных устройств, а встроенные сервисы сразу проверяют письмо на ошибки — и рассылка выглядит красиво как на десктопе, так и в мобильных почтовиках: вёрстка писем для email-рассылки адаптируется под любой вид устройства. Там же можно тестировать рассылки и использовать другие возможности сервиса.
Посмотрите демо и переходите на Letteros, где на создание писем уходит 15 минут.
Кстати, мы поможем бесплатно перенести ваши шаблоны, а поддержка всегда будет на связи и покажет, как использовать конструктор с максимальной эффективностью.