Предисловие

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

Заказ на покупку товаров;
Заявка на оказание услуги;
Запрос обратной связи;
Справочная консультация;
Регистрация в личном кабинете;
Изменение пароля;
и т.д.

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

В чём сложность?

Хоть письма и создаются (верстаются) HTML-кодом, как и сайты, но процесс этот намного более сложный и трудоёмкий. Вёрстка сайта должна обеспечить его «ровный» внешний вид исключительно для браузеров, специфика работы которых плюс-минус одинаковая. Но для прочтения электронной почты могут использоваться не только браузеры, но и различные мобильные приложения и почтовые клиенты (программы на компьютерах). И разнообразие всех этих инструментов накладывает ряд обязательств и ограничений на вёрстку писем. Один перечень почтовых клиентов чего стоит:

MS Outlook 2010/2013/2016/2019;
Apple Mail;
Spark;
Mozilla Thunderbird;
Airmail;
и т.д.

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

Чтобы обеспечивать работу вёрстки писем в таком количество сервисов необходимо учитывать много аспектов:

Большинство почтовых клиентов поддерживают далеко не все современные стилевые свойства (CSS);
Не всегда поддерживаются «новые» HTML-теги, приходится использовать устаревшие;
Не все почтовые клиенты поддерживают даже такую простую вещь, как изображения;
Почтовые клиенты используют разные движки для обработки текстов, поэтому необходимо использовать специальные символы;

Например, вместо простой записи нужно использовать &laquо;

Специфические шрифты вообще нет возможности подключить, приходится использовать только те, которые предустановлены в операционных системах;
Многие провайдеры из соображений производительности обрабатывают только письма ограниченного размера (~100 Кб);
Неверное использование фоновых изображений может привести к попаданию письма в СПАМ;
Недопустима запись цветов в сокращённой форме.

Вместо #fff нужно использовать #ffffff

И, поверьте, это далеко не полный список нюансов!

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

Тестирование

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

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

Главные сервисы, в которых мы рекомендуем проверять вёрстку писем:

веб-интерфейс Яндекс;
веб-интерфейс Gmail;
веб-интерфейс Mail.ru;
программа Outlook (Windows);
приложение Mail (iOS);
приложение Я.Почта (iOS и Android);
приложение Gmail (iOS и Android);

Что насчёт адаптивности?

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

Медиа-запросы

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

Пример адаптивной вёрстки письма — Пример адаптивной вёрстки

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

Резиновая вёрстка

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

Такой подход весьма специфичен и мало применим, т.к. ширина экрана может очень разниться (от 320- до 2000+ px). И блоки, растянувшись в несколько раз по ширине, непременно потеряют целостность своего внешнего вида.

Контейнерная вёрстка

Для адаптивного решения электронного письма больше подходит другой подход — контейнерная вёрстка.

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

Вывод

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

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

Надеемся, что статья была для вас полезной и полученная информация поможет вам в будущем. А ещё мы будем рады помочь вам в вопросах SEO-продвижения, рекламы в интернете, разработки сайтов и запуска продаж на маркетплейсах. Оставляйте заявку ниже:

Поделиться статьёй: