13 подводных камней в email-верстке, которые портят отображение писем

Чтобы письмо корректно отображалось у получателей, важно учитывать особенности каждого сервиса. Разберем подводные камни email-верстки в Outlook, Gmail, Яндекс Почте, Mail.ru и расскажем, что с ними делать:

• Outlook и 10 нюансов работы с ним

  • Фиксированная ширина блоков

  • Отдельные отступы

  • Фоновые изображения

  • Скрытые элементы

  • Стили в тегах

  • Скругления

  • Особенности мобильной версии

  • Удаление пустых ячеек

  • Требования к безопасности и DNS-записям

  • Темная тема

Еще 3 нюанса верстки email-рассылок:

• Яндекс Почта и отсутствие поддержки медиазапросов

• Gmail Почта и нюансы темной темы

• Почта Mail.ru и работа со спецсимволами

А также бонус:

• Чек-лист по верстке email-рассылок

Outlook и 10 нюансов работы с ним

Outlook — это не просто почтовый клиент от Microsoft. Он совмещает функции органайзера, планировщика задач, календаря и менеджера контактов.

Как у любого почтового клиента, у Outlook есть свои критерии для правильного отображения email-писем. Часто для этого требуется дополнительная разметка в виде комментариев if mso и прочих.

Ниже — о ключевых особенностях верстки email-рассылок для Outlook.

1. Фиксированная ширина блоков

Outlook не поддерживает некоторые CSS-свойства, например, max-width. Поэтому, если хотите сделать блок уже, чем ширина письма (например, 540px вместо 100%), используйте специальную «обертку» — комбинацию таблиц и условных комментариев, которая сработает только в Outlook.

Механика такая:

1. Пропишите HTML-комментарии вида <!—[if mso]>. Они игнорируются другими почтовыми клиентами, но читаются в Outlook.

2. Внутри такого комментария поместите таблицу, которую Outlook воспримет как обычный HTML-код.

3. Задайте ей фиксированную ширину сразу двумя способами: через атрибут width="540″ и инлайн-стиль style="width: 540px;". Это гарантирует корректное отображение в разных версиях Outlook.

Пример кода:

2. Отдельные отступы

Outlook корректно воспринимает только отступы, оформленные через padding. Однако если нужно задать разные отступы для Outlook и других почтовых клиентов, используйте специальное свойство mso-padding-alt. Оно применяется только в этом сервисе и позволяет настроить уникальные значения отступов.

В этом случае в большинстве почтовых сервисов отступ будет 20px сверху и снизу, 15px — по бокам.

При этом в Outlook отступ сверху и снизу будет 30px, а по бокам — также 15px.

Отступы между блоками в коде можно задать разными способами:

• через <tr> и <td>.

Пример кода:

Как это работает:

• height="20″ — задает высоту ячейки;

• line-height: 20px; — страхует от багов Outlook, где высота зависит от межстрочного интервала;

• font-size: 0; — обнуляет влияние текста (даже если его нет), чтобы не было дополнительных пробелов.

Благодаря обнулению значения font-size и указанию line-height верстка не будет ломаться, и отступы во всех почтовых клиентах останутся одинаковыми.

• через <div> внутри <td>.

Этот способ тоже работает, но нужно учитывать, что Outlook не может считывать стили в некоторых тегах, таких как <div>. Поэтому, чтобы отступ отображался корректно, обязательно нужно указать:

• атрибут height="20″ прямо в теге <div>;

• стили font-size: 0 и line-height: 20px, как в первом варианте.

3. Фоновые изображения

Outlook не отображает фоновые картинки, заданные обычным способом через CSS или атрибут background. Чтобы фон работал корректно, нужно использовать специальную конструкцию на основе VML (Vector Markup Language) — это так называемые «фигурные» теги, которые считываются только Outlook.

Пример кода:

Такой способ позволяет использовать фоновые изображения в Outlook. Но с ним связаны ограничения, чтобы их учесть:

1. Обнуляйте боковые отступы, заданные через padding, внутри фонового блока. Сделать это можно с помощью ранее описанных стилей для Outlook — через mso-padding-alt. Например:

   1. padding: 0 15px;

   2. mso-padding-alt: 0 0;

2. Указывайте ширину и высоту фонового блока. Именно по этим значениям Outlook «вырезает» фон. Если их не указать, контент может отобразиться некорректно.

3. Выбирайте фоновую картинку не больше 2000px в высоту, иначе письмо может сломаться или некорректно отобразиться в Outlook.

4. Не вставляйте фоновое изображение внутри другой фоновой картинки. Outlook не поддерживает вложенные VML-фигуры, и письмо в этом случае просто «развалится».

4. Скрытые элементы

В Outlook при необходимости можно скрывать отдельные блоки. Например, которые предназначены только для мобильной версии письма. Для этого используйте стиль mso-hide: all;.

При этом в Outlook он будет полностью скрыт.

5. Стили в тегах

Outlook не всегда распознает стили, прописанные внутри некоторых тегов. Самый частый пример — <div>. Поэтому, чтобы верстка отображалась корректно, нужно:

• или дублировать стили через атрибуты прямо в теге;

• или использовать специальные условные комментарии для Outlook (допустим, <!—[if (gte mso 9)|(IE)]>).

 

6. Скругления

Outlook не поддерживает свойство border-radius, поэтому нельзя задать скругления для блоков и изображений.

Чтобы письмо одинаково отображалось во всех почтовых клиентах, необходимо привести картинки и блоки к единому виду. Есть два варианта:

• убрать скругления у всех элементов, чтобы они одинаково смотрелись в разных почтовых клиентах;

• использовать изображения со скругленными углами — так Outlook отобразит их как нужно, так как это уже часть самой картинки.

7. Особенности мобильной версии

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

Чтобы избежать этих отступов:

1. Оборачивайте в «обертку» мелкие изображения (например, иконки), как описано в разделе «Фиксированная ширина блоков», чтобы они не увеличивались сверх изначальных размеров.
   

2. Проверяйте текстовые и блочные элементы на корректное отображение при уменьшении экрана устройства. Важно, чтобы они не упирались в края письма и адаптировались хотя бы под ширину в 375px.

8. Удаление пустых ячеек

Outlook может автоматически удалять пустые ячейки (<td>), если пользователь включил соответствующую настройку. Поэтому, если вы используете их для отступов или разделителей, при просмотре письма в Outlook верстка может исказиться.

Чтобы такого не допустить, лучше применять специальное свойство mso-padding-alt:. Оно позволит задать отступ внутри ячейки <td>, при этом Outlook его точно не проигнорирует.

9. Требования к безопасности и DNS-записям

Outlook предъявляет повышенные требования к безопасности и доставляемости писем. У него жесткая политика фильтрации, поэтому важно внимательно следить за:

• репутацией домена,

• правильностью и валидностью DNS-записей: SPF, DKIM, DMARC.

Если что-то настроено некорректно, письмо с большой вероятностью попадет в спам или будет полностью заблокировано.

10. Темная тема

В последних версиях Outlook появилась темная тема, но десктопная версия по-прежнему не распознает медиазапросы. Это значит, что вы не сможете адаптировать стили (например, цвет текста) под темный режим с помощью @media (prefers-color-scheme).

Чтобы избежать проблем с отображением, тестируйте письма в темной теме Outlook вручную. Это поможет заранее выявить и устранить визуальные ошибки.

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

Яндекс Почта и отсутствие поддержки медиазапросов

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

В Яндекс Почте нет поддержки медиазапросов.

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

Например, в Яндекс Почте нельзя:

• растягивать блоки на всю ширину экрана телефона;

• изменять выравнивание текста в мобильной версии.

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

Gmail Почта и нюансы темной темы

Gmail — один из самых технологичных и популярных почтовых клиентов в мире. Он быстро загружает письма, поддерживает современную HTML-верстку и автоматически подстраивает оформление под светлую или темную тему. Однако Gmail может вносить визуальные изменения, особенно в мобильных приложениях, поэтому нужно дополнительно проверять верстку.

В работе с Gmail учитывайте нюансы темной темы.

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

1. Может перекрашивать иконки и некоторые изображения с ограниченной цветовой палитрой или градиентами — особенно если на фото добавлена ссылка.
   

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

3. Накладывает ограничение на вес рассылки: HTML-код не должен превышать 102 КБ, иначе часть письма может быть обрезана.
   

4. Применяет еще более агрессивную политику в отношении темной темы для устройств на iOS: может автоматически перекрашивать даже изначально темные письма в светлые. Как следствие — полностью меняет визуальное восприятие.
   

Что делать:

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

2. Настройте отображение текста в темной теме с помощью медиазапросов. Если текст уже белого цвета, его можно оставить таким и для светлой, и для темной темы.

3. Используйте графику с мелкими деталями в формате PNG без градиентов — это снизит риск искажений.

Почта Mail.ru и работа со спецсимволами

Mail.ru — один из самых распространенных почтовых сервисов в России с широкой аудиторией и стабильной работой. Он поддерживает медиазапросы, хорошо справляется с адаптивной версткой и корректно обрабатывает большую часть HTML и CSS-стилей. Письма быстро загружаются как на десктопе, так и на мобильных устройствах.

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

Mail.ru предоставляет широкие возможности для кастомизации рассылок под разные темы. Благодаря поддержке медиазапросов можно полностью менять внешний вид письма в зависимости от того, какая тема используется на устройстве (светлая или темная).

Но: при получении рассылки Mail.ru удаляет все специальные символы.

Что делать: внимательно следить за «висящими» предлогами: предлог и следующее за ним слово лучше оборачивать в <span style="white-space: nowrap;«>...</span>. Так они не будут разрываться при переносе строки. Также нужно убедиться, что в прехедер не попадает случайный текст из основного письма.

Чек-лист по верстке email-рассылок

Чтобы письмо корректно отображалось у всех получателей, учитывайте технические особенности разных почтовых клиентов.

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

1. Используйте проверенные подходы. Старайтесь опираться на классическую табличную верстку — она до сих пор остается самым надежным способом обеспечить корректное отображение в разных почтовиках.

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

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

4. Следите за «весом» письма. Не перегружайте письмо лишними фрагментами кода и объединяйте блоки по ширине контента, чтобы не создавать лишних «оберток» для соседних блоков. Избыточная вложенность, лишние стили и блоки увеличивают объем кода и вероятность обрезки письма в Gmail. Также отображение письма зависит от системы телефона: на iOS и Android в темной теме блоки письма могут существенно отличаться друг от друга.

5. Тестируйте письма во всех популярных клиентах. Перед отправкой проверьте письмо в Outlook, Gmail (включая мобильные приложения), Яндекс Почте и Mail.ru. То, что хорошо работает в одном сервисе, может некорректно отображаться в другом.

6. Не забывайте про доставляемость. Хорошая верстка — это только половина дела. Убедитесь, что в DNS записи вашего домена прописаны SPF, DKIM, DMARC, и письма проходят базовые спам-проверки. Плохая репутация отправителя может перечеркнуть все усилия по дизайну.

7. Ориентируйтесь на реальный опыт. Даже при соблюдении всех правил что-то может «поехать» из-за обновлений почтового клиента или нестандартных настроек пользователя. Делайте контрольные отправки, собирайте обратную связь и при необходимости адаптируйте письма вручную.