Компоненты дизайна email-рассылок. Часть 2

Дата публикации
13.02.2017

Расположение блоков

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

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

На область, выделенную слева, в верхней части экрана, примерно 400х300 пикселей приходится основное внимание получателя. Поэтому основной информационный посыл необходимо начать с первого предложения. Старайтесь писать кратко, короткими предложениями, разделенными на абзацы. Ну и, конечно, любимые инструменты емейл-копирайтера — это маркированные списки, которые делают визуальные акценты и облегчают чтение.

Старайтесь использовать больше горизонтальных элементов и меньше вертикальных. Чем больше вертикальных разделений присутствует в макете, тем больше это будет отвлекать подписчика от чтения. Придерживайтесь двух или трех вертикальных разделений внутри сетки. Пропорциональность и ровные линии — закон в дизайне емейл-рассылок.

Располагать элементы по центру следует если:

- письмо короткое;

- письмо содержит минимальное количество текста;

- контент письма состоит из одной большой картинки и короткого абзаца текста.

Если контент состоит их нескольких абзацев, форматирование текста и небольших изображений следует центровать по левому краю. 

Изображения

Большое количество изображений утяжеляет письмо, что негативно сказывается и на скорости отправки рассылки (при большой базе подписчиков). Также не забывайте, что у многих почтовых систем тяжелые письма могут блокироваться, особенно это касается корпоративных адресов, настройки которых индивидуально устанавливаются системными администраторами. Письма размером более 800 кбайт просто не дойдут до адресата. 

Не стоит забывать, что изображения могут не загрузиться на некоторых почтовых приложениях, поэтому обязательно использовать ALT-теги в письме и функцию «Прикреплять к телу письма», которая есть в системе SendExpert.

Еще одним важным фактором является достаточное количество текста. Если картинки не отобразятся, это позволит «спасти» рассылку, К тому же, текстовое содержание «любят» спам-фильтры. Поэтому, придерживаясь «золотой середины» вы, как говорится, «убьёте всех зайцев».

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

Цвет и композиция цветов

Старайтесь использовать 2 цветовых акцента в письме. Минимальное количество цветовых акцентов сделают письмо «чистым» и облегчат чтение. Большое количество цветов будет отвлекать от текстового содержания и «заветный клик» не состоится. Ну и, конечно, в выборе цвета письма ориентируйтесь на корпоративную палитру.

Также удачным приемом является использование цветного фона в верхней и нижней части письма. Это визуально выделит содержание. 

Читайте также: Дизайн рассылок: ТОП-5 тенденций на 2017 год

1. Шаблонный

В большинстве случаев используют для отправки регулярных рассылок. Шаблонные макеты рассылок строятся по определенному общепринятому принципу, структурно понятны подписчикам.

Получатели не тратят время на изучение письма, могут пробежаться по содержанию и остановиться на главном. Составление такого письма занимает немного времени, так как готовые шаблоны есть в любой системе рассылок.

Такие виды писем подходят для отправки регулярных рассылок лояльной аудитории.

2. Индивидуальный.

Создается индивидуально под рассылку (рекламную кампанию), содержит индивидуальный дизайн. Такие письма отличаются дизайном и вызывают wow-эффект. 

Подходит для привлечения «холодной» аудитории, которая получает рассылку, однако не относится к числу активных.  

Мастер-класс

В прошлом материале мы уже сделали первые шаги в визуальном редакторе системы SendExpert. Остановились на том, что создали несколько строк в макете и научились создавать фон отдельных элементов письма.

Следующий шаг — создание простейшей шапки письма — хедера. Для начата разделим нашу строку на две ячейки. Сделать это можно, разместив курсор в строке, вызвать контекстное меню правой клавишей мыши и нажав «Ячейки» — «Разделить ячейки по горизонтали».

После этого необходимо четко определиться с шириной ячеек. Так, для того, чтобы границы ячейки «не расплывались», располагаем в нужной ячейке курсор, вызываем контекстное меню, нажимаем на раздел «Ячейки» — «Свойства ячейки», в поле «Ширина» устанавливаем параметр 300. Учитывая, что шаблон нашего письма шириной 600 пикс., половину, 300 пикс., будет занимать левая ячейка, вторую половину — правая. Устанавливаем те же параметры для правой ячейке и переходим к размещению логотипа в левой верхней ячейке.

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

Нам осталось только добавить текст и простеший шаблон рассылки готов. 

О том, как добавть кнопку-призыв к действию, читайте в моей статье, посвященной базывом элементам HTML-кода

Читайте также по теме: Полезные элементы HTML без которых не обойтись, макетируя рассылки. Часть 2

Читайте также

Подпишитесь на дайджест по email-маркетингу!