Основы дизайна электронных писем: Часть 2

*Это вторая часть серии материалов об основах дизайна email-рассылок от нашего штатного арт-директора и специалиста по дизайну Тейлора Лопоссера.*

В первой части нашей серии мы рассказали о важности принципов качественного email-дизайна и некоторых основах реализации успешной кампании. Теперь мы рассмотрим ситуативные лучшие практики и советы о том, как извлечь максимум пользы из ваших макетов.

## Повышение показателей доставляемости

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

Когда мы говорим о доставляемости email, мы имеем в виду то, куда попадает кампания после ее принятия почтовым провайдером. На 80% доставляемость зависит от вашей репутации как отправителя, а остальные 20% — это контент того, что вы отправляете.

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

Чтобы избежать этого, я люблю использовать правило 60/40. Это 60% изображений и 40% текста. Такое сочетание делает письмо очень привлекательным и помогает избежать этих ловушек.

Кроме того, если вы самостоятельно верстаете свои кампании: проверяйте свой код!

Ищите сломанную разметку или незакрытые теги, избегайте избыточности. Лаконичный код «легче» и имеет больше шансов попасть во входящие. Кроме того, убедитесь, что вы соблюдаете стандарты GDPR и правила CAN-Spam.

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

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

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

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

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

— Всегда планируйте опросы и тестирование. Общайтесь со своей аудиторией и убедитесь, что вы оправдываете их ожидания. Я бы рекомендовал проводить ежеквартальные обзоры и вносить коррективы на основе полученных результатов.

— И последнее: сильный. Запоминающийся. Брендинг. Если люди не помнят вас, они перестанут открывать ваши письма. Такое бездействие заставляет некоторые почтовые клиенты автоматически перемещать эти рассылки в папку «Спам».

## Главные советы по доступному дизайну email (Accessibility)

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

Эти советы ориентированы на дизайнеров, но имейте в виду, что эта работа требует участия самых разных специалистов.

— Альтернативный текст (alt-text) — это то, что вы уже должны делать, но убедитесь, что он описательный. Люди с нарушениями зрения полагаются на эти данные.

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

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

— Защищайте свои кнопки. Не используйте изображения в качестве CTA. Используйте встроенные ссылки (inline links) или надежные кнопки (bulletproof buttons).

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

— Если вы предпочитаете кнопки, редактор Campaign Monitor использует так называемые «пуленепробиваемые кнопки» (Bulletproof Buttons). Они состоят из HTML (цвет/форма/текст), что гарантирует корректное отображение в любых условиях.

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

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

## Интеграция видео в email

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

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

С другой стороны, у нас есть 13 почтовых клиентов, поддерживающих анимированные GIF-файлы. Один из вариантов — создать анимированный GIF, используя несколько кадров из вашего видео, и разместить поверх него кнопку воспроизведения. Это создает движение и имитирует видео, после чего вы просто даете ссылку на изображение, где хостится ваш видеоролик.

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

## Как разрабатывать дизайн для темного режима (Dark Mode)

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

— Что касается изображений, у вас есть два варианта. Вы можете сохранить JPEG-файлы, которые сохранят свои фоны, но тогда у вас появится эффект полос по всей кампании. Или вы можете сохранить изображения в формате PNG с прозрачным фоном, что позволит им выглядеть аккуратно вырезанными поверх фона темного режима. Это вопрос личных предпочтений; протестируйте оба варианта и посмотрите, что подходит именно вам.

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

— Ваши атрибуты CSS-стилей, такие как background, color, background-color, bgcolor или color, изменяются почтовым клиентом при переходе в темный режим. HTML-текст автоматически меняется на белый. С помощью медиазапросов можно настроить замену изображений для темного режима. Вы также можете применить подчеркивание для темного режима, чтобы встроенные кнопки CTA продолжали выделяться. Весь контроль происходит в CSS.

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

— Кроме того, вы всегда можете попробовать изменить фон шаблона на черный в качестве быстрого способа оценить результат. В редакторе Campaign Monitor параметр цвета фона вы найдете, кликнув на иконку шестеренки в верхнем левом углу.

## Заключение

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

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