Рассылки для чайников-7. Как создать красивое письмо. Дизайн и вёрстка
В прошлых выпусках
В прошлых выпусках «Рассылок для чайников» мы собрали базу, подружили рассылки с законом, сделали форму рассылки, настроили аутентификацию и составили чеклист перед отправкой письма.
Если не хотите рисковать с поиском агентства или фрилансера — можете обратиться к нам. Мы найдём эксперта, который качественно и вовремя подготовит дизайн и сверстает письмо.
В этом выпуске мы расскажем, как создать письмо с нуля.
Я никогда не занимался дизайном и вёрсткой. Я смогу создать письмо?
Мы уверены, что каждый должен делать свою работу: дизайнер — макет рассылки, верстальщик — вёрстку, email-маркетолог — стратегию и управление. Но если нет подходящего ресурса, все приходится делать самому.
Скорее всего, с наскока создать письмо не получится. Это нормально: люди годами учатся дизайну и вёрстке. Мы надеемся, что эта статья задаст направление и предостережёт от типичных ошибок, которые делают новички.
В чём особенности дизайна и вёрстки писем
Создание писем отличается от разработки сайтов и приложений. В чём проблема:
В письмах не работают многие CSS и HTML-теги. Это специальные настройки, которые отвечают за внешний вид страниц в интернете. Например, в письме не получится наложить два элемента друг на друга или добавить анимацию кнопке.
Письма открывают в разных программах. Outlook, Mail.Ru, Gmail, почта Mac — эти программы по-разному отображают письма.
Письма открывают на разных устройствах. На телефоне, планшете и компьютере разный размер экрана. Дизайнер и верстальщик должны учитывать это при создании письма.
Из-за этих особенностей даже появились отдельные профессии: email-дизайнер и email-верстальщик.
Я расскажу об основных принципах в создании писем. Начнём с базовых понятий в email-дизайне.
Что нужно знать о дизайне писем
Размер письма
600 пикселей — оптимальная ширина письма. Именно такую рекомендуют почтовики. Если письмо шире — на некоторых устройствах появится горизонтальная полоса прокрутки. При этом длина письма и размер фона может быть любым.
Элементы письма
Классическое письмо состоит из прехедера (короткая полоса в начале письма), шапки, тела и футера. Всё, что снаружи этих элементов — фон.
Модули
Письма верстают таблицами. Поэтому каждый элемент занимает участок в виде прямоугольника или квадрата — это нужно учитывать ещё на этапе создания макета. Эти модули не пересекаются и редко накладываются друг на друга. Их наполнение может быть разным: текст, изображение, кнопка, GIF-анимация, ссылка.
Так выглядят модули в письме. Все они занимают пространство в виде квадрата или прямоугольника, чтобы верстальщику было проще уложить элементы в таблицы
Шрифты
В email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.
Безопасные шрифты
Если использовать какие-то другие шрифты, то почтовые приложения могут автоматически заменить их на шрифт по умолчанию. В итоге, внешний вид рассылки будет совсем не таким, каким его задумал дизайнер.
Цвета, общий стиль
Обычно письмо — это продолжение сайта. В нём используются те же семейства шрифтов, такие же логотипы и цветовые сочетания. Так мы сохраняем корпоративный стиль, а подписчикам проще узнать нас среди входящей почты.
Сайт и рассылка LABA. Те же цвета, похожий стиль и шрифты
Проще всего подсмотреть цвета и шрифты для рассылки в брендбуке компании. Если такого нет — можно собрать палитру цветов с сайта и перенести их в письмо. Я для этого использую расширение для Chrome Eye Dropper.
Что нельзя вставлять в письмо
Из-за особенностей вёрстки и требований почтовых провайдеров далеко не все элементы можно безболезненно вставить в письмо. Вот, например, что нельзя добавлять в рассылки:
Полезно
15 ошибок вёрстки, из-за которых письмо может попасть в спам
Одну картинку вместо полноценного письма. В email-сообщениях помимо изображений обязательно должен быть текст.
JavaScript.
Flash-анимацию.
CSS-анимацию.
Сокращённые ссылки (например, через сервис bit.ly).
Формы.
Параллаксы.
Некоторые из этих элементов не будут отображаться в рассылке (например, Flash-анимации, JavaScript). Другие могут отображаться, но при этом значительно повысят шанс рассылки на попадание в спам (сокращённые ссылки, письмо из одной картинки).
Видео. Стоит учесть, что потоковое видео поддерживают не все платформы. Обычно маркетологи вставляют картинки или GIF-анимацию с превью видео. В них уже вшивают ссылку на полную версию ролика. Как вставить видео в письмо.
Ссылки. Их можно вшивать в текст и картинки.
С чего начать
Проще всего создать письмо в блочном редакторе. В нём можно выбрать готовый шаблон или собрать письмо из блоков с нуля. Вот, для примера, готовый шаблон в блочном редакторе UniSender.
Шаблон можно произвольно менять. Также в блочном редакторе можно собрать письмо с нуля
Но если вы решили сделать дизайнерский макет, который после этого пойдёт в вёрстку, порядок действий будет другой. С чего начать:
Набросайте примерный эскиз: как будут располагаться элементы, что это будут за элементы: текст, картинки, анимации.
Наполните шаблон контентом, отредактируйте расстояние между различными элементами.
Рекомендуем почитать статью, в которой мы пошагово создаём макет письма. Будет полезно, если вы до этого никогда не создавали дизайн рассылок.
Как сверстать письмо
Дизайн письма готов. Теперь его нужно переложить на HTML — специальный язык, который отвечает за внешний вид сайтов. Только в таком виде письмо можно отправить пользователям.
Я знаю 3 способа, как можно сверстать письмо. Рассказываю о каждом из них.
Вручную
Чтобы сверстать письмо вручную, нужно знать HTML и CSS. Верстают email в редакторах исходного кода: Eclipse, Visual Studio Code, Notepad++. В них мы создаём табличный макет, прописываем теги и атрибуты, адаптируем письмо под мобильные.
Так выглядит код небольшого письма от PANDORA. В начале всегда приходится писать код с нуля. Дальше проще: под отдельные элементы появляются шаблоны и готовые решения
Плюсы
Минусы
Можно создавать гибкие шаблоны, которые будут легко адаптироваться под устройства с разными размерами экранов.
Можно сверстать сложный макет, который не всегда получится создать в блочном редакторе.
Нужно хорошо знать HTML и CSS.
Прописывать код вручную дольше, чем создавать письмо в блочном редакторе.
Собрать в блочном редакторе
Блочный редактор ускоряет сборку писем и помогает верстать email тем, кто в совершенстве не владеет HTML и CSS. Работа в таких редакторах построена по принципу «бери и тащи» — мы перетаскиваем нужные блоки в макет письма и заполняем их контентом.
Так работает блочный редактор UniSender. Письмо можно разбить на несколько колонок, наполнить нужными элементами и задать отступы
Чтобы работать в блочном редакторе, знать языки программирования не обязательно. Вот навскидку несколько сервисов, в которых можно сверстать письмо в блочном редакторе: UniSender, Stripo, Tilda.
Плюсы
Минусы
Верстать письма в блочном редакторе быстрее, чем делать это вручную.
Знать HTML и CSS не обязательно.
В большинстве блочных редакторов можно сверстать адаптивные письма, которые будут подстраиваться под различные размеры экранов.
Трудно сделать необычный, дизайнерский макет.
Отдать на аутсорс
Как вариант, всю работу по дизайну и вёрстке писем можно отдать агентствам или фрилансерам. Агентства можно найти через поисковую выдачу, фрилансеров проще искать на специализированных сайтах (fl.ru, freelance.ru) или в соцсетях.
Полезно
Кому поручить рассылки: маркетологу, агентству или фрилансеру