Базовые правила оформления email-рассылок.

💖 Нравится? Поделись с друзьями ссылкой

Рассматривает основные правила оформления рассылки по 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 усложнит чтение. Да и больше трех гарнитур в одном письме говорят уже об отсутствии вкуса. Во всем нужно чувствовать меру.

На чистом 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 .

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

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

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

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

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

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

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

Структура писем

Структура писем практически не отличается от структуры обычной веб-страницы:

Прехедер

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

Шапка письма (хедер)

Стандартно в шапке письма располагают логотип компании, иногда - контактную информацию и меню. Учтите, что, если вы добавляете меню в шапку, лучше всего выбрать только самые важные для конкретного письма пункты, а не впихивать все.

Вот пример шапки письма от Амедиатеки, здесь просто логотип:

А вот письмо Ламоды, здесь и логотип, и информация по накопленным баллам, и меню:


Тело письма

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

Подвал письма (футер)


Адаптивный дизайн email-рассылки

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

Есть несколько вариантов адаптивной вёрстки письма.

С помощью «плавающих блоков»

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

адаптивная вёрстка

С подстраивающимся содержимым

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

С помощью медиазапросов

Mediaquery - это компонент языка CSS. Этот метод позволяет менять расположение объектов при помощи медиазапросов. Не самый лучший способ адаптации для писем, так как далеко не все почтовые клиенты с ними работают.

Клиенты, поддерживающие и не поддерживающие медиазапросы:

Десктопные Мобильные Браузерные
AOL Desktop Android 4.2.2 Mail AOL Mail
Apple Mail 10 Android 4.4.4 Mail G Suite
IBM Notes 9 AOL Alto Android app Gmail
Outlook 2000–03 AOL Alto iOS app Google Inbox
Outlook 2007–16 BlackBerry Outlook.com
Outlook Express Gmail Android app Yahoo! Mail
Outlook for Mac Gmail Android app IMAP
Postbox Gmail iOS app
Thunderbird Gmail mobile webmail
Windows 10 Mail Google Inbox Android app
Windows Live Mai Google Inbox iOS app
iOS 10 Mail
Outlook Android app
Outlook iOS app
Sparrow
Windows Phone 8 Mail
Yahoo! Mail Android app
Yahoo! Mail iOS app

Зелёным обозначены почтовые клиенты, которые поддерживают медиазапросы, красным - не поддерживают. Данные взяты отсюда: campaignmonitor.com

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

Ещё я бы посоветовала почитать книгу Люка Вроблевски «Сначала мобильные!» . В ней доступно рассказывают о проектирования сайтов с учётом отображения на мобильных и планшетах, приводятся примеры и рекомендации по вёрстке. Этот подход можно применять и в дизайне писем.

Ошибки в адаптивном дизайне писем

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

Например, в этом письме теги задумывались в два столбца:

Теги отображаются в два столбца

Но в результате письмо выглядело вот так:

Письмо с ошибкой в вёрстке

Дело в том, что между плавающими блоками (

…) не должно быть пробелов в коде. В этом примере в коде случайно добавили пробел или перенос строки. Получился отступ между блоками, и два столбца не поместились.

Шрифты в электронных письмах

Это боль дизайнера. В дизайне писем мы можем использовать только стандартные шрифты:

  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Не самые красивые шрифты, но хорошо читаемые, и подписчик точно увидит весь текст в письме. Бонус «поиграть со шрифтами», как любят просить клиенты, не получится.

Кстати, стандартные системные шрифты на Android и iOS - это Helvetica и Roboto. Поэтому их тоже можно использовать, в случае чего они заменяются на родной всем Arial =) Так как они похожи по начертанию, это не сильно повредит макету и ничего не поедет.

Цвет текста

Цвет текста должен быть контрастным к фону. Некоторые дизайнеры считают, что лучше использовать тёмно-серый, например, #333333 к белому фону, так как чтение 100% чёрного текста утомляет глаза. Но это спорное утверждение. Можете , в которой автор рассказывает про удобочитаемость, контрастность цвета текста к фону, эволюцию шрифтов в вебе и приводит примеры.

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

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

Размер писем

Оптимальная ширина шаблона для писем - 600 -700px. Это ширина с учётом отступов. Почему 600px? В основном это связано с размером окна в почтовых клиентах и с адаптивной версткой. Самая распространённая ширина экрана на мобильных - 320 px.

Картинки в email-рассылках

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


Дизайн письма с персональным обращением

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

Вот в этом примере письмо свёрстано картинками, и они не загрузились:



а без картинок вот так:


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


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

Письмо - это не фото на память, здесь не нужно высокое качество изображений. Поэтому оптимизируйте картинки для веба, иначе они будут тяжёлыми и не отобразятся. Чтобы уменьшить вес картинок, мы используем compresspng.com (там же можно сжать jpg или pdf) или www.iloveimg.com .

Сейчас в письмах модно использовать простую анимацию с помощью гифок:


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

Порой, когда вы открываете проморассылку на iPhone или Mac, изображение немного замылено. Это не значит, что картинки плохого качества. Просто дизайнер при подготовке рассылки не подумал о том, что вы будете смотреть его на устройстве с экраном Retina. Чтобы макет не «плыл», мы собираем его в х2 размере, то есть ширина контента не 600px, а 1200, текст не 16px, а 32.

Целевое действие в письме

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

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

Во-вторых, кнопка должна быть заметной. Для этого лучше использовать контрастные к фону цвета. Также она должна быть достаточно крупной - минимальная рекомендуемая высота - 35 px. Средняя ширина указательного пальца 16-20 мм, это приблизительно 45 px. Пальцы у всех разные, но производители телефонов дают свои рекомендации. В гайде Apple тач-область - 44 px, Microsoft рекомендует размер 34px. Если размер кнопок будет меньше, попасть в них и выполнить целевое действие будет сложнее.

Как происходит работа над дизайном писем

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

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

Обсуждение структуры письма с копирайтером

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

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

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

Набросали макет, показали менеджеру. Письмо оказалось длинным и малоинформативным. Текстовые блоки разные по объёму, иллюстраций нет:


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

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

Подготовка шаблона

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

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

Передача верстальщику и проверка вёрстки

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

Всегда нужно контролировать вёрстку. Не поленитесь, посмотрите вёрстку или попросите прислать вам тест. Бывает, что свёрстанное письмо незначительно отличается от макета, как в этом примере:


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

В прошлой статье мы разбирались, как работать с . Сегодня поговорим о дизайне email рассылок .

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

Структура

(1) Прехедер (preheader),
(2) Шапка,
(3) Тело письма,
(4) Подвал (футер).

Отдельным пунктом можно добавить границы и фон .

Шапка и футер остаются практически неизменными от рассылки к рассылке. В прехедере меняется только текст аннотации. Таким образом, основное “поле битвы” разворачивается в теле письма.

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

Стандартные элементы

Как правило, email кампании проводятся слишком часто и на разработку уникального дизайна для каждого письма недостаёт времени.

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

Компоновка

Стандартная ширина письма составляет 600px (чтобы рассылка без проблем “вписывалась” в большинство почтовых программ и устройств).

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

(1) Картинка сверху,
(2) Картинка слева,
(3) Картинка справа,
(4) 2 столбца,
(5) 3-4 столбца.

(Последний вариант используется реже из-за узкой контентной части).

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

Основные элементы

(1) Картинки,
(2) Заголовки,
(3) Подзаголовки,
(4) Текст.

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

Декоративные элементы

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

Если только вы не предпочитаете верстать рассылки сплошными картинками (что, по-моему, моветон),

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

Остаётся сосредоточиться на том, что ещё можно пустить в ход письме, невзирая на “коварство” почтовых программ:

(1) Линейки,
(2) Буллиты (маркеры списка),
(3) Оформление ссылок и кнопок,
(4) Рамки и тени,
(5) Иконки.

Именно благодаря декоративным элементам некоторые рассылки выглядят в целом интересно:

Дизайн как конструктор

Теперь, когда мы разложили оформление рассылок по полочкам (5 решений по компоновке, 4 основных и 5 декоративных типов элементов), остаётся только разработать универсальный шаблон , который позволит “собирать” письма, как башни из кубиков конструктора:

Если вы опасаетесь, что получится однообразно, прогуляйтесь по галерее email шаблонов Themforest , чтобы взглянуть, на что способен подобный арсенал.

Кстати, html-редакторы некоторых исповедуют тот же подход к дизайну (например, Drag&Drop в Мэйл Чимп). И представление о письме, как о наборе стандартных блоков, которые можно перетасовывать любым способом, здесь отлично срабатывает:

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

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

О пользе стандартизации

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

Копирайтер понимает, какого объёма тексты писать, чтобы они “ложились” на компоновку. Дизайнер знает размер картинок, которые нужно подготовить для письма. Верстальщик по-хорошему принимает участие в проекте только однажды — подготавливая базовый шаблон-конструктор. Маркетолог без труда “упаковывает” весь контент в рассылку.

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

Для тренировки разберём «по кусочкам» небезызвестную
рассылку Мегаплана :

→ Прехедер

Скрытый текст в аннотации + декоративный элемент — иконка-«самолётик», ссылающаяся на просмотр письма в браузере:

→ Шапка

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

→ Тело письма

Текст, структурированный заголовками, подзаголовками и отступами; «разбавлен» картинками, иллюстрирующими содержание выпуска:

Декоративный элемент — цитирование:

→ Футер

Компоновка «картинка слева» и «2 столбца»:

Декоративные элементы — линейки, кнопки, рамки вокруг картинок, скругляющие углы:

→ Границы и фон

Зелёный фон (видимо, из фирменной расцветки Мегаплана). Границ как таковых нет, вместо них контрастный переход от фона к светлому телу письма, но есть скругление по углам.

Рассылка ведётся , где легко внедрить все перечисленные элементы отдельными блоками в режиме Drag&Drop. Шаблон несложный, и его вполне достаточно, чтобы автор текстов мог своими силами верстать большие, ярко оформленные выпуски — не вдаваясь глубоко ни в html, ни в работу с графическими редакторами.

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

Заключение

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

P.S. Опрос подписчиков блога всё ещё показывает, что самая интересная тема для статей — аналитика:

Поэтому следующий пост анонсирую с особенным удовольствием: в будущем месяце вас ждёт !

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

Рассказать друзьям