Шаблоны email
Шаблон письма — заранее подготовленная структура письма со всеми визуальными элементами, в которой можно менять контент.
Cервисы email-маркетинга предоставляют свой набор готовых шаблонов. Большинство сервисов имеют визуальный редактор c drag-and-drop технологией. Визуальный редактор позволяет быстро вставить и оформить контент. Технология drag-and-drop позволяет быстро изменить структуру письма.
Преимущества предустановленных шаблонов – хорошо оформленное письмо можно подготовить за несколько минут, не требуется знания HTML-вёрстки.
Недостатки – адаптивность таких шаблонов может быть ниже, чем у шаблонов, свёрстанных вручную. То есть не на всех устройствах письмо будет отображаться корректно. Для работы с динамическим контентом готовых шаблонов может быть недостаточно. Кроме того, шаблонный дизайн может не учитывать всех тонкостей корпоративного бренд-бука. Поэтому многие компании предпочитают использовать собственные шаблоны.
Компоненты шаблона
Во всех шаблонах присутствуют 3 основных элемента письма: шапка-заголовок, блок основного контента, футер
Шапка-заголовок
В шапке размещаются идентификационные элементы: название вашей компании (или рассылки), логотип. Иногда – основной призыв к действию. Функция шапки – обозначить, что письмо пришло именно от компании, указанной в теме письма, а также привлечь внимание читателя к письму.
Основной контент
В блоке основного контента подробно расписывается суть предложения, располагаются ссылки и кнопки призыва к действию, фотографии товара.
Футер
В футере размещают контактные данные службы поддержки, ссылки на социальные сети и ссылку на отписку. Если вы пользуетесь бесплатным тарифом рассылочного сервиса, то в футере появится логотип и явное указание на то, что письмо было разослано с помощью этого сервиса.
Параметры рабочего пространства для дизайн-макета
Также как и в веб-дизайне, в email используют цветовую модель RGB. Для вёрстки дизайн-макета можно использовать низкое разрешение – 72dpi. На рабочем листе размером примерно 800х1000px создается контейнер шириной 600px с равномерной фоновой заливкой, внутри которого затем размещаются все визуальные элементы письма [1].
Ширину шаблона рекомендуется делать не более 600px для десктопов и не более 480px для мобильных устройств. Если значительная часть вашей ЦА просматривает почту с мобильных устройств, то лучше создать сразу два скетча – для десктопной и мобильной версии. Так верстальщику будет легче обеспечить адаптивность HTML-шаблона. Особое внимание следует уделить размещению кнопок, ссылок и призывов к действию — так, чтобы на мобильных устройствах они не оказались слишком маленькими и некликабельными [2].
Основные параметры макета
Шрифт
При вёрстке необходимо помнить о минимальных размерах шрифтов, которые используются на разных устройствах, например, iOS-устройства автоматически доводят более мелкие шрифты до 11 пикселей. Если этого не учесть, шаблон может разъехаться при просмотре на телефонах [3]
Кнопки и ссылки
Кнопки и ссылки в email предназначены для того, чтобы на них нажимали. Поэтому они должны быть достаточно большими, чтобы по ним можно было нажать не только стрелкой мыши, но пальцем. Возможно, эти элементы нужно будет увеличить в мобильной версии. Сделайте это. Всё ненужное в мобильной версии сайта можно будет спрятать с помощью атрибута display:none. Формат ссылок для email можно использовать такой же, как и в веб (синий текст с нижним подчеркиванием синего или зеленого цвета) [2].
Изображение и фон
Использование фоновых изображений в email – головная боль для верстальщика. Лучше отказаться от таких фонов уже при вёрстке дизайн-макета. (ссылка на статьи с вёрсткой). Не стоит делать надписи картинкой, если эта надпись несёт смысловую нагрузку, так как многие почтовые сервисы по умолчанию не показывают картинки. (ссылка на статьи о вёрстке)
Все цвета распишите в шестнадцатиричной системе (например: #ffffff). Этим вы сильно облегчите жизнь верстальщика. Так как коды цветов в RGB большинство почтовых сервисов не понимает. (ссылка на статью о вёрстке)