Пиксельная графика в email: Самая редкая и крутая тактика защитного дизайна

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

Защитный дизайн, который также улучшает доступность email, включает три ключевые тактики:

— Использование HTML или живого текста везде, где это возможно, вместо встраивания всего текста в изображения

— Добавление ALT-текста к изображениям — или ещё лучше, стилизованного ALT-текста

— Применение фоновых цветов для ячеек таблиц

Остановимся подробнее на последней тактике.

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

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

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

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

## Примеры пиксельной графики в email

Чтобы продемонстрировать возможности email-мозаик, приведем несколько примеров, где слева показано письмо с включёнными изображениями, а справа — с отключёнными:

**Mothercare** создаёт пиксельную графику коляски в этом письме, активно используя стилизованный ALT-текст.

**Pizza Express** применяет пиксельную графику в триггерном письме ко дню рождения, которое также содержит персонализированное изображение и соответствующий стилизованный ALT-текст.

**PlayStation New Zealand** использует email-мозаику для создания символа автоботов, обыгрывая слоган «Трансформеров» — «роботы под прикрытием».

**Benton Lingerie** передаёт настроение послания в письме ко Дню матери, создавая пиксельную графику большого розового сердца.

## Вопросы дизайна и стратегии

Прежде чем создавать email-мозаику, учтите следующие аспекты дизайна и стратегии:

**1. Пиксельная графика может утяжелить письмо**, что приведёт к его обрезке в Gmail, если размер превысит 102 КБ. Поэтому старайтесь делать её максимально простой, сосредоточившись на минимально жизнеспособном изображении.

Например, пиксельное сердце от Benton Lingerie могло бы быть более детализированным при удвоении или утроении количества ячеек таблицы. Однако их вариант чётко воспринимается как сердце и вполне эффективен в таком виде.

**2. Создание пиксельной графики требует дополнительных усилий**, поэтому лучше использовать её для массовых или высокоэффективных писем. Это могут быть ключевые рассылки о запуске новых продуктов, кампании ко Дню киберпонедельника и другие важные события. Также стоит рассмотреть её применение в массовых триггерных письмах, как в примере с днём рождения от Pizza Express.

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

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

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

**4. Пиксельная графика не обязательно должна заменять заблокированные изображения.** Как видно на примерах PlayStation и Benton Lingerie, она может полностью отличаться от изображений в письме. Не стоит всегда стремиться создать 8-битную версию основного изображения. Иногда передача сути картинки оказывается не менее эффективной — и может быть проще в реализации и легче по весу.

**5. Вероятность блокировки изображений в письмах неодинакова.** Риск блокировки изображений выше в начале и в конце отношений с подписчиком.

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

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

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

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

С учётом этих соображений, какой лучший способ создать пиксельную графику для писем?

Для начала рекомендуем:

— Конвертер изображений в таблицы

— Email Optimized Dogs

— Приложение Image-HTML

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

Если вы выберете этот путь, вот основные шаги:

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

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

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

— Чтобы нарезанные изображения идеально стыковались, укажите параметры cellpadding=«0», cellspacing=«0» и border=«0» для таблиц.

— Примените нужный фоновый цвет (bgcolor) для каждой ячейки таблицы.

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

Вот отличный пример пиксельной графики из рассылки EmailWeekly от Action Rocket. Выберите «Toggle Images» в интерфейсе Litmus Builder, чтобы увидеть письмо с отключёнными изображениями.

## Редкая и неожиданная тактика

Email-маркетологи понимают необходимость дизайна для случаев, когда изображения отключены. Об этом свидетельствует тот факт, что 83% брендов всегда или часто используют ALT-текст для изображений в письмах, согласно исследованию Litmus «Состояние email-маркетинга 2018» среди почти 3000 маркетологов.

Однако, если добавление ALT-текста — задача довольно простая, то создание пиксельной графики — совсем другое дело. В результате почти 77% брендов никогда не используют email-мозаики.

Для смелых брендов это возможность. Редкость этой тактики делает её эффективным способом удивить и порадовать подписчиков, предлагая нечто неожиданное — и всё больше брендов начинают её применять. Более 23% брендов используют пиксельную графику хотя бы изредка, что на 5% больше, чем в 2017 году.

## Хотите больше подобных материалов?

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