Как добавить или изменить фон в HTML-письмах
Рассказываем обо всех способах работы с фоном при создании рассылки.
Письма на стандартном #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>.
Правила работы с фоном‑картинкой
При добавлении фоновых изображений в имейлы важно помнить о некоторых особенностях.
- Изображения, которые вы выбираете, должны быть тематическими и не отвлекать от основного сообщения письма.
- Добавляйте только одно изображение как фон для всего имейла. Это повышает читабельность, в то время как разные изображения только «намусорят» в письме.
- Если используете конструктор, включайте адаптивность изображения. Это поможет корректно отображать фон на мобильных и десктопных устройствах.
