27

1.   Главное в рассылке сообщений электронной почтой – адаптивный дизайн

Более 56% подписчиков просматривают email-письма на экранах смартфонов. Очевидно, что при дизайне писем следует учитывать его совместимость с мобильными устройствами. Вот несколько ключевых моментов адаптивного дизайна:

  • Кнопка с призывом к действию должна быть размером минимум 44х44, чтобы на неё можно было бы без труда нажать пальцем, а текст на ней должен быть хорошо виден.
  • Текст письма должен идти одной колонкой – других вариантов быть не может.
  • Google постепенно выкатывает пакет обновлений, в числе которых уже есть поддержка media queries. а вот Mail не поддерживает media queries. Чтобы ваши письма правильно отображались у пользователей приложения Mail, их надо верстать spongy-методом Hybrid Emails.
  • Помните про дисплеи Retina. Если в вашей базе много тех, кто пользуется техникой Apple, добавляйте изображения с удвоенным разрешением для наилучшего отображения.

hybrid

cta

 

2.   Тема и прехедер письма – «бойцы невидимого фронта»

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

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

Вот несколько проверенных советов по использованию прехедера при вёрстке писем с помощью системы рассылок клиентам.

  • Первый абзац письма, или так называемый Johnson Box («коробка Джонсона», по имени маркетолога Фрэнка Джонсона), отобразится в прехедере. Поэтому разместите там краткое содержание или основную идею письма.
  • Попробуйте добавить эмодзи, создайте ощущение срочности, сделайте контент персонализированным – всё это поможет вашему письму не затеряться на фоне остальной рекламной почты.
  • Размер рехедера – 400х300 пикселей. Убедитесь, что высота первого абзаца (Johnson Box) не превышает 150 пикселей, иначе сдвинется контент основной части письма.

preview

 

3.  Сделайте оглавление, если письмо длинное – таковы новые правила рассылки писем

Оглавление для рассылки? Звучит странно. Лучше всего делать новостные письма краткими. Если вам всё-таки приходится отправлять объёмное письмо, то будет полезно добавить в него оглавление. Сделайте оглавление кликабельным, чтобы подписчик мог сразу перейти в интересующий его раздел письма.

vrbuzz

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

Считается, что оптимальная ширина новостного письма – 320-650 пикселей. Для чтения с мобильных устройств подходит ширина 320-550 пикселей. Что касается высоты, то она зависит от количества контента. Люди не любят долго скроллить, поэтому старайтесь делать письма короткими и чёткими, чтобы подписчики могли легко пробегать их глазами.

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

Как сделать идеальную типографику

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

5.   Добавьте «вкусный» визуальный контент и не забудьте оптимизировать его

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

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

pixel-art-in-email-city-2pixel-art-in-email-city

6.  Минималистичный и содержательный контент – ключ к успеху

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

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

menu

7.  Поработайте над «подвалом» (футером)

Футер – это одна из самых недооценённых частей новостного письма. Многие компании не уделяют внимания дизайну футера. Однако именно в футере нужно разместить несколько важных ссылок, если вы не хотите прослыть спамером. Добавьте туда официальное название и адрес вашей компании, ссылку «Отписаться» и другую важную информацию. Более того, подвал тоже должен быть адаптивным, чтобы все ссылки и текст хорошо отображались у владельцев мобильных устройств.

footer

 

8.   А/В-тестируйте ваши рассылки

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

Ещё раз о самом важном:

  1. Приоритет №1 – адаптивный дизайн для пользователей мобильных устройств.
  2. Попробуйте верстать контент в таблицах: они хорошо отображаются. Благодаря им вы будете уверены, что ваше письмо правильно отобразится даже у тех подписчиков, чьи почтовые приложения не поддерживают фоновые картинки.
  3. Будущее email-маркетинга – за продвинутыми возможностями вёрстки писем. Попробуйте упорядочить контент с помощью интерактивных меню, созданных посредством анимации CSS3. Дизайн такого письма будет аккуратным и наглядным.

Добавьте статью к себе на стену, чтобы не потерять

Поделиться