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

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

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

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

## Оценим полностью графические письма

### Плюсы

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

**Сохранение стилей бренда**

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

**Визуальная эффектность**

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

**Дешевле**

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

### Минусы

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

**Низкая доступность**

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

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

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

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

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

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

## Что такого замечательного в «живых» письмах?

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

### Плюсы

**Проще обновлять**

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

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

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

### Минусы

**Дороже**

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

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

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

**Дизайн не идентичен во всех почтовых клиентах**

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

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

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

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

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

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

В отличие от письма, где изображение используется для создания эффекта фонового изображения. В этом случае теряется первоначальный CTA (как и логотип и название компании). Письмо не так эффектно, и, хотя раздел «бестселлеры» по-прежнему виден и действует, суть письма — экономия денег на организационных пакетах — утеряна.

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

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

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

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

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

Другой вариант — сместить все, как в этом письме:

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

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

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

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

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

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

Samsung сохраняет интерес, используя Trebuchet MS в качестве запасного шрифта для заголовков. Не совсем фирменный шрифт Samsung One, но все же более интересный и привлекательный, чем Helvetica, Arial, ALT-текст или ничего:

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

### Стилизованный ALT-текст

Стилизуя ALT-текст, вы можете добиться того, чтобы письмо сохранило часть своего вида даже при отключенных изображениях. Мы используем стилизованный ALT-текст здесь, в Litmus, чтобы сохранить приблизительную версию нашего логотипа, но вы также можете использовать это на кнопках, основанных на изображениях, чтобы они выделялись, если вам приходится создавать полностью графические письма. Вы можете стилизовать ALT-текст, добавив CSS к тегу изображения, и вы можете изменить цвета фона и большинство аспектов шрифта для ALT-текста. Он поддерживается не везде, но перейдите по ссылке на наше «Полное руководство по стилизованному ALT-тексту», чтобы узнать, где он поддерживается и как это сделать.

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

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

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

Вы также можете стилизовать свои горизонтальные линии, чтобы создавать интересные переходы или разделители между разделами. Мы используем простые стили в Litmus для создания линии, но есть много различных техник, которые вы можете попробовать, чтобы создать интересные разделители с помощью простой горизонтальной линии. (Сообщите нам, как это пройдет!).

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

Будьте креативны с вашим кодом и посмотрите, что вы можете сделать *без* изображений!

### Пуленепробиваемые кнопки

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

Это два разных письма, одно из которых использует кнопку с «живым» текстом, а другое — полностью графическое письмо с кнопкой на одном из изображений. Письмо слева более кликабельно, чем письмо справа.

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

Существует несколько различных способов создания кнопок с «живым» текстом, поэтому убедитесь, что вы используете метод, который работает для вашей аудитории, и, как всегда: Тестируйте, тестируйте, тестируйте!

## Преобразование этих полностью графических писем

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

### Конверсия письма S’well

Анна К. Томлин — основатель Email’s Y’all. Опытный кодер, знающий все тонкости электронных писем, она всячески демонстрировала, какую разницу может внести «живой» текст в письмо.

По ее словам: полностью графические письма не доставляют ваше сообщение людям, у которых изображения заблокированы по умолчанию, и всем, кто использует экранный ридер или цифровой помощник (Siri, Alexa и т. д.). Если ваша цель — конверсии, вы даже не дали этим людям шанса конвертироваться. Письмо S’well было в 10 раз хуже обычного полностью графического письма, потому что там вообще не было ALT-текста. Экранный ридер или цифровой помощник прочитал бы: «Отметьте смелые решения, большие идеи и радость! Посмотрите это письмо в браузере. Купить. Истории. О нас. S’well.» а затем сразу же перешел бы к чтению нижнего колонтитула. Какой ужасный опыт! Подписчики, у которых изображения заблокированы, буквально видят пустую страницу. Никто не будет смотреть на пустую страницу и думать: «Я должен посмотреть это в браузере!» и кликнуть на ссылку «просмотреть в браузере». У вас есть 5 секунд, чтобы захватить внимание подписчика, поэтому, если у вас полностью графическое письмо, и эти изображения не загружаются по умолчанию, вы можете считать, что вы его вообще не отправили. На самом деле, такой подписчик может посчитать, что вы ничего ему не отправляете, поэтому ему лучше отписаться.

Оригинальное письмо:

Версия Анны с «живым» текстом:

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

И для конверсии полностью графического письма…. [барабанная дробь, пожалуйста]

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

Посмотрите, как это делает Анна

### Конверсия письма Magic Spoon

Карин Слейтер — специалист по email-маркетингу и разработчик писем, стоящий за всеми письмами Litmus. Подождите, это я! Ладно, вы знаете мою позицию по полностью графическим письмам. Я обожаю письма Magic Spoon (и хлопья Magic Spoon тоже, так вкусно 🤤), но мне всегда грустно, когда они приходят в мой почтовый ящик как полностью графические письма. Обычно они неплохо включают текст изображения в качестве ALT-текста, так что вы все еще можете понять, что происходит в письме, если изображений нет, но это письмо не было таким описательным или всеобъемлющим, как другие письма, которые они отправляли. Я решила разобраться с этим, так как там есть кнопка-GIF, что очень весело и может показаться сложным без использования изображений.

Оригинальное письмо:

Версия Карин с «живым» текстом:

Мне пришлось пойти на компромисс, потому что оно не идеально выглядит в Темном режиме на настольных клиентах Outlook 365 в Windows, поэтому это может быть важным или не важным, в зависимости от того, где подписчики Magic Spoon открывают свои письма. И поскольку я работала с полностью графическим письмом, а не с дизайнерским файлом, я не смогла создать версию GIF для Темного режима или мобильных устройств, которые я бы запросила, чтобы их можно было заменить, если бы я работала с оригинальными файлами. Несмотря на эти проблемы, версии для Темного режима и мобильных устройств улучшены в версии с «живым» текстом. Анимация GIF сохраняется в мобильной версии, а текст более разборчив, хотя и незначительно, поскольку Magic Spoon действительно создала версию для мобильных устройств, которую они заменили для мобильных (ура для мобильных, но увы для того, что письмо было закодировано дважды).

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

### Посмотрите, как это делает Карин

*Все письма для конверсии были взяты из моего почтового ящика

## Сделайте ваши письма сияющими независимо от обстоятельств

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