Stripo_Outlook Rendering Issues_Featured Image1
timer ~ 9 мин читать
53320 просмотры
оценить
23 декабря 2019

Типичные проблемы отображения писем в Outlook и их решение с помощью Stripo

Stripo / Blog / Типичные проблемы отображения писем в Outlook и их решение с помощью Stripo

Outlook – довольно популярный почтовик. Его доля на рынке составляет 11% (на приложения Outlook приходится 9%, а веб-версию используют 2% людей во всем мире).

Считается, что он удовлетворяет потребности любого бизнеса.

Тем не менее, Outlook известен еще и своими «уникальными особенностями» отображения писем. Вот самые типичные проблемы, с которыми люди сталкиваются при открытии или отправке писем в Outlook:

  • закругленные кнопки становятся квадратными;

  • не отображается фон для отдельных контейнеров и строк;

  • в некоторых версиях Outlook пункты меню теряют стили.

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

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

К примеру, шаблоны с обновленным кодом не искажают кнопки в Outlook, зато не отображаются баннеры. Или, что еще хуже – верстка может сломаться в других почтовиках, например Gmail или Yahoo.

Вот почему мы считаем, что проблему стоит решать локально – фиксить только те элементы, которые этого требуют, а не весь email.

1. Закругленные кнопки в некоторых версиях Outlook приобретают квадратную форму

Многочисленными исследованиями было доказано, что форма кнопки CTA никак не влияет на показатели CTR и CTOR.

Первое ключевое правило эффективности кнопок – их следует делать заметными, с четким и привлекательным текстом.

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

Stripo_Outlook-Rendering-Issues_Buttons

Итак, что Outlook делает с кнопками?

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

Чем вызвана эта проблема?

Существует три основных метода верстки кнопок в письмах:

  1. табличный метод;

  2. метод Stripo. Мы его так назовем, потому что метод был разработан для нашего конструктора шаблонов — и, по нашему мнению, он лучше всего подходит для потребностей нашего конструктора;

  3. метод VML.

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

Как настроить верстку на основе VML

Если вы пользователь Stripo, то все достаточно просто:

  • откройте вкладку «Оформление»;
  • перейдите ко вкладке «Кнопка»
  • далее активируйте функцию «Поддержка Outlook».

Outlook_VML Buttons

Теперь все мои кнопки в Outlook выглядят округлыми, сохраняют внутренние отступы. Иными словами, они сохраняют тот дизайн, который я им задала при верстке письма.

Outlook_Button_2016

 (Outlook 2016, Windows)

Хотите сделать так же?

Зарегистрироваться

2. Фон контейнера или структуры не отображается в Outlook

Львиная доля вопросов об Outlook в Интернете — «как установить фоновое изображение для модулей и отдельных элементов»

Stripo_Outlook-Rendering-Issues_Background-Images

Письмо справа выглядит довольно круто, да… Но образец слева смотрится завершенным.

Это основная задача любого фона – придать дизайну письма завершенность.

Самым удивительным и интересным фактом является то, что Outlook отображает фоны, установленные для всего письма, в веб-версии, во всех версиях десктопного приложения и в Office 365.

Итак, что делать, если вам нужно задать фон для отдельного элемента вашего шаблона?

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

Как установить отображаемое в Outlook фоновое изображение для структуры/строки

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

Stripo_Outlook-Rendering-Issues_Background-Image-for-Structure

Чтобы создать баннер, вам нужно:
  • загрузить изображение баннера, которое будет фоном структуры;

  • загрузить «дополнительное» изображение, которое будет использоваться в качестве основного для вашего контентного модуля. Это может быть также картинка с кнопкой, сниппеты товаров и т.д. Не забудьте использовать нашу опцию «Sticky note», чтобы размещать дополнительные изображения на одинаковом расстоянии от всех краев контейнера;

  • написать ваш текст CTA поверх изображений;

  • добавить гиперссылку к этой структуре.

Это важно:

Этот трюк работает, только если вы добавите только один товар в эту структуру/строку.

Как установить фоновое изображение для контейнера/элемента, которое корректно работает в Outlook

В некоторых случаях вам может понадобиться фон для отдельного контейнера или колонки в строке.

Наш фон для контейнеров корректно отображается во всех версиях Outlook:

Stripo_Outlook-Rendering-Issues_Background-for-Containers-and-Elements

Есть два способа сделать создать его:

Способ 1. Создание баннера

Да, вам нужно будет построить его так, как описано в разделе выше, но с использованием структуры с 2 колонками.

Rendering Issues_Setting Background Images for Containers with Stripo_Ru

Способ 2. Создание фона на основе VML

Вам нужно подготовить структуру и элемент, в который вы планируете добавить фон.

Когда все будет сделано, вам придется поработать с кодом шаблона.

  • наведите курсор на нужный элемент прямо в шаблоне;

  • над этим элементом найдите значок «контейнер»

Rendering Issues in Outlook_Activating Container's Settings_Ru

  • кликните по нему, чтобы активировать настройки контейнера;

  • теперь откройте редактор кода;

Rendering Issues in Outlook_Stripo_Opening Code Editor

  • вставьте эту часть код прямо над строкой, которая начинается с «table width», как показано на скриншоте ниже:

<!--[if gte mso 9]>

 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:100%;">

   <v:fill type="frame" src="https://iiqf.stripocdn.email/content/guids/CABINET_b696bac619e2a6fd60a2c756b8b7c9c5/images/26661559905688877.png" color="#7bceeb" ></v:fill>

   <v:textbox inset="0,0,0,0">

 <![endif]-->

(Источник кода: backgrounds.cm. Мы оптимизировали этот код в соответствии с методом верстки писем в нашем редакторе).

  • ниже под строкой «table-width», вставьте вторую часть кода:

<!--[if gte mso 9]>

   </v:textbox>

 </v:rect>

 <![endif]-->
  • замените подчеркнутые ссылки URL-адресом вашего фонового изображения;

Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds

  • в коде встраивания измените ширину изображения, которая соответствует ширине всего контейнера – вы найдете ее в верхней строке как ширину контейнера. В нашем примере была ширина 600.

Если изображение хостится на наших серверах, то URL можно получить таким образом:
  • на панели настроек кликните само фоновое изображение, которое вы выбрали;

  • затем на панели инструментов найдите и скопируйте свой URL.

Rendering Issues in Outlook_Copying URL to Background Image

Это важно:

Если вы ранее добавили VML-кнопку в контейнер или структуру, то VML-фон не будет работать. Outlook отображает только один из двух VML-объектов – тот, который был установлен первым.

Скоро:

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

3. В некоторых версиях Outlook пункты меню теряют стили

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

пункты меню могут терять настройки стиля, включая цвет и размер.

Создавая шаблон, я установила тип шрифта Trebuchet и размер 18px.

Но в Outlook я увидела вот это:

Stripo_Outlook-Rendering-Issues_Menus-Lose-Their-Styles

Если вы присмотритесь, то увидите, что первый пункт меню написан в Times New Roman, 12рх, черным цветом.

Чем вызвана эта ошибка?

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

Решение:

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

Вывод

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

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

Скоро вам не придется заморачиваться с кодами – мы сделаем все за вас.

Все, что вам будет нужно — просто активировать соответствующие опции.

Читайте в нашем блоге пост о том, как создавать и экспортировать шаблоны в Outlook с помощью Stripo.

Оптимизировать мои письма

MisterIz 4 дня назад

Unfortunately the banners resize entirely on mobile devices making any text or CTA buttons very small.

nicoletta arena 4 месяца назад

quando scarico l'html sui computer appaiono le immagini caricate, mentre la stessa mail letta sui cellulari non ha le immagini, Perchè?

Lea Simpkins 1 год назад

The problem I am having when I export email templates to outlook is that they are not mobile friendly. From a laptop or computer the emails look fantastic but on mobile they are WAY TOO SMALL to read. Is there a fix to make them adapt to mobile?

Hanna Kuznietsova прокомментировал Lea Simpkins 1 год назад

Hello, Lea. Sorry for the late reply. Unfortunately, Outlook removes the styles that make email design responsive. Thus, those users who see your emails on mobile devices will see the desktop version of it. Of course, there is no horizontal scroll on mobiles. But all the containers from one row that are normally moved to the second/third row on mobiles, will all remain in the same row. https://stripo-cdn.stripo.email/photos/shares/Blog//Containers-Get-Moved-to-Next-Rows.png -- email sent via an ESP https://stripo-cdn.stripo.email/photos/shares/Blog//Email-Sent-Through-Outlook.png -- email sent via Outlook.

Alaa Abdelrahim 1 год назад

17620 views meaning so many people is having this problem and sorry to say this , but some of suggested solution is not working :(

Hanna Kuznietsova прокомментировал Alaa Abdelrahim 1 год назад

Alaa Abdelrahim, We're sorry to hear some solutions did not work for you. Could you clarify please which solutions did not work? We will try to find the reason why and provide you with a new way out. Thank you

GERWIN RUSSELL FARROÑAN ALBORNOZ 1 год назад

Hola, tengo problemas para que la imagen de fondo del contenedor se pueda ver en outlook. Estoy siguiendo las indicaciones de insertar el código (https://stripo.email/photos/shares/Blog//Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds.png) pero no me resulta. Adjunto el enlace de la plantilla que hice. https://viewstripo.email/f9949d8f-3dd3-4452-ab85-a2f603d0360e1599420348110 Agradecería que me digan que tengo que corregir para que resulte.

Hanna Kuznietsova прокомментировал GERWIN RUSSELL FARROÑAN ALBORNOZ 1 год назад

Hola. Intente utilizar "New Email Copy 3" y este contenedor http://prntscr.com/ucvqve como se muestra en el ejemplo. Así es como se ve el fondo de este contenedor en nuestro Outlook: https://prnt.sc/ucvp5o Si necesita más ayuda, envíenos un correo electrónico a support@stripo.email oa través de nuestro chat que puede encontrar en la esquina inferior derecha de su pantalla en nuestro sitio.

Francis Monier 1 год назад

Bonjour, Bravo pour votre article. Une remarque cependant car je suis toujours confronté au problème de l'image de fond sur Outlook. Problème récurrent qui me fait perdre énormément de temps. Vous avez dit "Nous sommes heureux d’annoncer que bientôt nous ajouterons un contrôle, similaire au contrôle des boutons, pour les images de fond. Cela signifie que vous n’aurez plus à jouer avec le code — vous n’aurez qu’à choisir si vous voulez un arrière-plan spécial pour les usagers d’Outlook ou non, nous sommes aujourd'hui en 2020 et cette option n'est toujours pas disponible. Où en êtes-vous par rapport à ce sujet là ? Cordialement (Problème mentionné étant "L’arrière-plan des conteneurs ou structures ne s’affiche pas dans Outlook")

Hanna Kuznietsova прокомментировал Francis Monier 1 год назад

Francis, Bonne journée. Merci pour votre question. Malheureusement, la sortie de cette option est reportée au début de 2021. Lorsque la sortie aura lieu, nous en parlerons certainement sur notre site Web. Nous espérons que cette méthode d'ajout d'un arrière-plan vous a été utile et n'a causé aucun inconvénient. Nous vous souhaitons sincèrement des campagnes efficaces

Олег Темпов 2 года назад

Метод stripo приводит к тому, что колонки в браузерном клиенте Gmail начинают скакать, чего бы не было при табличной вёрстке...

Hanna Kuznietsova прокомментировал Олег Темпов 2 года назад

Олег, Добрый день. Нам очень жаль, что у Вас возникли проблемы с отображением письма в Gmail. Метод верстки у нас табличный, и никакие контроллы, которые мы применяем для адаптации писем под Outlook, его не отменяют. Подскажите, пожалуйста, какое именно действие привело к тому, что колонки начали скакать в Gmail. Напишите, пожалуйста, здесь или на почту support@stripo.email, и мы постараемся помочь устранить данную проблему. Спасибо

Вас также может заинтересовать

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

Одна из самых серьезных проблем при создании электронных писем — правильно выбрать шрифт. Вес, высота, ширина, цвет, форма, интервал… Все ли здесь имеет значение? Да, важно все, но самое главное — выбрать читабельный шрифт. В этой статье мы расскажем, как выбрать лучший профессиональный шрифт для рассылки. Создавайте элегантные письма с помощью Stripo в кратчайшие сроки, используя наши готовые шаблоны Ознакомиться   Шрифты HTML-писем: основные правила, которые нужно соблюдать При выборе оптимального шрифта следует учитывать три базовых правила: 1. Не используйте более двух шрифтов...

Дизайн Шаблоны
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

Дизайн Маркетинг Шаблоны
Будьте всегда в курсе последних новостей в области email-маркетинга!