Фон в email-рассылке: размеры, HTML, адаптивность и примеры

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

В этой статье разберёмся, зачем письму фон, каким требованиям он должен соответствовать и как его установить — в конструкторе или редакторе кода. 

Что вообще считается фоном в письме — и как он работает

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

Использование фона в письме даёт целый ряд преимуществ.

• Привлекает внимание. Хорошо подобранный фон помогает выделить ключевой блок, оффер или CTA-кнопку.
• Позволяет выделиться. Не все отправители используют фоны, поэтому те, кто использует, будут запоминаться лучше.
• Создаёт настроение. Светлый фон может восприниматься как лёгкий и минималистичный, тёмный — как более премиальный или драматичный. Это влияет на первое впечатление от рассылки.
• Поддерживает брендинг. Фирменные цвета и характерный визуальный стиль делают рассылку узнаваемой.
• Помогает структурировать письмо. Разные фоновые области позволяют визуально разделить заголовок, основной текст, преимущества, отзывы и призыв к действию.
• Влияет на читаемость. Использование подложки помогает регулировать контрастность и может облегчать восприятие текста: особенно это важно для тех, кто использует шрифт цвета, отличного от черного.
• Может влиять на конверсию. Хороший фон направляет взгляд к важным элементам и уменьшает визуальный шум. Но сам по себе цвет фона не гарантирует больше кликов — результат зависит от дизайна в целом и, конечно, содержания.

Чтобы понять, что представляет собой фон письма с технической точки зрения, давайте вспомним основы HTML-вёрстки рассылок: ключевая особенность в том, что каждое письмо в коде представляет собой таблицу. «Заливка» этой таблицы — не важно, просто цветом или изображением — это и есть фон. Но и здесь есть нюансы.

Фон и поля — одно и то же?

Важно понимать, что фон письма может не только задаваться по-разному, но и по-разному отображаться в почтовых сервисах. Часто у писем в почтовиках появляются серые или белые поля: 

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

У каждого письма есть ограниченный по ширине контейнер, и если область за его пределами не окрашена в белый (или другой цвет) самим письмом, мы увидим фон почтовика — тот самый серый бэкграунд. Соответственно, наличие «полей» у фона письма будет зависеть от двух факторов: 

1. Того, адаптивен ли фон и насколько жестко прописан его размер.
2. Того, на каком экране и в каком масштабе пользователь открывает рассылку: почтовик не может нарушить пропорции письма, поэтому не может бесконечно его растягивать в длину или в ширину (если это не прописано в коде) и добавляет поля. 

Какой выбрать фон для email

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

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

Но также на выбор фона влияет и другая группа факторов — они связаны с целью и содержанием рассылки. Здесь работает связка с ожиданием пользователя, ведь письмо должно восприниматься целостно. Уведомление «Ваш заказ отменен» на весёленьком паттерне скорее вызовет у пользователя непонимание и даже негатив, а письмо с затейливой интригующей темой как будто требует и продолжения игривости в дизайне, включая фон. 

Для удобства мы прописали рекомендации по выбору фона для разных типов рассылок в одной таблице.

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

Однотонный (цветной)

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

• предсказуемое поведение — ни один почтовик его не испортит, в самом худшем случае просто «съест» и не отобразит;
• не отвлекает от CTA и других важных элементов;
• легко вписать в общий брендинг;
• не мешает чтению.

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

Паттерн / текстура

Паттерн — это повторяющееся изображение; в письме его можно задать как единой картинкой, так и «замостить» пространство (особенно это полезно, когда картинка в недостаточно высоком разрешении). 

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

К паттернам стоит с осторожностью относиться в длинных письмах и лучше не использовать их в рассылках с важной информацией: они могут усложнять восприятие. Ещё один нюанс — в разных почтовых клиентах они могут по-разному обрезаться и в итоге внешний вид письма будет не всегда предсказуем. 

Один из более нейтральных подвидов паттернов — это текстура; например, ткань, асфальт, бумага, лёд… Такой фон помогает сделать письмо более «материальным» и передать правильное настроение. Просто представьте письмо от турагентства, фон в котором имитирует песок на пляже — круто же!

Градиент

Градиентный фон переходит от одного цвета к другому и помогает правильно расставить акценты и визуально выстроить иерархию содержимого. Кроме того, он пригодится, если у бренда несколько ключевых цветов — при помощи градиента их можно запросто объединить. Ну, а ещё это просто стильно!

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

Как сделать градиент. Шпаргалка для недизайнеров

Фоновое изображение

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

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

Но картинке не обязательно быть подложкой — она может, например, обрамлять письмо, делая его визуально более интересным и цепляющим.

Анимация

Да, так тоже можно — просто вместо статичного изображения используйте GIF. 

Но учтите, что «мельтешащая» гифка под текстом и кнопками точно будет отвлекать и мешать чтению. Так что либо выбираем гифку с небольшой частотой смены кадров (и вообще небольшим количеством кадров), либо интегрируем её в статичный фон, как это сделано, например, тут: 

Как добавить фон в письмо

В конструкторе рассылок

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

Итак, создаем новое письмо: можно выбрать из шаблонов или создать с нуля. Чтобы выбрать фон, нужно открыть раздел «Стили» — для этого нажмите на кисточку на боковой панели справа. 

В этом разделе можно задать ширину письма, а также выбрать фон и параметры его отображения: настроить горизонтальные или вертикальные повторения и размер. Contain — «вписать» фон в ширину макета без изменения пропорций, Cover — поставить во всю ширину картинку, обрезав «лишние» края.

Всё, что останется после этого — проверить, как фон будет отображаться в почтовиках. Вот тестовое на Gmail: все масштабируется и растягивается под окно, как и предполагалось.

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

Все нюансы отображения фонов можно посмотреть и в редакторе кода. 

Через код HTML

HTML и CSS можно написать хоть в «Блокноте» и вставить в письмо, если по каким-то причинам вы не хотите задавать фон через конструктор. Логика здесь довольно простая. В HTML-структуре письма есть четыре места, куда можно добавить фон:

• <body>;
• <div>;
• <table>;
• <td>.

Наиболее безопасное место для добавления фона — это таблица (<table>) или ячейка таблицы (<td>). Так его корректно увидят большинство почтовиков.

Если задаём цвет. Понадобится только код цвета и атрибут bgcolor:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #F8F8F8;">

Здесь мы «залили» нашу таблицу, которая и есть письмо, серым цветом #F8F8F8.

<td style="background-color: #F8F8F8;">

А здесь применили цвет к конкретной ячейке таблицы.

Кроме HTML-атрибута bgcolor для этих же целей можно использовать свойство CSS background-color или сокращенное свойство CSS background. В качестве значений этим свойствам можно задавать 3-буквенный или 6-буквенный шестнадцатеричный код цвета (HEX) или код цвета в формате RGB.

Если используем картинку. Градиенты, паттерны и фоновые изображения нужно выгрузить и скопировать ссылку на них, либо положить в ту же папку, где лежит код. Их нужно сохранять в формате, подходящем для web. Например, мы хотим использовать картинку background,png — тогда код будет выглядеть так:

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ style=”max-width: 660px;”>

<tr><td height=”400″ align=”center” valign=”top” style=background-image: url (background.png);background-position: top center;background-repeat: no-repeat; background-size: cover; bgcolor=”#F8F8F8”></td></tr></table>

Здесь мы уже устанавливаем высоту для ячейки таблицы, центрируем изображение, выбираем его «позицию» (background-position), условия повторения (background-repeat) и размер изображения (background-size). Все эти атрибуты помогают сохранить нормальное отображение фона при масштабировании. Также добавляем фоновый цвет, который будет лежать «под» картинкой и отобразится, если картинка не прогрузится.

Нюансы использования фонов в письмах

Адаптивность и размеры

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

Так, стандартная ширина контейнера письма — от 600 до 750 px. Если вы используете изображение как подложку под сам контент письма, проследите, чтобы оно было соответствующего размера. Также помните про Retina — устройства с высокой плотностью пикселей. Если область отображения условно 600×300 px, изображение лучше подготовить примерно в 1200×600 px, а затем отображать его в размере 600×300. Но следите за весом картинки — если она будет весить несколько Мбайт, это увеличит время загрузки письма у пользователя.

Кроме того, важно запомнить, что в процессе вёрстки и тестирования вы всё равно не сможете предусмотреть все возможные варианты отображения, поэтому следуйте принципу «чтобы работало». Фон — это декоративный слой; теряя фон, мы не должны терять смыслы письма.  

Тёмная тема

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

• где-то меняют только background-color;
• где-то меняют и цвет текста;
• где-то пытаются вычислить контраст и перекрасить элементы;
• где-то позволяют автору письма управлять dark mode через CSS;
• где-то часть цветов вообще оставляют как есть.

С одной стороны, решение очевидно: используем не цвет фона, а фоновую картинку — ее ведь не перекрасят! Но не всё так просто. Представьте, что у вас темная картинка с белым шрифтом. В dark mode она остается темной, но вот незадача — цвет текста изменился. И письмо становится нечитаемым. 

Здесь мы не будем слишком на этом фокусироваться — о работе с тёмной темой, подготовке макетов под нее и даже о способах обойти инверсию мы рассказывали в отдельном гайде. Тут просто дадим ключевой совет: тестируйте! Выберите ключевые цвета и посмотрите, как они будут меняться в dark mode. Так вы сможете по-крайней мере контролировать читаемость письма в разных форматах.

Отображение в Outlook

Outlook — это даже не один, а несколько почтовых клиентов, поведение которых отличается как от других почтовиков, так и между собой. Основное отличие — большинство клиентов Outlook плохо воспринимают CSS, а HTML интерпретируют по-своему. Поэтому для Outlook нужно отдельно указать наличие фона на понятном ему языке — VML (Vector Markup Language). Для этого после тега <td>, в котором мы прописали наличие фона и / или фонового изображения, нужно добавить условный комментарий формата:

<!--[if gte mso 9]>

<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">

<v:fill type="frame" color="#F8F8F8/>

</v:background>

<![endif]-->

А в конце таблицы «закрыть» его:

<!—[if gte mso 9]>

</v:textbox>

</v:rect>

<![endif]—>

</td></tr>

</table>

Готово — вы восхитительны, а Outlook вас теперь понимает.