Верстка писем под Outlook. Решения багов

Сегодня расскажу про особенности верстки под старые версии Outlook (на Windows), которые так часто используют клиенты из сферы B2B.

Увы, но стандартный код не всегда отображается нужным образом в старых версиях Outlook (с 2016 и далее), это связано с тем, что движок этих версий базируется на MS Word, а не как у большинства на WebKit. Вот тут указаны особые стили для этого случая. Мы и так ограничены CSS3, и хотя новые версии Outlook уже поддерживают WebKit и там всё ок, но чтобы письма отображались хорошо и на старых версиях, нужно знать нюансы. Итак, рубрика проблемы и решения.

Итак, поехали:

✅ Решение: Outlook игнорирует padding у всех блочных элементов, поэтому добавляем его не к р, а к td, тогда всё хорошо работает. Вообще, чтобы наверняка, каждый параграф лучше в отдельную строку вставлять и добавлять отступы к td. Исключение, если письмо очень длинное и есть риск, что Gmail его обрежет, тут экономим символы и делаем код короче, игнорируя эту особенность.

✅ Решение: Указываем его в пикселях и всё будет хорошо. Ранее я давала значение line-height в коэффициенте по отношению к шрифту и на мобилке всё пропорционально подстраивалось, например, line-height: 1.6; означает, что интервал будет в 1.6 раза больше обозначенного шрифта, т.е. пропорция сохраняется, но увы, Outlook это не понимает, поэтому ставим в пикселях, а через медиа-запросы на мобилке корректируем если нужно. Чтобы совсем наверняка, можно приказать outlook, чтобы он вас слушался, дополнительно добавив свойство mso-line-height-rule: exactly; (т.е. мы ему говорим: "Не шали! Выстави мой точный интервал, а не свой")

✅ Решение: Нелогичная особенность заключается в том, что если добавить отступ (padding) именно к таблице, то старый outlook добавит его к каждому td внутри себя. Долго мучалась с этим, не понимая в чем дело, но удалось найти информацию об этом на каком-то зарубежном форуме. В общем, лучше добавлять все отступы к родительскому td, внутри которого расположена таблица, а не к самой таблице, иначе к внутренним td, эти отступы тоже добавятся.

✅ Решение: Проверьте чтобы во всех тегах table, где указано в style, что width:100% (кроме самой верхней таблицы с фоном), обязательно стоял атрибут width="600", или иное значение ширины таблицы, это важно для outlook, кстати "px" не ставим в атрибуте, это для свойств css. Ну а для центрирования, как обычно, используем margin: auto и text-align:center. Дело в том, что outlook не распознает max- и min-width, часто используемые при резиновой вёрстке и часто бывает так, что в outlook "дочерний элемент просто разрывает родителя" (какой-то хоррор).

✅ Решение: Просто добавьте к тегу, отвечающему за кнопку 2 свойства в style: границы с цветом фона кнопки (border: 2px solid #073555;) и специальный отступ для outlook (mso-padding-alt:14px 20px;). Кнопка станет красивой и статной. Еще разных стилей типа mso, можно взять из вот этого справочника.

Например, задача состоит в том, чтобы 2 горизонтальных блока подстраивались друг под друга в мобильной версии. Чтобы письмо адаптировалось, часто используют медиа-запросы, но они не поддерживаются в gmail и Яндекс и поэтому, я использую симбиоз резиновой вёрстки и медиа-запросов. А чтобы резиновая вёрстка работала корректно, мы (а точнее я и мои воображаемые друзья) не указываем в style значений width в пикселях (только в атрибутах к таблицам, как писала выше). Outlook имеет свои причуды, в каждой версии они могут отличаться. Вот мои решения, возможно, у вас будут иные мысли. Но оба варианта рабочие. Если надо, могу через codepen поделиться решениями.

✅ Решение 1:

*Мобилка: Не забываем добавлять к этим же td класс и в медиа-запросе для мобильных экранов указываем, что присвоить этому классу width:100%!important; Это нужно, чтобы при адаптации блок занимал весь экран, а не только 280-300px или половину экрана. Иначе на мобилке в 400px, будет не очень симпатично.

✅ Решение 2: В строке добавляем не таблицу, а 2 блока, например, div 1 и div 2, и уже им назначаем ширину, но не как в примере выше, а width: 100%; max-width: 280px; т.е. это резина, мы говорим будь на 100%, но не более, чем на половинку экрана + display:inline-block. Такая адаптация сработает и на Яндексе и на Gmail. Но outlook не знает понятия max-width + у div могут быть сложные отношения с outlook, поэтому где-то это может сработать, но в ряде старых версий нужно кое-что добавить. А именно, закоментированный, т.е. "скрытый" код, специально для outlook. По сути мы берем и оборачиваем наши div в таблицу. Другие почты этот код проигнорят, но они и с div дружат, отреагирует только outlook.

*Мобилка: Не забываем добавлять к этим же div класс и в медиа-запросе для мобильных экранов указываем, что присвоить этому классу max-width:600px!important; Это нужно, чтобы при адаптации блок занимал весь экран.

🟣 Нюансик: Кстати если добавить скрытый комментарий, начинающийся на " <!--[if !mso]>", то всё что будет внутри него будет отображено для остальных почтовиков, но НЕ для outlook.

Надеюсь, что это было полезно и кому-нибудь пригодится) В любом случае, всё меняется и то, что работает на момент написания статьи, может уже не работать через год или два, хотя это же почта, думаю лет на 5 будет точно актуально 😂

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