В прошлый раз мы считали ценность подписчиков. Сегодня вернёмся к MailChimp и посмотрим на возможности его Drag&Drop редактора писем. Он настолько удобен, что я предпочитаю работать с ним, даже если отправляю рассылку через другие сервисы — верстаю в Чимпе, а затем переношу результат на новое место. |
А чтобы не заниматься скучным перечислением инструментов, попробуем освоить редактор писем на практике: «соберём» простой, но функциональный шаблон рассылки, не прибегая к помощи дизайнера и верстальщика.
Следовать будем принципам стандартизации дизайна email рассылок, которые, с одной стороны, дают нам хороший запас гибкости, а с другой, помогают делать вполне симпатичные вещи.
Постановка задачи
Предположим, что нам нужно подготовить шаблон для рассылки сервиса Яндекс.Диск (выбрал «нейтральный» сайт, чтобы никому не было обидно:)
Рассылать собираемся новости и, возможно, какие-то маркетинговые предложения.
Выбор базового шаблона
Итак, заходим в Мэйл Чимп и создаём новую кампанию: Create Campaign.
Миновав начальные этапы Recipients и Setup, оказываемся на шаге Template. Здесь от нас требуется выбрать шаблон для письма из предложенного набора. Поскольку заранее подготовленных шаблонов у нас нет, как нет и готового html-кода для вставки, мы обращаемся в базовому набору (Basic) и выбираем самый толковый из них — 1 Column:
Инструменты
На шаге Design в левой части экрана мы видим непосредственно содержание письма, а в правой — инструментарий для работы с ним. Он включает в себя три вкладки:
– Content (работа с содержанием),
– Design (настройки оформления письма),
– Comments (комментарии при совместной работе).
Если первые две вкладки — это «наше всё», то вкладка Comments пригождается редко (только если мы совместно работаем над письмом с кем-то ещё и обмениваемся сообщениями по этому поводу через редактор писем).
Настройки письма (Page)
Начинаем работу с того, что переходим во вкладку Design и выбираем из появившегося списка первую строчку — Page:
Здесь настраиваем цвет фона письма и стили заголовков.
Чтобы определиться с фоном, заглянем на сайт Диска и выберем один из присутствующих на нём цветов. Желательно неяркий, приглушённый, чтобы не оттягивал внимание пользователей непосредственно от содержания. Вполне подойдёт светло-серый:
Чтобы «вытащить» html-код цвета, заскриншотим нужную часть сайта, а затем воспользуемся фотошопом (инструмент «пипетка»):
Наш цвет фона #f1f2f3.
Вставляем этот код в редактор писем и смотрим, что получилось:
Использование фирменной палитры перекинет «мостик» между нашим письмом и сайтом — то, чего мы будем добиваться и в дальнейшем, прибегая к другим узнаваемым элементам сайта в шаблоне.
Дальше определяемся со стилем заголовков. Для письма вполне достаточно заголовков двух уровней: h1 и h2. С помощью «инструментов разработчика» в браузере (ctrl + shift+ i для Хрома) и того же фотошопа можно «подсмотреть» на сайте соответствующие цвета и размеры шрифтов:
А вот с типом шрифта стоит быть осторожнее. Красивые, но экзотичные шрифты совершенно не подходят для email. Работать лучше со стандартным набором, который поддерживает каждый браузер:
Например, для h1 (heading 1) мы подбираем такой набор стилей:
#000000, Arial, 44px; для h2 (heading 2): #000000, Arial, 32px —
Прехедер (Preheader)
Определившись с настройками для всего письма, начинаем двигаться по шаблону сверху вниз, следуя его «классической» четырёхчастной структуре: прехедер → шапка → тело письма → подвал (футер).
Для начала зададим настройки прехедера — Design / Preheader.
В последнее время предпочитаю оставлять его пустым (какие-то дополнительные надписи сверху не всегда выглядят аккуратно). Поэтому устанавливаем фон такой же, как и вокруг письма: #f1f2f3. Уменьшаем высоту прехедера за счёт обнуления отступов Padding top и Padding bottom. Шрифт делаем того же цвета, что и фон (чтобы при желании можно было прописать скрытый текст, дополняющий тему):
Переключаемся на содержание прехедера. Чтобы внести необходимые изменения, наводимся на него мышью и кликаем на инструмент редактирования содержания:
«Вычищаем» шаблонный текст в обеих колонках с контентом
(правая часть экрана):
Шапка (Header)
Создание шапки письма начинаем так же с настроек — Design / Header.
Фон оставляем белым. Чуть увеличиваем размер по вертикали за счёт отступов Padding top и Padding bottom:
Приступаем к созданию содержания (левая часть экрана). В шапке хорошо будет смотреться логотип — разместим его по центру сверху.
Для этого кликаем по кнопке Browse, «заливаем» изображение лого на сервер и добавляем в письмо:
В окне справа прописываем у картинки ссылку и альтернативный текст (на случай, если она не загрузится в почте):
Визуально отделяем тело письма от шапки с помощью линейки. Сделаем её на основе контентного блока Divider. Для этого переключаемся справа на вкладку Content и перетаскиваем блок в нужное место письма под шапкой:
Переходим к редактированию блока в правой части экрана. Устанавливаем высоту с помощью отступов Padding top и Padding bottom, например, 2px. Удаляем видимую границу — Remove (она не достигает края письма, что в этом случае не годится). Зато прописываем фон блока такой же, как и вокруг тела письма:
Получаем приличную, не очень широкую линейку между шапкой и телом письма, в чём убеждаемся на предпросмотре:
Тело письма (Body)
Тело письма, как и с прочие его части, начинаем редактировать с общих настроек — Design / Body.
Фон оставляем белым (за редким исключением — это наилучший вариант для контентной части). Немного подгоняем отступы Padding top и Paddig bottom. Ниже настраиваем цвет, тип и размер основного шрифта. Как и в случае с заголовками, удобно взять за основу стиль шрифта с сайта.
Например, #606060, Arial, 16px.
Здесь же указываем цвет для ссылок. Берём что-то яркое и контрастное из палитры сайта, например, такой же цвет, как у кнопок — #f9c400:
Разобравшись с настройками, переходим к контенту.
Для того, чтобы шаблон был гибок и функционален, предусмотрим разнообразные блоки, которые дальше сможем перетасовывать, как колоду карт: текст, кнопка, картинка слева, картинка справа,
2 столбца.
• Текст
Традиционное начало письма — текстовый блок. Удобно взять за основу блок, уже существующий в шаблоне. Переключаемся в режим редактирования (для этого не обязательно кликать на «карандашик», можно кликнуть в любое другое место на блоке). Вставляем наши тексты для заголовка и вступления в правой части экрана:
• Кнопка
Не менее традиционна и удобна в верхней части письма кнопка с чётким призывом к действию. Ниже ещё могут быть текст и картинки, подробнее раскрывающие суть предложения, но предоставить возможность перейти на сайт лучше как можно раньше.
Во вкладке Content выбираем блок Button и перетаскиваем его под наш текст:
Переходим к редактированию и прописываем справа ссылку и текст для кнопки (например, «Узнать подробности»):
Приводим кнопку к стилю Яндекс.Диска.
Для этого переключаемся на вкладку Style в режиме редактирования блока. С помощью «Инструментов разработчика» мы узнали, что радиус скругления кнопки на сайте 6px, цвет фона #f9c400, а цвет шрифта #473e09.
Вносим эти параметры в настройки кнопки в письме:
• Картинка слева
Оживим письмо иллюстрацией. Для начала перетащим под кнопку блок Image + Caption. Кликнем по блоку мышью, чтобы войти в режим редактирования, и во вкладке Settings установим взаимное расположение изображения и текста Caption Position — Right, Caption Width — Two-Thirds:
Затем во вкладке Content загрузим иллюстрацию подходящего размера — Browse. Пропишем для неё ссылку и alt-текст. Добавим сюда же сопроводительный текст с заголовком h2 и ссылкой:
• Картинка справа
Приятный момент. Поскольку блок с картинкой справа в нашем шаблоне зеркально отображает блок с картинкой слева, то для того, чтобы создать его, достаточно скопировать предыдущий блок (Duplicate Block):
А затем во вкладке Settings выставить Caption Position — Left:
В этом и проявляется мощь, на которую способен drag&drop редактор писем — блоки копируются, перемещаются и видоизменяются здесь за секунду.
• 2 столбца
Завершаем наш набор контента блоком 2 столбца.
Для этого добавляем ниже ещё один блок Image + Caption и во вкладке Settings устанавливаем Caption Position — Bottom, Number Of Images — 2:
Для разнообразия подберём какую-нибудь новую иллюстрацию с сайта, а также вставим в столбцы тексты с заголовками и ссылками:
• Подпись
Чтобы тело письма приняло законченный вид, завершим его небольшим текстовым блоком с подписью:
Опционально
На этом работа с письмом почти завершена. Однако остались ещё 2 небезынтересные возможности, которые хоть и не укладываются в текущую структуру шаблона, всё же заслуживают внимания.
• Вставка кода
Иногда возможностей Drag&Drop оказывается недостаточно, чтобы реализовать тот или иной элемент шаблона. К примеру, нам может понадобиться блок 4 столбца или что-то ещё в таком духе.
Редактор писем MailChimp решает эту проблему, предлагая сверстать нестандартный элемент отдельно, а затем вставить его в шаблон кодом, как ещё один блок с контентом.
Для этого мы используем блок Code, который перетаскиваем в тело письма обычным способом:
Вставляем в него подготовленный заранее html-код — и готово дело.
Так мы можем реализовать практически любую свою задумку:
Впрочем, увлекаться особо не стоит. В конце концов, наша задача — создать простой, функциональный шаблон, с которым сможет работать и самый неподготовленный пользователь.
• Вставка видео
В своё время уже рассказывал, как добавить видео в рассылку.
В этом смысле редактор писем MailChimp здорово упрощает жизнь, позволяя размещать видео в полуавтоматическом режиме.
Чтобы это сделать, перетащим в тело письма контентный блок Video:
В настойках блока (вкладка Content) пропишем ссылку на наше видео, размещённое на YouTube или Vimeo. Чимп сформирует для него скриншот, а нам останется прописать alt-текст и описание (если необходимо):
В тех почтовых клиентах, где это возможно, добавленное таким способом видео будет проигрываться прямо «внутри» письма:
В остальных видео будет отображаться по обычной схеме
«картинка + ссылка».
Футер
Заключительная часть письма — его «подвал» (футер). По сложившемуся обыкновению первым делом идём в его настройки — Design / Footer.
Определяемся с фоновым цветом. Например, возьмём с сайта тёмный оттенок, чтобы контрастировал с белым телом письма — #1c1c1c:
Цвет текста (и ссылок), наоборот, выбираем светлым, чтобы считывался без труда — #ffffff:
Дальше работаем над содержанием.
У Яндекс.Диска нет сообществ в социальных сетях, поэтому кнопки Social Follow нам не нужны. Но возможность делиться контентом письма нам пригодится — перетаскиваем в футер блок Social Share:
Выбираем соцсети из предложенного набора во вкладке Content. Например, Facebook, Twitter и Google+ (Вконтакте, к сожалению, пока «не завезли»):
Во вкладке Style устанавливаем цвет и размер шрифта — #ffffff, 16px:
Во вкладке Settings выбираем «осветлённый» стиль иконок:
В блоке ниже проводим серьёзную «ревизию» — выкидываем email адрес для обратной связи и ссылку на обновление профиля, прописываем своё объяснение, почему подписчик получил эту рассылку и акцентируем ссылку отписки:
Визуально разделяем блоки футера аккуратной пунктирной линеечкой:
Мобильная версия (Mobile Styles)
Из перечня настроек, доступного во вкладке Design, остаются ещё настройки мобильной версии письма — Mobile Styles:
Но у меня хорошие новости: эти настройки и по умолчанию неплохи. Поэтому копаться в них без нужды не стоит. Просто едем дальше.
Бэйдж Мэйл Чимп (Monkey Rewords)
Для пользователей бесплатных аккаунтов остаётся последний уровень настройки шаблона, которому нужно уделить внимание — Monkey Rewords.
Это рекламный «бэйдж» Мэйл Чимп, который редактор писем автоматически добавляет во все письма в футере. Именно за него ответственна строчка кода *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*, которую мы оставили нетронутой.
По умолчанию здесь установлен бэйдж такого вида:
Поменяем его на что-то более подходящее нашему шаблону:
Предпросмотр
По сути, письмо почти готово. Но остаётся ещё ряд мелочей, без которых работу всё же нельзя считать завершённой. В первую очередь, нам нужно оценить общий вид шаблона на предпросмотре, чтобы выявить возможные огрехи и нанести завершающие штрихи (вроде изменения высоты воздушных промежутков).
Чтобы переключиться в режим предпросмотра, выбираем в верхней строке меню Preview and Test / Enter preview mode:
Просматриваем не только сам шаблон в левой части экрана, но и его мобильную версию в правой:
Вращаем мобильную версию так и этак, чтобы увидеть, как ведут себя контентные блоки:
Тест шаблона
Если визуально с шаблоном полный порядок, можно испытать его в условиях, приближённым к «боевым», сделав рассылку на тестовые адреса.
Для этого выбираем Preview and Test / Send a test email:
Указываем адреса своих тестовых почтовых ящиков (можно ввести несколько через запятую) и жмём Send Test:
В почтовиках убеждаемся, что шаблон отображается корректно с картинками и без картинок:
Помимо mail, gmail, yandex и rambler не забываем и про зловредный Outlook. Впрочем, в последнем случае требования к качеству отображения письма можно понизить. Не разваливается, показывается более менее корректно — и ладно:)
Social Cards
Поскольку мы подразумеваем, что нашим письмом будут делиться в соцсетях, то неплохо бы управлять его отображением и в этом случае.
Заходим в Preview and Test / Social Cards, где включаем опцию Customized Social Cards:
Дальше делаем всё, как и при обычном размещении контента в соцсети: выбираем картинку, которая будет прикреплена к публикации, прописываем заголовок и короткий сопроводительный текст (можно первую фразу из письма):
Слева редактор писем MailChimp покажет, как будет выглядеть расшаренное письмо на Facebook, в Twitter и Pinterest.
Вот теперь всё готово!
Save as…
Доведённый до ума шаблон сохраняем с помощью пункта верхнего меню Save as Template. На самом деле, это не обязательно — Чимп позволяет брать за основу при создании кампании буквально всё, что угодно: предыдущие рассылки, сохранённые черновики. Но всё же для порядка шаблон удобно иметь в списке Templates.
Кроме того, его можно перенести в любой другой сервис — воспользовавшись ссылкой на письмо (наподобие той, что приведена выше) или выкачав полноценный html-файл:
Заключение
Конечно, я не рассмотрел здесь 100% инструментария Drag&Drop — статья и без того получилась не маленькая:) Но если вы добрались до этих строк, то, полагаю, уже усвоили основные принципы работы и без труда соорудите собственный шаблон, как следуя предложенному методу, так и изобретая что-то своё, осваивая нюансы через практику.
Чтобы «собрать» шаблон, не нужно разбираться ни в html, ни в css (хотя основы лучше подтягивать), ни уметь хорошо рисовать в фотошопе. Достаточно иметь минимальное художественное чутьё и набить руку в Мэйл Чимпе.
Drag&Drop редактор писем собирает шаблоны, не только удобные для последующей работы (можно перетаскивать, копировать и удалять любые его блоки), но и корректно отображающиеся во всех распространённых почтовиках. А также автоматически адаптирующиеся под мобильные устройства.
Используя элементы дизайна своего сайта, можно привести его к единому «фирменному» стилю, который сделает письма узнаваемыми для подписчиков. Зачастую для запуска email маркетинга в компании этого бывает достаточно.
[В следующий раз у нас на очереди рубрика «Тестирование».
Раскопал для неё небольшой кейс по сплит-тесту содержания].
P.S. Вы находите материалы Email-practice полезными? Тогда читайте мою книгу «E-mail маркетинг для интернет-магазина».
P.P.S. Если вы ещё не подписались на мою рассылку — самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике! 🙂