Как создать грамотный дизайн письма?

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

СоветыВсе, что вам надо знать о дизайне писем

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

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

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

  1. чтобы письмо хорошо выглядело на всех устройствах и все функции работали;
  2. чтобы верстальщик не отказался его верстать;
  3. чтобы составить ТЗ дизайнеру (если он есть) и проконтролировать результат.

Для удобства мы разделили статью на 2 части: базовые понятия и сборка письма. Начнем с базы.

Часть 1. Базовые понятия о дизайне писем

Размер письма

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

Если делаете макет в Photoshop, то можно сразу создать документ с шириной 600 px.

Задаем размеры документа в Photoshop

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

Структура классического письма

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

Модули

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

Покажем на примере.

Модульная структура письма

Модули располагают в одну или несколько колонок. В теле письма количество колонок может меняться: одна колонка может смениться двумя-тремя. Чтобы письмо было проще адаптировать под мобильные устройства, обычно используют 1–2 колонки.

Шрифты

В email-рассылках используют набор «безопасных» шрифтов, которые отображаются во всех браузерах и почтовых приложениях.

Безопасные шрифты

Если текст слишком мелкий, пользователи будут увеличивать письмо. Например, в устройствах под iOS 6–7 минимальный размер шрифта 13 px. Если в рассылке есть текст меньше, то система его автоматически увеличит до этого размера.

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

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

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

Расстояние между объектами

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

Междустрочные интервалы заголовка и текста практически совпадают. Они слипаются. Пропадает ощущение контраста

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

Теперь заголовок и текст контрастируют

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

Чтобы эти элементы дизайна не «слипались», расстояние всегда должно увеличиваться при переходе на более высокий уровень (от букв к строкам, от строк к блокам и т.д.). В бюро Горбунова это называют правилом «внутреннего и внешнего».

Чтобы создать контрастность и повысить выразительность отдельных объектов, внешнее всегда должно быть больше внутреннего.

Совет Артема Горбунова о внутреннем и внешнем

Артемий Лебедев. Теория близости

Фирменный дизайн

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

Пример LinguaLeo. Вот рассылка:

Одна цветовая гамма, один и тот же шрифт, похожие макеты.Единый стиль — круто

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

Запрещенные элементы

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

  • JavaScript;
  • flash-анимацию;
  • CSS-анимацию;
  • видео;
  • формы;
  • эффекты наведения — изменение свойств объекта при наведении мыши (псевдокласс :hover);
  • эффекты параллакса.

Вставлять эти функции и объекты в макет письма не надо — они не отобразятся у пользователей.

Мы познакомились с основными понятиями в дизайне email. Пришло время собрать макет.

Часть 2. Собираем письмо

Предположим, нам нужно сделать макет письма для портала GuitarPlay.com. Этот сервис помогает с поиском людей в музыкальную группу, арендой репетиционных баз и организацией концертов. У портала есть сайт и блог.

Решаем, что будет внутри письма

Это дайджест, полноценная статья или каталог? Каждый формат предполагает свой дизайн.

Дайджест Нетологии. Цель — рассказать, что произошло на сайте и в блоге за неделю:

Письмо-статья от Мегаплана. Основной упор на текст и авторские иллюстрации.

Письмо-каталог от PitchShop. Упор на визуальную составляющую — покупатель видит товар, кликает на него и покупает.

Наша задача — кратко описать, что нового случилось в блоге и на сайте сервиса. Значит, делаем письмо-дайджест.

Рисуем прототип

Прототип нужен, чтобы продумать количество колонок, взаимоотношения между блоками и получить общее представление о макете. Такие «черновики» часто используют, чтобы показать клиенту концепцию страницы. Сделать прототип можно в Photoshop, Balsamiq или Axure. А можно нарисовать от руки.

Прототип письма для GuitarPlay.com на бумаге и в Photoshop

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

Прехедер и шапка письма

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

Перехожу к телу письма. Для текста я выбрал безопасный шрифт Sans Serif. Модуль под абзацем «Как взять баррэ?» — это картинка с наложенным сверху значком YouTube. Сюда нужно вшить ссылку на видео.

Предварительный дизайн тела письма

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

Расстояние до изображения и текста практически одинаковое

Подвинем название ближе к тексту.

Теперь понятно, к чему относится название

Проделал тоже самое с остальными интервалами:

Заголовки теперь дружат с текстом

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

Основную часть закончили. Теперь нужно проверить, все ли элементы дизайна можно перенести на языки разметки. Мы подготовили чек-лист с 20 правилами подготовки макета письма к верстке. В него надо заглянуть, прежде чем отдать макет верстальщику или начать верстать письмо самостоятельно.

Запомнить

  1. Максимальная ширина письма — 600 px. На длину ограничений нет.
  2. Письмо состоит из прехедера, шапки, тела и подвала. В них находятся модули, которые не пересекаются и не накладываются друг на друга.
  3. Для основного текста рассылки нужно выбирать «безопасный» шрифт.

    Декоративные шрифты переводим в изображения и потом добавляем в письмо.

  4. Буквы, строки и отдельные модули не должны слипаться между собой. Чтобы такого не случалось, пользуемся правилом внутреннего и внешнего.
  5. У большинства рассылок есть фирменный дизайн.

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

  6. Почтовые приложения не отобразят Flash-объекты и видео. Прежде чем вставить что-то новое, убедитесь, что почта это поддерживает.

  7. При создании макета можно опираться на алгоритм: определить цель письма → нарисовать прототип → создать окончательный макет → проверить по чек-листу.

«>

Источник: https://www.unisender.com/ru/blog/sovety/kak-sozdat-maket-pisma-bez-dizaynera

50 лучших дизайнов рассылок (и как самому делать так же круто) (Часть 1)

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

Думается, нам есть что обсудить, сверив наблюдения и советы зарубежных экспертов с нашим собственным опытом по созданию рассылок. Первые 10 кейсов в основном посвящены роли цвета в создании письма. Ждем ваших комментариев!

Ожидается, что к концу следующего года число зарегистрированных по всему миру ящиков электронной почты превысит 4,3 миллиарда.

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

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

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

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

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

В этом примере Mika Osborn использовала забавную и креативную GIF-анимацию, которая призвана донести одну простую мысль («Let’s pin» -«давай делать пин», от названия социальной сети «пинтерест») – в неповторимом, удивительном и запоминающемся ключе.

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

Дизайн рассылки от Apple предполагает много свободного пространства и четкий фокус на продукте.

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

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

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

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

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

Такое использование цвета позволяет изображению «выстрелить» и направляет взгляд к важному, а абстрактные элементы и креативное расположение текста помогают добавить в макет движение.

Этот дизайн соединяет минимализм с ярким цветом, и это великолепно.

Письмо Burberry – гениальное решение для демонстрации их знакового тренча и одновременно – повышения узнаваемости бренда.

Дизайн запоминается благодаря использованию сепии (жёлто-коричневые оттенки) и фотографиям знакового пальто с разных ракурсов.

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

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

Только одно изображение, представляющее бренд, один заголовок, одно описание и одна кнопка-призыв к действию (call to action), всё выровнено по центру, ни один из элементов не перекрывает остальные.

all centrally focused and aligned, no one element overpowers the other. Несмотря на минимализм, использование ленты как изображения бренда позволяет сделать письмо игривым и привлекательным.

Этот пример от Churchmedia демонстрирует интересный способ создания рассылки перед событием.

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

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

Ещё 10 кейсов опубликуем в нашем блоге послезавтра, а если вы хотите лично обсудить тренды email-дизайна и другие вопросы email-маркетинга – ждём вас на конференции Mailcon, а найти другие примеры дизайна электронных писем, в том числе – отечественные, а не зарубежные – вы всегда можете в коллекции рассылок Email-Competitors.ru.

Источник: https://habr.com/company/email-competitors/blog/295114/

18 трендов в email-дизайне: как делать красивые письма

Какую идею украсть, стоп, творчески позаимствовать, чтобы ваши письма узнавали с первого взгляда? Как привлечь внимание, если ваш подписчик читает письма клавишей Del? Что вообще делать, если контент уже идеален, но надо улучшать результаты рассылки?

Об этом рассказывает Ольга Нерода. Она занимается емейл-маркетингом для небольшой компании «Живой кофе» и сама испробовала не один вариант дизайна писем. Статья была написана в процессе подготовки к вебинару, но потом разрослась до лонгрида.

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

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

В наших рассылках добавление имени в тему письма практически никак не повлияло на открываемость. А что говорят ваши данные в подобном эксперименте?

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

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

Я соглашусь со многими, что в письме главное контент. Но это все же не 100% успеха. Подписчики должны получать эстетическое удовольствие от ваших рассылок.

Вот такие письма в ответ на рассылку присылают наши подписчики.

Здравствуйте. Как вы делаете такие красивые письма?

Я очень надеюсь, что на каком-то пункте вы подумаете «Пожалуй, это можно адаптировать для моего случая». А потом сами проведете вебинар: «Мы выполнили это решение — вот что у нас получилось».

1. Контурные кнопки

Ghost buttons — это уже совсем не тренд. Контурный дизайн в web-трендах упоминается несколько лет подряд. Но не могу не привести его как пример. Это идеальное решение для рассылок.

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

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

2. Сочетание шрифтов

Тренд уже не тренд. Он на 100% из веб-дизайна, но в рассылке тоже стоит заморочиться со шрифтами. Посмотрите, например, как это делает Huckberry. И обратите внимание, здесь тоже присутствует контурная кнопка.

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

3. Письма с душой

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

4. Иллюстрации

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

5. Годовые отчеты в виде лонгридов

Вот еще 2 тренда в одном письме. Иллюстрации можно использовать для создания годовых отчетах. Так в конце 2016 года поступил MailChimp. У них просто впечатляющее количество данных. Например, что в день их служба поддержки выпивает 1,8 кг кофе, или то, что за год они провели 148 новых интеграций. И все это оформлено в виде иллюстраций.

6. Дуплекс

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

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

7. Черно-белый макет

И еще про цвет. Можно экспериментировать с цветами, а можно обратиться к вечной классике — черному и белому цветам. Ниже пример от Banana Republic. Чтобы довести читателя до кнопки call-to-action и не отвлекать внимание на яркие нюансы, макет сделан в черно-белом цвете, но с толикой юмора. И заставляет листать вниз. Переход по кнопке для пользователя логичен и естественен.

Пример от магазина одежды. Цвет здесь — основа для создания лука total-black. И еще одна очень популярная фишка в дизайне и фешн-съемке — размешать вещи не на контрастном фоне, а на фоне такого же цвета.

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

8. Минимализм: 1 предложение, 1 призыв к действию

От минимализма в цвете давайте перейдем к минимализму в конструкции. Строгий и с юмором дизайн письма Живой Кофе, приуроченный к Оскару 2016, наилучшим образом использует идею простоты.

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

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

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

9. Выйдите за рамки

Можно оставить цвет в покое и заняться объемом. Вместо того чтобы подчеркивать границы письма, попробуйте добавить 3d-эффект и вынести картинку за его рамки. Например, как это сделал Wix.

10. Покажите весь ассортимент

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

Или в виде дорожной карты для вещей, предназначенных для путешествия.

11. Z-верстка

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

12. Геометрия

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

13. Пользовательский контент (User Generated Content). Фото из Инстаграм

Давайте отойдем немного от цветов, шрифтов и композиций и поговорим о функционале писем. Что интересного можно включить в письмо.

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

Источник: http://madcats.ru/email-marketing/18-email-design-trends/

Как сделать красивое письмо для рассылки: 6 дизайнерских секретов

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

Чтобы труды на разработку классно написанного письма с грамотным дизайном окупились, сообщение должно быть доставлено целевой аудитории и должно быть открыто.

Только после того, как эти два пункта решены, можно думать о том, как сделать красивое письмо для рассылки.

Доставляемость: как создать рассылку с минимальным попаданием в спам?

Я расскажу на примере Getresponse.ru

Тут рецепт достаточно прост. Сервис платный и жалеть о покупке вам точно не придется. «Гетрик» многими пионерами имейл-маркетинга называется «сервисом, гарантирующим самую высокую доставляемость во «Входящие» на сегодняшний день». И так уже много лет.

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

Несколько кратких рекомендаций, снижающих спам-рейтинг:

  1. Не слать в базу, которая не подписывалась на вашу рассылку. У Данте было бы, как минимум, на один круг ада больше, родись он в 80-х
  2. Слать от имени корпоративного почтового ящика (drathutee@daykraba.com)
  3. НЕ ДЕЛАТЬ ВОТ ЭТОГО в заголовке
  4. Вопросительные, восклицательные знаки (и другие знаки тоже) в заголовке провоцируют спам-рейтинг
  5. Разные языки в заголовке — провоцируют еще больше
  6. Аккаунт, с которого регулярно рассылаются письма с большим попаданием в спам, регулярно наращивает спам-рейтинг
  7. Это только часть нюансов, на разных сервисах email-рассылок водятся свои «спам-тараканы», так что обязательно стучитесь в поддержку

Заголовок: как создать письмо для рассылки, которое будут читать?

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

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

  • Знать аудиторию. Это 90% успеха. Вам нужно знать страхи, мечты, увлечения, потребности, распорядок дня, возраст, хобби, работу… Ну вы поняли, нужно знать аудиторию. От этого заголовки сами не напишутся, но придумывать их станет значительно легче и быстрее.
  • Выделиться из сообщений-конкурентов. Как прямых, так и косвенных. Зная аудиторию, вы знаете на кого еще она подписана. Подписывайтесь на конкурентов, смотрите на их дизайн email-рассылки и на контент, анализируйте и выделяйтесь.
  • Тестируйте и экспериментируйте. Проводите АБ тесты, анализируйте открываемость предыдущих писем, сопоставляйте цифры с буквами в заголовке и делайте выводы.
  • Не повторяйтесь. Нашли классную структуру заголовка — используйте несколько раз, но не берите за основу. Одинаковые письма (сюда же одинаковый дизайн электронных писем), пусть и с разными словами, просто перестанут открывать со временем.

Как сделать красивое письмо для рассылки: 6 веб-приемчиков

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

Вопреки мифам о том, что email-маркетинг уже не торт, не работает, устарел, остаются игроки, которые стараются и получают результаты. А есть те, кто шлет унылые буквы на белом фоне и жалуется на порядок вещей. Чтобы ваши сообщения не были мгновенно отправлены в корзину, используйте дизайнерские фишки!

1. Вовлекающий дизайн email-рассылок с проработанным цветом

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

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

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

2. Одно письмо, один шрифт, один клиент из множества возможных

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

Оптимальный вариант: разные шрифты на абзацы и заголовки

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

3. Красивое оформление письма, как части вашего сайта

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

Пример. Mercedes-Benz создает лакшери-атмосферу, используя темные тона на своем веб-ресурсе. И все их рассылки выполнены аналогично.

4. Правила оформления электронного письма: минималистичность дизайна

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

Воплотите эту прописную истину в дизайне писем. Долой ненужные отвлекающие элементы. Есть пустое место и вы не знаете что туда поставить? Не ставьте ничего. Используйте 2-3 цвета, но не больше.

Сделайте оформление интересным, но не таким, чтобы оно забирало больше внимания, чем сама суть письма.
Многие, задумавшись над тем, как создать красивое письмо для рассылки, гуглят: «Как правильно совместить 5 цветов».

Когда секрет в том, чтобы привильно использовать всего 2 оттенка.

Если есть желание покреативить, тогда откажитесь от простых ссылок в тексте и замените их на кнопки. Это как раз тот элемент, который можно делать заметным, дерзким, так и кричащим: «Давай, клацай на меня!»

5. Красивое оформление писем гифками

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

Как оформить письмо красиво? На помощь приходят гифки, добавляя эффекта неожиданности и привлекательности вашим посланиям. С ними удобно работать, они гораздо меньше в размере, чем видео.

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

6. Как сделать красивое письмо для рассылки с персонализацией

В последнем пункте вернемся к первым двум, которые не совсем о дизайне. Чем хороша обезличенная email-рассылка по своей базе? Да ничем.

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

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

Правда, есть минус. Вам придется в ручном режиме редактировать базу. Ведь, при подписке, люди часто пишут в строке ФИО всякое разное… Bubochka, Huligan777, Вано, Татьна, Юий Васильевич и т.д. Как написать красивое письмо, если оно начинается со слов: «Torpeda, здравствуйте!» Такие «имена» лучше редактировать, чтобы персонализация не принесла больше вреда, чем пользы.

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

(Visited 449 times, 4 visits today)

Егор Кольнобрицкий
CEO & Founder

(2 голос, средний бал: 4,00 из 5)Загрузка…

Источник: https://daykraba.com/kak-sozdat-pysmo-dlya-rassyilki-6-sposobov/

Подробная инструкция по дизайну email-рассылок от агентства Email Soldiers

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

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

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

Прехедер

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

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

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

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

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

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

Тело письма

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

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

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

Адаптивный дизайн 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

Источник: https://emailsoldiers.ru/blog/full-instruction-for-mailing-design

Тренды в дизайне email-рассылок в 2017 году — Офтоп на vc.ru

Колонка дизайн-студии AIC

Команда дизайн-студии AIC изучила исследования аналитиков и мнения специалистов email-маркетинга и написала для vc.ru колонку с трендами в дизайне email-рассылок в 2017 году.

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

Тренды 2016 года, которые будут жить в 2017 году

1. Адаптивный дизайн

Смартфоны победили десктоп. Согласно исследованиям Litmus, 55% писем открывают на мобильных устройствах. В 2017 году тенденция сохранится, поэтому самое время проверить свои рассылки на адаптивность. Руководствуйтесь основными принципами:

Универсальность. Разработайте адаптивный макет, чтобы письмо корректно отображалось на всех устройствах.

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

Разные CTA для мобильных и десктопа

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

Адаптивное меню

На что обращать внимание

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

2. Интерактивность

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

Интерактивные элементы работают на CSS3, а спроектированы могут быть, например, в Adobe Experience Design или Sparkbox. Задача таких инструментов — помочь сосредоточиться на контенте, а не на вёрстке.

На что обращать внимание

Сегодня существует множество почтовых клиентов — десктопные приложения (например, Microsoft Outlook, AOL, Thunderbird), веб-сервисы (Gmail, Mail.Ru Group), мобильные клиенты.

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

Стоит предусматривать упрощенные варианты отдельных блоков и прописывать их в media queries.

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

3. GIF-анимация

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

На что обращать внимание

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

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

4. Векторные изображения

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

На что обращать внимание

Пара полезных JS-библиотек для работы с SVG-анимацией: SnapSVG и GreenSock GSAP.

5. Покупка в письме

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

Тренды в email-рассылках 2017 года

1. Видео

Будущее контент-маркетинга за видео — пишет газета The Guardian. По прогнозам Cisco, к следующему году видео охватит 69% всего интернет-трафика. Оно выйдет за пределы YouTube и будет активно применять в email-маркетинге.

Компании, уже внедрившие видео в свои рассылки, отмечают их эффективность:

  • Кликабельность увеличивается на 55%.
  • Пользователя тратят на просмотр письма на 44% времени больше, чем обычно.
  • На 41% увеличиваются расшаривания и публикации в социальных сетях.
  • Конверсия растёт на 24%, ROI — на 20%.
  • Средний чек увеличивается на 14%.

Несмотря на эти преимущества, видео редко встраивается в письма (обычно предпочитают давать ссылку на видеохостинг).

На деле вставить видео в рассылку нетрудно — большинство сервисов поддерживает вставку роликов по ссылке (тот же Mailchimp). Видео может быть и фоном для отдельных элементов или всего макета сразу. Для этого есть онлайн-редактор Mailigen.

2. Галереи изображений

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

3. Гибридная верстка рассылок

Технология hybrid coding вместо того, чтобы полагаться на media queries, помогает создавать макеты, адаптивные по умолчанию. Технология совмещает принципы статичной и «резиновой» верстки, что позволяет ей корректно подстраиваться под размеры экрана даже у пользователей Microsoft Outlook.

4. Яркие цветовые схемы

Общие тенденции веб-дизайна найдут отражение в рассылках. Дуплекс потеснит полноцветные изображения (мы писали об этом стиле в блоге), а общее оформление писем станет ярким — как в «Мемфисе».

Насыщенные цвета помогают лучше структурировать контент.

5. Типографика и навигация

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

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

На что обращать внимание

Источник: https://vc.ru/flood/20382-email-trends-aic

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

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

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

Давайте коротко пробежимся по основным моментам и элементам дизайна email рассылок.

Оформление шаблона

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

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

Цветовая гамма

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

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

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

Шрифты

Рекомендуемый текст шрифта — 12px, междустрочный интервал — 1.5. Эти параметры позволят получателю письма комфортно считывать всю информацию. Если для чтения письма приходится напрягаться, то это создает негативные эмоции, которые автоматически проецируются на содержимое письма.

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

Для рассылок лучше отдать предпочтение следующим шрифтам:

Эффекты типа обводки и прочих лучше не использовать.

Структурные элементы рассылки

Кнопки призыва к действиям. Чтобы клиент выполнил желаемое действие, он должен с лёгкостью находить кнопку CTA и с такой же простотой кликать по ней. А для этого кнопка должна быть достаточно крупной и заметной на общем фоне письма)

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

Минимум текста. В большей части это касается информационных рассылок. Зачем заставлять пользователей читать огромные тексты? Лёгкие и короткие письма, с минимальными вертикальными прокрутками будут гораздо удобнее для читателей.

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

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

Что еще можно добавить?

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

Причина их возвращения очень проста — необходимость «оживить» письмо, добавить в него движение и анимацию.

Пробуйте, экспериментируйте и делайте яркие рассылки!

Источник: habrahabr.ru
Фото на обложке: ShutterStock

Источник: https://infogra.ru/design/5-sovetov-po-dizajnu-email-rassylok

Девять правил разработки дизайна писем

Юрий Гусев

Руководитель группы дизайна и креатива, EMAILMATRIX

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

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

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

Основополагающим отличием является то, что вёрстка писем основывается на таблицах, а не на блоках (как большинство современных сайтов). Также не поддерживаются скрипты и большая часть свойств CSS.

Не забывайте об этом, и по возможности изучите особенности вёрстки таким способом.

Размер письма

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

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

Оптимальная ширина контентной части письма составляет не более 600 пикселей. Желательно уместить в них и возможные тени от основного контейнера. Однако общий фон «под письмом» может быть любого размера и может быть залит любым паттерном или цветом.

Ширина контентной области письма и общего фона «под письмом»

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

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

Пример модульной сетки из четырёх столбцов

Пример модульной сетки из трёх столбцов

Адаптация под мобильные устройства

Существует два способа адаптации:

  1. адаптация «резиновых» макетов;
  2. адаптация с помощью медиазапросов.​

Адаптация на медиазапросах применяется при разработке веб-страниц, но для писем подобный подход — не лучшее решение. Дело в том, что немногие мобильные почтовые клиенты поддерживают работу медиазапросов. Например, популярные в России мобильные почтовые клиенты Yandex и Mail.ru медиазапросы не поддерживают, а Gmail начал с ними работать лишь с сентября 2016 года.

Outlook c его мобильными приложениями (на iOS и Android) и здесь смог выделиться: долгое время он поддерживал медиазапросы, однако в последних версиях отказался от них.

Основным решением для адаптации электронных сообщений является создание «резиновых» макетов с блочным перестроением внутренних элементов.

Когда ширина письма указывается относительной (в процентах) и ограничивается лишь максимальным и минимальным размерами.

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

Элементы письма при «резиновом» подходе адаптируются тремя основными способами. Назовём их условно: масштабирование, отсечение и перестроение.

Масштабирование

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

Масштабирование

Отсечение

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

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

Также не следует оставлять какие-то незначительные элементы выступающими с отсекаемой половины на «важную».

Отсечение

Перестроение

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

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

При использовании трёх колонок в основе структуры части письма не стоит делать между элементами больших промежутков.

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

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

Таким образом на мобильном устройстве мы увидим логичное и привычное представление статьи или товара. Оптимальное решение в этой ситуации — сделать соседние блоки равными по ширине и равными половине ширины письма. Этот тип адаптации вариативен и позволяет создавать нетривиальные структуры писем.

Перестроение

Не пересекайте строки

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

Строки пересекаются

Строки не пересекаются

Шрифты

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

Список безопасных шрифтов:

  • Arial;
  • Comic Sans MS;
  • Impact;
  • Tahoma;
  • Trebuchet MS;
  • Verdana;
  • Courier New;
  • Lucida Console​.

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

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

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

Если заголовок по ширине занимает больше половины, убедитесь, что:

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

Примеры заголовков

Графика

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

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

Градиенты

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

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

Пример этой особенности

Оптимальный контраст

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

Динамика

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

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

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

Список поддерживаемых свойств CSS у всех провайдеров разный. Есть почтовики, которые поддерживают hover-эффекты и умеют заменять одну картинку на другую.

Таким образом мы можем создать видимость взаимодействия с кнопкой при наведении курсора мыши. При создании hover-эффекта вы ничем не рискуете.

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

Существует возможность создавать интересные элементы, например, такие как плавающее меню — «гамбургер». Но по причине слабой поддержки CSS их увидит маленький процент пользователей.

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

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

Границы

У неровных вертикальных рамок вокруг адаптируемых перестроением блоков также есть свои особенности.

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

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

Видимый стык

Бесшовная рамка письма

Чтобы вы у вас перед глазами всегда был пример правильных писем, заглядывайте к нам в Pinterest. Там мы публикуем письма, которые разработали для клиентов, и примеры западных коллег.

Источник: https://emailmatrix.ru/blog/email-design/

Ссылка на основную публикацию