Email Pixel Art: самая редкая и крутая тактика защитного дизайна

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

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

1. Максимально возможное использование HTML или живого текста вместо встраивания всего текста в изображения.
2. Добавление текста ALT к изображениям или еще лучше стилизованного текста ALT
3. Использование цвета фона в ячейках таблицы

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

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

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

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

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

Примеры пиксель-арта в электронной почте

Чтобы продемонстрировать возможности мозаики электронной почты, вот несколько примеров, каждый из которых показывает письмо с включенными изображениями слева и отключенными изображениями справа:

В этом письме Mothercare создает пиксельное искусство своей коляски, в котором также широко используется стилизованный текст ALT.

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

PlayStation New Zealand использует мозаику электронной почты, чтобы создать символ автоботов, умело играя на слогане Transformers «замаскированные роботы».

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

Дизайн и стратегические соображения

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

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

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

2. Пиксельные изображения электронной почты могут потребовать много дополнительной работы , поэтому, как правило, лучше приберечь их для массовых или важных писем. Это означает, что, возможно, их можно будет использовать для ключевых электронных писем для анонсов новых продуктов, кампаний Киберпонедельника и подобных крупных мероприятий. Но это также означает, что их нужно учитывать для массовых триггерных электронных писем, таких как электронное письмо на день рождения от Pizza Express, указанное выше.

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

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

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

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

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

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

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

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

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

Как сделать пиксель-арт для электронной почты

Учитывая эти соображения, как лучше всего создать пиксельную графику для электронной почты?

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

• Конвертер изображения в таблицу
• Электронная почта оптимизирована для собак
• Приложение Image-HTML

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

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

1. Нарисуйте минимально жизнеспособное пиксельное изображение электронной почты на миллиметровой бумаге или в любом программном обеспечении для дизайна по вашему выбору.
2. Используйте инструмент нарезки в Photoshop или другом программном обеспечении для дизайна, чтобы разделить изображение на блоки необходимого размера, чтобы создать мозаику электронной почты и сохранить их как отдельные изображения. Используйте соглашение об именах файлов, которое позволяет легко собрать вместе ваше общее изображение.
3. Используя серию таблиц, вложенных в таблицу, создайте блоки в положениях, которые вам нужны, чтобы соответствовать вашему дизайну.
4. Чтобы гарантировать, что ваши нарезанные изображения идеально сочетаются друг с другом, укажите, что для ваших таблиц установлены cellpadding = «0», cellspacing = «0» и border = «0».
5. Примените необходимый цвет bgcolor к каждой ячейке таблицы.
6. Предварительно просмотрите письмо с отключенными изображениями, чтобы убедиться, что оно отображается должным образом.

Вот отличный пример пиксельной графики электронной почты из информационного бюллетеня Action Rocket EmailWeekly. Выберите «Переключить изображения» в интерфейсе Litmus Builder, чтобы просмотреть сообщение электронной почты без изображений.

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

Маркетологи по электронной почте понимают необходимость создания дизайна для выключенных изображений. Мы знаем это, потому что 83% брендов всегда или часто используют текст ALT для изображений электронной почты, согласно опросу Litmus о состоянии электронной почты за 2018 год, в котором приняли участие почти 3000 маркетологов.

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

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

Хотите больше подобных ресурсов?

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

Попасть в список →