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

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



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

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

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

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

Прехедер

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

прехедер

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

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

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

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

шапка письма Амедиатеки

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

письмо Lamoda

Тело письма

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

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

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

футер

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

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

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

Полезно почитать

HTML вёрстка писем — полная инструкция

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

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

макет письма
макет письма

адаптивная верстка
адаптивная вёрстка

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

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

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

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

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

ДесктопныеМобильныеБраузерные
AOL DesktopAndroid 4.2.2 MailAOL Mail
Apple Mail 10Android 4.4.4 MailG Suite
IBM Notes 9AOL Alto Android appGmail
Outlook 2000–03AOL Alto iOS appGoogle Inbox
Outlook 2007–16BlackBerryOutlook.com
Outlook ExpressGmail Android appYahoo! Mail
Outlook for MacGmail Android app IMAP
PostboxGmail iOS app
ThunderbirdGmail mobile webmail
Windows 10 MailGoogle Inbox Android app
Windows Live MaiGoogle Inbox iOS app
iOS 10 Mail
Outlook Android app
Outlook iOS app
Sparrow
Windows Phone 8 Mail
Yahoo! Mail Android app
Yahoo! Mail iOS app

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

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

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

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

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

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

теги отображаются в два столбца
Теги отображаются в два столбца

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

письмо с ошибкой в вёрстке
Письмо с ошибкой в вёрстке

Дело в том, что между плавающими блоками (<div style=»display: inline-block»>…) не должно быть пробелов в коде. В этом примере в коде случайно добавили пробел или перенос строки. Получился отступ между блоками, и два столбца не поместились.

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

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

  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

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

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

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

Цвет текста

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

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

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

Размер писем

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

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

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

дизайн письма с персональным обращением
Дизайн письма с персональным обращением

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

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

пример письма, свёрстанного картинками

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

пример письма, свёрстанного картинками

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

рассылка Ив Роше без картинок

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

в письме вместо фоновой картинки — серая заливка

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

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

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

письмо с анимацией

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

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

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

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

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

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

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

Предварительное знакомство

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

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

Скачайте наш материал

Как написать письмо для email-рассылки

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

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

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

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

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

письмо с инструкцией

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

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

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

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

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

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

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

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

пример того, как свёрстанное письмо отличается от макета

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

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

Email-маркетинг под ключ

html-вёрстка писем Полная пошаговая инструкция, как верстать письма для email-рассылок.
Как rolllover images выглядят в рассылках

Интересный приём — интерактивное изображение в рассылках.

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