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

Или добавьте цвет в определенную ячейку таблицы:

И это действительно так!

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

Как создать градиентный фон

Если вы хотите поднять фоновые цвета на ступеньку выше, попробуйте добавить градиенты.

Градиенты CSS поддерживаются не везде, но есть резервные варианты, которые позволяют отображать градиент почти во всех почтовых клиентах.

Поддержка почтового клиента для градиентного фона

Вот как можно начать.

1. Примените фон с линейным градиентом CSS к таблице или ячейке таблицы.

Как и в случае с однотонным фоном, примените фон с линейным градиентом CSS к таблице или ячейке таблицы или содержащему его div (мы вскоре рассмотрим обходной путь Outlook), чтобы создать что-то вроде этого:

В этом примере градиент включает три цвета: фиолетовый, пурпурный и оранжевый. Стиль начинается в HTML с применения сплошного цвета к атрибуту bgcolor. Затем во встроенных стилях CSS мы повторяем этот резерв, используя свойство background и метод RGB.

Чтобы создать линейный градиент, мы снова включаем свойство background и применяем стиль linear-gradient. Поскольку создаваемый нами градиент отображается по диагонали от верхнего левого угла до нижнего правого угла, мы начинаем с синтаксиса угла градиента (315deg). Затем в том порядке, в котором мы хотели бы, чтобы отображались цвета, мы используем метод RGBA для объявления каждого цвета.

После цветового стиля RGBA укажите положение, в котором должен отображаться этот цвет. Это поможет красиво смешать цвета. Чтобы получить представление о том, как выбрать положение цвета, вы можете использовать онлайн-генератор градиентов CSS.

У вас должен получиться код, который выглядит так:

2. Создайте резервную копию для Outlook с градиентами VML.

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

Градиенты VML лучше всего работают с двумя цветами. Есть возможность использовать три или более цветов, но оказывается, что это очень похоже на что-то из начала 1990-х годов, и нет особого контроля над тем, что вы можете сделать, чтобы приручить это. Если вам нужно три или более цветовых градиента, лучше всего использовать изображение (и я покажу вам, как это сделать на следующем шаге).

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

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

3. Создайте резервную копию на основе изображений для Outlook, Yahoo и AOL.

Если у вас есть подписчики на Yahoo, AOL, Outlook (iOS и Android) и Outlook.com, вы можете создать для них резервные копии на основе изображений.

Добавьте класс «градиента» к ячейке или таблице, к которой вы хотите применить градиент. Затем, используя различные методы таргетинга, вы можете назначить фоновое изображение CSS, чтобы переопределить стиль градиента CSS, где градиент не отображается.

Чтобы настроить таргетинг на Outlook.com, используйте что-то вроде этого:

Чтобы настроить таргетинг на Yahoo и AOL, используйте:

Чтобы настроить таргетинг на оба мобильных клиента Outlook, используйте:

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

4. Используйте сплошной резервный цвет для всех остальных почтовых клиентов.

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

В этом случае используйте атрибут bgcolor с шестизначным цветом HEX, чтобы обеспечить резервный цвет для настольных клиентов Windows 10 и Office 365. Web.de будет использовать свойство фона CSS в качестве запасного варианта.

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

Или используйте этот код, если хотите раскрасить только определенную ячейку таблицы:

Если вы не знакомы с VML и хотите убедиться, что у вас все правильно, в Campaign Monitor есть удобный инструмент, разработанный Стигом для добавления фоновых изображений в электронную почту. Вы можете использовать тот же инструмент и заменить v: fill type = "tile" на v: fill type = "gradient", чтобы создать градиент. Обязательно объявите оба цвета начального и конечного градиента с помощью color = ”” и color2 = ”” и удалите атрибут src = ”” . В приведенных выше примерах используйте v: fill type = ”frame”, чтобы изображение занимало весь кадр и не повторялось. Это также отличное исправление для фоновых изображений сетчатки глаза, но мы оставим это Кортни Фантинато.

Не забывайте темный режим

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

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

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

В то время как почтовые клиенты, такие как Apple Mail, iPad, собственные почтовые приложения iPhone, HEY и приложение Outlook, могут быть нацелены на использование встроенного стиля CSS, существуют также почтовые клиенты, которые используют собственный рендеринг по умолчанию, чтобы предложить решение темного режима.

Приложения Outlook.com, Office 365 и Gmail для iOS и Android частично или полностью инвертируют цвета для создания темного режима, иногда с ужасными результатами.

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

Совет № 1. Делайте осознанный выбор дизайна с помощью цветового тестирования.

Может быть немного душераздирающе видеть, как ваши цвета меняются так, как вы не планировали. И это несколько беспокоит, когда цвет не меняется, а цвет шрифта меняется - и все ваши соображения доступности выходят из-под контроля.

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

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

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

Совет № 2. Используйте частичные исправления для приложений Gmail

Способы обуздать инверсию цвета в приложениях Gmail стали известны благодаря неустанным усилиям сообщества электронной почты.

переопределение цветов темного режима macOS / iOS:

Для цветов фона используйте одноцветный градиент:
фоновое изображение: линейный градиент (# ffffff, # ffffff)

Я даже не могу поверить, что это работает, но это действительно так ... даже мои пуговицы фирменные.
Спасибо @ThiesBW #emailgeeks

- Annett Forcier (@The_Annett) 11 декабря 2019 г.

Применяя линейный градиент, содержащий цвет вашего фона, к элементам контейнера, вы можете заставить выбранный вами цвет отображаться в средах светлого и темного режима Gmail.

Для этого вам нужно добавить линейный градиент к свойству CSS background-image, используя метод цвета HEX. Затем сделайте оба цвета градиента такими же, как и Gmail, например:

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

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

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

Удивите подписчиков цветом

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

Итак, начните с этого руководства - и нам не терпится увидеть ваши красочные фоны в наших почтовых ящиках.

Убедитесь, что ваши цвета отображаются правильно Видят ли подписчики ваши электронные письма так, как вы задумали? Просматривайте, как ваши электронные письма выглядят в более чем 90 почтовых клиентах, приложениях и устройствах, с помощью Litmus Email Previews. Начать бесплатную пробную версию Litmus →

Первоначально опубликовано 27 марта 2018 г. Жюстин Джордан. Последнее обновление 21 апреля 2021 г.