Полное руководство по созданию шаблонов для email-рассылки, часть 1

Электронная почта была и остается лидером в продвижении услуг и товаров. На это есть две причины: первая — это разрешение пользователей на получение рассылок, вторая — общение с подписчиками напрямую. Даже по прошествии почти четырёх десятилетий, email-маркетинг остаётся самым популярным средством коммуникации у маркетологов для построения прочных отношений с клиентами. Но что именно делает email-кампанию успешной? Ядром эффективной email-рассылки является привлекательный дизайн шаблона письма.

Знаете ли вы, что в июне пользователи искали шаблоны писем для рассылки 12 100 раз? Это демонстрирует, что многие email-маркетологи хотят отказаться от шаблонов email по умолчанию, которые им предлагают ESP платформы в своей библиотеке.

Ребята из Uplers подготовили честную статью-ответ на вопросы email-маркетологов, связанные с созданием email шаблонов в 2020 году. Надеемся, после прочтения ваши проблемы исчезнут. Мы перевели этот гайд специально для вас.

Цель статьи

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

Что такое шаблон для email-рассылки

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

• Придерживайтесь минимального набора элементов, и у вас уже готова текстовая версия email-письма.
• Добавьте красивые изображения и содержательный текст, и у вас будет готов шаблон HTML-письма.
• Включите некоторые CSS-элементы, и у вас получится интерактивное email-письмо.

Разве это не восхитительно?

Давайте начнём с текстовой версии email-письма и поймём её значение в современном email-маркетинге.

Что такое текстовая версия email-письма

В начале 1990-х годов электронные письма были обычными текстовыми сообщениями. Так продолжалось до 1990 года, пока не появилось HTML-кодирование. Но даже после широкого распространения HTML текстовые версии сохранили свою актуальность. Теперь ESP отправляют текстовую версию письма вместе с HTML. Кроме того, многие email-маркетологи ставят перед собой цель создать текстовую версию письма, так как есть вероятность, что без неё рассылки могут попасть в спам.

Особенности текстовых версий писем заключаются в следующем:

• В некоторых почтовых клиентах, таких как Outlook и Gmail, необходимо наличие обычных текстовых версий HTML-писем.
• Некоторые почтовые клиенты не поддерживают HTML-письма, поэтому нужна текстовая версия, чтобы подписчики получили необходимую информацию.
• Некоторые люди до сих пор предпочитают обычные текстовые email-письма. Текстовым письмам не хватает блеска HTML-писем, и поэтому им приходится полагаться на сильную тему для улучшения показателя Open Rate.

Теперь давайте посмотрим, что из себя представляют HTML-письма и как создать HTML письмо.

HTML-письмо: что это такое и какие варианты существуют

HTML-письмо — это усовершенствованная версия обычного текстового email-письма. Независимо от того, какую вёрстку вы используете, табличную или div’ами, структуру HTML-письма можно легко менять. За счёт этого реально создавать привлекательные email-рассылки, подобные этой от бренда Uniqlo:

Преимущества HTML-писем:

• Большинство брендов любят создавать веб-сайты, email-рассылки и даже лендинги в едином стиле. HTML-вёрстка помогает им в этом.
• Можно прикреплять на кнопки гиперссылки.
• В HTML шаблонах писем можно использовать изображения.
• Если вы отправляете письмо в HTML-формате, вы можете отслеживать эффективность своей email-кампании.
• Если соблюдать все правила, HTML-письма скорее всего обойдут спам-фильтры.

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

Готовый шаблон электронного письма против шаблонов на заказ: что выбрать

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

Однако, применяя готовые шаблоны для письма, трудно сохранить фирменный стиль и уникальность дизайна, а шаблоны, сделанные на заказ, уникальны и соответствуют вашим требованиям. В них виден фирменный стиль бренда, который отличает его от конкурентов. Чтобы создать такой шаблон для письма, вам потребуется помощь дизайнера, верстальщика и тестировщика. Из-за этого вам нужно грамотно взвесить время на выполнение заказа и стоимость услуг. Кроме того, если вы хотите создать интерактивный дизайн email-письма, вам также придётся сделать самому или заказать у дизайнера шаблон письма.

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

Начало работы с шаблонами для email рассылки

Пришло время планировать дизайн шаблона email-письма. Email-письма подобны одежде: для определённого случая есть определённый наряд, который надевают с определённой целью. Приветственные письма имеют короткий текст и красивый внешний облик, так как через них вы впервые взаимодействуете с подписчиками. Письма для взращивания лидов имеют подробную описательную часть с кнопками call-to-action. Транзакционные электронные письма имеют квитанцию о покупке также, как некоторые кросс-продажные письма. Итак, при создании своего первого шаблона email-письма вам нужно начать со следующего:

Определите, какой тип email-писем вы хотите рассылать и какие цели вы планируете достичь с их помощью

Есть как минимум пять типов шаблонов для писем для формирования customer journey, а для e-commerce сферы как минимум шесть.

1. Приветственное письмо

Это электронное письмо-благодарность, которое отправляется подписчику в ответ на его подписку. Текст email-письма должен представлять ваш бренд, а call-to-action должен сподвигнуть подписчика заполнить свой профиль или обновить свои интересы в личном кабинете.

2. Информационная рассылка

Это периодическое email-письмо, которое обучает и информирует подписчиков о вашем бренде и его продуктах или услугах. Цель таких писем – побудить подписчиков совершить покупку у вас.

3. Рекламные или продающие рассылки

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

4. Транзакционные рассылки

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

5. Реактивационная рассылка

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

6. Рассылка для e-commerce «Брошенная корзина»

Существует много причин, из-за которых даже самый горячий подписчик может отказаться от своей покупки на полпути. Наличие «отказников» не самый лучший сигнал для вашего бизнеса. Чтобы уменьшить количество брошенных корзин, нужна рассылка подобного типа. Она будет привлекать внимание «отказников» и возвращать к оформлению заказа. Такой тип рассылки обязателен для сферы e-commerce.

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

Где найти примеры email-писем и получить вдохновение

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

• Really Good Emails
• Curated Emails
• Milled
• Rue La la (для сферы моды)
• Beetle Email

Из чего состоит email-письмо

В то время как дизайн email-рассылки должен визуально очаровывать вашего подписчика, наполнение email-письма — это то, благодаря чему они узнают о главной мысли, которую вы хотите им передать. Знаете ли вы, что ваши рассылки на самом деле творят волшебство ещё задолго до того, как письмо открывается? Мы говорим сейчас о «сюжетных линиях».

Email-письмо содержит следующие элементы:

• Прехедер и тема письма: это первое, что видят ваши подписчики. 80% сообщений электронной почты открывается в зависимости от темы. Тема письма намекает на то, о чём пойдёт речь в письме, т. е. цель рассылки должна быть отражена здесь. Убедитесь, что вы не вводите подписчиков в заблуждение.
• Тело письма: разговор, начатый по теме, продолжается в разделе «тело письма». Ваша рассылка предоставляет жизненно важную информацию и направляет подписчика на сайт или лендинг для получения дополнительных сведений. Тело письма должно быть коротким и чётким.
• Раздел с call-to-action: заключительный раздел, в котором проверяется эффективность вашего письма. Кнопка с call-to-action имеет эффективный текст и привлекательный дизайн. CTA должен подталкивать к действиям, например: «Попробуйте бесплатную версию», чтобы читатель захотел щёлкнуть по кнопке и совершить то, что от него требуется.
• Футер: нижняя часть email-письма или, проще говоря, ваша подпись. Футер – это часть, где небольшое количество маркетинга может оказаться эффективным. Правда, большинство email-маркетологов не используют футер должным образом.

Форматирование и выравнивание текста важны, так как они помогают подписчикам читать ваши письма.

Персонализация в email-рассылках

Примерно 60% людей признались, что они отказываются от подписки на email-рассылки из-за нерелевантного контента. Персонализация – это обращение к подписчику по имени и, на самом деле, это первый шаг на пути завоевания его сердца и доверия. Каждый читатель делится своим email-адресом в обмен на привлекательный контент, основанный на его предпочтениях, а не на то, что вы хотите, чтобы он читал. Вам нужно наблюдать за поведением персонализированных email-писем в интернете и этапами путешествия, чтобы настроить контент в соответствии с требованиями.

Как создать шаблон email-письма: предварительный этап

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

• Гайдлайн вашего бренда
• Изображения ваших продуктов
• Целевая аудитория и портрет покупателя
• Будете ли вы проводить A/B-тестирование своих рассылок
• Будет ли мобильная версия
• Будет ли веб-версия (обсуждается позже)
• Гиперссылки на сайт или лендинги
• Будет ли письмо интерактивным. Если да, что в нем будет.

Как создать шаблон для письма

Теперь вы знаете, что необходимо для предварительного этапа. Пришло время двигаться вперёд и разобраться в создании шаблонов для рассылки с точки зрения дизайна. Дизайн письма в сочетании с текстом и прочими элементами помогает взаимодействовать с подписчиками.

Что включает в себя дизайн email-письма

Любой дизайн электронной почты состоит из пяти элементов:

• Макет письма: он диктует размещение и иерархию различных элементов в вашем письме. Хороший макет помогает подписчику проще воспринимать содержимое письма и передаёт суть послания. Есть два популярных стиля макета: с одним столбцом и с двумя. Одностолбцовый макет — элементы письма помещаются в один столбец для минимального напряжения глаз. Этот макет предпочтителен при создании мобильной версии email-писем, так как при его конструировании используется небольшая ширина экрана. Это делается для того, чтобы разместить все элементы письма без помех.

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

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

• Шрифты и типографика: текст в email-письме передает основную мысль, и то, как вы преподносите сообщение, также играет важную роль. Поэтому внимание к типографике и форматированию необходимо. Разные шрифты вызывают разные эмоции в нашем сознании, следовательно, необходимо выбрать правильный шрифт, который с большей вероятностью установлен у ваших клиентов.
• Цвет: как и типографика, разные цвета передают различные эмоции. Цвета фона, кнопки call-to-action, гиперссылок, изображения являются частью гайдлайна бренда и определяют индивидуальность рассылки.
• Образы и визуальные носители: изображения зачастую порой передают намного больше информации, чем текст. Используя текст и визуальные эффекты в письмах, вы подталкиваете подписчиков больше взаимодействовать с брендом, так как email-письма не теряются за большим количеством слов. Это особенно важно для онлайн-ритейла и e-commerce, где визуальное изображение продукта усиливает его описание.
• Кнопка call-to-action: красивая точка, которая позволяет измерить эффективность вашего письма. Кнопка с call-to-action эффектно завершает ваше послание. Обычно у письма ограниченный формат и не всегда получается передать, что вы планировали, и как раз для этого нужна кнопка с call-to-action. Она перенаправляет подписчика на соответствующую страницу сайта, поэтому никогда нельзя упускать её из внимания при разработке дизайна письма.

Типографика и цвета в email-письме являются частью гайдлайна бренда, который необходимо соблюдать при разработке дизайна.

Почему необходимо придерживаться гайдлайна

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

Email-рассылки, при создании которых придерживаются гайдлайна бренда, являются более узнаваемыми. Подобные письма формируют доверие у подписчиков к компании. К сожалению, не все маркетологи соблюдают это правило. По опросу Litmus 38% опрошенных брендов не придерживались своего гайдлайна.

Почему внедрение визуальной иерархии поможет увеличить конверсию?

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

В этом примере от inVision видно, что правильное форматирование текста и семантические теги создают текстовую иерархию, которая помогает правильно визуализировать письмо.

Давайте рассмотрим два элемента, которые иногда располагаются вместе, а иногда и в крайних точках.

1. Изображение-герой — стоковое фото или иллюстрация

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

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

Заглавные фотографии в основном используются в онлайн-розничной торговле, e-commerce, в гостиничном и туристическом бизнесах.

Иллюстрации в качестве изображения героя в основном используются в отраслях, предоставляющих IT услуги, SaaS или digital-агентств.

2. Размещение кнопки с call-to-action

Теперь переходим к самому важному. Как мы уже говорили ранее, кнопка call-to-action является показателем того, насколько хорошо у email-письма получилось превратить подписчиков в клиентов. Большинство маркетологов считают, что ни один подписчик не захочет нажать кнопку call-to-action, не узнав подробности предложения, которые указаны в письме. Однако в этом присутствует и свой недостаток — есть вероятность того, что не все люди дочитают письмо до конца, и не все вернутся к началу, чтобы нажать на кнопку. Из-за этого показатель CTR может сильно упасть, особенно если в нижней части письма нет повторной кнопки с call-to-action. Для того чтобы убедиться, правильно ли вы расположили кнопку с призывом к действию, проведите A/B-тестирование.

С другой стороны, маркетологи получили очень высокие показатели CTR от расположения кнопки с call-to-action в первой половине письма.

Мы считаем, что если ваше email-письмо длиннее, чем два прокручивания вниз, то следует добавить еще одну кнопку с call-to-action в нижней части письма.

Вместо заключения

Гайд от Uplers получился очень большим, поэтому мы разбили его на две части. Во втором выпуске мы расскажем, зачем адаптировать email-письма, какие теги чаще всего используются при вёрстке и с какими проблемами может столкнуться маркетолог при создании рассылки.