Почему о дизайне e-mail рассылок следует знать веб-дизайнерам? В отличии от сайтов, дизайн электронных писем заказывают регулярно. Рассылки отправляют раз в неделю или чаще, на праздники стараются заказать тематическое оформление писем. Праздников в России, сами знаете сколько. Это регулярные заказы, человеку, который работает в офисе это не принципиально, а для фрилансера — регулярные заказы важны.
Этому очень просто научиться. Если ты умеешь создавать сайты, то дизайн рассылок для тебя сущий пустяк. Все расскажу.
Электронные письма могут предназначаться для уведомлений после регистрации, это может быть информационная рассылка веб-сервиса или интернет-магазина, примеров много. Здесь большие возможности для роста дизайнера. Много можно придумать, нарисовать, чтобы выглядело красиво.
Дизайн концепция может заключаться в текстовом блоге с фотографией автора. Интернет-магазины часто используют какие-то графические изображения внутри письма.
Структура e-mail рассылки
Обязательные элементы письма: шапка, тело и футер. Они должны присутствовать в любом письме, остальные — на твое усмотрение. О каждом по порядку.
Прехедер
Если пользуешься gmail, точно знаешь, что есть «тема письма», «от кого» письмо, а потом идет еще какой-то текст. Он как раз берется из прехедера. В нем лучше коротко описать суть письма, чтобы заинтересовать человека, который пока не открыл письмо. Еще в прехедере хорошо дать ссылку на отписку, телефон и соц. сети.
Шапка письма
В шапке желательно располагать логотип и какую-то контактную информацию (в интернет-магазине это почти всегда телефон).
В постхедере есть смысл располагать меню письма, если оно очень большое или меню интернет-магазина. В теле письма располагается контент (содержание). Вариантов немного: он может быть текстовым или графическим. Даже форматы ограничены: jpg, png или gif. Тело письма должно сообщить о сути предложения, обязательно здесь располагать призыв к действию. Обычно это яркая кнопка, на которую можно кликнуть. Это может быть подтверждение подписки, покупка чего-либо или просмотр видео.
Префутер
Префутер — это часть, где содержатся анонсы. Это могут быть блоки с дополнительными акциями. В общем важная информация, которая не помещается в контентную часть.
В футере есть смысл располагать меню и опять же ссылки соц.сети и контакты. В постфутере принято писать юридическую информацию, адрес, контактную информацию. Некоторые рассыльщики требуют это указывать в обязательном порядке. в самом низу должен быть текст, что вы получаете это письмо, потому что подписались там-то там-то, чтобы отписаться, перейдите сюда.
Так выглядит стандартное письмо. Еще раз: шапка, тело и футер должны быть обязательно, остальное по желанию.
Особенности e-mail маркетинга
Большинство людей проверяет свою почту с мобильных устройств, поэтому нужно использовать респонсив, если возможно, или делать письмо не шире 600 рх. Лучше используй адаптивный макет, который будет подстраиваться под размер устройства пользователя.
По возможности, используй минимум текста, чтобы люди не тратили много времени и сразу понимали суть письма. Если подписчики визуалы, то лучше опираться на графическое представление информации.
Используй кнопки с призывами к действию, чтобы не сильно вчитываясь в письмо, читатель мог кликнуть и совершить нужное действие даже на другом языке.
Помни о верстке. Если в паре есть верстальщик, то сразу обсудите и поймите, что лучше использовать, а от чего стоит отказаться, для лучшего взаимодействия. Например, скругленные углы приходится сохранять отдельной картинкой. Поэтому лучше вам договориться об обычном формате без скругления.
Без картинок письмо должно смотреться хорошо. Т.е. если у получателя письма картинки не отображаются, то письмо не должно выглядеть убого или вообще не читаться.
Используй шаблоны. Все привыкли видеть шапку, тело и футер, поэтому сильно не выдумывай и используй готовые, проверенные и рабочие вещи.
Шрифт. Используй минимум 13рх, чтобы люди могли читать письма с мобильных устройств. Используй крупные кнопки, чтобы потому что люди будут нажимать на них пальцами, не все заходят с компа и кликают мышкой.
Способы верстки писем
- С помощью верстальщика. Который с радостью вам поможет, сверстает письма.
- Конструкторы. Есть специальные конструкторы для писем, где без знаний верстки в визуальном режиме ты можешь сверстать письма.
- В редакторе можно редактировать текст, добавлять блоки с изображениями, разрывы страниц. Используя принцип «перетаскивания» элементов можно создать красивое письмо и посмотреть как это будет отображаться и на компьютере, и на телефоне. Очень удобно. После тестирований, получишь готовый код письма.
- Themeforest. Здесь можно недорого купить готовые шаблоны для писем. Работы очень крутые, их легко можно адаптировать под себя или заказчика. Если нажать live preview, письмо покажут в нескольких видах, а затем как оно отображается на разных устройствах. В этот шаблон можно добавлять свои элементы, т.е. эффект конструктора тоже присутствует.
Есть жесткие готовые шаблоны, в которых тебе остается только вставить свой текст и картинки. Таких сервисов много: ink, zurb и другие. Больше информации по e-mail маркетингу есть на хабре.
У тебя есть примеры писем, которые ты делал? Кидай в комментарии, мы заценим.
