0 800 750 730 +7 495 204 15 06 +77 27 350 7615 +1 914 495 1740 +44 203 318 0881 +44 203 318 0881
  • Украина Русский

  • Россия Русский

  • Казахстан Русский

  • Сша English

  • Европа English

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
Всего голосов: 115 средняя оценка: 4.81 (рейтинг: 96%)

Часто бывает, что нам присылают дизайнерские шаблоны, в которые вложено много труда, но сверстать что-то путёвое всё равно не получается. После обсуждения этого вопроса с нашими подписчиками в 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 варианта каждого элемента дизайна:

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

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

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

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

Только для подписчиков: 
НЕ Только для подписчиков
Тип писем: 

Добавить комментарий

taldykin.egor@g...
18:18, 21 марта 2013

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

И существует ли статистика: какой процент таких пользователей, у которых не будет отображаться те или иные элементы дизайна (их 5% или 70%)?

Дмитрий Спунтик
admin
13:32, 25 марта 2013

Егор, с процентами тут у каждого будет по-своему, сейчас попробую объяснить почему.

Вот, например, публикация о том, как выглядят картинки и альтернативный текст в разных бразузерах:
http://esputnik.com.ua/blog/kak-pravilno-oformlyat-kartinki-v-pisme

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

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

Добавьте сюда mail.ru, yandex, ukr.net, rambler, и обычные клиенты типа Outlook, The Bat, Thunderbird... одну тонну мобильных клиентов. Достаточно заметить, что Outlook использует движок Word для отображения HTML. (http://esputnik.com.ua/blog/pochemu-pisma-otobrazhayutsya-po-raznomu-v-p...)

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

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

Опять же, если не хотите чтобы текст у некоторых клиентов отображался квадратиками, не используйте нестандартные шрифты. Рекомендуемые шрифты без засечек: Verdana, Arial, Tahoma

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

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

Цифры... по общей статистике в нашей системе 40% контактов - mail.ru, потом идет google, yandex, urk.net, rambler

taldy@ya.ru
14:19, 25 марта 2013

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

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

Дмитрий Спунтик
admin
14:29, 25 марта 2013

Есть, но обычно эти сервисы платные и европейские, они не берут в расчет такие клиенты как The Bat, Ukr.net, но дают общее представление

Один из них Litmus.com - там есть 7 дневный триальный период. Основной принцип работы такой: Ваше письмо отправляется на внутренние локальные адреса системы, открывается в разных клиентах и делается скриншот.

Список скриншотов предоставляется клиенту в виде отчета. Тут можно создать учетку. Результаты бывают очень неожиданными

dmitry.kresin@g...
12:39, 26 марта 2013

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

Дмитрий Спунтик
admin
16:34, 25 марта 2013

100% согласен, но дизайнеры народ особенный, творческий. Часто без градиента в тексте, текст не работает по мнению некоторых (прошу не считать это обобщением) :)

glebovpartner@g...
06:50, 22 марта 2013

Согласен. Нужна статистика. Подтвержденная. Другими словами - Откуда информация эта?

Дмитрий Спунтик
admin
14:04, 25 марта 2013

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

Цифры?.. В данном случае, я не знаю к чему они и что они доказывают. У каждого свои цифры. Я бы относился к этой публикации как обращение email маркетолога к дизайнеру.

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

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

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

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

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

Slav Krivonos
22:07, 25 марта 2013

Спасибо за статью. Интерено)
Только ссылки на CTA замените, пожалуйста, c http://esputnik.com.ua/blog/blog/kak-oformit-prizyv-k-deystviyu
на http://esputnik.com.ua/blog/kak-oformit-prizyv-k-deystviyu

Дмитрий Спунтик
admin
11:22, 26 марта 2013

Slav, спасибо большое за внимательность и замечание - исправили.