Ждать. Что только что случилось с моей электронной почтой? Запись вебинара

Опубликовано: 2016-02-11

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

Пережив множество таких сценариев, мы объединили усилия с Алексом Мором из Sendwithus, чтобы пролить свет на наиболее распространенные проблемы, с которыми сталкиваются люди, плохо знакомые с электронной почтой, и, что более важно, на некоторые решения этих проблем.

Если у вас не было возможности посетить вебинар: «Подождите. Что только что случилось с моей электронной почтой? », Не волнуйтесь. Вы можете скачать слайды и посмотреть запись ниже.

Просмотр слайдов и запись →

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

Почему Google и Microsoft так плохо обрабатывают электронные письма?

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

движок рендеринга

В случае Gmail от Google препроцессор используется для удаления определенных частей кода из электронной почты в целях безопасности. В то время как почти каждый другой клиент веб-почты уже понял это, Gmail, по сути, удаляет встроенные стили CSS в <head> электронного письма. И поскольку многие дизайнеры используют эти стили, чтобы определить, как выглядит их кампания, эти электронные письма страдают в Gmail.

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

В случае клиентов Microsoft Outlook проблема заключается в том, что Outlook фактически использует Microsoft Word в качестве механизма визуализации. Правильно, редактор форматированного текста, используемый как студентами, так и бизнесменами, используется для рендеринга кода HTML и CSS (или, по крайней мере, он пытается это сделать). В то время как более старые версии Outlook использовали установленную версию веб-браузера Microsoft, Internet Explorer, для отображения кода электронной почты, начиная с Outlook 2007, Word использовался для упрощения редактирования форматированного текста для пользователей Outlook.

К сожалению для дизайнеров электронной почты, Word имеет очень ограниченную поддержку HTML и CSS, которые обычно используются в Интернете и в кампаниях по электронной почте. Эта ограниченная поддержка веб-стандартов приводит к тому, что почтовые кампании в Outlook выглядят некорректно. Понимание этой поддержки - это первый шаг к тому, чтобы электронные письма выглядели хорошо в Outlook или любом другом почтовом клиенте, если на то пошло.

Вот несколько ресурсов, которые помогут вам лучше понять поддержку HTML и CSS в почтовом клиенте:

  • Полное руководство по CSS в Campaign Monitor
  • Понимание Gmail и CSS: часть 1 и часть 2
  • Руководство по визуализации различий в клиентах Microsoft Outlook
  • Как устройства, операционные системы, приложения и движки влияют на рендеринг
  • Проблемы с отрисовкой рабочего стола? Сосредоточьте начальное тестирование на нескольких движках рендеринга
  • Объяснение рендеринга веб-почты: почему препроцессоры - враг

Как вы справляетесь с тем, что Outlook не отображает правильные шрифты при использовании веб-шрифтов?

Веб-шрифты, шрифты, которые обслуживаются через Интернет, а не устанавливаются на устройство пользователя, становятся все популярнее. Поскольку они позволяют компаниям оставаться на позиции бренда с их типографикой и поощряют живой текст, они являются идеальным инструментом для маркетологов электронной почты. К сожалению, они поддерживаются не всеми почтовыми клиентами. А в случае Outlook отсутствие поддержки приводит к ситуациям, когда отображается Times New Roman вместо любых резервных шрифтов, объявленных в вашем HTML.

Мы уже обращались к этой проблеме с помощью решения, для которого требуется класс HTML для затронутого текста и некоторый CSS-код, специфичный для Outlook. Хотя это решение по-прежнему работает хорошо, более чистое и простое в обслуживании решение набирает обороты. Первоначально предложенное ребятами из Action Rocket, это решение требует использования правил @ font-face для обслуживания шрифтов и их обертывания в медиа-запросе в заголовке вашего электронного письма.

 <style type="text/css"> @media screen { @font-face { font-family: 'Family Name'; font-style: normal; font-weight: 400; src: local(), local(), url() format(); } } </style>

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

Как предотвратить появление синих ссылок на мобильных устройствах?

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

ios_links

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

доступность синих ссылок

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

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; }

Некоторые участники вебинара проницательно отметили, что приведенный выше CSS специально нацелен на устройства Apple. Хотя мои недавние тесты показали, что синие ссылки не являются проблемой для Android, некоторые участники сообщества Litmus столкнулись с проблемами при связывании таких вещей, как номера телефонов, в Android и Gmail. Просмотрите обсуждение в сообществе, чтобы увидеть некоторые из умных обходных путей.

Как лучше всего работать с адаптивными изображениями? Как насчет изображений сетчатки?

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

По сути, вы объявляете размеры своего изображения несколькими способами в теге img. Чтобы некоторые почтовые клиенты не отображали большие изображения сетчатки глаза в полном размере, вы объявляете ширину с помощью атрибута width. Это обеспечивает хорошую ширину базовой линии в пикселях. Для адаптивных электронных писем вы затем объявляете ширину, максимальную и минимальную ширину изображения как встроенный CSS. Вот пример:

 <img alt="Hello" src="http://example.com/image.png" width="600" border="0">

Естественно, вы захотите предоставить некоторый текст ALT, когда изображения отключены, и объявить display: block; чтобы избежать ненужных пробелов вокруг изображения. Если вам нужен дополнительный контроль над изображением, вы можете настроить таргетинг на него с помощью класса и CSS в заголовке письма. Просто помните, встроенный CSS поддерживается не везде.

Когда дело доходит до изображений сетчатки, лучше всего просто создавать изображения с размером экрана, в два раза превышающим предполагаемый размер изображения в вашем электронном письме. Например, если у вас есть изображение размером 600 на 200 пикселей, вы должны создать и сохранить его как изображение размером 1200 на 400 пикселей. Обычно включайте его в электронную почту. Атрибут ширины, о котором я упоминал ранее, предотвратит его отображение в виде абсурдно огромного изображения в таких клиентах, как Outlook, и ваши изображения будут выглядеть красиво и четко на устройствах с экранами Retina.

Есть ли какой-нибудь совет для тех, кто хочет использовать анимированные GIF-файлы в электронном письме?

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

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

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

mailchimp-interface-gif

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

Что вы думаете об использовании видео в электронной почте?

Как и анимированные GIF-файлы, видео могут быть отличным способом привлечь внимание подписчика. К сожалению, сами видео пользуются еще меньшей поддержкой в ​​почтовых клиентах. Хотя когда-то мы могли использовать видео-фон в электронном письме, он поддерживался только в Apple Mail и Outlook для Mac.

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

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

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

Итак, определенно используйте видео в своих кампаниях по электронной почте, но, по крайней мере, пока, примите тот факт, что это не означает просмотр видео по электронной почте.

Вы порекомендуете какие-либо адаптивные почтовые фреймворки?

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

Что касается адаптивных фреймворков и шаблонов электронной почты, существует ряд доступных:

  • Цербер от Теда Гоаса
  • Чертежи электронной почты MailChimp
  • Фонд электронной почты Zurb
  • MJML Mailjet

Один из наших фаворитов - наш собственный Slate, который включает пять адаптивных шаблонов для различных сценариев отправки. Какой бы вариант вы ни выбрали, обязательно протестируйте их в почтовых клиентах, чтобы убедиться, что ваших подписчиков не ждут сюрпризы.

Просмотр слайдов и записи

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

Просмотр слайдов и запись →