Содержание

    Краткий гайд по тёмной теме в письмах

    Разобрались досконально с тёмной темой в письмах, провели исследование и теперь делимся знаниями с вами. Этот краткий, но ёмкий гайд поможет вам разобраться:

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

    Почему в письмах используют тёмную тему

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

    Тёмную тему в рассылках предпочитают

    • 17% мобильных пользователей (ист. EMX)
    • 45% пользователей Apple mail на iOS (ист. EMX)
    • 7,5% пользователей Apple mail на MacOS (ист. Litmus)

    Как почтовики реагируют на тёмную тему

    • Не реагируют на тёмную тему вообще.
      Большинство десктопных почтовых клиентов и некоторые веб-почтовики.
    • Частично инвертируют яркость цветов — меняют светлый фон на тёмный и тёмный текст на светлый. Изначально тёмный фон со светлым текстом останутся неизменными.
      Яндекс на мобильных, Mail.ru на мобильных и в веб-интерфейсе, Outlook на мобильных и в веб-интерфейсе, Gmail на Андроиде.
    • Делают инверсию яркости независимо от изначального цвета: даже тёмный фон со светлым текстом преобразуются в светлый фон с тёмным текстом.
      Gmail на iOS.
    • Поддерживают кастомизацию элементов в зависимости от выбранной темы на устройстве.
      Apple mail на MacOS и iOS, Outlook в веб-интерфейсе и на мобильных, Mail.ru в веб-интерфейсе.

    Что делать, чтобы письма выглядели хорошо в любой теме

    1. Старайтесь использовать цвета, которые одинаково контрастно смотрятся и в светлой, и в тёмной теме.
    2. Используйте изображения с прозрачным фоном — PNG.
    3. Делайте светлую обводку, тени или свечение у тёмных элементов на картинках с прозрачным фоном, чтобы они не терялись в тёмной теме.
    4. Кнопки, свёрстанные картинками, должны быть видны на любом фоне. Делайте их контрастного цвета или добавляйте обводку.
      тёмная тема в рассылках
    5. На этапе дизайна замените в макете фон на инвертированный по яркости и проверьте, как элементы будут смотреться на нём.
      * Инвертированные цвета можно взять из таблички в конце этого гайда.

    Кастомизация тёмной темы в рассылках

    В Apple Mail на MacOS и iOS, в веб-интерфейсе Mail.ru и частично в Outlook можно настроить индивидуальный дизайн для светлой и тёмной темы: фон, цвета, шрифты, графику.

    В Apple Mail и в веб-интерфейсе Mail.ru для этого используется медиазапрос @media (prefers-color-scheme: dark).

    Как настроить:

    1. «Сообщите» почтовику, что ваши емейлы поддерживают тёмную тему, — в HTML-коде вашего письма добавьте метатеги в тег <head>:
      <meta name=”color-scheme” content=”light dark”>
      <meta name=”supported-color-schemes” content=”light dark”>
      
    2. Настройте почтовики, которые поддерживают кастомизацию, с помощью медиазапроса в <head>:
      @media (prefers-color-scheme: dark) { }

    Поменяйте цвета шрифтов и фона — тёмный текст на светлый, а светлый фон — на тёмный:

    @media (prefers-color-scheme: dark) {
    .copy {
     background-color: #222222;
     color: #eaeaea;
    }
    }

    Можно поменять и размер шрифта, добавив к CSS, например:

    @media (prefers-color-scheme: dark) {
     .copy {
     background-color: #222222;
     color: #eaeaea;
     font-size: 20px;
     line-height: 24px;
     }
    }
    

    Можно предусмотреть один логотип для светлой темы и другой — для тёмной. Для этого пропишите в коде два варианта логотипа и соответствующие CSS для отображения каждого из них:

    <img class=”light-img” src=”logo-light.png” alt=””>
    <img class=”dark-img” src=”logo-dark.png” alt=”” style=”display: none;”>
    
    @media (prefers-color-scheme: dark) {
    .img_light { display: none !important; }
    .img_dark { display: block !important; }
    }
    

    Для кастомизации элементов под тёмную тему в Outlook в веб-интерфейсе и на Андроиде можно использовать только префикс для селекторов CSS [data-ogsc]:

    [data-ogsc] .dark-mode { display: block !important; }
    

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

    Пример кастомизации картинок и цвета текста с data-ogsc:

    [data-ogsc] .img_light { 
    display: none !important; 
    }
    [data-ogsc] .img_dark { 
    display: block !important; 
    }
    [data-ogsc] .text_block { 
        color: #ffffff !important;
        background: #222222 !important;
    }
    [data-ogsc] .text_block a{ 
        color: #fff2f2 !important;
    }
    

    Outlook на iOS поддерживает и медиазапросы, и префикс селектора CSS [data-ogsc], но и то и другое лишь частично. При использовании медиазапросов Outlook на iOS позволяет заменять изображения, но некоторые цвета в самом письме могут остаться неизменными. А при использовании data-ogsc Outlook на iOS вообще не позволяет менять изображения, некоторые цвета при этом также могут остаться неизменными.

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

    Сравнительная таблица почтовиков

    тёмная тема в рассылках

    Инвертирование цвета в разных почтовиках

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

    тёмная тема в рассылках

    Источники

    Разработаем письма всем на зависть
    Обращайтесь!
    Имя
    Email *
    Array
    (
        [0] => WP_Term Object
            (
                [term_id] => 1425
                [name] => Статьи
                [slug] => articles
                [term_group] => 0
                [term_taxonomy_id] => 1907
                [taxonomy] => category
                [description] => 
                [parent] => 0
                [count] => 556
                [filter] => raw
                [cat_ID] => 1425
                [category_count] => 556
                [category_description] => 
                [cat_name] => Статьи
                [category_nicename] => articles
                [category_parent] => 0
            )
    
    )
    
    Поделиться статьёй
    Подписаться на рассылку