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

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

Дизайн

Визуальная составляющая письма. Дизайн должен поддерживать идентичность бренда. 

Открыв письмо, читатель сразу должен понять, от кого оно. С первой секунды, с первого заголовка, с первого заглавного баннера [не смотря на то, что по имени отправителя уже понятно, от кого рассылка]. 

Главное правило хорошего дизайна: он удерживает внимание читателя и приводит к целевому действию. В этом дизайнеру помогают:

Изображения/ картинки/ анимация. То, на что обращает внимание читатель в первую очередь. Визуальные образы доносят цель и смысл рассылки, расставляют акценты, фокусируют внимание.

Контраст. Помогает выделить элементы и сделать акцент на важных деталях:

Естественные сочетания цветов. Цвета и оттенки, которые дополняют друг друга, сливаясь в единую композицию. Ориентир — природные цвета:

Резонанс. Цвета, которые передают настроение и усиливают эмоции:

Формы. Инструмент для создания чётких геометрических форм и акцентов:

Знакомые образы. Помогают создать ассоциации и точно донести информацию:

Типографика. Шрифты, заголовки, подзаголовки, межстрочный интервал. Когда текст хорошо свёрстан, его проще читать — так информация легче воспринимается:

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

Для этого текст должен быть грамотно структурирован: подзаголовки, жирные начертания для расстановки акцентов, иллюстрации, инфографики, таблицы, списки — всё играет важную роль:

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

С визуальной подачей разобрались, погнали дальше.

Размер письма

Из-за ограничений почтовых клиентов ширина письма не может быть больше 600–700 рх. Шире — нельзя: письмо не поместится в экран и появится полоса горизонтальной прокрутки [это неудобно]. Кроме того, ширину имейла ограничивают многие почтовые приложения, в том числе Gmail, Yahoo и Exchange.

Чтобы контент рассылки не кочевал по краям страницы, нужно делать отступы по бокам. Лучше использовать округлённые значения, кратные 5 рх или 10 рх.

Письмо читается комфортно, если выставлять ширину контентной части письма не менее 540 рх — особенно если фон письма контрастен по цвету к самому письму.

Шрифты

1. В дизайне имейл-рассылок лучше использовать безопасные шрифты — так подписчики смогут увидеть письмо в том виде, в каком вы его задумали. Тема использования шрифтов тесно связана с вёрсткой, так что самое разумное — использовать web safe.

2. Шрифты, которые поддерживают все браузеры:

3. Минимальный размер основного текста, чтобы всё было видно и хорошо читалось — 16 px с межстрочным интервалом в 150% [он же — «полуторный»].

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

5. Жертвовать текстом ради красивых заголовков — не самая классная идея, ведь некоторые пользователи смотрят почту, отключив изображения [ну или просто картинки могут не прогрузиться]. Если все блоки письма будут картинками, читатели просто откроют пустое письмо. Такое себе.

6. Ну и ещё один важный момент: текст должен хорошо контрастировать с фоном. Читабельность — наше всё, главная цель письма — донести информацию. Поэтому выбор в пользу контраста очевиден. Для баннеров выбираем хорошо читаемые заголовки, а для тела письма всегда зайдёт классика: чёрный текст на белом фоне.

Адаптивный дизайн

Адаптивность — про то, как «нормальный» макет письма перестраивается под другие размеры устройств. Если это не продумано на этапе дизайна — придётся убирать лишние элементы на вёрстке.

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

Обычно элементы письма в адаптивной вёрстке на мобильном устройстве перестраиваются друг под друга:

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

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

Например, в Letteros автоматически генерируется превью вашего письма на всех популярных устройствах.

Тёмная тема

В 2019 году крупные почтовые клиенты объявили о поддержке тёмной темы (Dark Mode). 

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

Согласно исследованиям Campaign Monitor, порядка 13% пользователей iOS открывают письма во встроенном приложении мобильной почты в тёмной теме. Добавьте сюда тех, кто использует другие почтовики в тёмной теме. Получается довольно внушительное количество пользователей, которые никак нельзя потерять из-за кривого отображения рассылки.

Вот почтовые клиенты, которые поддерживают тёмную тему.

Мобильные приложения:

• Gmail App (Android);
• Gmail App (iOS);
• Outlook App (Android);
• Outlook App (iOS);
• iPhone Mail;
• iPad Mail;
• Яндекс.Почта;
• Mail.ru.

Десктопные:

• Apple Mail;
• Outlook 2019 (Mac OS);
• Outlook 2019 (Windows).

Веб-клиенты:

• Outlook.com;
• Hey.com;
• Яндекс. Почта;
• Mail.ru.

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

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

Основные моменты в дизайне, которые пригодятся имейл-маркетологу, мы разобрали. Но чтобы читатель в папке «Входящие» увидел именно то, что вы задумывали, письмо ещё нужно правильно сверстать.

Вёрстка

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

По классике почтовые рассылки верстаются в HTML.

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

Дизайнер чаще всего «собирает» письмо в конструкторе, реже — сразу в HTML. Берёт контент и элементы дизайна из продуманной структуры и превращает это в макет. Потом отдаёт всё это дело верстальщику.

Бывает так, что письмо может идеально выглядеть в браузере и веб-версии, но некрасиво разъехаться в мобильном приложении Gmail или старенькой версии Outlook. Проблемы с отображением писем происходят из-за обилия программ и сервисов для чтения почты [вспоминаем про адаптивность и разные устройства]. Одно и то же письмо можно открыть через:

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

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

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

Крутое дизайнерское письмо верстается вручную в специальных редакторах кода. У вас намного больше инструментов для работы: можно создать гибкие шаблоны для рассылок и разработать сложный макет. В любом случае, у HTML-вёрстки письма есть свои ограничения по сравнению с той же вёрсткой сайтов.

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

Вот что важно помнить в целом:

1. Не использовать привычные для веб-дизайна интерактивные элементы: JavaScript, Flash, ActiveX. Почтовые провайдеры расценивают их как вирусные и отправляют письмо в спам.
2. Лучший вариант — табличная вёрстка. Это залог того, что письмо отобразится корректно. Если использовать блочную вёрстку, то итоговое отображение у пользователя будет вести себя непредсказуемо.
3. Рекомендуемая ширина тела письма — 600 px. Так рассылка будет корректно выглядеть на экране любой версии почтовика. 
4. Использовать блочную адаптацию, чтобы письма корректно отображались на разных экранах и любом устройстве. Например, в десктопной версии у письма может быть две или три колонки. В мобильной версии блоки выстраиваются один под другим. Такой способ вёрстки называется «плавающие блоки».

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

Дадим базовые рекомендации, которые помогут правильно оформить все элементы рассылки при HTML-вёрстке письма.

Базовые рекомендации по вёрстке

Универсальные HTML-теги

В рассылке нельзя применить все элементы HTML-кода. Это происходит из-за особенностей почтовых программ: какие-то почтовики не распознают тег <button>, а в Outlook и Mail.ru, например, не сработают теги <header> и <footer>.

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

Вот полный список универсальных тегов и атрибутов.

Размер HTML-кода

Почтовый клиент Google обрезает письма, HTML-код которых превышает 100 Кб. Вместо продолжения пользователи увидят фразу «Письмо показано не полностью» и ссылку на полный текст. Выглядит это так:

Чтобы письма не обрезались, нужно сокращать их код до 100 Кб. Для этого можно использовать Минификатор кода — он сжимает код в одну строку и убирает все лишние символы. Так можно сэкономить около 20% килобайт.

Оформление текста

Основные правила

1. При оформлении текста необходимо указывать стилевые параметры. Цвет [color] и интерлиньяж [line-height] помогут письму отобразиться так, как задумано в оригинале.
С той же целью необходимо прописывать размер шрифта [font-size в px или pt] и гарнитуру [font-family].

2. Не используйте в качестве поясняющего текста URL. Такие ссылки могут быть распознаны как фишинговые (поддельные, фейковые), а письмо — как мошенническое. Поясняющий текст пишите текстом.

<a href=“http://google.com” target=“_blank” style=font-family: Tahoma, Arial, sans-serif;font-size: 16px; color:#b46acc; text-decoration:none;”>

3. «Висячие» предлоги лучше не оставлять. Согласно правилам типографики, предлоги и союзы нужно переносить на следующую строку. Для этого есть символ неразрывного пробела.
Любовь в&nbsp;большом городе

4. Указывайте атрибут target со значением _blank, чтобы ссылка открывалась в новом окне

<a href=”#” target=“_blank” style=font-family: Tahoma, Arial, sans-serif; font-size: 16px; color:#b46acc; text-decoration:none;”>

Купить здесь</a>

5. Пропишите прехедер. Обычная техническая информация, которая отображается сразу после темы письма (телефон, разделы сайта) не побуждает человека на клик. Текст прехедера, как и тема письма, должен быть осознанным и продуманным.

Оформление изображений

1. Ряд обязательных параметров, чтобы картинки и баннеры не съехали.

• height [высота изображения]
• width [ширина изображения]
• alt [альтернативный текст]

2. Чтобы почтовый сервис не расценил рассылку как спам, добавляйте plain text версию письма [рассылки в текстовом формате]. Это нужно для почтовых клиентов, которые не отображают HTML.

style=“display:block;

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

3. А если большинство ваших подписчиков открывает письма в Outlook, подумайте над тем, чтобы перейти на plain text версии писем или использовать картинку-баннер вместо сложного блока с фоном.

С рекомендациями разобрались. Переходим к техническим ограничениям.

Технические ограничения HTML-писем

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

Ограничения по коду

Есть тег <style>, который задаёт CSS-стили [Cascading Style Sheets — каскадные таблицы стилей. Он определяет, как будут отображаться отдельные элементы рассылки и всё письмо в целом. По сути — язык, который отвечает за описание внешнего вида HTML-документа] для HTML-документа — шрифты, цвета, расположение отдельных блоков.

Этот тег поддерживается не всеми почтовыми клиентами [вот таблица, которая это показывает]. Из-за этого не во всех почтовых клиентах будут работать медиа-запросы [правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств].

Обычно медиа-запросы не используются и нужно делать такую вёрстку, которая сможет адаптироваться под мобильные экраны без них.В вёрстке стили прописываются не в отдельном блоке, а непосредственно в коде. Поэтому тег <style> ей не нужен. Такая вёрстка называется табличной. Табличная — потому, что в ней для расположения текстовых и графических элементов используются таблицы, то есть HTML-тег <table>.

Ограничения по контенту

Шрифты

Как мы уже говорили, в тексте почтовых рассылок можно использовать только стандартные web safe-шрифты. Нестандартные шрифты можно было бы использовать через медиа-запрос @font-face, но он работает только в iOS, Google Mail и Android 4.

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

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>.

Изображения

В письмах «работают» только три формата изображений — JPG, GIF и PNG. Первый — обычный, второй используют для анимации, а третий — если нужен элемент с прозрачным фоном. Если хотите, чтобы изображения в письме отображались корректно, другие форматы использовать не стоит.

Технических ограничений по весу изображений в письмах нет. Картинки не грузятся непосредственно в письмо, а лежат на сервере, поэтому их объём для нас не особо критичен. Но при мобильном интернете «тяжёлые» картинки будут долго открываться. Чтобы не заставлять клиентов ждать, есть неписаное правило: картинки для баннера  должны весить не больше 150 килобайт, а все остальные — не больше 50.

Ещё есть некая особенность у дисплеев Retina: что для обычного дисплея — ок, для ретины — беда, потому что они отличаются повышенной плотностью пикселей. Это можно увидеть, если открыть на ретина-дисплее не адаптированную под него картинку: изображение будет «мылиться».

На сайтах эту проблему решают, сохраняя две картинки — с обычной плотностью пикселей и с повышенной для Retina. А верстальщик задаёт медиа-запрос: если экран обычный, то использовать первую картинку, а если Retina — то вторую, в два раза больше.

Вот только в письмах, в отличие от сайтов, оптимизировать изображения под Retina нельзя — там не используются медиа-запросы. Так что выход один — изображения нужно сразу делать в два раза больше [хорошо, что ограничений по весу нет 🙂 ].Картинки, подготовленные в размере x2 для ретины, нужно адаптировать и прогнать через сервис, который уменьшит их размер. Пользуйтесь этим проверенным сайтом — TinyPNG.

Видео

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

Опросы

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

Хитрость №1 — это NPS-опрос. Так называют один закрытый вопрос в стиле «Оцените нашу работу/рассылку/погоду от 1 до 10». Для сбора такой статистики можно использовать Яндекс-формы.

Хитрость №2 подойдёт, если мы хотим задать пользователю открытые вопросы или сразу несколько закрытых вопросов. Здесь всё просто: кнопка в письме может вести читателя на опрос — его можно сделать в тех же Яндекс- или Google-формах.

Веб-версия письма

Хитрость №3 — что-то среднее между первыми двумя. Как вариант — вставить в письмо вопрос, любой ответ на который перекинет читателя на сайт. Например, вопрос «Какие ботинки вам нравятся?» с вариантами «броги», «оксфорды» и «дерби». 

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

Такие хитрости работают куда лучше обычной кнопки «Пройти опрос». Кстати, эта кнопка вообще не пользуется у читателей популярностью.

Счётчик обратного отсчёта

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

Итак, наше письмо задизайнено и свёрстано. Теперь нужно его протестировать. 

Тестирование писем

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

В первую очередь нужно проверить письмо на опечатки и ошибки в тексте. Здесь на помощь придёт сервис Литера5.

Дальше — типографика, то есть правильные тире и кавычки «ёлочки» вместо “лапок” [именно «ёлочки» традиционно применяются в русском языке]. С этим лучше других справляется Типограф.

Теперь важно посмотреть рендер [наглядный пример того, как отображаются письма на разных устройствах]. Так можно сразу заметить ошибку в адаптации — где обрезалась картинка, где сдвинулся текст и так далее. Проверить рендеры и рассылку в целом на ошибки можно в Litmus или в Email on Acid.

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

Вот теперь мы прошли все этапы создания письма. Оценим всю картину.

• В первую очередь помним, что у рассылки должна быть конкретная цель, которая определит траекторию, даст подсказку для текстового содержания и визуальных элементов. И тут только одно правило: одна цель — одно письмо.
• Когда цель определена и мы хорошо понимаем, что хотим сделать, то стоит задуматься над контентом. Нужно сделать письмо полезным, чтобы пользователи наверняка его открыли и почувствовали заботу бренда.
• Следующий шаг — определение структуры. Так, чтобы все элементы — логотипы, текст, баннеры, футеры — были на своих местах, а само письмо было аккуратным и логичным.
• Затем работаем над деталями. Прорабатываем имя отправителя. Клиент точно должен понимать, от кого это письмо и про что оно. Важно не забыть про цепляющую тему и прехедер.
• Ну, и чтобы глаз радовался, нужно позаботиться о дизайне и вёрстке и не забыть про адаптивность письма.
• Последнее, но не по значению, — протестировать письмо, чтобы проверить, как оно отображается в почте, всё ли читается, все ли картинки загружаются.