Гайд по тёмным темам для email-маркетолога

Тёмные темы

Перевод статьи из блога Litmus

В 2019 году крупные почтовые клиенты объявили о поддержке тёмной темы или Dark Mode. Так вопрос о том, как адаптировать свои письма к новой среде, стал большой головной болью для email-маркетологов.

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

Читайте также

Чек-лист для дизайнера: что проверить в макете перед сдачей

Что такое тёмный режим

Тёмный режим — это перевернутая цветовая схема, которая использует светлую типографику, элементы пользовательского интерфейса и иконки на тёмном фоне. Это одна из самых горячих тенденций цифрового дизайна в уходящем году. Все, от операционной системы Apple до таких приложений, как Twitter, Slack и Facebook Messenger, теперь позволяют пользователям переключаться в тёмный режим.

Многие пользователи предпочитают именно тёмный режим, и на это есть свои причины:

  • меньше устают глаза, особенно в условиях недостаточной освещённости;
  • уменьшает яркость экрана, экономя время автономной работы;
  • улучшает удобочитаемость, чёткость контента.

Какие почтовые клиенты поддерживают тёмную тему

Мобильные приложения:

  • Gmail App (Android)
  • Gmail App (iOS)
  • Outlook App (Android)
  • Outlook App (iOS)
  • Яндекс.Почта
  • Mail.ru

Десктопные:

  • Apple Mail
  • Outlook 2019 (Mac OS)
  • Outlook 2019 (Windows)

Веб-клиенты:

  • Outlook.com
  • Яндекс. Почта
  • Mail.ru

Красиво сверстаем ваши письма

Дизайн и вёрстка email-рассылок

Как почтовые клиенты применяют тёмный режим к письмам

На данный момент существует три принципиально разных типа цветовых схем, используемых почтовыми клиентами.

Никаких изменений цвета

В некоторых почтовых клиентах вы можете изменить пользовательский интерфейс, и это никак не повлияет на то, как отображаются письма. Так, iOS и Apple Mail по умолчанию отображают дизайн письма в Light Mode, если вы специально не добавите код для запуска Dark Mode.

Пример письма в Apple mail:

письма c тёмной темой в Apple mail

Но есть исключение: обычное текстовое сообщение может запустить применение тёмной темы. Чтобы этого избежать, добавьте к текстовому сообщению изображение 2×1. Вы можете добавить в код пиксель отслеживания 1×1, сохраняя ощущение «простого текста».

Частичная инверсия цвета

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

Частичная инверсия цвета на Outlook:

Инверсия цвета на Outlook

Полная инверсия цвета

Это наиболее агрессивная цветовая схема. Она не только инвертирует области со светлым фоном, но и влияет на тёмный фон. Поэтому, если вы уже разработали дизайн под тёмную тему, эта схема по иронии судьбы заставит их стать светлыми. К сожалению, сейчас эту тактику используют Gmail (iOS 13) и Outlook 2019 (Windows).

На скриншоте из Outlook 2019 (Windows) видно, что белый фон стал тёмно-серым, а области, которые ранее имели тёмно-синий фон со светлым текстом, теперь стали светло-синими с тёмным текстом.

Скриншот из Outlook 2019

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

Тестирование обычного письма (без таргетинга на тёмный режим) в почтовых клиентах с тёмным интерфейсом:

Изменение цвета почтовым клиентом

Как применять собственные стили в тёмном режиме

Вот два метода, которые вы можете использовать:

@media (prefers-color-scheme: dark)

Этот метод работает почти так же, как блок стилей внутри запроса @media для адаптации под мобильный. Но этот блок CSS нацелен на любой пользовательский интерфейс, в котором настроен тёмный режим.

[data-ogsc] и / или [data-ogsb]

Это метод впервые предложил Марк Роббинс для таргетинга в приложении Outlook. Кажется, что этот способ имеет достаточно узкое применение, однако относительно легко просто скопировать стили @media (prefers-color-схема: dark), которые вы уже применили, и просто добавить соответствующие [data-ogsc] и / или [data-ogsb] префиксы к каждому правилу CSS.

Но! В электронной почте нет последовательной поддержки этих методов таргетинга.

поддержка @media

Что стоит помнить, применяя эти методы.

  1. Оптимизируйте логотипы и другие изображения для всех стилей.
  2. Добавьте прозрачные контуры к прозрачным PNG с тёмным текстом для удобочитаемости в почтовых клиентах, где нет таргетинга на тёмный режим (Gmail App и Outlook 2019 Windows). Так вы избежите проблем, если почтовый клиент будет использовать частичную или полную инверсию цвета.

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

    Непрозрачны и есть слои с фоном

  3. Включите тёмный режим в письме для пользователей, которые используют тёмный интерфейс
  4. Включите эти метаданные в тег <head> . Так вы будете уверены, что в вашем письме включен тёмный режим для подписчиков.

    <meta name="color-scheme" content="light dark">
    
    <meta name="supported-color-schemes" content="light dark">
    
    

    Для поддержки этих метаданных также необходимо добавить CSS:

    <style type="text/css">
    
    :root {
    
      color-scheme: light dark;
    
      supported-color-schemes: light dark;
    
     }
    
    </style>

  5. Добавьте стили тёмного режима для @media (prefers-color-scheme: dark)
  6. Добавьте медиазапрос в ваш встроенный раздел <style><\style> для кастомных тёмных стилей в iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS) и Outlook App (iOS).
    Классы .dark-img и .light-img особенно полезны для показа логотипов, зависящих от выбранного режима.
    Пример CSS:

    @media (prefers-color-scheme: dark ) {
    
     /* Shows Dark Mode-Only Content, Like Images */
    
     .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
    
     /* Hides Light Mode-Only Content, Like Images */
    
     .light-img { display:none; display:none !important; }
    
     /* Custom Dark Mode Background Color */
    
     .darkmode { background-color: #272623 !important; }
    
     /* Custom Dark Mode Font Colors */
    
     h1, h2, p, span, a, b { color: #ffffff !important; }
    
     /* Custom Dark Mode Text Link Color */
    
     .link { color: #91ADD4 !important; }
    
    }

  7. Дублируйте стили тёмного режима с префиксом [data-ogsc] и / или [data-ogsb]
  8. Пример CSS:

    /* Shows Dark Mode-Only Content, Like Images */
    
    [data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
    
    /* Hides Light Mode-Only Content, Like Images */
    
    [data-ogsc] .light-img { display:none; display:none !important; }
    
    /* Custom Dark Mode Background Color */
    
    [data-ogsc] .darkmode { background-color: #272623 !important; }
    
    /* Custom Dark Mode Font Colors */
    
    [data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }
    
    /* Custom Dark Mode Text Link Color */
    
    [data-ogsc] .link { color: #91ADD4 !important; }

  9. Примените ваши стили для тёмного режима к телу письма
  10. Убедитесь, что все ваши HTML-теги имеют соответствующие классы Dark Mode. Вот пример классов .dark-img и .light-img, которые появляются в логотипах Litmus в Light Mode и Dark Mode.
    Пример HTML:

    <!-- start HEADER_LOGO -->
    
    <a href="http://litmus.com/" target="_blank">
    
      <img class="light-img" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" width="163" height="60" alt="Litmus" style="color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />
    
      <!-- The following Dark Mode logo image is hidden 
    
      with MSO conditional code and inline CSS, but will be     
    
      revealed once Dark Mode is triggered -->
    
      <!--[if !mso]><! --><div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center">
    
         <img src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-white.png" width="163" height="60" alt="Litmus" style="color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />
    
      </div><!--<![endif]-->
    
    </a>
    
    <!-- end HEADER_LOGO →
    

    Читайте также

    HTML вёрстка писем — полная инструкция

  11. Всегда тестируйте!
  12. Используйте Litmus Email Previews, чтобы посмотреть как будут выглядеть ваши письма в тёмном режиме.


К сожалению, эти методы не решают проблему целиком. Мы можем сделать отдельную тёмную тему письма для приложений iOS, но в этих клиентах и так нет проблем с отображением светлых писем. А Gmail, Яндекс и Mail.ru не реагируют на указанные в статье медиа-запросы. Поэтому пока единственное решение — добавлять светлый фон под иконки и логотипы или делать прозрачный фон у контрастных картинок.

Евгений Шишков, руководитель отдела вёрстки Email Soldiers

Узнавайте об обновлениях блога Email Soldiers первым

Спасибо!

Осталось подтвердить подписку — кликнуть по кнопке в письме, которое мы вам отправили.

Похожие статьи

Как мы делаем красивую GIF-анимацию в письмах

Рассказали про гифки ручной и автоматической сборки, про возникающие проблемы и их решения, про баннеры с гифками и характеристики картинок для анимации.

Для чего нужен мастер-шаблон
Что включить в дизайн рассылок банков, недвижимости, ecommerce

Собрали полный список всего, что включить в дизайн рассылок банков, недвижимости, ecommerce, какую информацию нужно запросить у клиента и какие блоки использовать. Разбираем на своих примерах.

Дизайн, вёрстка, текст рассылки
Клиентам о email-маркетинге, часть 3. Дизайн, вёрстка, текст рассылки

Какими должны быть текст, дизайн и вёрстка в рассылках, чтобы они дошли до подписчиков и заинтересовали их.