Освоение Outlook: обзор распространенных проблем рендеринга

Microsoft - один из крупнейших игроков в индустрии электронной почты. Microsoft Outlook и его веб-аналог Outlook.com в совокупности владеют более 10% рынка. Это довольно много!

Почему в мире, где пользователи могут выбирать из огромного количества почтовых клиентов, остается такой популярным? Не только Microsoft Office обычно устанавливается на компьютеры по всему миру, но многие домашние компьютеры и ноутбуки под управлением Windows поставляются с предустановленным MS Office. Почтовый клиент по умолчанию, который входит в состав MS Office, - это… Outlook.

Затем есть Outlook.com, который начал свою карьеру в качестве почтового клиента как Hotmail еще в 1996 году. В 1997 году Microsoft приобрела Hotmail примерно за 400 миллионов долларов и запустила Hotmail как MSN Hotmail. Позже он был снова переименован в Windows Live Hotmail. Наконец, в 2013 году Hotmail был полностью заменен на Outlook.com. Поскольку история Outlook.com переплетается с Hotmail, неудивительно, что по состоянию на 2015 год у Outlook.com было более 400 миллионов активных пользователей.

Распространенные проблемы с рендерингом в Outlook

Создание электронной почты для Outlook всегда было сложной задачей. Начиная с Outlook 2007, Microsoft перестала использовать Internet Explorer для визуализации электронных писем и вместо этого предпочла использовать Microsoft Word в качестве механизма визуализации. Отличные новости для пользователей Microsoft Office, которые могут легко копировать и вставлять элементы из Word или Excel в свои электронные письма Outlook. Не очень хорошие новости для маркетологов электронной почты и разработчиков, которые используют HTML для создания своих электронных писем. Попробуйте скопировать и вставить веб-страницу HTML в документ Word, и вы получите представление о том, как Word переводит HTML.

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

Вот краткое изложение некоторых из наиболее популярных проблем, с которыми сталкиваются разработчики электронной почты при разработке электронной почты для Outlook:

Использование таблиц в разработке электронной почты

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

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

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

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

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

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

Однако Outlook не поддерживает фоновые изображения с чистым HTML. Outlook требует использования VML для работы фоновых изображений. К счастью, вам не нужно полностью изучать VML, чтобы иметь возможность использовать фоновые изображения в своей электронной почте. В Campaign Monitor есть отличный инструмент, который сгенерирует ваш VML- и HTML-код, чтобы вы могли получать надежные фоновые изображения в ваших электронных письмах.

Нет поддержки анимированных GIF-файлов.

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

Однако Outlook не поддерживает анимированные GIF-файлы. Пока изображение загружается и отображается пользователю, будет отображаться только первый кадр анимации.

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

Нет поддержки заполнения в тегах p, div и a.

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

Простым обходным путем для этого является использование HTML-атрибутов cellspacing и cellpadding в таблице для создания пространства вокруг элементов внутри таблицы.

Чтобы ввести отступы в абзацы - тег p - используйте атрибут стиля mso-line-height-rule: точно; в сочетании с высотой строки, чтобы дать вашей копии и тексту немного передышки, что упростит отслеживание:

 <p>Your text here</p>

Это не просто Outlook

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

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

Но есть и хорошие новости. Было исправлено несколько ошибок рендеринга, которые были в старых версиях Outlook.com. В частности: взлом с плавающей запятой / маржой. Чтобы старая версия Outlook.com могла понимать эти атрибуты CSS, они должны были быть написаны с использованием либо прописных букв, либо сочетания прописных и строчных букв. Теперь случай не имеет значения.

Раньше, чтобы Outlook.com мог понять атрибут поля, вам нужно было использовать:

 Margin: 10px;

Но теперь вы можете использовать:

 margin: 10px;

Чтобы получить более полный список изменений, разработчик электронной почты Реми Парментье написал отличный блог, который вам нужно знать о новом Outlook.com и на что следует обратить внимание разработчикам электронной почты.
Освоение Outlook

Сохраняйте актуальность вашего кода

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

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

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

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

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

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

В нашем отчете «Состояние производства электронной почты за 2016 год» более 44% респондентов сообщили, что тратят на разработку электронной почты более 3 часов. Это немалый промежуток времени, и его необходимо учитывать при рассмотрении всего рабочего процесса электронного маркетинга.

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

Не можете заставить электронную почту работать в Outlook?

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

Помогите нам улучшить Outlook и сообщите об ошибке рендеринга.

Отправить сообщение об ошибке рендеринга в Outlook →