Блог 30.11.2022

Как добавить или изменить фон в HTML-письмах

601

Рассказываем обо всех способах работы с фоном при создании рассылки.

Письма на стандартном #ffffff — лаконично, удобно, читаемо, да и видно во всех почтовиках. Но что, если нужно пободрее или вообще поставить картинку фоном на всё письмо?

Вот несколько простых советов о том, как добавлять или изменять фон в HTML-письмах.

Как «раскрасить» фон с помощью HTML

Цвета в письмах прописывают в виде шестнадцатеричных чисел формата HEX (например, #444444). Важно помнить, что сокращения HEX обрабатывают не все почтовики, поэтому их в вёрстке рассылок использовать не стоит. Цвета формата RGB тоже работать не будут.

При вёрстке HTML-писем фон задают через атрибуты background="" и bgcolor="" для тега <table>.

Не все почтовые клиенты обработают фон, который прописан через стили CSS. Поэтому свойство background и его производные (background-image, background-visibility, background-size) лучше не применять.

<html>
<head>
    <meta charset="utf-8">
    <title>Цвет текста и фона</title>
    <style>
        .colortext {
            background-color: #ffe; /* Цвет фона */
            color: #930; /* Цвет текста */
        }
    </style>
</head>
<body>
<form method="post" action="handler.php">
    <p><input type="text" class="colortext">
        <input type="submit" name="Submit" value="Послать"></p>
</form>
</body>
</html>

Используем один цвет

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

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

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

Вот как выглядит письмо от Моо, без изображений. Фон под текстом остался на месте, потому что прописан в коде, а ключевые изображения письма были в jpg.

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

цвет фона фотографий;
цвет фона HTML-блока с текстом;
цвет фона alt, если изображения не отображаются.

Если вы верстальщик на аутсорсе, до дизайнера не добраться, а гармоничное письмо деть хочется, используйте вот этот сервис. Он поможет «вытащить» все необходимые цвета из картинки в уже HEX-формате.

Несколько цветов

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

Если хочется сделать блоки письма разного цвета, логично прописать фон через атрибуты background=»» и bgcolor=»» в <table> для каждого из них.

Совсем простой способ

Если только что вы запутались в кодах, рекомендуем обращаться к конструкторам писем, таким как, например, Letteros.

Здесь перекрасить блоки можно в один клик. А вторым кликом, форматировать блок в изображение, если это необходимо.

Изображения в качестве фона для письма

Некоторые конструкторы позволяют сделать изображения фоном блоков письма. Так можно и в Letteros.

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

Благодаря изображениям на фоне всего письма ваши рассылки будут более впечатляющими и тематическими.

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

Подбирая картинку на фон, важно помнить о стыках. Это как с обоями в комнате: паттерн должен хорошо смотреться, если отойти подальше и смотреть на всю комнату в целом.

На этой платформе от Campaign Monitor вы можете подобрать «пуленепробиваемый» фон для вашей рассылки и быть уверенным, что он будет выглядеть отлично на всех ОС. Здесь же прописаны HEX-цвета изображения для кода и сам кусочек кода, который вставляется в <body>.

Правила работы с фоном‑картинкой

При добавлении фоновых изображений в имейлы важно помнить о некоторых особенностях.

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

601