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

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

Что сейчас считается трендом в оформлении писем?

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

1. Фоновые изображения в рассылках

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

Этому есть несколько объяснений:

• почту всё чаще читают на мобильных. А на телефонах подложка всего письма не помещается

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

• это приближает к нормам почтовых серверов, согласно которым в письме должно быть около 30% текста.

Давайте рассмотрим разные вариации на эту тему.

Подложка для отдельных элементов (Золотое яблоко)

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

Что хорошо:

• Вовремя остановились, и карточки товаров не оказались на полосатом фоне:)

• Даже если фон не отобразится, внешний вид письма сильно не пострадает

• Разного рода рамочки хорошо смотрятся на разных устройствах и выгодно подчёркивают содержимое

Фон под одной структурой (FirstCry Offers)

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

Что хорошо:

• Дизайн письма передает суть темы “Shop while your baby sleeps”

• Кнопка призыва всё равно контрастна и, поддерживая общий стиль, оформлена в форме тучки

• Мало текста, а все что касается подробных условий акции вынесено ниже в обычный текстовый блок.

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

Фон под всем письмом (eSputnik)

Например, для email-рассылки eSputnik с итогами года мы использовали космическую тематику, а в качестве бэкграунда – звездное небо:

С какими трудностями столкнулись:

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

• Для текста был выбран цвет #d3d3d3

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

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

Как делать не нужно, или Topman

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

Что НЕ хорошо:

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

• помним, что письмо, полностью состоящее из картинок, почтовики все ещё не приветствуют

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

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

• фон не показывается в некоторых почтовиках, вроде любимого Outlook 2007.

• картинку для фона лучше брать бесшовную и размещать нужный контент в одной структуре

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

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

• декоративные шрифты лучше использовать только на картинках - на большинстве устройств вместо них подставится стандартный шрифт.

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

2. Миграция логотипа

Как писал Фил Барден, на прочтение письма среднестатистический человек тратит 2 секунды, и если его ничего не заинтересовало - вероятнее всего, письмо закроет или вовсе отправит в корзину.

Пользователей нужно иногда удивлять

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

Лого на главном баннере (On)

Не стоит перегружать приветственное письмо лишними ссылками и призывами - вот хороший тому пример.

Что хорошо:

• экономия первого скрина

• этот приём пока не используется массово, а следовательно, можно выделиться

• баннер несёт определённые эмоции, и они ассоциируются с брендом

• добавить лого на баннер займет не больше 2-х минут

Лого в первом скрине (STORQ)

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

Три примера писем от Storq, которые несут в себе разный посыл и, соответственно, можно заметить, как изменяется внешний вид шапки письма:

1. Промо без текста - лого над баннером

2. Инфописьмо - лого на баннере

3. Промо с текстом - лого под баннером

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

Лого = текст на баннере (Concept Club)

Просто нравится это письмо. Оставлю его тут, чтобы не потерять.

Следует помнить о том, что лого:

• должно размещаться гармонично, уместно и главное - заметно

• отлично дополнит баннер, если его продолжить девизом компании, преимуществами или вплести его в канву оффера

• можно объединить с баннером, но это не значит, что остальные элементы тоже стоит делать одной картинкой (см.п. №1)

3. Геометрия и ассиметрия

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

Диагональные блоки во всем письме (Sigma Beauty)

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

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

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

Что хорошо:

• Создание простого баннера (даже диагонального)не займёт много времени ни в фоторедакторе, ни у нас в системе.

• Можно отдельно подготовить ассиметричные картинки и использовать их в письме как фон для отдельных блоков

• Удачно подобранные фигуры выгодно дополнят дизайн ваших писем - возможно, это станет новой удачной стратегией

ИМХО, можно создать письмо из диагональных картинок и задать выравнивание каждому блоку то по левому, то по правому краю. Каждый блок будет независимым, и проще будет добиться адаптивности.

Диагональное расположение товаров (Casadei)

Вообще, люблю письма Casadei - рекомендую подписаться тем, кто ищет красоту в простоте.

Что хорошо:

• Письмо легко и приятно скроллить до конца, в нем много воздуха

• Каждая категория находится на отдельной картинке

• Все элементы крупные, и даже без адаптивности письма хорошо смотрятся как на мобильном, так и на десктопе

• Фото товаров высокого качества и с такою заботой компании к собственном товарам и ты проникаешься любовью к бренду

Диагональ на баннерах (Rue La La)

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

Что хорошо:

• Обычно письмо строится из прямоугольных блоков, а так письмо уже выглядит нестандартно

• Интересно расставлены акценты: сначала пользователь видит на баннере “The Cut”, затем ограничение по времени в 16 часов, и только потом – призыв.

• В этом примере линии ещё раз подчёркивают предолжение, т.к. перевести “The Cut” можно и как снижение (цен), и как срез, разрез.

• Геометрия на фоне - беспроигрышный вариант, когда нет других идей. Да, и много времени у профессионального дизайнера создание такого баннера не отнимет :)

4. Неформатные карточки товаров

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

Но пришло время отходить от классической структуры “3 в ряд/ 2 в столбик”. Смотрите, как делают другие.

Вертикальные карточки (Снежная королева)

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

Что хорошо:

• Письмо выглядит современнее, чем карточки “три в ряд”

• Для рассылки в отрасли fashion важно, чтобы и письма были стильными. Особенно хорошо так подавать готовые образы, где сразу видна и цена товара, и как вещи сочетаются друг с другом.

• Письма с большей вероятностью дочитаются до конца. Как и в примере Sigma Beauty пользователь видит начало (хвостик, уголок и т.д.) нового товара, и чтобы рассмотреть его полностью, приходится прокрутить ниже, а потом – ещё и ещё.

Немножко хаоса (Puma)

Да, такие карточки товаров тоже бывают. Видимо, Puma не знает, как просто делать такие блоки у нас в редакторе, поэтому в их примере все свёрстано одной картинкой.

Что важно:

• После перехода по ссылке вы попадёте в общую категорию, где находятся все эти товары

• На мобильном цельная картинка выглядит мелковато

• Если делать все отдельными картинками, стоит учитывать как это будет отображаться на мобильном, как перестроятся блоки. Возможно, некоторые картинки лучше скрыть

Карточки с фоновыми изображениями (Topman)

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

Что важно:

• Здесь все сделано одной картинкой, кроме кнопок. Но вдруг письмо перестроится, и две кнопки окажутся рядом? Поэтому я – за использование подложки, которую можно будет подогнать для мобильной версии

• Заголовки лучше располагать в текстовом блоке, а не на картинке, как сейчас.

5. Социальные сети

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

Приглашение скачать приложение (Black Star Wear)

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

Что не хорошо:

• Нет веского призыва или объяснения, зачем устанавливать приложуху

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

• Письмо не составили из разных блоков, а сделали одной картинкой. Правда, ее разрезали на 2 части со ссылками на скачивание в App Store и Google Play. Так точно пользователь не промахнётся:)

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

Лицом к лицу в социальных сетях (Paper Shop)

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

Такой вариант тоже имеет право на существование: больше шансов, что пользователи заметят.

О чем следует помнить:

• Мотивируйте на подписку: предложите поучаствовать в конкурсе, получать скидки, быть в курсе новинок и т.д.

• Группа должна быть живой и активной. Если в сообществе 1-2 человека, и давно не появлялись посты, - новым пользователям вряд ли захочется присоединиться

• Хорошо работает подход, когда вы в письмах приглашаете только в одну соцсеть

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

Смотрите раздел нашего блога How-To - там вы найдёте инструкции, как сделать такие же красивые (а иногда даже лучше) блоки в адаптивном редакторе eSputnik.

До новых встреч! :)