Статьи

Canvas на мониторе кампании: дизайн электронной почты стал проще

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

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

Уже нет. С большим количеством ваших подписчиков, читающих электронные письма только на своем мобильном телефоне или планшете, вы столкнулись с множеством разных размеров экрана. Это означает либо владение всеми популярными устройствами (что не обязательно является плохой идеей, если вы можете себе это позволить), либо поиск поставщика, у которого есть соответствующие предварительные просмотры и шаблоны для их соответствия. Создание красивых новостных рассылок — это одно, поддерживать единый вид на всех типах устройств еще сложнее.

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

Информационные бюллетени SitePoint отправляются с помощью Campaign Monitor . Если вы подписаны на Versioning, вы фактически участвовали в нескольких тестах в июле. Они протестировали различные дизайны, созданные с помощью нового инструмента шаблонов электронной почты Campaign Monitor под названием Canvas .

Canvas точно решает проблемы, которые я описал выше. Это визуальный редактор, который позволяет вам выбрать шаблон, после чего вы просто перетаскиваете необходимые компоненты. В Campaign Monitor уже встроено A / B-тестирование. Адам Робертс из SitePoint написал отличную статью в блоге Campaign Monitor.

Сплит Тестирование

Давайте посмотрим, насколько просто сделать красивую новостную рассылку, которая отлично смотрится на каждом устройстве. Campaign Monitor также позволяет проводить собственное тестирование. Настройка новой почтовой кампании начинается с возможности запуска различных тестов.

Campaign Monitor позволяет тестировать три разных ракурса:

1. Сюжетная линия

Сплит тестируемый объект

Строки темы могут сильно повлиять на ваш открытый рейтинг и, следовательно, на успех вашей рассылки. Это самый простой способ тестирования, а настройка еще проще.

2. От имени

Сплит тестирование от

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

3. Содержание

Сплит тестовый контент

Если вы хотите, чтобы ваши получатели взаимодействовали с содержанием вашего информационного бюллетеня, наиболее важным типом сплит-тестирования является изменение содержимого. Если вы внимательно посмотрите на мой скриншот, вы увидите, что вы можете настроить Контент A и Контент B, указывая различные части контента.

Использование Canvas для изменения шаблона

Галерея контента

Вы можете выбрать один из 12 шаблонов или импортировать свой собственный. Я решил пойти с «Сланцем», потому что… мне это нравится! Для каждого шаблона базовый макет примерно одинаков. Шаблон начинается с комбинации предопределенных цветов, которые вы не можете изменить впоследствии.

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

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

Предварительный просмотр шаблона Slate

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

Предварительное редактирование предварительного просмотра

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

Также есть возможность добавить магию кодирования, чтобы персонализировать каждое сообщение. С помощью нескольких простых фрагментов (таких как [firstname,fallback=your content here] Вы также можете добавить текущий день, месяц и год.

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

Давайте использовать рассылку SitePoint в качестве примера. У них есть отдельные информационные бюллетени для Mobile, Design, Ruby и так далее. Используя динамический контент, они могут включать контент каждого канала, но только те, кто выбрал для каждой конкретной темы, будут видеть соответствующий контент. Вы можете сделать это, добавив соответствующий тег для каждого раздела. Вы также можете использовать операторы IF / ELSEIF / ElSE для отображения контента на основе различных условий.

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

На вкладке «Настройка» вы также найдете настройки для нижнего колонтитула вашей электронной почты. Здесь довольно много вариантов. Например, вы можете добавить кнопку Tweet, Like или Forward для удобного обмена. Вы также можете включить ссылку для обновления настроек электронной почты, а также ссылку на веб-версию вашей электронной почты. Есть поля для ввода названия и адреса вашей компании, а также поле, чтобы напомнить подписчикам, почему они получают ваши информационные бюллетени (очень важно, чтобы люди не отписывались, потому что эта ссылка находится прямо под ней).

Предварительный просмотр контента

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

Предварительный просмотр после редактирования

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

Мобильный предварительный просмотр

Мобильный шаблон выходит отлично. Это все правильно изменено и выглядит очень чисто. Мой собственный сайт (который упоминается на скриншотах) тоже отзывчив ( посещение на мобильном телефоне ), и если вы добавите немного больше времени в свой шаблон электронной почты, вы сможете повторить макет и дизайн вашего сайта. Как это для последовательного опыта?

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

A / B сплит

Я тестировал несколько инструментов A / B-тестирования в предыдущей статье. Вы можете считать, что A / B-тестирование не намного легче, чем с Campaign Monitor. Вы также получили подробные отчеты о ваших тестах после этого.

Вывод

Canvas на мониторе Campaign действительно облегчает создание адаптивной рассылки новостей. Я действительно впечатлен тем, насколько удобно представлять ваш контент именно так, как вы хотите. Они заставляют его выглядеть так легко, что вы даже забудете, насколько ужасно было сделать это самостоятельно. До сих пор я не был большим поклонником создания новостной рассылки из-за этой трудности. Другие инструменты также предлагают визуальное редактирование, но я определенно предпочитаю этот метод Canvas.

Функция A / B-тестирования является полезным дополнением, и то, как она реализована, заслуживает аплодисментов. Это настолько интуитивно понятно, что вам действительно может понравиться тестировать различные варианты.

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

Вы дали Холст идти? Есть ли у вас какие-либо советы или рекомендации по созданию рассылок по электронной почте?