Тонкости работы с Outlook

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

Шаблон

Начнём с того, что у вас должен быть правильный шаблон для письма, в котором будут стоять ограничения по ширине, и ограничения эти должны быть фиксированными. Если вкратце, то Outlook не понимает свойства max-width. К примеру, вот так должно выглядеть наше письмо:

Вот так оно будет в Outlook:

Чтобы этого избежать, мы создаём таблицу с фиксированной шириной, которую будет видно только Outlook. Разместив нашу таблицу внутрь этой, мы получим аналог свойства max-width для Outlook 🙂

<!--[if (gte mso 9)|(IE)]>
<table width="660" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center">
<![endif]-->


<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table>
<![endif]-->

Условия «если Outlook». И наоборот

Мы можем отображать некоторые элементы для только для Outlook, написав вот такое условие:

<!--[if mso]>
     Контент для  Outlook
 <![endif]-->

И наоборот, можно часть вёрстки отобразить на всех почтовых клиентах, кроме Outlook:

<!--[if !mso]> <!---->
    Контент для остальных почтовиков, Outlook 2003 и OSX версии
 <!-- <![endif]-->

Где это может понадобиться? Один пример я уже описывал в статье, когда разбирал частые вопросы в поломке писем. Рассмотрим его тут ещё раз, только на примере. 

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

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

Казалось бы, решение простое! Сделать картинку размером х2, и тогда проблема будет решена:

Но мы столкнулись с тем, что для  Outlook width=”100%” значит, ширина равна 100% ширине исходного файла, из-за чего, всё письмо ломалось, потому что картинка растягивалась на 1140 пикселей, чем расширяла родительскую таблицу, а это ломало всю контентную часть.

Пример отображения в gmail:

И вот что произойдёт в Outlook:

Чтобы картинка в Outlook не поплыла, ей нужно указать фиксированную ширину, но если мы это сделаем, то плакала наша адаптация.Тут на помощь приходит условие if mso, в котором для Outlook наша картинка будет загружаться с фиксированной шириной, а для всех остальных с шириной в 100%.

<!--[if mso]>
  <img src="img/img-map2x.jpg" width="570"  alt="Карта" border="0" style="display: block;" />
 <![endif]-->
 <!--[if !mso]> <!---->
   <img src="img/img-map2x.jpg" width="100%"  alt="Карта" border="0" style="display: block;" />
<!-- <![endif]-->

Перестраивающиеся блоки

Перестроение блоков происходит благодаря  элементу div со свойством display: inline-block:

Когда им не хватает пространства, они перестраиваются:

Но не в Outlook. Он не понимает, как работать с такими блоками, и покажет следующее:

Зато он прекрасно понимает, как работать с табличной вёрсткой. Поэтому нам нужно в блоки добавить ещё таблицы с такими же размерами, как и у блока. А свойство background и height я перенесу в атрибуты ячеек наших таблиц. Со свойством border мы поступим так же, потому что нет смысла стилизовать элементы div, которые Outlook плохо отображает.

В целом, добавление таблицы не спасёт картину, потому что Outlook всё ещё видит лишь две таблицы внутри одной родительской:

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

Однако если мы оставим эти ячейки для всех почтовиков, то никакой адаптации у нас не будет. Поэтому используем условие if mso, в которое поместим эти ячейки, чтобы они отображались только в Outlook:

Вот что у нас получилось:

Осталось сократить отступы между блоками.  Так произошло, потому что наша таблица была шириной 660 пикселей,  а блоки по 300 пикселей. Уменьшим нашу таблицу до 600 пикселей и получим итоговый результат:

с работающей адаптацией:

Мы пользуемся вот таким шаблонным кодом:

<div style="display: inline-block;vertical-align:top; width:300px;">
<table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<tr><td align="center" valign="middle">
			
</td></tr>
</table></div><!--[if gte mso 9]>
</td><td valign="top" align="center">
<![endif]-->

Если вам нужно больше таких блоков, например, четыре штуки в одной таблице (по два блока в одном ряду), то для Outlook в условных комментариях нужно будет ещё добавлять закрытие строки и открытие новой (</tr><tr>). Если этого не сделать, то Outlook нарисует большую таблицу с четырьмя ячейками и поломает вам всю вёрстку: 

Добавляете tr между вторым и третьим блоком:

И проблема решена :

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

Фоновое изображение (background)

К сожалению, Outlook по-прежнему не понимает свойство background-image и атрибут  background=»», поэтому по-прежнему приходится немного усложнять процесс. 

Если вам нужно создать таблицу с бэкграундом, то это будет выглядеть вот так:

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

Код:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td background="img/background.jpg" style="background-image:url(img/background.jpg)" bgcolor="#ffffff" height="269" valign="top" align="center">
	<!--[if gte mso 9]>
	<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:269px;">
	<v:fill type="tile" src="img/background.jpg" color="#ffffff" />
	<v:textbox inset="0,0,0,0">
	<![endif]-->
	<div>
	<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
	<td align="center">
<!--				Контент тут-->
	</td>
	</tr></table>
	</div>
	<!--[if gte mso 9]>
	</v:textbox>
	</v:rect>
	<![endif]-->
</td></tr>
</table>

А если вам нужно залить всё письмо картинкой, то тут немного другой подход. Нужно вставить вот такой код сразу после тега <body>(только обратите внимание, что путь к картинке указывается в двух местах):

<div style="background-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="img/background.jpg" color="#7bceeb"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="img/background.jpg">

 и закрыть вот этим кодом перед закрывающим тегом </body>

      </td>
    </tr>
  </table>
</div>

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

Кнопки

Иногда дизайн письма требует закругленных углов, но свойство border-radius не работает в Outlook.  Чтобы не делать кнопки с помощью картинок, можно воспользоваться этим сервисом, который генерит код, понятный для любого почтового провайдера. Обратите внимание, что текст кнопки и ссылку нужно дублировать:

Outlook не самый удобный для верстальщика почтовик. Скажем откровенно: совсем неудобный. Но раз им многие пользуются (большинство корпоративной почты — это Outlook), то важно уметь верстать красивые адаптивные письма и для него. Остались вопросы или у вас есть свои собственные лайфхаки? Напишите нам 🙂

Согласен

Мы используем файлы cookie для записи информации о сеансе, например, прошлой активности на сайте, чтобы обеспечить лучший сервис, когда посетители возвращаются на наш сайт или настраивают содержимое веб-страницы на основе типа браузера посетителей. Используя веб-сайт, вы выражаете свое согласие с нашей политикой cookie. Вы можете изменить настройки файла cookie в своем веб-браузере.