Практичный email маркетинг. С помощью «плавающих блоков». Целевое действие в письме

В преддверии конференции, посвященной Email-маркетингу MailCon , мы хотим поговорить о трендах в сфере дизайна писем и рассылок. Предлагаем вашему вниманию перевод статьи о лучших дизайнах электронных писем , которую мы, ввиду большого объема, разбили на 5 частей (по 10 кейсов) и опубликуем с интервалом в 2 дня. Думается, нам есть что обсудить, сверив наблюдения и советы зарубежных экспертов с нашим собственным опытом по созданию рассылок. Первые 10 кейсов в основном посвящены роли цвета в создании письма. Ждем ваших комментариев!

Ожидается , что к концу следующего года число зарегистрированных по всему миру ящиков электронной почты превысит 4,3 миллиарда. Нравится нам это или нет, но мы живём в мире, где люди предпочитают пользоваться электронной почтой. Это быстро, удобно, и главное – эффективно.
Как выяснили McKinsey & Company , для привлечения новых клиентов электронные письма в 40 раз более эффективны, чем фейсбук или твиттер – и это лишь один из любопытных фактов , говорящих об успешности email-маркетинга.
Если ваша компания или стартап хочет использовать этот успех, то критически важным становится хороший дизайн письма. При такой большой конкуренции за внимание пользователя, выдающийся дизайн должен сразу привлекать внимание, чтоб избежать риска, что его отправят в корзину, не читая.
Привлекайте ваших клиентов, создавайте рассылки, чтобы охватить массовую аудиторию. Вот как это делают профессионалы – и мы надеемся, что это статья вдохновит вас на собственные выдающиеся дизайны писем!

01.Экспериментируйте с цветом

Отказ от цвета на фотографии и цветная тонировка в этом примере от The Stylish City («Стильный город») поражают и впечатляют. приглушенные цвета и сочетание розового с черным создают современный и утонченный дизайн. Макет выглядит привлекательным и уникальным, похожим одновременно на новостную рассылку и на модный журнал, однако, по-прежнему, фокус внимания приходится на текст, расположенный по центру, а также выше изображения.

02.Используйте цвет, чтобы привлечь внимание

В этом примере от IS Design + Digital неоновый цвет очень быстро привлекает внимание читателя и очень трудно удержаться и не прочесть заголовок. Прямоугольная обводка вокруг шрифта усиливает этот эффект настолько, что название фестиваля, скорее всего, запомнится даже самым незаинтересованным читателям. Сильные образы, выделяющиеся призывы к действию (calls to action) и резкий контраст – всё это эффективные элементы в рамках данного дизайна.

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

• Сгенерировать список Ваших подписчиков
• Разделить Ваши списки на сегменты
• Наладить работу по «взращиванию» потенциальных клиентов
• Подготовить краткую и понятную копию письма
• Проверить продуктивность ваших e-mail писем
• и так далее..

Боже… Неужели больше ничего веселого не осталось в e-mail маркетинге?

К счастью, осталось еще немного гиков e-mail маркетинга в этом мире (включая ребят из hubspot.com — авторов статьи), которые считают, что не все еще потеряно и не все так плохо. Да, существуют эти примитивные и неинтересные аспекты e-mail-маркетинга, но, хотя они и очень важны для успеха Вашей кампании, они не рисуют всей картины целиком и не описывают всю прелесть e-mail маркетинга.

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

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

Примеры «газетного» дизайна e-mail писем

1) Collaborative Fund

Если отойти от цветов, то можно обратить внимание на тему, что прослеживается на протяжении всего письма, что в сочетании с цветовой гаммой оставляет неизгладимое впечатление.

2) Starbucks

Это письмо от Starbucks содержит кучу информации: инструкции к методу Pour-over, CTA к покупке нового продукта, рецепты к летнему напитку float (в содовую, сладкую газировку или другой напиток кладется шарик мороженого. Отсюда и название — float или поплавок — шарик плавает на поверхности напитка. Самый популярный float в России — кофе-гляссе) и так далее.

Чтобы сделать их более просматриваемыми, ребята из Starbucks совместили эти краткие описания с картинками высокого качества (настолько высокого, что создается ощущение, что Вы слышите треск льда от наливающегося сверху горячего кофе). Как и Collaborative Fund, они использовали простые, горизонтальные разделения между каждым топиком.

В добавок, нам очень нравится то, как они внедрили логотипы Pinterest и Instagram рядом с двумя CTA. Эти логотипы взаимодействуют с текстом, ведь для того, чтобы загрузить эти самые рецепты, придется перейти на страничку компании в Pinterest.

3) InVision LABS

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

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

4) GrubHub

Этот e-mail от GrubHub — великолепный пример продвижения продукта… потому что продвижением тут даже не пахнет. Вместо этого они говорят: «Эй, ты же любишь поесть. Закажи еду через наш сервис!» , e-mail рассказывает нам историю с помощью действительно крутого контента: «Eat Map» (Карта еды, если дословно. По ссылке — карта США с видео о вкусовых предпочтениях в каждом регионе страны.)

Проверь Callbackhunter на своей шкуре!

• Укажи при промо-код: БЛОГ и получи 15 бесплатных лидов для теста.
• Расскажи

Рассматривает основные правила оформления рассылки по email – как сделать так, чтобы подписчики не закрыли письмо сразу же, а дочитали до конца и перешли по всем ссылкам.

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

На сегодняшний день email-рассылка – один из наиболее эффективных маркетинговых инструментов, вот почему так актуален вопрос: «Какой контент использовать?». Этот вопрос лучше перефразировать следующими двумя: «Для кого писать?» и «О чем писать?». Сформулируя ответы на поставленные вопросы, вы определите тему и цель письма. Именно они задают вектор в поиске правильного контента для email-кампании.

Для начала давайте все же ответим на вышеупомянутые вопросы:

Для кого писать?

Чтобы понять, для кого же нам все-таки нужно писать, следует определить и проанализировать свою аудиторию. Для этого нужно определить ядро ЦА – это наиболее активные клиенты (те, кто читают все ваши письма, покупают чаще всего). Далее составляем портрет аудитории по следующей схеме:

• Пол, возраст, уровень дохода, статус, семейное положение, профессия;
• Где проводит время аудитория (в каких группах состоят, какие форумы посещают и т.д.)

О чем писать?

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

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

• На что обратить внимание при выборе?
• Как оформить?
• Детали сервисного обслуживания.

Второй способ – воспользоваться историей покупок клиента. Например, если клиент уже купил автомобиль, отправляйте письма со следующим содержанием:

• Скидки на СТО, заправки;
• Какое масло лучше заливать;
• Как часто нужно делать техосмотр машины и т.д.

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

Как много писать и как оформлять?

При составлении письма будьте краткими: email – это не книга, и не журнал. На чтение письма подписчики в среднем тратят от 3 до 15 секунд . Не пугайте их слишком объемной информацией, ведь многие из нас, открыв письмо и увидев внушительное количество знаков в нем, просто отложат чтение на потом. Сохраняйте визуальный образ вашего письма кратким.

На читабельность письма влияет не только его длина, а также и его типографика – это графическое оформление печатного текста в email посредством набора и верстки с использованием норм и правил, специфических для конкретного языка.

Для легкого восприятия текстового контента стоит изучить основные правила типографики.

1. Соблюдайте достаточный контраст между цветом фона письма и шрифта

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

2. Используйте читабельный шрифт

Среди самых популярных шрифтов, которые лучше всего воспринимаются читателями – Georgia, Verdana. Засечки шрифта Georgia придают каждой букве уникальный характер, они упрощают чтение. Шрифт Verdana славится благоприятным влиянием на читабельность текста в email благодаря широкому внутрибуквенному просвету. Он придает ему «открытую» форму, приятную для восприятия глаз.

3. Подберите оптимальный размер шрифта

По исследованиям Лаборатории зрительной эргономики США, удобнее всего для чтения 10-12 кегль. Его и нужно использовать в рассылке. Но вы вправе увеличить этот размер до 14, если точно знаете, что ваша аудитория подписчиков состоит в том числе из пожилых людей, которые обладают слабым зрением.

4. Используйте корпоративный цвет

Если корпоративный стиль предполагает использовать зеленый для заголовков, а темно-серый цвет для основного текста документа, эту же модель вы можете перенести и в email-рассылку. Запомните: корпоративные цвета улучшают узнаваемость бренда!

5. Выделяйте заголовки

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

6. Не используйте больше двух шрифтов

Богатое разнообразие шрифтов в email усложнит чтение. Да и больше трех гарнитур в одном письме говорят уже об отсутствии вкуса. Во всем нужно чувствовать меру.

Из этой статьи вы узнаете, как сделать письмо для E-mail рассылки на онлайн-конструкторе Wilda. В чем отличие форматов Html и Jpeg, и какой формат подойдет вам больше.

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

1. Создав html версию письма
2. Отправив цельное изображение в теле письма.

Остановимся на каждом варианте подробнее чуть ниже, а пока давайте разберемся, что такое Html письмо, и в чем особенности его оформления.

Что такое Html письмо?

Html письмо – это письмо, созданное на языке Html (также, как и сайты в интернете). Если у вас нет достаточных навыков, то самостоятельно создать такое письмо у вас не получится. Для этого вам потребуется помощь профессионального верстальщика, который создаст такое письмо с помощью материалов, предоставленных ему вами: тексты, изображения, структура письма. После создания html письма вам понадобится специальное программное обеспечение для рассылки его адресатам.

Существует достаточно много сервисов, позволяющих самостоятельно создать электронное письмо с помощью готовых шаблонов или используя конструкторы Html писем, а затем отправить его. Минусом этого подхода может стать некорректное отображение вашего письма у некоторых получателей, так как при создании письма может генериться лишний код, либо шаблоны недостаточно хорошо адаптированы под различные почтовые клиенты – программы, собирающие и отправляющие почту, такие как Mail, Yandex, Gmail, Rambler, Outlook,Thunderbird или The Bat.

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

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

Чем Wilda может вам помочь?

На конструкторе Wilda вы можете:

Создать рассылку в виде изображения и вставить в тело письма

Для этого при создании нового документа выберите тип «E-mail рассылка» или воспользуйтесь подходящим шаблоном. Ширина документа будет 700 px – рекомендуемое значение для успешного отображения письма на мобильных устройствах, а высоту вы можете регулировать в зависимости от контента. После окончания редактирования просто сохраните ваше письмо в виде Jpeg файла.

Для создания веб-версии письма вам достаточно просто опубликовать ваш макет на сайте Wilda, и у него появится собственный адрес в сети.

Создать макет письма для последующей верстки в Html

Если обстоятельства требуют от вас создания Html письма, то с помощью конструктора Wilda вы можете создать макет письма для того, чтобы специалистам было проще понять, что вам необходимо. Вместе с макетом вам останется только передать специалисту исходники изображений и ждать результата!

Подробнее об оформлении электронных писем читайте в статье Как создать письмо для E-mail рассылки.

Создать элементы для Html рассылки

В любом Html письме есть необходимый набор элементов: шапка, подвал, фон или изображения. С помощью онлайн-конструктора Wilda вы можете создавать или редактировать эти элементы, сохраняя каждый в отдельности в виде файла Jpeg. Для этого в конструкторе предусмотрено создание документов любых размеров. Уточните у вашего специалиста необходимые требования к элементам и создайте их на конструкторе. Вы легко справитесь с этой задачей, особенно если уже создавали для себя какие-нибудь документы. При этом в конструкторе уже будут храниться ваши логотипы, изображения, фирменные цвета и т.д.
Резюмируя все вышесказанное, конструктор Wilda будет, несомненно, полезен всем, кому необходимо создать красивую и эффектную E-mail рассылку.

На чистом HTML. Как не странно, за два года в бесплатном доступе появилось не так уж и много бесплатных решений, но то, что удалось найти, значительно превосходит по качеству любой из старой статьи.
E-mail рассылки , несомненно, мощнейший инструмент маркетолога, но пользоваться им нужно очень осторожно. Наш народ никогда не был в восторге от рекламных писем в почтовом ящике, но если вы хороший маркетолог, то сумеете войти в контакт с получателем письма. Данная подборка не решит всех проблем, связанных с рассылками и даже не поможет их обойти, ведь обратит внимание получатель на ваше письмо, удалит или отправит его в спам, зависит не от того, какой красивый в будет дизайн, а от содержимого. Все, что я хотел сказать этой фразой - не шлите спам или каких-либо шаблонных предложений. Используйте эти html шаблоны с умом и без вреда окружающим.
Еще раз повторю, не рассылайте спам, лучше применить эти шаблоны для рассылки различных поздравлений для ваших клиентов с праздниками. Если у вас есть интернет-магазин и имеется база пользователей, которые действительно хотят получать от вас письма, можете на остове любого html шаблона сделать рассылку с оповещением о какой-либо акции или скидке.
Итак. К вашему вниманию 20 бесплатных E-mail шаблонов для рассылок . Пользуйтесь с умом.

Бесплатный HTML + PSD E-mail шаблон: PHStock Template

Современный HTML шаблон для E-mail рассылок с большой фоновой картинкой . Выполнен по подобию одностраничных сайтов / . В нем есть маленькая галерея изображений , исходя из этого можно предположить, что данный шаблон будет полезен фотографам или дизайнерам.
Приятным дополнением является наличие PSD исходника. Он вам понадобится, если вы решите существенно изменить внешний вид.
Фоновую фотографию можно с легкостью заменить. Не используйте ворованные фото, лучше найти что-то подходящее на бесплатных фотостоках, о которых я недавно писал в топике "Бесплатные фотостоки с легальными фото ".

Адаптивный E-mail шаблон для интернет-магазина

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

Бесплатный E-mail шаблон для мероприятия

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

Green Village - хипстерский E-mail шаблон для блогера

E-mail шаблон Green Village выглядит немного по-хипстерски. Отлично подойдет для рассылки еженедельного дайджеста новостей или записей с вашего блога. В архиве вы найдете сам шаблон и его исходник в формате PSD.

Photon - E-mail шаблон для фотоблога

Хороший, современный шаблон для осуществления различных рассылок. Подходит для любых целей, но изначально позиционируется как E-mail шаблон для фотосайта .

KATAUSTRIA - адаптивный Email шаблон

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

Boxi - бесплатный E-mail шаблон в стиле Meto / Flat

Интересный шаблон, который совмещает два стиля: Meto и Flat . Состоит из блоков в виде сетки, которые выполняют разные задачи - блоки с тестом, блоки с социальными кнопками , блок с изображением и пр.

Miks Blogger Newsletter - универсальный E-mail шаблон для блогера

Чистый шаблон с откликами ушедшего в прошлое Retro стиля. Хотя дизайн мне очень нравится. Есть PSD.

Новостной HTML + PSD Email шаблон

Чистый шаблон для почтовых рассылок в светлых тонах, предназначен для рассылок новостей с новостного сайта или блога.
Автор шаблона заявляет, что его творение хорошо работает на:
Apple Mail 4, 5, 6
iPhone 5, 4S, 4, 3gs, iPad
AOL Mail Firefox, Explorer, Chrome
Hotmail Firefox, Explorer, Chrome
Gmail Firefox, Explorer, Chrome
Yahoo! Mail Firefox, Explorer, Chrome
Thunderbird текущая версия, Thunderbird 3.0
Outlook.com (Firefox), Outlook.com (Explorer), Outlook.com (Chrome)
Outlook 2011, 2010, 2007, 2003, 2002/XP, 2000
Lotus Notes 8.5, Lotus Notes 8, Lotus Notes 7

Бесплатный E-mail шаблон в зеленых тонах

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