Дизайнеры email-рассылок, ваш следующий вызов: Темная тема в Apple

В 15-й версии настольной операционной системы Apple, macOS Mojave, появилась важная новая функция: «Темная тема» (Dark Mode). Она использует более темную цветовую палитру для всех окон, представлений, меню и элементов управления, что делает интерфейс более комфортным для работы в условиях низкой освещенности или ночью. Пользователи могут установить темную тему как основной стиль оформления или настроить автоматическое переключение между светлым и темным режимами в зависимости от времени суток.

Темная тема обеспечивает темное оформление для всех основных приложений, включая Finder, iTunes, «Фото» и, что самое важное для нас, email-гиков: Apple Mail.

Как темная тема влияет на дизайн email-писем?

Хорошие новости: по умолчанию темная тема никак не влияет на HTML-письма. Она применяется только к личным сообщениям и письмам в формате простого текста. Даже если в вашем HTML-письме не задан цвет фона, он все равно будет отображаться как белый. Так что вам не нужно беспокоиться о том, что темная тема «сломает» ваш код или отображение стандартных HTML-писем.

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

Несоответствие отображения в Apple Mail и Safari

Странно то, что поведение Apple Mail в темном режиме не совпадает с поведением Safari. Если для вашего сайта не задан цвет фона, Safari в темном режиме применит свой темный фон по умолчанию, из-за чего дизайн сайта может «сломаться». Так что веб-дизайнеры в этот раз столкнулись с более сложной задачей, чем email-дизайнеры.

Как мы можем оптимизировать дизайн писем для темной темы?

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

Это вызвало масштабную дискуссию о необходимости поддержки медиа-запросов для темных тем. Apple в настоящее время экспериментирует с закрытым API для темного режима, используя медиа-запрос: @media (prefers-dark-interface).

Однако Apple проявляет осторожность, так как они хотят создать универсальный стандарт.

Microsoft уже представила специфичный для вендора медиа-запрос, который определяет, отображается ли приложение в режиме высокой контрастности: @media (-ms-high-contrast).

Существует также отличная ветка обсуждения в репозитории W3C CSS Working Group на GitHub по этому вопросу. Лично мне нравится предложение prefers-ui-theme со значениями light-on-dark, dark-on-light и no-preference. Это логично, конкретно и просто.

Альтернативные способы оптимизации писем для темной темы

Но есть и хорошие новости. Если вы не можете (пока что) нацелиться на пользователей темной темы, это не значит, что вы не можете оптимизировать опыт чтения.

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

Кроме того, мы можем оптимизировать наши email-дизайны, создав переключатель темной темы или специальный инструмент доступности с использованием WebKit, который позволит пользователям переключаться между светлым и темным дизайном.

Это позволяет подписчикам выбрать предпочтительную тему, которая будет запоминаться в вашей системе рассылок и использоваться по умолчанию. Я надеюсь, что мы увидим такой уровень персонализации в будущем.

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

Разработка переключателя тем — это не такие уж большие затраты, а реализация вполне масштабируема. Создание версии с высокой контрастностью — это то, что мы должны делать независимо от наличия темной темы.

Вызов для email-дизайна не только в рендеринге

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

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

Что вы думаете об этом?

Как вы будете проектировать письма для темной темы? Есть ли у вас уникальные идеи? Будете ли вы внедрять переключатель тем? Дайте знать @KevinMandeville.