Рендеринг, поддержка CSS и другие особенности Outlook Web App в Office 365

На протяжении многих лет Microsoft создавала множество почтовых программ — настольных, веб-клиентов и мобильных приложений — как для бизнеса, так и для обычных пользователей. Большинство из них выпускались под брендом Outlook, что часто вызывало путаницу в различиях между приложениями, особенно в части поддержки HTML и CSS в электронных письмах. Однако сейчас Microsoft предпринимает шаги по объединению некоторых из этих клиентов в рамках Office 365.

В июле 2012 года Microsoft объявила о миграции пользователей Hotmail на Outlook.com, чтобы предложить более современный почтовый сервис. Теперь компания готовит ещё одно крупное изменение: замена интерфейса и инфраструктуры Outlook.com на Office 365. Это не только обновит внешний вид почтового ящика Outlook.com, но и, вероятно, повлияет на отображение ваших писем для подписчиков.

Используют ли ваши подписчики Microsoft Office 365? Узнайте с помощью Litmus Email Analytics.

Что такое Office 365 и как он повлияет на рендеринг писем в Outlook.com?

## Веб-версии Outlook

Microsoft предлагает две веб-доступные версии Outlook: Office 365/Outlook Web App и Outlook.com.

### Office 365/Outlook Web App

Office 365 — это подписочная онлайн-версия Microsoft Office. Вместо разовой покупки лицензии для постоянного использования (как в настольной версии) вы фактически арендуете доступ на ежемесячной основе.

В состав Office 365 входят различные сервисы Microsoft Office, включая Excel, PowerPoint и почтовый клиент. Почтовый клиент, предоставляемый с Office 365, называется **Outlook Web App**. Он доступен только для бизнес-аккаунтов и других учётных записей, размещённых на серверах с Microsoft Exchange 2013 или новее.

Чтобы ещё больше запутать ситуацию, более ранняя версия Outlook Web App (работающая на серверах Microsoft Exchange до 2013 года) называлась Outlook Web Access. Этот клиент заработал репутацию неудачного из-за слабой поддержки HTML и CSS.

### Outlook.com (ранее Hotmail)

Hotmail был первым бесплатным веб-почтовым сервисом для потребителей. В период с 2012 по 2013 год Microsoft перенесла пользователей Hotmail на Outlook.com. Как и Hotmail, Outlook.com — это бесплатный веб-почтовый сервис, доступный в Internet Explorer, Chrome, Safari и других популярных браузерах.

Хотя у Outlook.com есть свои особенности рендеринга, на отображение писем также влияет выбор браузера пользователя. Например, стилизованный ALT-текст поддерживается в современных версиях Firefox, Chrome и Safari, но не в Internet Explorer.

## Объединение Outlook.com и Office 365

В конце мая 2015 года Microsoft объявила о переходе Outlook.com на новую инфраструктуру, основанную на Office 365. Изначально обновление было доступно небольшой группе пользователей, но позже оно стало доступно более широкой аудитории через программу добровольного подключения — и, вероятно, в конечном итоге всем пользователям.

С этими изменениями Microsoft заменяет технологию и интерфейс Outlook.com на Office 365 / Outlook Web Access (далее — OWA). Похоже, что название Outlook.com останется, но технология «под капотом» будет значительно обновлена, чтобы обеспечить аналогичный уровень поддержки HTML и CSS (и, следовательно, возможностей рендеринга), который сейчас реализован в Office 365.

Что касается изменений интерфейса, Outlook.com переходит на интерфейс OWA, используемый в Office 365. Поскольку оба сервиса уже имеют схожий дизайн, переход не должен вызвать проблем.

Outlook.com

Office 365

## Электронные письма в Office 365/OWA

Ранее мы уже рассматривали особенности рендеринга писем в Outlook.com, но как они будут выглядеть в будущем, когда OWA-версия Office 365 заменит Outlook.com?

Хотя OWA был известен проблемами с рендерингом, сравнимыми с теми, что встречаются в Outlook 2007–2013, были внесены значительные улучшения. В подробном посте участника сообщества Джеймса Уайта объяснялись изменения, внесённые старым препроцессором OWA. Например, встроенные стили удалялись, а CSS в блоке не поддерживался. Несмотря на крупные обновления, улучшившие возможности рендеринга OWA, у него всё ещё есть свои особенности.

### Особенности рендеринга в Office 365/OWA

После обновлений, вдохновлённых Office 365, Джеймс Уайт отметил значительные улучшения в рендеринге базового HTML и CSS. Однако для более продвинутых техник остаётся пространство для улучшений. Например, OWA теперь поддерживает анимированные GIF, но не поддерживает фоновые видео HTML5 или CSS3.

Обязательно предусматривайте резервные варианты для продвинутых техник, если значительная часть вашей аудитории открывает письма в Office 365/OWA.

### Вид входящих писем

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

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

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

Как тема письма, так и текст предварительного просмотра занимают одну строку во входящих. Тема состоит примерно из 45 символов, а текст предварительного просмотра — около 50. Поскольку текст предварительного просмотра занимает больше места, мы рекомендуем оптимизировать его для повышения эффективности писем.

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

### Блокировка изображений

Как и в Outlook.com и Hotmail, в OWA есть свои особенности блокировки изображений.

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

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

— «Чтобы всегда показывать содержимое от этого отправителя, нажмите здесь».

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

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

После небольшого исследования выяснилось, что препроцессор OWA заменяет **img src=** на **img blockedimagesrc=**, из-за чего изображение блокируется, если подписчик не разрешит загрузку изображений. Однако препроцессор пропускает фоновые изображения в ячейках таблиц, поэтому любое изображение в теге

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

, они будут отображаться автоматически. Довольно необычно, не правда ли?

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

### Отписки и действия во входящих

OWA предлагает функции, аналогичные быстрым действиям Gmail и автоматической отписке, предоставляя ещё один механизм отказа и возможность быстро реагировать на призывы к действию (CTA) в письме.

Опция «Отписаться» отображается в верхней части большинства коммерческих/рекламных писем. Во всех протестированных нами примерах нажатие на эту кнопку не отписывало пользователя от списка (как это делает функция автоматической отписки в Gmail), а вместо этого выводило сообщение: «Похоже, это рассылка, но мы не уверены, безопасно ли отписаться от неё с помощью информации, предоставленной отправителем. Если вы не хотите больше получать письма от этого отправителя, вы можете заблокировать его. Все новые сообщения от ‘xxx@example.com’ будут перемещены в папку «Нежелательная почта»».

Вместо отписки OWA блокирует отправителя и помечает последующие письма как спам. Это плохая новость для отправителей — частые блокировки со стороны бесплатных почтовых сервисов могут негативно сказаться на показателях доставляемости в долгосрочной перспективе.

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

«Действия» также могут отображаться рядом с опцией «Отписаться» в письмах с определённым типом контента. Хотя они не такие продвинутые (и интересные!), как быстрые действия в Gmail — где можно просматривать маршруты полётов, бронирования ресторанов и т. д. — «Действия» выделяют призывы к действию (CTA) в письме, например, запрос на добавление в белый список или в адресную книгу.

В этом примере CTA находится внизу письма, но переносится в верхнюю часть. Хотя это «Действие» не позволяет подписчику добавить адрес отправителя в адресную книгу одним кликом, оно позволяет создать задачу. Когда подписчик нажимает на текст «Следить», создаётся задача.

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

## Оптимизация писем для Office 365 / OWA

По мере того как пользователи Outlook.com переходят на инфраструктуру Office 365, всё больше ваших подписчиков будут просматривать письма в среде, похожей на OWA. Учитывая это, важно подготовиться к предстоящим изменениям в Outlook.com и понять, как они могут повлиять на вашу аудиторию. Используйте Litmus Email Analytics, чтобы узнать, кто открывает ваши письма в OWA, и протестируйте их в более чем 50 настольных, веб-почтовых и мобильных программах, включая Office 365 / OWA.