Доставка Эпизода 4: Знакомство с фоновыми изображениями в электронной почте

В этом выпуске «Доставка» мы рассмотрим важную технику для дизайнеров электронной почты: скромное, но мощное фоновое изображение. Узнайте, почему важны фоновые изображения, как их кодировать с помощью различных методов и как эти различные методы сравниваются в разных почтовых клиентах. Этот выпуск является дополнением к нашему недавно обновленному Полному руководству по фоновым изображениям в электронной почте. Ознакомьтесь с советами, рекомендациями и кодом.

Обязательно подпишитесь на Delivering в iTunes или Spotify, чтобы слушать будущие выпуски и присоединяться к беседе в Twitter, используя хэштег #DeliveringPodcast.

Стенограмма эпизода

Есть много способов добавить интересные визуальные эффекты в почтовые рассылки.

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

Я Джейсон Родригес, и добро пожаловать в подкаст Delivering об электронном маркетинге и его месте в мире. Доставка осуществляется с помощью Litmus, ведущей в отрасли платформы для почтовых маркетологов. Присоединяйтесь к более чем 600 000 специалистов по электронной почте, которые используют Litmus для создания, проверки, тестирования и отслеживания более эффективных маркетинговых кампаний по электронной почте. Узнайте больше и получите бесплатную 7-дневную пробную версию на Litmus.com.

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

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

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

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

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

Введите фоновые изображения.

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

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

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

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

CSS имеет ряд свойств фона, в первую очередь: background-image, background-repeat, background-position, background-size и background-color. Также есть очень полезное сокращенное свойство background.

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

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

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

Последний способ включить фоновые изображения в электронное письмо - это использовать так называемые «пуленепробиваемые фоны». Пуленепробиваемые фоны строятся на основе метода атрибутов HTML, включая также VML - или язык векторной разметки - в код. VML - это проприетарный язык Microsoft, используемый в таких продуктах Office, как Outlook. Применяя фоновые изображения в VML, они будут работать в Microsoft Outlook, что не обязательно верно для других ранее обсуждавшихся методов.

Основным недостатком использования VML является то, что он не очень доступен и плохо документирован, а также добавляет много кода, который, честно говоря, трудно понять. Чтобы упростить задачу, наши друзья из Campaign Monitor создали замечательный инструмент для создания пуленепробиваемых фонов. Вы можете найти его на сайте backgrounds.cm.

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

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

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

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

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

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

И не забудьте подписаться на рассылку Delivering в iTunes или Spotify, чтобы слушать будущие выпуски, в которых мы углубимся в другие методы создания более качественных электронных писем в формате HTML.