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

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

Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

Из-за ограничений почтовых клиентов ширина письма не может быть больше 600 рх. Иначе письмо не поместится в экран и появится полоса горизонтальной прокрутки. Также ширину имейла ограничивают многие почтовые приложения, в том числе Gmail, Yahoo и Exchange.

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

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

Шрифты

1. В дизайне имейл-рассылок лучше использовать безопасные шрифты (web safe).

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

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

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

4. Ну и ещё один важный момент: текст должен хорошо контрастировать с фоном. Читабельность — наше всё.

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

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

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

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

Вёрстка

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

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

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

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

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

1. Не использовать привычные для веб-дизайна интерактивные элементы: JavaScript, Flash, ActiveX. Outlook и другие почтовые провайдеры расценивают их как вирусные.
2. Лучший вариант — табличная вёрстка. Это залог того, что письмо отобразится корректно.
3. Используйте блочную адаптацию, чтобы письма корректно отображались на разных экранах и любом устройстве.

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

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

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

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

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

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

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

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

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

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

1. При оформлении текста необходимо указывать стилевые параметры. Атрибут style для писем не используется. 

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

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

3. Использование атрибута target со значением _blank поможет сделать так, чтобы ссылка открывалась в новом окне.

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

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

4. Верстая таблицу с помощью HTML-тега table, следует помнить об атрибутах cellspacing (задаёт расстояние между ячейками) и cellpadding (отвечает за отображение расстояния между содержимым ячейки и её границами).

5. Пропишите прехедер, мотивирующий узнать, что внутри. Клиент должен захотеть открыть и почитать ваше письмо.

Технические ограничения 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;

Изображения

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

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

Видео

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

Опросы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь вы знаете, как пройти все этапы создания письма. Оценим всю картину.

• В первую очередь помним, что у рассылки должна быть конкретная цель, которая определяет содержание и дизайн. Одна цель — одно письмо.
• Следующий шаг — определение структуры. Так, чтобы все элементы — логотипы, текст, баннеры, футеры — были на своих местах, а само письмо было аккуратным и логичным.
• Затем работаем над различными деталями. Прорабатываем имя отправителя и цепляющую тему (не более 4–5 слов), добавляем прехедер.
• Ну и чтобы глаз радовался, нужно позаботиться о дизайне и HTML-вёрстке email, не забывая про адаптивность письма.
• Последнее, но не по значению, — тестировать письмо. Эта стадия даст представление о том, всё ли хорошо отображается в почте.