20 Мар 2013
Рекомендации по дизайну email писем

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

Статья носит рекомендательный характер на основании нашей работы с дизайнерами по разнообразным проектам. Своего рода выжимка тезисов приобретенного опыта :)

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

Основные требования к дизайну email письма:

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

    Пример письма сделанного одной картинкой

  • Рекомендуемая ширина — 600px, максимальная - 650px

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

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

  • Графические элементы не должны выходить за тело письма

  • Максимально убрать эффекты типа (тени, свечение, градиенты)

Примеры ошибок в письме

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

  • Избегайте сложных больших фоновых картинок.

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

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

  • Оптимизируйте графику для web. Без включения цветового профиля в файл и включенных метаданных

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

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

Создавайте красивые письма
 
 
 

Элементы email письма (блоки)

Пример письма сделанного одной картинкой

  • Шапка письма (Header)

  • Подвал письма (Footer)

  • Заголовки 1,2,3

  • Текст с картинкой

  • Блоки с социальными ссылками

  • Кнопка call 2 action и т.п

Этот список можно продолжать в зависимости от ваших задумок, например: блок с описанием товара и скидочной ценой.

Также вы можете использовать редакторы с полосами типа Stripo.email

https://stripo.email/

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

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

Общие элементы, на которые стоит обратить внимание:

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

  • Для личного общения должно быть место для приветствия и прощальной фразы.

  • Руководство к действию — это, как правило, элемент дизайна.

  • Положение социальных кнопок желательно делать в виде призыва, вроде: «Следите за нами в соц. сетях». Это будет второстепенное действие, так что тут важно не переусердствовать.

  • Обязательно должны быть контакты для обратной связи

Подготовьте 2 варианта каждого элемента дизайна:

  • с картинками

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

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

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

Вам понравился материал? Оцените:

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 144 средняя оценка: 3.06 (Рейтинг: 61%)

С этим читают: