Как отправить красивое электронное письмо

10 советов по оформлению Email рассылок

Мы уже не раз писали в наших статьях о значимости дизайна при создании email-кампании. «Design is everything», — кричат прогрессивные иностранные маркетологи, PR-менеджеры и дизайнеры. Красивое оформление фирменных материалов, начиная от сайта компании и заканчивая рекламными листовками и постами в социальных сетях — залог популярности бизнеса у современного покупателя. Email рассылки не должны быть исключением.

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

Первое впечатление

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

1. Графа «От кого»

Первая причина того, что пользователи открывают письма — они узнают адресанта. Постарайтесь сделать так, чтобы ваши подписчики без проблем распознавали ваше имя отправителя и, не задумываясь, сразу же переходили к чтению письма. Не используйте общие названия вроде «do-not-reply», «news» и тому подобные. Идеальный вариант: название компании + имя одного из её сотрудников — например, «Елена из Имобис».

2. Тема письма и прехедер

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

Чтобы не попасть в папку «Нежелательные письма», конечно же, избегайте CAPS LOCK и обилия восклицательных знаков.
В помощь основной теме письма используйте прехедер — дополнительное поле, которое поможет получателю узнать больше о содержании письма.

Эстетическое восприятие

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

3. Используйте адаптивный дизайн

Как мы уже неоднократно говорили, это очень важно. Ширина макета не превышает 600 пикселей, а размер кнопки варьируется от 35 до 47 пикселей (для удобного нажатия пальцем).

4. Сделайте свои email письма частью бренда

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

5. Контролируйте набор шрифтов

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

6. Найдите правильный цветовой баланс

Фирменные цвета, которые будут сочетаться с логотипом — отличный вариант. Не перенасыщайте письма яркими частями, оставляйте больше «свободного» светлого пространства: такие письма и информация в них воспринимается подписчиками гораздо легче. При заливке основного заголовка или мотивационного посыла избегайте светлых оттенков (даже если цвет, например, ярко-оранжевый) – расставить акценты и выделиться помогут именно тёмные надписи. Как показывает практика, только изменение цвета мотивирующего текста приводит к увеличению числа целевых кликов на 6,64%.

Призыв к действию

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

7. Вставляйте, по крайней мере, один призыв к действию

Ясный, четкий и понятный он должен находиться в начале письма. А после – кнопка или ссылка call-to-action, яркая, заметная и удобная для нажатия.

8. Вставляйте социальные кнопки

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

Уверенность в успешной доставке

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

9. Будьте осторожны с размерами вложений

Большинство почтовых провайдеров ограничивают возможный объем медиа-вложений в теле письма. Придерживайтесь размера 10 МБ и ниже, чтобы избежать каких-либо проблем с доставкой рассылки.

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

Источник

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

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

Короткие рассылки с красивым дизайном писем

Начнем с самых лаконичных рассылок. Как правило, в таких коротких письмах всего один CTA, поэтому вся рассылка сконцентрирована на нем. Это здорово, потому что подписчика ничто не отвлечет.

Ваши триггерные рассылки ужасны. Вот как их починить — Email Soldiers

Компания Email Soldiers вот так анонсирует новые статьи на блоге. У письма красивый и необычный дизайн — яркое и очень короткое, из-за цветной рамки похоже на открытку.

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

Анонс статьи от Email Soldiers

Красивый шаблон триггерного письма от медицинского сервиса One Medical. Эта рассылка приглашает завершить регистрацию в сервисе.

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

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

Красивый дизайн триггерного письма от One Medical

Книги, которые вы не читали, а зря — MyBook

Cтильно оформленное письмо с подборкой книг от сервиса MyBook. Создать рассылку с красивой гифкой — хороший шаг для привлечения внимания. К тому же в гифке можно показать больше товаров, не растягивая при этом само письмо в длину.

Красивое письмо с подборкой книг и гифкой от MyBook

-10% на твой первый заказ — M.A.C.

Бренд косметики M.A.C. для своих рассылок создает красивые, броские, агрессивные письма. Естественно, продукты для макияжа здесь на первом плане.

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

Красивая рассылка от бренда косметики M.A.C.

Красивые рассылки с длинными письмами

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

Автоматизация email рассылок

Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push.

Как ограничения создают возможность? Новая методика в копилку инноватора — «ИКРА»

Школа креативного мышления «ИКРА» прислала в рассылке целую статью. В письме красиво и наглядно выделены главные моменты, а между блоками достаточно свободного пространства — так гораздо легче читать. Врезки оформлены по-разному, но объединены цветом.

Красивое письмо-статья от «ИКРЫ»

Год бесплатно для топовых профессий по интернет-маркетингу — Skillbox

Онлайн-университет Skillbox приглашает учиться маркетингу. У рассылки необычный фон — серый, на нем выгодно смотрится темно-серый шрифт заголовков и яркие иллюстрации. На белом фоне было бы слишком контрастно и неприятно глазу.

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

Красивая рассылка от онлайн-университета Skillbox

Еще не поздно букет из 15 цветов за 499₽ — «Перекресток»

Онлайн-супермаркет «Перекресток» прислал рассылку ко Дню святого Валентина. Красивые пастельные цвета в письме служат основой, на их фоне хорошо смотрятся яркие букеты цветов и аппетитные блюда.

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

Красивая рассылка ко Дню святого Валентина от «Перекрестка»

Вам предсказание — GeekBrains

Онлайн-университет GeekBrains стал победителем нашего голосования за лучшую рассылку Рунета — 2019. В конкурсе участвовала красивая приветственная рассылка с супергеройским дизайном.

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

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

Красивое письмо с карьерным предсказателем от GeekBrains

Красивые рассылки писем с акцентом на текст

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

6 февраля. Зачем мерить температуру в Кремле? — «Вечерняя Медуза»

Ежедневная рассылка «Вечерней Медузы» — целиком текст. Шаблон письма выглядит круто благодаря шрифту: буквы с засечками имитируют стиль старых газет.

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

Полностью текстовая рассылка от «Вечерней Медузы»

Нужнее снега — Invisible

Чего-то особенного в структуре шаблонов у Invisible нет, но это сильный дизайн: красивые иллюстрации, ничего лишнего в оформлении и в меру «воздуха» между блоками. А еще в письмах очень красивые иллюстрации и самые вкусные описания вин — грейпфрута и солнца в мой бокал, пожалуйста!

Рассылка о винах от Invisible

Сервис доставки готовой еды Freshly круто рассказывает о своей пользе. Прямо в заголовок вынесен главный аргумент — «Экономьте час в день с помощью Freshly».

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

Красивая рассылка о еде от Freshly

Не забывайте, что текст в письмах важен. Необязательно быть талантливым автором, главное — понимать, по каким правилам построить текст и что главное для читателя. Основные правила мы собрали в статье «Текст для рассылки: универсальные советы для создания эффективных писем».

Красивые рассылки писем с фирменными иллюстрациями

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

Насколько вы взрослый — Laba

Это письмо от еще одного победителя конкурса на лучшую рассылку — образовательной платформы LABA. Оно стало лучшим в категории «Контент».

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

Красивая рассылка с цветовыми акцентами от LABA

How to think like a morning person — Trello

Это письмо от платформы для управления проектами Trello. К каждому блоку — забавная флэт-иллюстрация в фирменной гамме цветов.

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

Красивая рассылка с необычными иллюстрациями от Trello

25 способов сделать первую продажу — Ecwid

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

Красивое письмо от Ecwid

Немного сумасшедшая иллюстрация от магазина косметики Beauty Discount Center. Картинка круто обыгрывает повод рассылки — распродажу в честь Дня сурка.

Письмо ко Дню сурка от Beauty Center Discount

Чтобы делать красивые рассылки и придумывать интересный дизайн для своих писем, развивайте насмотренность. Подписывайтесь на рассылки магазинов, изданий, сервисов, личных блогов — на все, что попадутся в интернете. Берите понравившиеся идеи и адаптируйте их под себя: это очень просто сделать в визуальном конструкторе писем SendPulse.

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

Источник

25 крутых рассылок: интересные идеи для дизайна писем

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

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

Небольшие письма удобны, когда компания отправляет промокод, под который заточен весь дизайн письма. Многие ритейлеры добавляют в качестве обвеса каталог с товарами или пару ячеек с предложениями. Однако лаконичность часто окупается, как в примере с компанией M.A.C. Цель письма – сообщить о скидке на первый заказ и указать промокод. Размер письма позволяет поиграть с двумя сложно сочетаемыми цветами, потому что глаза не устают при просмотре.

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

Добавить в графику элементы GIF, как сделал бренд нижнего белья.

Стоит добавить интерактив – как телеканал Channel4, предложивший подписчикам в День святого Валентина пройти опрос в игровой форме.

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

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

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

Агентство Email Soldiers делает очень интересные рассылки с месячным дайджестом. Это большие письма с уникальными картинками и простым дизайном. В этом примере картинки являются пародиями на известные картины, которые интересно рассматривать даже без привязки к тексту.

Дизайн-студия DKNG составляет свою рассылку из картинок на черном фоне и использует анимацию. Ничто не отвлекает от просмотра, а вся информация спрятана за кнопками «Learn more».

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

Университет GeekBrains придумал игру для подписчиков, где робот может предсказать их профессию. Такое письмо интересно по двум причинам:

Дизайн-сервис Framer для смыслового разделения письма использует смартфон.

Очень ненавязчивый дизайн – хороший выход для рассылки. Компания Сoastal использует простые формы для каталога очков и акцентирует внимание на промокоде. Такое письмо можно собрать в обычном конструкторе рассылок, например, в Sendbox от «Mail.ru для бизнеса». Поэтому даже из стандартных компонентов можно сделать стильное письмо.

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

Газета The Atlantic использует картинку в шапке рассылки для главной темы письма. Остальной дайджест выделяется заголовками и ссылками. Черный текст на белом фоне – самый удобный формат для чтения. Тонкие разделительные линии напоминают о серьезности издания.

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

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

Использовать все начертания шрифта – жирный, курсив, стандарт (образовательный сервис Arzamas).

Заголовки иногда хорошо ложатся на картинки, как в рассылке от клиники психологов Two Chairs.

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

Рассылка от сервиса Trello полностью состоит из картинок – они определяют границы разделов и содержат небольшой текст.

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

А магазин Hims красиво распределяет картинки с товарами на приятном фоне.

Собственные фирменные иллюстрации помогают продвижению бренда Harry’s.

Добавить анимацию для игры с подписчиками – ритейлер.

Или слайд-шоу с затемненными картинками продуктов и акцентом на

Можно нарисовать комикс на тему распродажи.

Очень красивый GIF на тему праздника без лишней информации привлечет внимание.

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

Источник

Дизайн email-рассылок: полная инструкция

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

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

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

Прехедер

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

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

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

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

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

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

Тело письма

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

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

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

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

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

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

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

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

макет письма

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это боль дизайнера. Дизайн email-рассылок предполагает использование только стандартных шрифтов:

Не самые красивые шрифты, но они хорошо читаются: подписчик точно увидит весь текст в письме. Фокус «поиграть со шрифтами» не выйдет 🙂 Кстати, стандартные системные шрифты на Android и iOS — это Helvetica и Roboto. Поэтому их тоже можно использовать. В случае чего они заменяются на родной всем Arial. Так как они похожи по начертанию, это не сильно повредит макет, и ничего не поедет.

Рекомендуемый размер основного текста — 14 px, межстрочный интервал — 1,5.

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

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

Цвет текста

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

Размер писем

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

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

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

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

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

А вот рассылка Ив Роше, которая с картинками выглядит так:

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

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

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

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

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

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

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

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

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

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

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

Первое знакомство

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

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

Подготовку письма начинают с текста рассылки. Без него делать макет бессмысленно.

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

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

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

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

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

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

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

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

Узнайте, сколько для вас будет стоить

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

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

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

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

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

Узнавайте об обновлениях блога Email Soldiers первым

Спасибо!

Осталось подтвердить подписку — кликнуть по кнопке в письме, которое мы вам отправили.

Следите за обновлениями в соцсетях или получайте их от нашего телеграм-бота

Похожие статьи

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

Новый плагин для Фигмы — Marka Email Generator — позволяет выгружать дизайн-макет сразу в готовое для отправки письмо, минуя код.

Оказывается, и в Outlook можно отправлять красивые и сложные письма, собрав шаблон письма в Word.

Источник