Создавать электронные письма в формате HTML вместо полностью изображений проще, чем вы думаете

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

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

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

Давайте оценим электронные письма, содержащие все изображения

Плюсы

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

1. Сохранение фирменного стиля
   Если вы работаете с брендом, который очень четко описывает используемые стили своего бренда, то, вероятно, вам подойдут электронные письма с полным изображением. Вы можете убедиться, что шрифты везде правильные. И вы можете убедиться, что стили бренда поддерживаются во всех почтовых клиентах. С электронными письмами, содержащими все изображения, вам не нужно беспокоиться о том, что электронная почта сломается так же сильно, как с живым текстовым электронным письмом.
2. Визуально впечатляющий
   Лично я не очень верю в это, так как считаю, что вы можете создавать визуально впечатляющие электронные письма, не прибегая к электронным письмам, содержащим все изображения. Но есть некоторые вещи, которые вы просто не можете делать везде с живым текстовым электронным письмом (хотя и не так много, если у вас есть отличный разработчик электронной почты). ReallyGoodEmails полон удивительных электронных писем, и большая их часть - это электронные письма, состоящие только из изображений, потому что, честно говоря, они действительно красивы.
3. Более дешевый
   Некоторые люди утверждают, что электронные письма, содержащие все изображения, дешевле, потому что вам не нужно платить дизайнеру и разработчику. (В некоторых случаях я почти уверен, что эти компании даже не используют дизайнеров). Вы можете создавать изображения в своей любимой программе для редактирования фотографий, а затем сохранять их и помещать прямо в свой ESP. Это быстрый и простой способ отправить красивое письмо своим подписчикам.

Минусы

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

1. Плохая доступность
   Электронные письма с полным изображением не так доступны, как электронные письма в реальном времени. «Но я ввел точный ALT-текст, Карин!» Замечательно. И есть компании, которые делают электронные письма, состоящие только из изображений, с действительно хорошим ALT-текстом. Но доступность - это не просто вставка текста ALT. Доступность электронной почты для всех означает, что ее могут прочитать все. Текст ALT не поможет людям с дислексией или пользователям со слабым зрением, которые используют настройки для увеличения размера шрифта. Это лишь некоторые из проблем, с которыми электронные письма с живым текстом могут справляться намного лучше, чем электронные письма с полным изображением.
2. Плохой пользовательский опыт
   Даже для подписчиков, у которых включены изображения, электронные письма, содержащие все изображения, могут быть хуже для пользователя, чем текстовое электронное письмо в реальном времени. Подписчики с более медленным интернет-соединением могут долго ждать загрузки изображений. Использование больших несжатых изображений может съесть данные вашего подписчика, если они проверяют свою электронную почту во время чтения на мобильном телефоне. И подумайте о персонализации! Я могу заверить вас, что гораздо проще добавить тег слияния в живое текстовое электронное письмо, чем получить персонализированные изображения для всего вашего списка.
3. Отсутствующие или потерянные призывы к действию (CTA)
   В электронных письмах, состоящих только из изображений, любые подписчики, у которых отключены изображения, потеряют все призывы к действию, содержащиеся в вашем изображении. Не говоря уже обо всем остальном, что может быть у вас в электронном письме. Вы можете подумать, что, поскольку у вас мало подписчиков, которые нажимают, не открывая электронную почту, вам не нужно об этом беспокоиться. Но сколько подписчиков просматривают вашу электронную почту с выключенными изображениями и не нажимают, потому что не видят ваш CTA?

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

Что такого хорошего в живой электронной почте?

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

Плюсы

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

Минусы

1. Более дорогой
   «Слишком дорого нанимать разработчика для каждого электронного письма, которое мы делаем». Да, наверное. Вот почему вам не следует нанимать разработчика для выполнения каждого отправляемого вами электронного письма. Наймите разработчика для создания модульной системы, которую вы сможете реализовать самостоятельно. Многие поставщики услуг электронной почты (ESP) предлагают системы шаблонов, поэтому наймите разработчика, чтобы он создал для вашей компании индивидуализированную систему шаблонов. Если в вашем ESP этого нет, вы можете попросить разработчика создать части и фрагменты в Litmus Builder, а затем использовать функции перетаскивания и визуального редактора для создания электронного письма в Litmus. Я обещаю, что в долгосрочной перспективе вы сэкономите время, избавившись от необходимости вносить изменения в свои электронные письма.
2. Сложнее создать
   Или они? Это один из тех минусов, о которых я слышу от многих компаний. У нас нет разработчика, поэтому мы не можем писать живые письма. Как указывалось выше, многие ESP имеют шаблоны и модульные строительные решения. А если у вашего ESP нет, у Litmus есть визуальный редактор, а у Litmus Community есть множество шаблонов и фрагментов, которые вы можете использовать для создания собственных писем. У нас даже есть модульный шаблон и фрагменты, которые помогут вам начать работу.
3. Дизайн не одинаков во всех почтовых клиентах
   Ну нет, большинство писем не идентичны во всех почтовых клиентах. Если у вас есть разработчик и много времени, вы, вероятно, сможете подойти довольно близко. Но действительно ли вам нужно, чтобы ваши электронные письма были одинаковыми во всех почтовых клиентах? Да, цвета должны быть одинаковыми, но наличие закругленных углов на ваших кнопках, использование немного другого шрифта или одинаковый макет на меньшем экране не являются проблемами, которые повлияют на впечатления ваших подписчиков в такой же мере, как нечитаемые. текст будет.

Преобразование электронных писем, содержащих все изображения

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

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

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

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

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

Фигурка героя создается с использованием всех изображений - изображения включены (Источник: Really Good Emails )	Фигурка героя создается с использованием всех изображений - изображения отключены.

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

Смещение изображений и текста

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

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

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

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

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

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

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

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

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

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

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

Электронная почта с включенным веб-шрифтом и изображениями	Электронная почта с отображением резервной копии и отключенными изображениями

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

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

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

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

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

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

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

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

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

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

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

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

Электронная почта с кнопкой живого текста и выключенными изображениями (Источник: действительно хорошие электронные письма )	Электронная почта с кнопкой на основе изображения с отключенными изображениями (Источник: действительно хорошие электронные письма )

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

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

Преобразование этих электронных писем с изображениями

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

Преобразование электронной почты S'well

Энн К. Томлин - основательница Email's Y'all. Опытный программист, знающий тонкости е-мэйловских причуд, она хотела продемонстрировать, насколько живой текст может иметь значение в электронном письме.

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

Исходное электронное письмо:

Текстовая версия Анны:

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

Оригинальная мобильная версия	Мобильная версия Анны
Оригинальная версия Dark Mode	Версия Темного режима Анны

А для преобразования всего изображения…. [барабанная дробь, пожалуйста]

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

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

Преобразование электронной почты Magic Spoon

Карин Слейтер - специалист по электронному маркетингу и разработчик всех электронных писем Litmus. Подожди, это я! Хорошо, хорошо, вы знаете мою позицию по поводу электронных писем, содержащих все изображения.

Мне нравятся электронные письма Magic Spoon (а также хлопья Magic Spoon, такие вкусные), но мне всегда грустно, когда они приходят в мой почтовый ящик в виде писем с полным изображением. Обычно они довольно хорошо включают текст изображения в качестве текста ALT, чтобы вы все еще могли знать, что происходит в электронном письме, если нет изображений, но это электронное письмо не было таким описательным или инклюзивным, как другие электронные письма, которые они отправили. Я подумал, что займусь этим, так как есть кнопка GIF, которая действительно забавна и может показаться трудной без использования изображений.

Исходное электронное письмо:

Текстовая версия Карин:

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

Оригинальная мобильная версия	Конвертированная мобильная версия
Оригинальная версия Dark Mode	Конвертированная версия Dark Mode

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

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

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

Пусть ваши электронные письма будут сиять независимо от обстоятельств

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