Главная / Блог / 10 страшилок о рассылках в Outlook: где правда, а где враньё
Подборки

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

Проверяем на себе главные мифы об Outlook
Артем Чеховской
Артем Чеховской
08 октября, 2019
10817
Форма регистрации

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

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

Большой гид по рассылкам в Gmail
Большой гид по рассылкам в 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. Картинка на фоне отображается правильно
Письмо EmailSoldiers в Outlook.com. Картинка на фоне отображается правильно
Это же письмо в Outlook 2019 для Windows. Задний фон пропал
Это же письмо в Outlook 2019 для Windows. Задний фон пропал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10 страшилок о рассылках в Outlook: где правда, а где враньё 5
Чтобы видеть изображения, нужно кликнуть правой кнопкой мыши или идти в настройки и там выбирать отображение картинок по умолчанию

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

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

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

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

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

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

включаем картинки в Outlook

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

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

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

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

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

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

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

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

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

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

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

<!—[if mso]>

<style type=»text/css»>

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

</style>

<![endif]—>

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

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

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

10 страшилок о рассылках в Outlook: где правда, а где враньё 8
Огромный зернистый логотип в начале письма. Кажется, авторы изначально задумывали дизайн не таким

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

письмо на gmail

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

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

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

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

<img src=»https://www.unisender.com/images/photo1.jpg» width=»400″ style=»width:300px;» />

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

<img src=»https://www.unisender.com/images/photo1.jpg» style=»width:400px;» />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что делать. Нормального отображения кнопок в 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 &rarr;</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 yes
Outlook 2019 (Windows) yes
Outlook 2019 (Mac) yes
Outlook 2013 (Windows) yes

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

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

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

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

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

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

10 страшилок о рассылках в Outlook: где правда, а где враньё 15
Голубь
Привидение
Привидение
Смайлик с глазами-сердечками
Смайлик с глазами-сердечками

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

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

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

Эксклюзивы — читайте только в блоге Unisender
Мария Агеева о том, как превратить email-маркетинг в дело жизни Как геймификация и AMP увеличили средний чек на 40% Я регулярно уничтожаю плоды своего труда — и всё из-за маркировки рекламы Как выжить в предновогодней «карусели» из задач, дедлайнов и личных дел Цифровой след: почему о нем важно помнить?

СВЕЖИЕ СТАТЬИ

Отдых — это часть работы
21.12.2024
Верстка сайта
21.12.2024
Работа с заказчиками: знаете ли вы, как избежать этих ошибок?
20.12.2024
Как создать канал в Дзене: пошаговая инструкция
20.12.2024
Онлайн-издание
20.12.2024
Диджитал-маркетинг (цифровой маркетинг)
19.12.2024