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

Выбор шаблона

Посмотрите как создатели рассылок придерживаются этих правил:

Если всё ещё сомневаетесь, то загляните в галерею шаблонов Mailigen, там достаточно примеров шаблонов для каждого типа писем:

Текст

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

• Самые основные правила , без них никуда (в оригинале на английском).
• Несколько комментариев из Ководства Артемия Лебедева.
• Эта из ильяховской рассылки Главреда, там рассказывается о важности работы с заголовками.
• можно увидеть конкретный пример письма с конкретными комментариями от дизайнера (спойлер: в том письме есть ещё что дорабатывать)

Есть несколько видов писем, где работа с текстом крайне важна:

• письма-подтверждения (заказ, бронирование, доставка), т.к подписчик должен быстро прочитать информацию и подтвердить её или отклонить. Хороший пример - подтверждение бронирования на сайте airbnb.com

• контентные письма - вдохновение можете найти на новостных порталах (meduza.io, lenta.ru)

Цвет

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

• Adobe Color CC (color.adobe.com)

Полезен при подборе палитры к конкретному цвету: вводите значение цвета и кулер подберет подходящие цвета.

• Color Hunt (colorhunt.co)

Если стоит вопрос о выборе цветовой палитры, то в этом сервисе почти бесконечное число сочетаний разнообразных цветов. Самая главная проблема - это остановиться на чем-то одном 🙂

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

Примеры хороших рассылок, где каждый цвет на своем месте:

Фотографии

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

Здесь можно найти векторную графику, использование точно такое же, как и в фотостоках - свободное использование при упоминании автора:

Не стоит забывать про иконки:

Проверьте вес фотографии, для письма она должна быть не больше 600 Кб! Иначе письмо будет долго загружаться и, возможно, потенциальный клиент не увидит ваше письмо из-за низкой скорости интернета.

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

Сервис для создания разной графики. Не так давно там появились и анимации, что, конечно, радует. Есть бесплатные картинки, есть платные, но цена символическая - 0,99$:

Нужно обрезать фотографию? Изменить её контрастность, а фотошоп так и не успели освоить? Этот сервис на порядок проще фотошопа, но набора базовых инструментов должно хватить:

Вдохновение

Если уже поднаторели во всех инструментах, но не хватает идей и каких-то новых решений, то стоит сходить на ресурсы с базами email-шаблонов. Бесконечный поток вдохновения обеспечен (частично примеры для этой статьи взяты оттуда):

• EmailsFresh (emailsfresh.com)
• Really Good Emails (reallygoodemails.com)
• Email Gallery (email-gallery.com)

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

Пользуйтесь! И не заставляйте дизайнеров плакать, при виде ваших рассылок. Если время не позволяет учиться или просто нет желания “дизайнить”, то наймите человека, который знает своё дело. Цена за готовый шаблон с версткой стоит в среднем 8-12 тысяч (в нем можно менять текст и фотографии в зависимости от целей письма). Вы избавитесь от необходимости каждую рассылку делать не свою работу, а клиенты почувствуют, что вам не всё равно.

Порция свежих новостей из мира email маркетинга всегда на вашей почте.

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

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

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

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

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

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

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

10 правил эффективного составления писем

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

Чётко сформулируйте цель для отправки:

• Определитесь с вашей целевой аудиторией: расслка будет по всей базе или определённому сегменту?
• Каким будет письмо для рассылки: рекламным или информационным?
• Выделите основную мысль, которую хотите донести в тексте.

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

Давайте рассмотрим 10 правил составления писем подробнее.

1. Отправитель должен быть узнаваем

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

2. В поле «Тема» чётко отображайте основную идею письма

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

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

Например, темы рассылок отправленных в течение месяца:

3. Начните письмо с приветствия

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

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

4. Убедите читателя, что письмо адресовано ему

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

5. Минимум воды

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

6. Следите за целостностью письма

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

7. Избавьтесь от терминов

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

Например, сравните два текста:

• Обувь с металлическими подносками защитит пальцы от ударов с энергией до 200 Дж. Проколозащитная прокладка должна уберечь от проколов и порезов, согласно ГОСТ 28507. Подошва из полиуретана обладает износостойкими свойствами - ГОСТ 12.4.137.

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

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

8. Обязательно "прощайтесь" в футере

Можно не использовать стандартные фразы, а просто указать:

• от кого адресовано письмо,
• контактные данные,
• ссылки на социальные сети,
• адреса магазинов и т.д.

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

9. Оформляйте письмо правильно

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

10. Экспериментируйте

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

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

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

P.S.: Дополняйте емейл-кампанию , пуш-уведомлениями или СМСками. Так ваши электронные кампании будут ещё эффективнее.

«, где еженедельно мы будем публиковать переводы статей от гуру мира сего в сфере интернет-маркетинга и не только. Начнем со статьи, где показаны самые красивые дизайны 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-рассылки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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