Дизайнеры email-рассылок, вот ваш новый вызов: Dark Mode от Apple

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

Dark Mode предоставляет темную тему для всех основных настольных приложений, включая Finder, iTunes, Photos и, что самое важное для нас, фанатов email: **Apple Mail.**

**Как Dark Mode влияет на дизайн email?**

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

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

**Несогласованное отображение в Apple Mail и Safari**

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

**Как оптимизировать дизайн email для Dark Mode?**

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

😔 #filearadar https://t.co/ea6uUd6SZC

— Guilherme Rambo (@_inside) 14 июня 2018 г.

Это вызвало масштабное обсуждение необходимости поддержки медиазапросов для темных тем. В настоящее время Apple экспериментирует с приватным API для Dark Mode, используя следующий медиазапрос:

`@media (prefers-dark-interface)`

Однако Apple действует осторожно и не спешит открывать доступ, поскольку хочет поработать над созданием универсального стандарта:

Ты это сказал, а не я. 😉

Мы рассматриваем возможность добавления веб-ориентированного медиазапроса, но это требует дополнительного осмысления. Стандартизация — это важная вещь, а API остается навсегда. 🙂

Мы будем рады услышать любые ваши мысли в Radar или в публичном баг-трекере WebKit (https://t.co/YTOGyIsAyz).

— Ricky Mondello (@rmondello) 14 июня 2018 г.

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

«`

@media (-ms-high-contrast)

«`

Также есть фантастическая ветка обсуждения этой проблемы в Github рабочей группы CSS W3C. Лично мне нравится предложение `prefers-ui-theme` со значениями `light-on-dark`, `dark-on-light` и `no-preference`. Это логично, конкретно и просто.

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

Но вот и хорошие новости. То, что вы (пока) не можете таргетироваться конкретно на пользователей Dark Mode, не означает, что вы не можете оптимизировать свои письма для комфортного чтения в темной теме.

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

Кроме того, мы можем оптимизировать дизайн наших писем, создав **переключатель Dark Mode или доступности** с помощью таргетинга на WebKit, который позволит пользователям переключаться между светлым и темным дизайном.

Вот базовая концепция демо-версии:

Вы можете отправить себе тестовое письмо с приведенным выше кодом в Dark Mode, чтобы поэкспериментировать. Простая предпосылка заключается в использовании флажка (checkbox), который изменяет стили цвета фона и текста в зависимости от того, включен он или выключен. Этот тип интерактивности поддерживается в основном в Apple Mail, iOS Mail и Outlook для Mac, что в совокупности занимает около 42% мирового рынка на данный момент. Взгляните на полноценное письмо, разработанное с поддержкой светлой и темной темы и переключателем доступности.

**Вот цвета Dark Mode в macOS Mojave:**

**Фон:**#2d2d2d**Цвет текста:**#dfdfdf**Цвет ссылок:**#1b89ef

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

Это также дает возможность зафиксировать предпочтения подписчиков относительно того, какую тему письма (светлую или темную) они хотят видеть по умолчанию. Представьте себе подписчика, который устанавливает свои предпочтения по теме в настройках вашего приложения или рассылки, эти данные сохраняются в вашем ESP (сервисе email-рассылок), а затем используются как тема по умолчанию для всех будущих писем. Лично я в восторге и надеюсь, что мы увидим этот уровень персонализации, вытекающий из этой среды. Конечно, этот подход не является абсолютно безупречным (в сфере email ничего не бывает идеальным), так как, например, пользователи могут открыть письмо в другом приложении, но он хотя бы учитывает их предпочтения (это также подчеркивает, почему нам нужна поддержка таргетинга на темные темы).

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

[Твитнуть это >>]

Разработка переключателя светлой/темной темы на самом деле не требует больших затрат и усилий, и при правильном подходе является масштабируемым решением. Предоставление высококонтрастной версии для наших писем — это то, что мы должны делать независимо от Dark Mode. Многие не найдут времени на оптимизацию под это, но именно это отделит плохие/посредственные/хорошие письма от выдающихся. Бренды мирового класса и топовые команды email-маркетинга будут поддерживать Dark Mode.

**Вызов в дизайне email, который не связан с рендерингом**

Dark Mode создает еще одну среду, которую необходимо учитывать в нашем дизайне email. Она подчеркивает все возрастающую потребность учитывать контекст подписчиков.

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

Проблемы дизайна email не всегда связаны с рендерингом. В основе всего главная задача всегда сводится к созданию персонализированного опыта для подписчиков. Dark Mode — это просто последняя итерация этого процесса.

[Твитнуть это >>]

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

**Что вы думаете?**

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

____________________________________

Этот пост впервые появился на www.kevinmandeville.com.