О дизайне емейл-рассылок написано не одна сотня статей. Хорошо продуманная и сбалансированная визуальная часть письма повышает количество кликов в письме и количество ваших продаж. Поэтому преобразование шаблона, подготовленного вашим дизайнером в формате psd, один из важных и сложных этапов в подготовке емейл-рассылки.
Качество преобразования psd в html влияет на то, как ваша рассылка отобразится на экранах ноутбуков, планшетах и мобильных телефонах клиентов.
Зачем создавать шаблон письма в Photoshop?
Обычно с шаблоном в формате psd проще поставить ТЗ верстальщику. В Photoshop отображаются все необходимые элементы: размер и название шрифтов, слои с различными элементами письма. Верстальщики “читают” такой макет и на его основании создают письмо в виде HTML.
Почему отправка письма должна быть в HTML?
Начнем с того, что не все сервисы для отправки писем даже будут поддерживать такой формат, поэтому вероятнее всего его придется сконвертировать в png или jpeg. Но если ваше письмо будет состоять только из картинок - с ним может возникнуть гораздо больше проблем. Есть ряд причин для конвертации электронного письма из PSD в HTML.
- Отображение ваших рассылок. Продуманный и тщательно отрисованный дизайн не будет ничего стоить, если в почте письмо “поедет” или не отобразится. Чтобы письмо корректно отображалось в почтовых ящиках получателей рассылки, оно должно быть правильно сверстано. Просто порезав psd и собрав его в редакторе в кучу, вы можете получить совсем противоположный результат.
- Блокировка писем только из картинок. Большинство спам-фильтров на почтовых серверах блокируют сообщения, состоящие из одной картинки. К тому же, во многих браузерах и почтовых клиентах есть функция блокировки картинок.
- Адаптивность письма. Большая часть ваших клиентов будет просматривать почту на экране своего мобильного телефона. Это означает, что вы не можете позволить себе разочаровать мобильных пользователей
- Существуют более 50 современных почтовых клиентов, в любом из которых ваши письма должны отображаться правильно. Html дает возможность учесть практически все особенности почтовых клиентов, чтобы письмо отображалось корректно.
- HTML даёт возможность анализировать результаты. Чтобы использовать любой сервис для отправки рассылки, вам нужно будет письма преобразовать в формат HTML. Сервисы рассылок позволяют отслеживать эффективность ваших емейл-кампаний по клику на каждую ссылку в письме.
- Больше возможности для персонализации. Хорошее письмо - это письмо, актуальное для получателя. Поэтому ваша рассылка должна быть персонализированной. Для этого в коде письма используются переменные и динамический контент, что опять-таки невозможно сделать в письме из одной картинки.
Давайте рассмотрим на примере, как оптимально перенести макет письма в систему рассылок.
Получаем макет письма в формате PSD
Первое, что нужно для работы - грамотно составленный шаблон письма.
PSD-шаблон должен быть выполнен в вашем корпоративном стиле, привлекательным и продуманным. Тем не менее, дизайнеры емейлов не пользуются такой же творческой свободой, что и разработчики веб-сайта.
Основные требования к шаблону следующие:
- Ширина письма не должна превышать 600 пикселей.
Имеется в виду именно информационная область письма, на фоне может быть подложка, которая заполнит свободное пространство на широкоформатных мониторах
- Табличная верстка
Из-за того, что у почтовых сервисов нет общих правил отображения html писем, используется табличная верстка. Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная верстка гарантирует, что письмо будет корректно отображено на всех платформах и не “расползется”.
- Шрифты – это важно!
Существует достаточно ограниченное количество поддерживаемых почтовиками шрифтов, поэтому используем стандартные: Arial, Arial, Georgia, Tahoma, Times New Roman, Trebuchet MS, Verdana. Текст необходимо разбивать на смысловые абзацы, использовать разный размер шрифта, заголовки и подзаголовки.
- Соотношение текстовой части и изображений.
Учитывая то, как много почтовых клиентов по умолчанию блокируют загрузку картинок, может получиться так, что текстовое содержание единственная вещь которую увидят ваши получатели. Проверяйте соотношение текста и картинок, идеально - 50:50 или 60:40, не делайте письмо одним изображением.
Адаптируем макет psd для рассылки
Давайте рассмотрим на примере, как правильно адаптировать psd для email-рассылки.
Ознакомление с макетом
Наш шаблон соответствует требованиям: ширина контентной части 600 рх, используется стандартный шрифт Arial, изображения и текст находятся на различных слоях.
Макет стандартный, состоит из хедера, контентной части и футера:
Чтобы получать информацию об отдельных объектах макета, включаем инструмент «Автовыделение»:
Теперь мы можем кликнуть по любому элементу макета и он будет выбран в панели слоев. С помощью автовыделения получаем информацию о шрифтах.
Используемый шрифт текста - Arial, размер шрифта для текста 12 px, для заголовка - 24 px. Цвет заголовка #484a43,
цвет шрифта контента #333333, цвет ссылок #6d7e44
Инструменты Photoshop позволяют сохранять изображения в формате .jpg c помощью вкладки “Набор изображений” (Файл → Генерировать → Набор изображений)
Цвет фона всего письма и хедера: #f0f2ea.
В нашем макете изображения уже подготовлены отдельно, что немного упрощает задачу.
Основные данные из макета получены, теперь нужно сформировать html шаблон для рассылки.
Перенос макета в редактор
Редакторы создания сообщений встроены практически во все сервисы рассылок. Принцип работы большинства таких редакторов - Drag&Drop, то есть мы выбираем нужный блок и переносим его на рабочую область. Наша задача - кастомизировать стандартный шаблон под существующий макет.
Для создания письма можно выбрать любой из стандартных шаблонов eSputnik:
Для создания письма я выбрала первый шаблон “Промописьмо”:
Создание оформления
Начинаем работу с вкладки “Оформление”, в которой прописываем полученную информацию о шрифтах и фоне письма. Заполняем разделы “Общие”, “Заголовки”, “Хедер”, “Футер”.
На вкладке “Общие” заполняем цвет фона и контента письма, подставляем информацию о типе, размере и цвет шрифте согласно шаблону.
В нашем макете отступы от края письма до контентной части 30 пикселей, переносим эти значения в оформление:
В разделе “Заголовки” прописываем тип, размер и цвет шрифта заголовков согласно макету:
В разделе “Хедер” прописываем тип, размер и цвет шрифта заголовков согласно макету, заполняем данные о фоне письма и контента:
По аналогии заполняем информацию в разделе “Футер”:
Важно: не оставляйте прозрачный фон контента или футера, так как некоторые устройства могут отображать его белым цветом вместо цвета фона.
Прописываем отображение письма на мобильных устройствах на вкладке “Адаптивность”.
Вся информация, добавленная в “Оформление”, отображается в разделе CSS в коде письма:
После того, как мы прописали всю информацию на вкладке “Оформление”, переходим на вкладку “Контент”.
Создание контентной части письма
Письмо состоит из полос, содержащих структуры и блоки. Чтобы прописанный стиль оформления правильно применился, необходимо задать нужное значение полосе:
Важно: количество полос увеличивает вес кода письма, что влияет на его отображение (например, в Gmail). Используйте только необходимое количество полос - отделяйте хедер, контент, футер и постарайтесь не разделять контент на полосы.
Создаем шапку письма: добавляем лого и текст.
Не забываем прописать альтернативный текст и ссылку на ваш сайт в логотипе:
Переходим к контентной части письма и добавляем полосу для контента. В структуру добавляем блок “Картинка”:
Для заголовка добавляем еще одну структуру с блоком “Текст”:
К тексту применяем форматирование, ставим Заголовок 2:
Для следующей части письма выбираем структуру из 2-х частей:
Уравниваем контейнеры структуры между собой для корректного отображения, нажав в меню на знак равно:
В структуру добавляем блок “Картинка” и 2 блока для текста:
Заполняем данными:
Затем добавляем структуру с картинкой и текстом для следующего блока:
Добавляем футер. В нём расположены контакты и соцсети. Используем структуру из 2-х частей, в левой части будут только текстовые блоки, в правой - блок “Соцсети” и текст.
Не забывайте после создания каждого раздела просматривать отображение письма на мобильном устройстве:
Обратите внимание, что помимо вкладки “Адаптивность”, отображение письма на мобильном устройстве можно корректировать непосредственно в процессе создания письма:
Посмотреть результат.
После создания письма не забудьте протестировать его отображение в одном из специальных сервисах или на доступных устройствах.
Хотите потренироваться? Шаблон в формате psd доступен по ссылке.