Лучший способ верстки фоновых цветов и градиентов в HTML-письмах

### Основные выводы

— Понимание того, как фоновые цвета улучшают визуальную иерархию и вовлеченность, помогает создавать более привлекательные и доступные email-рассылки.

— Использование надежных («пуленепробиваемых») методов верстки гарантирует, что фоновые цвета будут корректно отображаться во всех основных почтовых клиентах, даже если изображения отключены.

— Реализация фоновых градиентов с правильными запасными вариантами (фоллбэками) позволяет сохранить стиль бренда и визуальное воздействие даже в Outlook и устаревших почтовых клиентах.

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

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

И не только разработчикам приходится угождать «богам входящих». С ростом популярности темной темы появилось еще больше сред, которые необходимо учитывать, и некоторые из них требуют от email-дизайнеров особой тщательности при выборе цветов.

В этой статье вы узнаете:

— Преимущества использования фоновых цветов

— Как сверстать сплошной цвет фона (и поддержку почтовиками)

— Как сверстать градиентный фон (и поддержку почтовиками)

— Советы по оптимизации для темной темы

## Зачем использовать фоновые цвета в письмах?

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

### Выделяйтесь во «Входящих»

Как и персонализация, отличный фон может создать впечатляющее первое впечатление — например, как в этом письме от Blurb.

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

### Разделяйте разделы

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

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

### Подчеркивайте идентичность бренда

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

Так какой способ лучше всего использовать в email-разработке? Я попросила коллегу и разработчика писем Litmus, Карин Слейтер, рассказать всё о верстке сплошных и градиентных фонов.

## Как сверстать сплошной цвет фона в HTML-письме

Фоновые цвета можно задать разными способами и в разных местах кода, но не все они одинаково поддерживаются почтовыми клиентами. Вот краткая таблица методов, работающих в топовых сервисах.

**Поддержка фоновых цветов почтовыми клиентами**

Мы знаем, что почтовые клиенты бывают привередливы. Какой же метод самый надежный? Ниже — наши рекомендации.

### 1. Используйте таблицы и ячейки таблиц

В HTML есть четыре места, куда можно добавить фоновый цвет:

—

—