Создавать HTML-письма вместо полностью графических проще, чем вы думаете

Электронной почте в этом году исполняется 50 лет, но поначалу все письма состояли только из простого текста. Идея email-маркетинга зародилась в 1978 году, но только в 1990-х HTML-письма стали реальностью. В эпоху становления email-маркетинга спам был частой проблемой, и почтовые клиенты использовали множество фильтров для борьбы с ним. Один из них блокировал письма, состоящие исключительно из изображений. Еще в 2007 году компания Mailchimp обнаружила, что использование одного большого изображения в письме может привести к его блокировке и увеличить показатель отказов на 23%.

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

Я думаю, пришло время для честного разговора о полностью графических письмах, чтобы взвесить все «за» и «против». А заодно мы посмотрим, насколько легко преобразовать такие письма в письма с «живым» текстом.

## Оценим письма, состоящие только из изображений

### Плюсы

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

**Соблюдение фирменного стиля**

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

**Визуальное воздействие**

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

**Дешевле**

Некоторые утверждают, что графические письма обходятся дешевле, так как не нужно платить дизайнеру *и* разработчику. (В некоторых случаях, я уверен, такие компании даже дизайнера не нанимают). Вы можете создать картинку в любимом графическом редакторе, сохранить ее и сразу загрузить в свой ESP. Это быстрый и легкий способ отправить красивое письмо подписчикам.

### Минусы

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

**Плохая доступность**

Полностью графические письма менее доступны, чем письма с живым текстом. «Но я же добавляю точный замещающий текст (ALT)!», — скажете вы. Это замечательно. И есть компании, которые делают такие письма с очень качественным ALT-текстом. Но доступность — это не только ALT-текст. Письмо, доступное для всех, означает, что его может прочитать *каждый*. ALT-текст не поможет людям с дислексией или пользователям с нарушениями зрения, которые увеличивают размер шрифта. Это лишь несколько проблем, с которыми письма на живом тексте справляются гораздо лучше.

**Плохой пользовательский опыт**

Даже для тех подписчиков, у которых изображения включены, графические письма могут быть менее удобными. Пользователи с медленным интернет-соединением могут долго ждать загрузки. Использование крупных несжатых изображений съедает трафик, если письмо читают на мобильном. А как же персонализация? Уверяю вас, проще вставить тег подстановки в текст, чем создавать персонализированные картинки для всей базы.

**Отсутствующие или потерянные кнопки призыва к действию (CTA)**

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

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

## Что хорошего в письмах с «живым» текстом?

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

### Плюсы

**Легче обновлять**

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

**Лучший опыт для подписчика**

В живом письме текст масштабируется под экраны с высоким разрешением, он не становится микроскопическим на мобильных устройствах, а в темной теме (Dark Mode) у вас есть определенный контроль над инверсией цветов. И даже если у подписчика по какой-то причине отключены картинки, контент и кнопки останутся видимыми.

### Минусы

**Дороже**

«Слишком дорого нанимать разработчика для каждого письма». Да, вероятно, это так. Именно поэтому не стоит нанимать разработчика для *каждого* письма. Наймите его для создания модульной системы, которую вы сможете использовать самостоятельно. Многие сервисы рассылок (ESP) предлагают системы шаблонов. Если в вашем ESP их нет, попросите разработчика создать фрагменты кода в Litmus Builder, а затем используйте визуальные редакторы для сборки письма. Обещаю, в долгосрочной перспективе вы сэкономите время.

**Сложнее создавать**

Или это не так? Это один из тех минусов, которые я часто слышу от бизнеса. «У нас нет разработчика, поэтому мы не можем делать живые письма». Как я уже говорил, у многих ESP есть решения для модульной верстки. А если нет — у Litmus есть визуальный редактор, а в сообществе — куча шаблонов. У нас даже есть модульный шаблон, с которого можно начать.

**Дизайн выглядит по-разному в разных почтовиках**

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

## Преобразование графических писем

Теперь переходим к самому интересному. Как превратить красивые графические письма в живой текст, сохранив эффектность?

### Фоновые изображения

Часто графические письма делают ради интересных фонов, отличных от белого цвета. Но вам не обязательно использовать сплошную заливку. Можно использовать фоновые изображения, которые поддерживаются в большинстве клиентов (за исключением Windows 10 Mail). Разница огромна: при использовании фонового изображения текст остается виден, даже если картинки отключены, что позволяет пользователю кликнуть на кнопку.

### Смещенные изображения и текст

Все, что нарушает привычный порядок, привлекает внимание. Можно использовать смещение элементов (как текста, так и блоков) с помощью пустых ячеек таблицы или декоративных элементов. Для создания эффекта «парящего» блока можно использовать технику «Faux Absolute Positioning», которую описали Стивен Сайо и Марк Роббинс. Это позволяет добиться визуальной сложности, сохраняя при этом текст живым.

### Веб-шрифты и живой текст

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

### Оформленный ALT-текст

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

### Изображения, пустые ячейки и линии как элементы дизайна

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

### «Пуленепробиваемые» (Bulletproof) кнопки

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

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

Я проанализировал примеры компаний (S’well, Magic Spoon) и показал, что конвертация в живой текст не только улучшает опыт при отключенных картинках, но и делает верстку более адаптивной для мобильных и темных тем. Суть проста: вы никогда не знаете, в каких условиях подписчик откроет ваше письмо. Сделайте все возможное, чтобы обеспечить оптимальный опыт, где бы оно ни было открыто.