Outlook является одним из самых популярных почтовых клиентов, используемых как в бизнесе, так и в повседневной жизни. Однако, несмотря на его удобство, могут возникнуть проблемы с отображением писем, созданных в онлайн-редакторах или сверстанных в HTML. Рассмотрим самые распространенные из них.
Изображения
Одно из самых распространенных ограничений в Outlook - проблемы с изображениями.
Изображения в рассылке: Если изображение загружается со сторонних сайтов, а не непосредственно в письмо, Outlook может заблокировать его. Это приведет к тому, что получатели не увидят важные элементы рассылки.
Решение:
Лучшим решением этой проблемы является загрузка изображений непосредственно в письмо. Дополнительно необходимо убедиться, что изображения имеют правильный формат и размер, а также что они не блокируются каким-либо программным обеспечением (например, антивирусом).
Используйте альтернативный текст, пользователь должен иметь возможность понимать содержание изображения, даже если оно заблокировано.
Без альтернативного текста С альтернативным тестом
Фоновые изображения: Outlook отображает фон, установленный для всего письмо, но с отображением фона у отдельных элементов могут возникнуть сложности, что сильно влияет на дизайн и читабельность письма.
Отображение макета в редакторе Отображение письма в Outlook
Решение:
Для отдельных элементов лучшим решением будет не использовать фоновое изображение, а сам элемент заменить на картинку. Например, вместо того, чтобы использовать фон для блока с заголовком вашей рассылки, замените этот блок на картинку с текстом. Таким образом, он будет отображаться корректно в большинстве почтовых клиентов, включая Outlook.
Отображение в Outlook баннера Отображение в Outlook баннера
баннера картинкой с нерабочим фоном
Если необходимо использовать фоновые изображения, созданные с помощью CSS, можно использовать таблицы и inline-стили, чтобы обеспечить их правильное отображение в Outlook.
Корректное отображение background-image в Outlook невозможно без языка разметки векторов (VML). Для создания такого фона можно воспользоваться сервисом backgrounds.cm. Обратите внимание, что если в письме уже есть объект VML, то созданный таким способом фон не будет функционировать. Нужно удалить установленный первым объект.
Шрифты
Outlook может заменять пользовательские шрифты в письмах на стандартные, что значительно скажется на дизайне и читабельности письма.
Решение:
Используйте системные шрифты, такие как Arial, Verdana или Times New Roman, чтобы быть уверенными, что рассылка корректно отобразится в Outlook.
Кнопки
Кнопки часто отображаются в Outlook как простой текст без стилей, что может повлиять на эффективность письма и вызвать путаницу у получателя рассылки. Также можно столкнуться с некорректным отображением скругленных кнопок.
Отображение в редакторе Отображение в Outlook
Решение:
Вместо кнопки попробуйте использовать картинку с кнопкой. Такой элемент будет отображаться корректно в большинстве почтовых клиентов, включая Outlook.
Используйте ссылки вместо кнопок, если это возможно.
Для избежания проблем с отображением скругленных кнопок аналогично используйте изображение в виде скругленной кнопки. Также можно отдельно сверстать и добавить кнопку html-кодом, используя такой инструмент как MJML , табличный метод или VML (XML-язык для создания векторной графики, который может быть использован в Outlook для отображения скругленных элементов).
Например, чтобы создать скругленную кнопку, нужно создать таблицу с одной ячейкой и установить в качестве фона изображение с закругленными углами:
<table cellpadding="0" cellspacing="0">
<tr>
<td background="https://example.com/images/rounded-button-bg.jpg" width="100" height="40" align="center" valign="middle">
<a href="#" style="color:#fff; text-decoration:none; font-size:16px;">Кнопка</a>
</td>
</tr>
</table>
Чтобы создать прямоугольник с закругленными углами, нужно использовать следующий код:
<!--[if gte mso 9]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" arcsize="10%" stroke="false" fillcolor="#CCCCCC">
<v:textbox style="mso-fit-shape-to-text:true" inset="0px,5px,0px,5px">
<center>
<![endif]-->
<a href="#" style="background-color:#CCCCCC; border-radius:10px; color:#ffffff; display:inline-block; font-family:sans-serif; font-size:16px; line-height:44px; text-align:center; text-decoration:none; width:200px; -webkit-text-size-adjust:none;">Кнопка</a>
<!--[if gte mso 9]>
</center>
</v:textbox>
</v:roundrect>
<![endif]-->
Этот код создаст кнопку с закругленными углами радиусом 10%, которая будет отображаться в Outlook.
Важно помнить, что использование табличного метода и VML может занимать больше времени и усилий, чем использование готовых решений. Однако, если критически важно использовать такие элементы, как кнопки с скруглением, это будет наилучшим вариантом.
Таблицы
Outlook может неправильно отображать таблицы, особенно если они содержат сложные стили, объединенные ячейки или множество строк и столбцов разных размеров. Это может привести к нарушению структуры и дизайна всего письма.
Решение:
Самый простой вариант - добавить таблицу как изображение.
Для обеспечения правильного отображения таблиц в Outlook, рекомендуется использовать наиболее простые стили и избегать объединенных ячеек.
Проблемы с отображением могут быть связаны и с попаданием рассылок в нежелательную почту и, как следствие, блокировкой части контента письма. Поэтому, рекомендуем настроить домен и использовать обратный адрес на корпоративном домене. В самих письмах обязательно нужно разбавлять изображения текстовыми блоками.
В целом, при создании писем для Outlook необходимо учитывать возможные проблемы с отображением и использовать подходящие методы для их решения. Также рекомендуется тестировать письма в разных почтовых клиентах, включая Outlook, и на кроссбраузерность, чтобы убедиться в их правильном отображении. Кроме того, для обеспечения правильного отображения писем в Outlook и других почтовых клиентах рекомендуется использовать тестирование на разных устройствах, а также проверять письма на соответствие стандартам HTML и CSS.