Более 2000 бизнесменов, маркетологов, дизайнеров и разработчиков следят за новостями нашего блога.

Присоединяйтесь:

Подписаться
Отлично!

Подтвердите подписку: письмо в почте, там жмите на ссылку

Обсудить проект
Отправить
Сообщение отправлено и мы позвоним вам в ближайший рабочий день с 9 до 17 часов.
Связаться
Все записи
Рассказывает ,

Публикуем гостевой пост от EmailMonks — компании, которая специализируется на создании ярких красочных писем. Каждый месяц монахи создают тысячи емейлов, дайджестов и лендингов, причём отличного качества: среди заказчиков Дисней, Огилви и National Geographic.

Мы попросили ребят рассказать о приёмах вёрстки, которые они используют, чтобы следовать трендам. Пройдя по чек-листу, мы выяснили, что не отстаём. А вы?

дизигн

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

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

Продвинутый интерактив

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

Интерактивные блоки добавляют свежую струю в старые и скучные емейл шаблоны, оживляют их и освежают. Используйте анимацию CSS, чтобы применять такие эффекты как: «Меню», «Аккордеон», «Флип’н’скрэтч», слайдеры.

Slider in Email

Слайдеры

Scratch-in-Emails_GIF_2

Скретч-эффект

menu-mobile

Меню в емейле

Flip-in-Emails_GIF_1

Флип-эффект

Accordian-in-Emails_B_GIF_00

Аккордион

Пиксельный арт

Согласно исследованию Kissmetrics, контент с релевантными изображениями получает на 94% больше просмотров, чем без картинок. Цифры подтверждают: картинки драматически влияют на кликабельность.

А теперь представьте: вы добавили релевантные картинки, но они не грузятся, потому что отключены по умолчанию в почтовой программе. Или просто интернет соединение ни к чёрту. Почему бы не показывать креативный и цветной пиксельный арт в качестве запасного варианта?

Pixel art

Пример запасных картинок для Макдональдса

Видео

Исследование Syndacast предсказывает, что 74% всего интернет-траффика в 2017 году будет видеоконтентом. Время всерьёз браться за видеоконтент.

Пока есть две техники добавления видео в емейл.

1. HTML5 метод — при нём, видео напрямую встраиваются в емейлы без влияния на доставляемость
2. Метод статичных картинок — это когда добавляем статичные картинки в емейл, которые работают как ссылки на посадочную страницу, на которой проигрывается видео

Добавлять видео в емейл — хитрая задача, требующая серьёзной аналитики перед решением. Если большинство ваших подписчиков, используют емейл клиенты, поддерживающие HTML5 (Gmail, Outlook), можете напрямую встраивать видео в емейл. Если большинство подписчиков, которые просматривают емейлы на устройствах Эппл, идеальный вариант — статическое изображение.

Емейл со встроенным видео

Пример встроенного видео в письме TJX

Письмо со статичным видео

Пример статичного видео в письме Patagonia (слева) и лендинга со встроенным видео (справа)

Гибридная вёрстка

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

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

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

Hybrid Email

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

Пуленепробиваемый фон

Email-маркетологи используют фоновые картинки, чтобы их письма выделялись. Однако маркетологу критически важно учитывать, что Outlook (версии 2007, 2010 и 2013) не поддерживает фоновые изображения. Поэтому следует обеспечивать запасной одноцветный фон, чтобы дизайн всегда выглядел цельным.

Вместе с тем, можно использовать VML-код, чтобы всё-таки вынудить Outlook отражать фоновые картинки. В 2016 году всё больше маркетологов будут использовать VML-код.

Image renderability

Изображение A — запасной одноцветный фон в Аутлуке, изображение B — фон в большинстве почтовых клиентов и в Аутлуке при использовании VML-кода

4 правила, чтобы успеть за 2016 годом

1. Начните уже использовать интерактив в письмах, пока это еще свежо и в новинку.

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

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

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

____________________________

Об авторе: Джеймин — директор Email Monks и Webby Monks. Среди его сфер инетересов маркетинг, интернет-маркетинг и веб-разработка. Команда монахов под его руководством цветёт и пахнет, выполняя заказы компаний из списка Fortune 100 по всему миру. Он абсолютно открыт для общения с людьми из быстрорастущего мира digital. Если знаете английский, фолловьте монахов в Линкдине, Твитере и Фейсбуке.

Плюсануть
Поделиться
Класснуть