Заказать демо Войти

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

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

Третий вариант — нечто среднее между первыми двумя. Просто вставляем в электронное письмо вопрос с несколькими кнопками ответа — и пользователь переходит на сайт, где ответ на первый вопрос уже дан, но есть ещё несколько неотвеченных.

Добавление в календарь

Подписчик может добавить в свой календарь событие из рассылки — вот как это работает: 

  1. Получает рассылку с анонсом события.
  2. Нажимает на кнопку «Добавить в календарь».
  3. Календарь автоматически открывается и предлагает добавить событие.

Чтобы всё получилось, нужно сделать календарь публичным, открыть доступ на событие для всех, скопировать ссылку и последнее — отправить её пользователям. Это работает со всеми популярными типами календарей: 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 минут.

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

Заказать демо