№61 Тяни-толкай: как работать в Drag&Drop редакторе MailChimp

Drag & Drop MailChimp В прошлый раз мы считали ценность подписчиков. Сегодня вернёмся к MailChimp и посмотрим на возможности его Drag&Drop редактора писем. Он настолько удобен, что я предпочитаю работать с ним, даже если отправляю рассылку через другие сервисы — верстаю в Чимпе, а затем переношу результат на новое место.

А чтобы не заниматься скучным перечислением инструментов, попробуем освоить редактор на практике: «соберём» простой, но функциональный шаблон для писем, не прибегая к помощи дизайнера и верстальщика.

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

 

Постановка задачи

Предположим, что нам нужно подготовить шаблон для рассылки сервиса Яндекс.Диск (выбрал «нейтральный» сайт, чтобы никому не было обидно:)

Скриншот сайта

Рассылать собираемся новости и, возможно, какие-то маркетинговые предложения.

 

Выбор базового шаблона

Итак, заходим в Мэйл Чимп и создаём новую кампанию: Create Campaign.

Миновав начальные этапы Recipients и Setup, оказываемся на шаге Template. Здесь от нас требуется выбрать шаблон для письма из предложенного набора. Поскольку заранее подготовленных шаблонов у нас нет, как нет и готового html-кода для вставки, мы обращаемся в базовому набору (Basic) и выбираем самый толковый из них — 1 Column:

Выбор базового шаблона в MailChimp

 

Инструменты

На шаге Design в левой части экрана мы видим непосредственно содержание письма, а в правой — инструментарий для работы с ним. Он включает в себя три вкладки:

Content (работа с содержанием),
Design (настройки оформления письма),
Comments (комментарии при совместной работе).

Вкладки Drag&Drop редактора Мэйл Чимп

Если первые две вкладки — это «наше всё», то вкладка Comments пригождается редко (только если мы совместно работаем над письмом с кем-то ещё и обмениваемся сообщениями по этому поводу).

 

Настройки письма (Page)

Начинаем работу с того, что переходим во вкладку Design и выбираем из появившегося списка первую строчку — Page:

Настройки Page в drag&drop редакторе MailChimp

Здесь настраиваем цвет фона письма и стили заголовков.

Чтобы определиться с фоном, заглянем на сайт Диска и выберем один из присутствующих на нём цветов. Желательно неяркий, приглушённый, чтобы не оттягивал внимание пользователей непосредственно от содержания. Вполне подойдёт светло-серый:

Выбор цвета фона на скриншоте сайта

Чтобы «вытащить» html-код цвета, заскриншотим нужную часть сайта, а затем воспользуемся фотошопом (инструмент «пипетка»):

Определение цвета с помощью пипетки в Фотошопе

Наш цвет фона #f1f2f3.

Вставляем этот код в Чимп и смотрим, что получилось:

Настройка фона письма в Мэйл Чимп

Использование фирменной палитры перекинет «мостик» между нашим письмом и сайтом — то, чего мы будем добиваться и в дальнейшем, прибегая к другим узнаваемым элементам сайта в шаблоне.

Дальше определяемся со стилем заголовков. Для письма вполне достаточно заголовков двух уровней:  h1 и h2. С помощью «инструментов разработчика» в браузере (ctrl + shift+ i для Хрома) и того же фотошопа можно «подсмотреть» на сайте соответствующие цвета и размеры шрифтов:

Инструменты разработчика для определения стиля шрифтов на сайте

А вот с типом шрифта стоит быть осторожнее. Красивые, но экзотичные шрифты совершенно не подходят для email. Работать лучше со стандартным набором, который поддерживает каждый браузер:

Отказываемся от нестандартного шрифта в пользу Arial

Например, для h1 (heading 1) мы подбираем такой набор стилей:
#000000, Arial, 44px; для h2 (heading 2): #000000, Arial, 32px —

Настройка заголовков письма в MailChimp

 

Прехедер (Preheader)

Определившись с настройками для всего письма, начинаем двигаться по шаблону сверху вниз, следуя его «классической» четырёхчастной структуре: прехедер → шапка → тело письма → подвал (футер).

Для начала зададим настройки прехедера — Design / Preheader.

В последнее время предпочитаю оставлять его пустым (какие-то дополнительные надписи сверху не всегда выглядят аккуратно). Поэтому устанавливаем фон такой же, как и вокруг письма: #f1f2f3. Уменьшаем высоту прехедера за счёт обнуления отступов Padding top и Padding bottom. Шрифт делаем того же цвета, что и фон (чтобы при желании можно было прописать скрытый текст, дополняющий тему):

Настройки прехедера в Drag&Drop редакторе Мэйл Чимп

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

Переход в режим редактирования блока с контентом в MailChimp

«Вычищаем» шаблонный текст в обеих колонках с контентом
(правая часть экрана):

Редактирование содержания прехедера в Мэйл Чимп

 

Шапка (Header)

Создание шапки письма начинаем так же с настроек — Design / Header.

Фон оставляем белым. Чуть увеличиваем размер по вертикали за счёт отступов Padding top и Padding bottom:

Настройки Header в Drag&Drop редакторе MailChimp

Приступаем к созданию содержания (левая часть экрана). В шапке хорошо будет смотреться логотип — разместим его по центру сверху.

Для этого кликаем по кнопке Browse, «заливаем» изображение лого на сервер и добавляем в письмо:

Загрузка изображений в Мэйл Чимп

В окне справа прописываем у картинки ссылку и альтернативный текст (на случай, если она не загрузится в почте):

Настройки изображения в MailChimp

Визуально отделяем тело письма от шапки с помощью линейки. Сделаем её на основе контентного блока Divider. Для этого переключаемся справа на вкладку Content и перетаскиваем блок в нужное место письма под шапкой:

Использование контентного блока Divider в драг/дроп редакторе Мэйл Чимп

Переходим к редактированию блока в правой части экрана. Устанавливаем высоту с помощью отступов Padding top и Padding bottom, например, 2px. Удаляем видимую границу — Remove (она не достигает края письма, что в этом случае не годится). Зато прописываем фон блока такой же, как и вокруг тела письма:

Настройки разделительной линейки в шаблоне MailChimp

Получаем приличную, не очень широкую линейку между шапкой и телом письма, в чём убеждаемся на предпросмотре:

Предпросмотр письма в Мэйл Чимп

 

Тело письма (Body)

Тело письма, как и с прочие его части, начинаем редактировать с общих настроек — Design / Body.

Фон оставляем белым (за редким исключением — это наилучший вариант для контентной части). Немного подгоняем отступы Padding top и Paddig bottom. Ниже настраиваем цвет, тип и размер основного шрифта. Как и в случае с заголовками, удобно взять за основу стиль шрифта с сайта.
Например, #606060, Arial, 16px.

Здесь же указываем цвет для ссылок. Берём что-то яркое и контрастное из палитры сайта, например, такой же цвет, как у кнопок — #f9c400:

Настройки тела письма (Body) в MailChimp

 

Разобравшись с настройками, переходим к контенту.
Для того, чтобы шаблон был гибок и функционален, предусмотрим разнообразные блоки, которые дальше сможем перетасовывать, как колоду карт: текст, кнопка, картинка слева, картинка справа,
2 столбца.

• Текст

Традиционное начало письма — текстовый блок. Удобно взять за основу блок, уже существующий в шаблоне. Переключаемся в режим редактирования (для этого не обязательно кликать на «карандашик», можно кликнуть в любое другое место на блоке). Вставляем наши тексты для заголовка и вступления в правой части экрана:

Редактирование текста в drag&drop редакторе MailChimp

 

• Кнопка

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

Во вкладке Content выбираем блок Button и перетаскиваем его под наш текст:

Использование контентного блока Button в драг/дроп редакторе Мэйл Чимп

Переходим к редактированию и прописываем справа ссылку и текст для кнопки (например, «Узнать подробности»):

Настройки кнопки в шаблоне MailChimp

Приводим кнопку к стилю Яндекс.Диска.

Для этого переключаемся на вкладку Style в режиме редактирования блока. С помощью  «Инструментов разработчика» мы узнали, что радиус скругления кнопки на сайте 6px, цвет фона #f9c400, а цвет шрифта #473e09.

Вносим эти параметры в настройки кнопки в письме:

Настройки разделительной линейки в шаблоне Мэйл Чимп

 

• Картинка слева

Оживим письмо иллюстрацией. Для начала перетащим под кнопку блок Image + Caption. Кликнем по блоку мышью, чтобы войти в режим редактирования, и во вкладке Settings установим взаимное расположение изображения и текста Caption Position — Right, Caption Width — Two-Thirds:

Настройки контентного блока Image + Caption в шаблоне MailChimp

Затем во вкладке Content загрузим иллюстрацию подходящего размера — Browse. Пропишем для неё ссылку и alt-текст. Добавим сюда же сопроводительный текст с заголовком h2 и ссылкой:

Настройки контентного блока картинка + текст в drag&drop редакторе Мэйл Чимп

 

• Картинка справа

Приятный момент. Поскольку блок с картинкой справа в нашем шаблоне зеркально отображает блок с картинкой слева, то для того, чтобы создать его, достаточно скопировать предыдущий блок (Duplicate Block):

Копирование блока с контентом в drag&drop редакторе MailChimp

А затем во вкладке Settings выставить Caption Position — Left:

Настройки контентного блока Image + Caption в шаблоне MailChimp

В этом и проявляется мощь drag&drop редактора — блоки копируются, перемещаются и видоизменяются здесь за секунду.

 

• 2 столбца

Завершаем наш набор контента блоком 2 столбца.
Для этого добавляем ниже ещё один блок Image + Caption и во вкладке Settings устанавливаем Caption Position — Bottom, Number Of Images — 2:

Настройки контентного блока Image + Caption в шаблоне MailChimp

Для разнообразия подберём какую-нибудь новую иллюстрацию с сайта, а также вставим в столбцы тексты с заголовками и ссылками:

Редактирование контентного блока картинка + текст в drag&drop редакторе Мэйл Чимп

 

• Подпись

Чтобы тело письма приняло законченный вид, завершим его небольшим текстовым блоком с подписью:

Текстовый блок в drag&drop редакторе MailChimp

 

Опционально

На этом работа с письмом почти завершена. Однако остались ещё 2 небезынтересные возможности, которые хоть и не укладываются в текущую структуру шаблона, всё же заслуживают внимания.

 

• Вставка кода

Иногда возможностей Drag&Drop оказывается недостаточно, чтобы реализовать тот или иной элемент шаблона. К примеру, нам может понадобиться блок 4 столбца или что-то ещё в таком духе.

MailChimp решает эту проблему, предлагая сверстать нестандартный элемент отдельно, а затем вставить его в шаблон кодом, как ещё один блок с контентом.

Для этого мы используем блок Code, который перетаскиваем в тело письма обычным способом:

Блок Code в MailChimp

Вставляем в него подготовленный заранее html-код — и готово дело.
Так мы можем реализовать практически любую свою задумку:

Нестандартный контентный блок в drag&drop редакторе Мэйл Чимп

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

 

• Вставка видео

В своё время уже рассказывал, как добавить видео в рассылку.
В этом смысле редактор MailChimp здорово упрощает жизнь, позволяя размещать видео в полуавтоматическом режиме.

Чтобы это сделать, перетащим в тело письма контентный блок Video:

Блок Video в MailChimp

В настойках блока (вкладка Content) пропишем ссылку на наше видео, размещённое на YouTube или Vimeo. Чимп сформирует для него скриншот, а нам останется прописать alt-текст и описание (если необходимо):

Редактирование видео-блока в drag&drop редакторе Мэйл Чимп

В тех почтовых клиентах, где это возможно, добавленное таким способом видео будет проигрываться прямо «внутри» письма:

Отображение видео из html-редактора MailChimp в почте mail.ru

В остальных видео будет отображаться по обычной схеме
«картинка + ссылка».

 

 

Футер

Заключительная часть письма — его «подвал» (футер). По сложившемуся обыкновению первым делом идём в его настройки — Design / Footer.

Определяемся с фоновым цветом. Например, возьмём с сайта тёмный оттенок, чтобы контрастировал с белым телом письма — #1c1c1c:

Выбор цвета фона на скриншоте сайта

Цвет текста (и ссылок), наоборот, выбираем светлым, чтобы считывался без труда — #ffffff:

Настройки подвала письма (Footer) в MailChimp

Дальше работаем над содержанием.
У Яндекс.Диска нет сообществ в социальных сетях, поэтому кнопки Social Follow нам не нужны. Но возможность делиться контентом письма нам пригодится — перетаскиваем в футер блок Social Share:

Блок Social Share в MailChimp

Выбираем соцсети из предложенного набора во вкладке Content. Например, Facebook, Twitter и Google+ (Вконтакте, к сожалению, пока «не завезли»):

Настройки блока Social Share в drag&drop редакторе Мэйл Чимп

Во вкладке Style устанавливаем цвет и размер шрифта — #ffffff, 16px:

Настройки блока Social Share в drag&drop редакторе MailChimp

Во вкладке Settings выбираем «осветлённый» стиль иконок:

Настройки блока Social Share в drag&drop редакторе MailChimp

В блоке ниже проводим серьёзную «ревизию» — выкидываем email адрес для обратной связи и ссылку на обновление профиля, прописываем своё объяснение, почему подписчик получил эту рассылку и акцентируем ссылку отписки:

Визуально разделяем блоки футера аккуратной пунктирной линеечкой:

Настройки блока Divider для футера в drag&drop редакторе MailChimp

 

Мобильная версия (Mobile Styles)

Из перечня настроек, доступного во вкладке Design, остаются ещё настройки мобильной версии письма — Mobile Styles:

Настройки Mobile Styles в drag&drop редакторе MailChimp

Но у меня хорошие новости: эти настройки и по умолчанию неплохи. Поэтому копаться в них без нужды не стоит. Просто едем дальше.

 

Бэйдж Мэйл Чимп (Monkey Rewords)

Для пользователей бесплатных аккаунтов остаётся последний уровень настройки шаблона, которому нужно уделить внимание — Monkey Rewords.

Это рекламный «бэйдж» Мэйл Чимп, который автоматически добавляется во все письма в футере. Именно за него ответственна строчка кода *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*, которую мы оставили нетронутой.

По умолчанию здесь установлен бэйдж такого вида:

Настройки рекламного "бэйджа" ( Monkey Rewords) в MailChimp

Поменяем его на что-то более подходящее нашему шаблону:

 

Предпросмотр

По сути, письмо почти готово. Но остаётся ещё ряд мелочей, без которых работу всё же нельзя считать завершённой. В первую очередь, нам нужно оценить общий вид шаблона на предпросмотре, чтобы выявить возможные огрехи и нанести завершающие штрихи (вроде изменения высоты воздушных промежутков).

Чтобы переключиться в режим предпросмотра, выбираем в верхней строке меню Preview and Test / Enter preview mode:

Переключение в режим предпросмотра в drag&drop редакторе MailChimp

Просматриваем не только сам шаблон в левой части экрана, но и его мобильную версию в правой:

Предпросмотр (preview mode) в drag&drop редакторе Мэйл Чимп

Вращаем мобильную версию так и этак, чтобы увидеть, как ведут себя контентные блоки:

Вращение мобильной версии письма на предпросмотре MailChimp

 

Тест шаблона

Если визуально с шаблоном полный порядок, можно испытать его в условиях, приближённым к «боевым», сделав рассылку на тестовые адреса.

Для этого выбираем Preview and Test / Send a test email:

Переключение в режим отправки тестового письма в drag&drop редакторе MailChimp

Указываем адреса своих тестовых почтовых ящиков (можно ввести несколько через запятую) и жмём Send Test:

Отправка тестовго письма в drag&drop редакторе Мэйл Чимп

В почтовиках убеждаемся, что шаблон отображается корректно с картинками и без картинок:

Отображение письма без картинок в Gmail

Помимо mail, gmail, yandex и rambler не забываем и про зловредный Outlook. Впрочем, в последнем случае требования к качеству отображения письма можно понизить. Не разваливается, показывается более менее корректно — и ладно:)

 

Social Cards

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

Заходим в Preview and Test / Social Cards, где включаем опцию Customized Social Cards:

Подключение опции Social Cards в Drag&Drop редакторе MailChimp

Дальше делаем всё, как и при обычном размещении контента в соцсети: выбираем картинку, которая будет прикреплена к публикации, прописываем заголовок и короткий сопроводительный текст (можно первую фразу из письма):

Настройка Social Cards для шаблона Мэйл Чимп

Слева MailChimp покажет, как будет выглядить расшаренное письмо на Facebook, в Twitter и Pinterest.

Вот теперь всё готово! 

Пример простого шаблона, свёрстанного в Drag&Drop редакторе MailChimp

Посмотреть шаблон в браузере→

 

Save as…

Доведённый до ума шаблон сохраняем с помощью пункта верхнего меню Save as Template. На самом деле, это не обязательно — Чимп позволяет брать за основу при создании кампании буквально всё, что угодно: предыдущие рассылки, сохранённые черновики. Но всё же для порядка шаблон удобно иметь в списке Templates.

Кроме того, его можно перенести в любой другой сервис  — воспользовавшись ссылкой на письмо (наподобии той, что приведена выше) или выкачав полноценный html-файл:

Эскпорт шаблона в html из MailChimp

 

Заключение

Конечно, я не рассмотрел здесь 100% инструментария Drag&Drop — статья и без того получилась не маленькая:) Но если вы добрались до этих строк, то, полагаю, уже усвоили основные принципы работы и без труда соорудите собственный шаблон, как следуя предложенному методу, так и изобретая что-то своё, осваивая нюансы через практику.

Чтобы «собрать» шаблон, не нужно разбираться ни в html, ни в css (хотя основы лучше подтягивать), ни уметь хорошо рисовать в фотошопе. Достаточно иметь минимальное художественное чутьё и набить руку в Мэйл Чимпе.

Шаблон, «собранный» в Drag&Drop, не только удобен для последующей работы (можно перетаскивать, копировать и удалять любые его блоки), но и корректно отображается во всех распространённых почтовиках, а также автоматически адаптируется под мобильные устройства.

Используя элементы дизайна своего сайта, можно привести его к единому «фирменному» стилю, который сделает письма узнаваемыми для подписчиков. Зачастую для запуска email маркетинга в компании этого бывает достаточно.

 

[В следующий раз у нас на очереди рубрика «Тестирование».
Раскопал для неё небольшой кейс по сплит-тесту содержания].

P.S. Вы находите материалы Email-practice полезными? Тогда читайте мою книгу «E-mail маркетинг для интернет-магазина».

P.P.S. Если вы ещё не подписались на мою рассылку — самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике! 🙂