Инструкции 19.08.2022

Как верстать email письма — инструкция от А до Я

537

Представьте: ваше письмо готово и выглядит одинаково красиво на всех устройствах. Вот только это далеко от реальности: различные почтовые программы — 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 можно задать и с помощью пустой таблицы с указанием высоты самого отступа.

Font-size обнуляем. Ещё вариант — отбивка отступа линией. Вот такой:

Её код:

</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. Вот пример кода:

<tr><td align=»center» valign=»top» style=»font-size: 0px;»><!—

Item —><div style=»display: inline-block;vertical-align:top;width:300px;»>

контент

</td></tr>

</table>

</td></tr>

</table></div><!— Item END—><!—[if (gte mso 9)|(IE)]>

</td>

<![endif]—><!—

Item —><div style=»display: inline-block;vertical-align:top;width:300px;»>

контент

</td></tr>

</table>

</td></tr>

</table></div><!— Item END—>

</td></tr>

</table>

Cellpadding и cellspacing, естественно, обнуляем, а td align задаём center. Закрывает код первого блока условный комментарий для Outlook — хотя ему вообще не нужны перестроения, ведь это десктопный почтовик. Но иначе он не увидит закрывающий тег </td> в первом контейнере.

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

В итоге таблица выглядит так:

контент

А если экран сузится даже на один пиксель, блоки перестроятся. Пример:

контент

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

<tr><td align=»center» valign=»top» style=»font-size: 0px;»><!—

Item —><div style=»display: inline-block;vertical-align:top;max-width:400px;width=100%»>

контент

</td></tr>

</table>

</td></tr>

</table></div><!— Item END—><!—[if (gte mso 9)|(IE)]>

</td>

<![endif]—><!—

Item —><div style=»display: inline-block;vertical-align:top; width:200px»>

контент

</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 служит контейнером для создания строки таблицы:

<![endif]—><!—

Item —><div style=»display: inline-block; vertical-align: top; width: 300px;»>

Блок 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;»>

Блок 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>

Десктопные версии (в том числе Outlook) увидят запись width=»600″ и покажут баннер шириной 600px. Google читает запись width: 100%; max-width: 600px и отобразит изображение на всю ширину, но не более 600px. Так получится масштабирование изображения, которое не помешает адаптироваться всему остальному контенту письма.

Кстати, не забудьте в alt прописать альтернативный текст — без него никуда.

Масштабирование кнопок

Бывает, что кнопки растягивают на всю ширину экрана:

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

<!—[if gte mso 9]>

<![endif]—>

Текст кнопки

</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 минут.

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

537