Как создать макет письма без дизайнера

Даже если ваш дизайнер всегда на связи, важно знать элементарные основы и требования почтовых провайдеров:

• чтобы письмо хорошо выглядело на всех устройствах и все функции работали;
• чтобы верстальщик не отказался его верстать;
• чтобы составить ТЗ дизайнеру (если он есть) и проконтролировать результат.

Для удобства мы разделили статью на 2 части: базовые понятия и сборка письма. Начнем с базы.

Часть 1. Базовые понятия о дизайне писем

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

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

Если делаете макет в Photoshop, то можно сразу создать документ с шириной 600 px.

Базовая структура

Классическое письмо состоит из прехедера, шапки, тела и футера. Отдельные элементы — границы и фон.

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

Модули

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

Покажем на примере.

Модули располагают в одну или несколько колонок. В теле письма количество колонок может меняться: одна колонка может смениться двумя-тремя. Чтобы письмо было проще адаптировать под мобильные устройства, обычно используют 1-2 колонки.

Шрифты

В email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.

Если текст слишком мелкий, пользователи будут увеличивать письмо. Например, в устройствах под iOS 6-7 минимальный размер шрифта 13 px. Если в рассылке есть текст меньше, то система его автоматически увеличит до этого размера.

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

• наложить его на какое-то изображение, чтобы он стал его частью;
• сделать из нестандартного шрифта отдельную картинку, которую можно было бы распилить для адаптации под мобильные.

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

Расстояние между объектами

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

Решить проблему можно двумя способами: увеличить расстояние между заголовком и текстом или сократить междустрочный интервал в абзаце.

Расстояние между буквами определяет шрифт, расстояние между строками — интерлиньяж, а расстояние между блоками — отступы. Чтобы эти элементы дизайна не «слипались», расстояние всегда должно увеличиваться при переходе на более высокий уровень (от букв к строкам, от строк к блокам и т.д.). В бюро Горбунова это называют правилом «внутреннего и внешнего». Чтобы создать контрастность и повысить выразительность отдельных объектов, внешнее всегда должно быть больше внутреннего.

• Совет Артёма Горбунова о внутреннем и внешнем
• Артемий Лебедев. Теория близости

Фирменный дизайн

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

Пример LinguaLeo. Вот рассылка:

А вот сайт:

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

Запрещённые элементы

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

• JavaScript;
• flash-анимацию;
• CSS-анимацию;
• видео;
• формы;
• эффекты наведения — изменение свойств объекта при наведении мыши (псевдокласс :hover);
• эффекты параллакса.

Вставлять эти функции и объекты в макет письма не надо — они не отобразятся у пользователей.

Мы познакомились с основными понятиями в дизайне email. Пришло время собрать макет.

Часть 2. Собираем письмо

Предположим, нам нужно сделать макет письма для портала GuitarPlay.com. Этот сервис помогает с поиском людей в музыкальную группу, арендой репетиционных баз и организацией концертов. У портала есть сайт и блог.

Решаем, что будет внутри письма

Это дайджест, полноценная статья или каталог? Каждый формат предполагает свой дизайн.

Дайджест «Нетологии». Цель — рассказать, что произошло на сайте и в блоге за неделю:

Письмо-статья от «Мегаплана». Основной упор на текст и авторские иллюстрации.

Письмо-каталог от PitchShop. Упор на визуальную составляющую — покупатель видит товар, кликает на него и покупает.

Наша задача — кратко описать, что нового случилось в блоге и на сайте сервиса. Значит, делаем письмо-дайджест.

Рисуем прототип

Прототип нужен, чтобы продумать количество колонок и взаимоотношения между блоками, а также получить общее представление о макете. Такие черновики часто используют, чтобы показать клиенту концепцию страницы. Сделать прототип можно в Photoshop, Balsamiq или Axure. А можно нарисовать от руки.

Создаём окончательный макет

Макет делаем в Photoshop (а вы можете выбрать любой аналогичный сервис). Из-за того, что сервиса GuitarPlay.com не существует, можем придумывать все, что захотим. Начнём с прехедера и шапки.

В названии использован декоративный шрифт. Его можно объединить вместе с логотипом в единое изображение.

Перехожу к телу письма. Для текста я выбрал безопасный шрифт Sans Serif. Модуль под абзацем «Как взять баррэ?» — это картинка с наложенным сверху значком YouTube. Сюда нужно вшить ссылку на видео.

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

Подвинем название ближе к тексту.

Проделал то же самое с остальными интервалами:

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

Основную часть закончили. Теперь нужно проверить, все ли элементы дизайна можно перенести на языки разметки. Мы подготовили чек-лист с 20 правилами подготовки макета письма к вёрстке. В него надо заглянуть, прежде чем отдать макет верстальщику или начать верстать письмо самостоятельно.

Запомнить

1. Максимальная ширина письма — 600 px. На длину ограничений нет.
2. Письмо состоит из прехедера, шапки, тела и подвала. В них находятся модули, которые не пересекаются и не накладываются друг на друга.
3. Для основного текста рассылки нужно выбирать «безопасный» шрифт. Декоративные шрифты переводим в изображения и потом добавляем в письмо.
4. Буквы, строки и отдельные модули не должны слипаться между собой. Чтобы такого не случалось, пользуемся правилом внутреннего и внешнего.
5. У большинства рассылок есть фирменный дизайн. Для этого дизайнеры используют одни и те же шрифты, цвета и структуру во всех письмах.
6. Почтовые приложения не отобразят Flash-объекты и видео. Прежде чем вставить что-то новое, убедитесь, что почта это поддерживает.
7. При создании макета можно опираться на алгоритм: определить цель письма → нарисовать прототип → создать окончательный макет → проверить по чек-листу.

Обновлено 31 августа 2022 г.