10 страшилок о рассылках в Outlook: где правда, а где враньё

Проверяем на себе главные мифы об Outlook

Опубликовано: 08.10.2019

11K Подборки

Автор

Артем Чеховской

Экс-главред блога Unisender

Outlook — третья по популярности платформа для просмотра почты после Gmail и iOS. Десктопная версия установлена у 11% пользователей, ещё 2% смотрят почту через Outlook.com.

Для email-маркетологов Outlook всегда был проблемным: у программы много версий, каждая со своими причудами — адаптировать рассылку под всё просто нереально. Outlook 2007-2013 стал обрастать страшилками, многие из которых перешли и на новые версии программы.

Большой гид по рассылкам в Gmail

Я решил проверить, что из рассказов про Outlook правда, а что — ложь. Для этого создал учётную запись на @outlook.com и скачал несколько версий программы:

Microsoft Outlook 2019 (Windows).
Microsoft Outlook 2019 (Mac).
Microsoft Outlook 2013 (Windows).
Outlook.com (не качал, это веб-клиент).

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

Не отображает фоновые изображения

Сбрасывает цвет ссылок

Блокирует отображение картинок по умолчанию

Неправильно показывает шрифты

Картинки отображаются в соответствии с оригинальным размером

Не работают GIF

Поддерживает далеко не все теги HTML и CSS

Неправильно отображает кнопки

Обрезает письма длиннее 1 800 пикселей

Не отображает эмоджи

Страшилка №1: Не отображает фоновые изображения

В чём суть. Считается, что Outlook не показывает фоновые картинки, которые вставляются через атрибут или стиль «background».

Письмо EmailSoldiers в Outlook.com. Картинка на фоне отображается правильно

Это же письмо в Outlook 2019 для Windows. Задний фон пропал

Поддержка. Какие платформы Outlook поддерживают фоновые изображения:

Outlook.com
Outlook 2019 (Windows)
Outlook 2019 (Mac)
Outlook 2013 (Windows)

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

Верстальщики из Litmus советуют инструмент для создания фона письма backgrounds.cm. Он добавляет в письмо вставку на VML — языке разметки Microsoft Office. Outlook считает этот участок кода и вставит картинку, которая там записана. В backgrounds.cm можно сделать фон для всего письма, отдельной ячейки таблицы, а также указать, какой цвет отображать, если фоновая картинка не загрузилась.

Страшилка №2: Сбрасывает цвет ссылок

В чём суть. Говорят, что в Outlook нельзя поставить свой цвет ссылок — он будет всегда сбрасывать его к значению по умолчанию (синие ссылки, фиолетовые после нажатия).

Это правда, но лишь отчасти

Задать цвет ссылке можно, но после нажатия она всё равно будет перекрашиваться в стандартный фиолетовый.

Поддержка. В каких клиентах цвет ссылок работает правильно:

Outlook.com
Outlook 2019 (Windows)	*
Outlook 2019 (Mac)	*
Outlook 2013 (Windows)	*

* В Outlook 2019 и 2013 можно задать цвет ссылок через стиль «color» в теге «<a>». Но после нажатия ссылка предательски перекрасится в фиолетовый цвет.

Что делать. Прописывайте цвет ссылок и не переживайте — они будут отображаться правильно. С тем, что в Outlook 2013-2019 ссылка перекрасится после нажатия, ничего не поделаешь.

Страшилка №3: Блокирует отображение картинок по умолчанию

В чём суть. При первом заходе в десктопные версии Outlook мы не увидим картинок. Вместо них будут противные белые прямоугольники с текстом:

10 страшилок о рассылках в Outlook: где правда, а где враньё 5

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

Поддержка. Какие клиенты по умолчанию отображают картинки:

Outlook.com
Outlook 2019 (Windows)
Outlook 2019 (Mac)
Outlook 2013 (Windows)

Грустно, но alt-текст подписчики десктопных версий Outlook тоже не увидят.

Что делать. Убедитесь, что ваше сообщение хорошо читается и без картинок. Если среди ваших подписчиков много пользователей Outlook, задумайтесь: может стоит перейти на Plain text письма?

Как в Outlook 2019 включить картинки по умолчанию

Заходим в «Файл» → «Параметры» → «Центр управления безопасностью» → «Параметры центра управления безопасностью» → убираем галочку напротив «Не скачивать автоматически рисунки в обычных сообщениях и элементах RSS».

Готово, при следующем заходе Outlook загрузит картинки. В Outlook 2013 алгоритм похожий, лишь немного отличается дизайн меню.

Страшилка №4: Неправильно показывает шрифты

В чём суть. Некоторые версии Outlook сбрасывают шрифт письма в Times New Roman:

Times New Roman — ух, запахло рефератами!

Для сравнения это же письмо в почте Gmail:

Тут со шрифтом всё в порядке

Поддержка. Проблему со шрифтами я обнаружил только в Outlook 2013. Остальные версии нормально отображали шрифты:

Outlook.com
Outlook 2019 (Windows)
Outlook 2019 (Mac)
Outlook 2013 (Windows)

Люди на форуме Litmus жалуются, что такой же баг есть во всех версиях Outlook младше 2013.

Что делать. Проверяйте, как отображается шрифт в Outlook 2013 и более старых версиях. Баг срабатывает не всегда — некоторые шрифты он отображает нормально, другие меняет на Times New Roman.

Верстальщики советуют вставлять такой участок VML-кода сразу за тегом <body>:

<!—[if mso]>

body, table, td {font-family: Arial, Helvetica, sans-serif !important;}

</style>

<![endif]—>

Говорят, полностью решает проблему замены шрифтов на старых версиях Outlook.

Страшилка №5: Картинки отображаются в соответствии с оригинальным размером

В чём суть. Обычно мы не особо переживаем о размере картинок — в блочном редакторе или HTML-коде всегда можно задать нужные размеры. Но в некоторых случаях Outlook будет отображать картинку в исходном размере:

10 страшилок о рассылках в Outlook: где правда, а где враньё 8

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

Вот так это письмо выглядит на Gmail:

Поддержка. Клиенты, которые всегда отображают заданные нами размеры картинок:

Outlook.com
Outlook 2019 (Windows)
Outlook 2019 (Mac)
Outlook 2013 (Windows)

Что делать. Прописывайте размеры картинок через атрибуты HTML, а не CSS-стили.

Будет отображаться с шириной 400 пикселей:

А эта картинка в Outlook проигнорирует заданную нами ширину:

Если не хотите мучиться с ручной вёрсткой, можете изначально подбирать картинки в том размере, в котором они будут в письме. Но тогда мы попадаем на другую проблему: для устройств с Retina-экранами часто советуют добавлять изображения в 2 раза больше области, которую они занимают в письме (так у них будет выше разрешение). Email-маркетологу остаётся только балансировать между двумя огнями: съехавшая вёрстка в письмах на Outlook или не очень чёткие изображения на Retina-экранах (я бы выбрал второй вариант).

Страшилка №6: Не работают GIF

В чём суть. Outlook не проигрывает GIF, а вместо этого показывает только первый кадр.

Слух справедлив, но не для всех платформ. Например, Outlook.com воспроизводит GIF без проблем

Поддержка. Какие Outlook-клиенты поддерживают GIF:

Outlook.com
Outlook 2019 (Windows)
Outlook 2019 (Mac)
Outlook 2013 (Windows)

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

Что делать. Позаботится о том, чтобы первый кадр передавал суть анимации. Если показываете товар со всех сторон — проверьте, чтобы в начале был правильный ракурс. Хотите развлечь подписчиков — убедитесь, что смысл GIF считывается с первого кадра.

Страшилка №7: Поддерживает далеко не все теги HTML и CSS

В чём суть. У Outlook очень ограниченная поддержка CSS и HTML. Иногда из-за этого страдает вёрстка:

10 страшилок о рассылках в Outlook: где правда, а где враньё 11

Например, из-за того, что Outlook не поддерживает стиль «display», картинка и текст оказались друг под другом, хотя должны были стоять рядом

Как это же письмо отображается в Gmail:

Да-да, фона в Outlook тоже не было

Поддержка. Какие теги и стили поддерживают разные версии Outlook:

Таблица с поддержкой стилей и тегов

	Outlook.com	Outlook 2019 (Windows)	Outlook 2019 (Mac)	Outlook 2013 (Windows)
Глобальные стили в <head>
Инлайн-стили
Медиа-запросы
Селекторы атрибутов CSS
Классы
ID
alt-текст
Стили для alt-текста
Потоковое видео
Padding
Margin
Max-width
Заголовки
CSS-позиционирование (inline, block, inline-block)
<p>
Веб-шрифты
AMP-интерактивность
CSS-анимация

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

Страшилка №8: Неправильно отображает кнопки

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

Кнопка здорового человека:

10 страшилок о рассылках в Outlook: где правда, а где враньё 13

Эта же кнопка в Outlook 2019:

Неправильные отступы, острые углы, стандартный цвет текста — всё, что могло пойти не так, случилось

Поддержка. Какие клиенты правильно отображают кнопки на Outlook:

Outlook.com
Outlook 2019 (Windows)
Outlook 2019 (Mac)
Outlook 2013 (Windows)

Что делать. Нормального отображения кнопок в Outlook можно добиться только подключив VML — язык разметки от Microsoft. Этот участок кода будет работать только в Outlook. Как это выглядит:

<!—[if mso]>

<v:roundrect xmlns:v=»urn:schemas-microsoft-com:vml» xmlns:w=»urn:schemas-microsoft-com:office:word» href=»unisender.com» style=»height:40px;v-text-anchor:middle;width:170px;» arcsize=»5%» strokecolor=»#EB7035″ fillcolor=»#EB7035″>

<w:anchorlock/>

<center style=»color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;»>I am a button →</center>

</v:roundrect>

<![endif]—>

Следом за этим будет идти ссылка <a> с кнопкой для всех других клиентов:

<a href=»unisender.com» style=»background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:40px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;mso-hide:all;»>Кнопка</a>

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

Страшилка №9: Обрезает письма длиннее 1 800 пикселей

В чём суть. Существует слух, что Outlook обрезает письма длиннее 1 800 пикселей. Я посмотрел несколько длинных писем, но баг не обнаружил.

Поддержка. Клиенты, которые я проверял, не обрезали длинные письма:

Outlook.com
Outlook 2019 (Windows)
Outlook 2019 (Mac)
Outlook 2013 (Windows)

Что делать. Радоваться, что одной проблемой на Outlook стало меньше.

Страшилка №10: Не отображает эмоджи

В чём суть. Поговаривают, что в Outlook есть проблемы с эмоджи: он не отображает их в теме и прехедере.

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

Outlook.com
Outlook 2019 (Windows)
Outlook 2019 (Mac)
Outlook 2013 (Windows)

Что делать. Продолжать использовать эмоджи, чтобы увеличить открываемость рассылок. Только учитывайте, что у Outlook свои наборы смайликов и они довольно…специфические:

10 страшилок о рассылках в Outlook: где правда, а где враньё 15

Голубь

Привидение

Смайлик с глазами-сердечками

Ещё несколько советов

Перед отправкой обязательно проверяйте, как ваше письмо будет отображаться на разных платформах. Проще всего для этих целей использовать специальные тестовые сервисы, например Litmus или Email On Acid.

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

Гайды Как создать красивое письмо. Дизайн и вёрстка

Разборы Как сверстать письмо: инструкция по HTML и CSS для чайников

Разборы Gmail обрезает письма. Как решить проблему

ВКонтакте, Telegram

Эксклюзивы

Читайте только в Конверте